Many eCommerce stores begin as a single store selling particular products or services. Over a period time, when the business expands, they may have more than one product line. They may also expand to other lucrative geographies.

In such cases, there arises a need for multiple websites for the company. Instead of having multiple websites, vendors can have multiple stores with same/different domains using the multi-store feature of Magento. Magento allows the merchant to create multiple stores and store views.

Below is the global website store methodology as defined in “Learning Magento 2 Administration” by Bret Williams & Cyndi Williams.

Global – Global refers to any configuration or setting that affects the entire Magento installation. Some settings such as security, product SKUs, and logging apply to all stores.

Website – Website is akin to a business entity as many of the settings made at this level pertain to payment gateways, shipping, taxes, and so on.

Store – Store is the level where you assign a particular product catalog. It is at this level that we begin differentiating stores by the products offered.

Store View – Store Views are mostly used to handle different languages on your website. You will typically have one Store View per language.

STEP 1: To create a new website

Login to Magento Backend

1. Click Store > Settings > All Stores.
2. On the Stores page, click Create Website.
   • Name: Enter your website name.
   • Code: Enter a unique code for the website.
   • Sort Order: It is an optional field and is set to maximum value ‘0’ by default.
3. Then Save Web Site.

STEP 2: To create a new store

1. Click Store > Settings > All Stores.
2. On the Stores page, click Create Store.
   1. Choose the Website of your choice.
   2. Name the Store.
   3. Choose the Root Category that needs to be displayed within that store.

      To add a new root category follow the steps below.

      1. Go to Product > Categories.
      2. Click Add Root Category in the left column of the page.
      3. Enter the Category Name, enable the category and Save the changes.
3. Click Save Store.

STEP 3: To create a new store view

1. Click Store > Settings > All Stores.
2. On the Stores page, click Create Store View.
   1. Choose the Store of your choice.
   2. Name the Store View.
   3. Set the status Enabled.
3. Status is an optional field and is set to maximum value ‘0’ by default.
4. Click Save Store View.

STEP 4: To check for mode and access permissions

Note: This step is for the beginners in Magento 2. If you have not changed to any mode previously then you are set to be in the default mode. To configure multi store view, you have to change to the developer mode by following these steps.

1. Give permissions to the below directories.

chmod -R a+wX var

chmod -R a+wX app/etc

chmod -R a+wX pub

2. The command to change the mode is,

bin/magento deploy:mode:set developer

Another way to enable developer mode is,

1. Goto app/etc/ and open env.php
2. and change current application mode by MAGE_MODE’ => ‘default’ to MAGE_MODE’ => ‘developer’.

STEP 5: To create a new website

1. Copy the index.php file and .htaccess file from the Magento root directory to the directory created for the new website within the magento root directory.
2. Replace the code of index.php into the following code snippet.
   • Before:

• After:

Base URL : http://localhost/magento/newstore/

Base Link URL : http://localhost/magento/newstore/

Base URL for Static View Files(default value) : http://localhost/magento/pub/static/

Base URL for User Media Files(default value) :   http://localhost/magento/pub/media/

Fill the same in the fields under Base URLs (Secure) if needed for ‘https’ access.

To integrate a language pack to differentiate the store views with various languages:

Step 1: Goto Find Partners & Extensions in the Admin Panel.

Step 2: Click Visit Magento Marketplace in the right bottom of the page.

Step 3: Search for the extension you need.

Step 4: Download the extension and unzip and extract the content into the specified magento root directory.

Step 5: Refer the documentation and steps given by the extension team and complete the process.

Example extension : Magenerds – de_de for german language pack.

Refer http://doc.magenerds.com/german-language-pack/ for the above extension integration.

Hope the blog was useful. Let us know your feedbacks and comments.

Upgrading your Magento eCommerce Store to Magento 2 can be quite a challenging task. With each website implementing an array of Plugins, ensuring an error-free shopping experience after the upgrade, is of paramount importance. To have a structured testing process, the upgrade testing can be split across three environments namely QA, Staging, and Live servers.

Key Points For Testing after Magento 2 Upgrade

Prepare a comprehensive test checklist which should cover the overall features of the website along with:

• Front-end functionalities.
• Business scenarios specific to the site.
• Magento admin.
• Third-party Integrations.
• Verification of Automated regression scripts and updates.

Checklist for Testing after Magento 2 Upgrade

Front-end

Make the test scenarios up to date with the site’s latest functionality.

Do Sanity testing of the complete website to identify broken links and functionalities.

After upgrading to Magento 2, check the end user’s workflows to ensure that the user experience isn’t affected:

1. Access the site.
2. Add Product to the bag.
3. Check shopping bag.
4. Edit the item.
5. Update the quantity.
6. Update shopping bag.
7. Go to checkout.
8. Test the different checkout flows.
   1. Guest Checkout.
   2. Checkout as an already existing, Registered user.
   3. Checkout as a New user.
   4. Place an order with different payment methods available on the site. (Credit card, PayPal, Gift card etc.,)
9. Check the tax calculation.
10. Check the shipping methods and shipping amount.
11. After placing the order, verify if the invoice has been created.
12. Next step of invoicing is shipments.
13. After shipment, check the RMA process. Return/exchanges credit memo should be created.
14. Order cancellation scenario – When the product is out of stock or due to any unavoidable reasons. Another scenario is the user calling the customer support and cancelling the order.
15. Check the transaction mails for  the below actions:
    1. User registration.
    2. Forgot password.
    3. Order confirmation.
    4. Shipment creation.
    5. In case of RMA return/exchange, a credit memo will be created.
    6. In case of cancellation scenarios, a credit memo will be created and the amount will be refunded.
    7. Wishlist
16. Check the CMS pages/blocks.
17. Email Subscription.
18. Contact us.
19. Compatibility Testing. (Device/Browser)
20. Regression Testing.

Defects are sometimes tricky and invisible, don't let the customers catch them.A dedicated testing team can handle the post-upgrade defects better.

Get In Touch

Business scenarios specific to site

1. Check the customization features specific to the site. For example, the sale promotion strategy differs from one site to other. It should work seamlessly exactly like it was with Magento 1.
2. Sale promotion rules should be defined.
3. URL of Catalog, product pages should match M1 site.
4. Verify SEO metadata, canonical tags, and description by checking view page source.

Admin

1. Admin URL should be obfuscated. This is as per the Magento EQP standard.
2. Check the import processes.
   1. Product
   2. Inventory
   3. Tax
3. Reports

Third party integrations

Check the third party integrations which handle the functions like

• ERP
• Product feeds
• Tracking Pixels
• Custom modules

Verification of Automated Regression scripts and updates

Upgrade will impact automation scripts, so run the scripts and based on the results, update the scripts. Re-run the scripts and share the results with stakeholders.

In few instances, we have noted that having a dedicated testing team for the upgrade helps to find out defects that were invisible to the developers. A Magento Upgrade should upgrade the overall experience of the customer.

Hope you found the checklist useful. Eager to know your comments and feedbacks.

What is Shared Catalog?

In B2B eCommerce, there are cases when a particular company or a group of users might be entitled to receive a discount and other might not. In these cases, it would be impossible for the administrator to individually fix the price of a particular product to a particular user/company. In order to overcome these hassles, Magento 2 has come up with Shared Catalog.

Shared Catalog allows the administrator to set special rules or custom pricing for different companies/group of users. In addition, it allows admin to configure the visibility of categories and products.

Types of Shared Catalog

• Public
• Custom

A Public shared catalog is the default shared catalog that will be displayed, at the storefront, to guest or Not-logged-in customers. Furthermore, this catalog is the one that will be visible to the guest and logged-in customers who aren’t associated with a company.  It’s automatically created during the installation of B2B commerce. However, only one public shared catalog can exist at a time.

A Custom shared catalog is visible only to logged-in associates of the assigned company account(s). Magento allows you to create n number of custom shared catalogs, per the requirement. The admin can assign a custom shared catalog to specific companies.

Step 1: Create a  Shared Catalog

To create a shared catalog:

1. Enable the Shared_Catalog Module.
2. Go to admin panel, select the Shared Catalog menu.
3. Go to Catalog → Shared Catalogs.
   
4. Click on Add Shared Catalog.
   
5. Enter the name of the catalog.
6. Choose the type as “Custom”.
7. Next, click on Save.
   

Step 2: Configure Product to Shared Catalog

To configure the product(s) for the particular shared catalog:

1. Goto Catalog → Shared Catalogs
2. In Shared Catalogs list, Select the option which you want to perform.
3. Under the Catalog Name (e.g, DCKAP_Catalog), Select the option “Set Pricing and Structure”.
   
4. Then click on Configure.
   
5. Select the Product(s) or select All and click Next.
   
6. Here you can customize the price. Then click on Generate Catalog.
   
7. Finally click Save.
   
8. Now the shared catalog with configured products
   

Step 3: Assign the catalog to Company/User

To assign the shared catalog to a particular company/user:

1. Go to the list of customers and select the particular user/company whom you wish to edit.
   
2. Click on the Group and select anyone from the drop-down list.
   

Thus the Shared catalog has been created and assigned to a particular company/user successfully.

Two Powerful Platforms

Magento is the World’s #1 eCommerce platform and the leading one in the Internet Retailer Top 1000, B2B 300, Europe 500 lists. With this stature, Magento is the linchpin of more than 250,000 merchants across the planet handling over $100 billion in gross merchandise volume.
In addition, 41 out of top 300 B2B commerce companies are powered by Magento Commerce Platform. Moreover, Magento was named as a Leader by Gartner Inc. in the 2017 Magic Quadrant for Digital Commerce. Thanks to the agility, scalability, and extreme flexibility as customer demands and marketplace are changing rapidly.

Salesforce is the #1, fully integrated, CRM platform with extensive functionality for Sales, Customer Service, Digital Marketing, B2B marketing, Financial Services, Analytics, Commerce, Community, Productivity, and IoT. Salesforce is the only Cloud Computing company to achieve a $10 billion revenue run rate as of Aug 2017. That said, Salesforce CRM is the one-stop solution for every commerce needs and it allows you to sell, service, market, and build apps – all from a single platform.

Magento 2 – Salesforce Integration

It’s always been hectic and laborious for eCommerce companies to integrate their CRM (e.g., Salesforce) with their storefront (e.g., Magento 2) in order to access shipping addresses, email ids, phone numbers, history of purchases of a customer, and so on. This article explains a solution to integrate Salesforce with Magento 2 platform to retrieve desired information.

REST, one of the industry standard API feature of Magento 2, is used to integrate with Salesforce for bidirectional information transfer. REST API services allow syncing Customer and Order data into Salesforce. Similarly, Salesforce uses the REST API to send back updates on customer address, product details, and similar data.

Data Services – Salesforce

There are two ways of integrating a new customer into Salesforce: either as Leads or as Contacts. It’s impossible to integrate a new customer as both a lead and a contact.

Note: Before you follow these steps, make sure you have an OAuth Token to connect to Salesforce. Furthermore, steps described here are just the basics and furnished to guide the developer community.

Creating a Lead

To create a new customer under Leads, use below service and example JSON data.

REST URL: Instance_url/services/data/version/sobjects/Lead/

Example Json data:
{“City”: “fremont”, “FirstName”: “David”, “LastName”: “Church”, “Company”: “Dckap Technologies”, “Phone”: “1234567890”, “Country”: “US”, “Email”: “test@dckap.com”}

Mapping fields

Creating a Contact

To create a new customer under Contacts, use the below service and example JSON data.

REST URL: Instance_url/services/data/version/sobjects/Contact/

Example JSON data:

{“City”: “fremont”, “FirstName”: “David”, “AccountName”: “Dckap Technologies” “LastName”: “Church”, “Company”: “Dckap Technologies”, “Phone”: “1234567890”, “Country”: “US”, “Email”: “test@dckap.com”}

Mapping fields

Creating Opportunities

When a new customer is registered in Magento, it will also be created in salesforce under Opportunities.

Service URL: Instance_url/services/data/version/sobjects/Opportunity/

Example JSON data:

{“Name”: “Dckap Technologies”, “Account”: “Dckap Technologies”}

Mapping fields

Hope the article was useful. Please let us know if you have any queries or comments.

Prophet 21 Worldwide User Group Webinar Wrap-Up

This past December, I gave a webinar to the Epicor Prophet 21 Worldwide User Group in which we discussed how manufacturers and distributors can drive their online revenue with Magento & Epicor’s Prophet 21 ERP system. Through the webinar, I was able to interact with several P21 users, and learn first-hand about their daily needs and insights as they relate to creating value with such an integration. Additionally, we had a great Q & A session, and below I’ll highlight a few of the popular questions that were asked.

Magento P21 Integration FAQ’s

Q: Can Magento calculate shipping by using both weight and product dimensions or does it calculate solely on weight?

A: While shipping based on product dimensions is not native functionality within Magento, there are several extensions-/SaaS-based products we’ve successfully implemented in the past to accomplish such a need.

Q: Is pricing for the Magento and P21 integration based on entire sales, or just online sales?

A: The connector provided by DCKAP is priced based on the API calls. For instance, if you would want to bring in the orders placed on P21 to Magento (rather than just Magento to P21), then there will pricing for those API calls as well. In this case, it might look like the pricing is based on overall sales, rather than just the online sales. Hence, pricing is flexible based on the client needs.

Q: Why is this solution better than the B2B Seller?

A: Simply, Magento is the most powerful and scalable e-commerce platform available, and offers flexibility and options that others such as B2B Seller do not. As mentioned above, there is a wide array of extensions and plug-ins to accommodate most any needs available exclusively to Magento users in the Magento Marketplace. By the numbers, Magento transacts over 100 Billion annually in digital commerce sales, and merchants on Magento see an average of 30% faster growth than merchants on competing platforms.

Q: What is the cost of this Magento and P21 integration?

A: There are simply too many factors and requirements that go into the implementation to accurately quote an estimate. However, feel free to get in touch with us and we’d be happy to schedule a meeting and give you a free estimate based on your project requirements.

Q: Do you provide one way or two-way syncing between P21 and Magento?

A: The connector is entirely flexible and you can define the items which you need to sync as either a one or two-way sync.

Ready to Make the Switch?

If you are a manufacturer or distributor currently on B2B Seller, or with no e-commerce store, who wants a more powerful and agile option to drive your online sales, than our Magento P21 integration is likely just what you need.

Download our presentation deck by clicking the image below

Have you ever wondered why not many eCommerce websites have an Amazon-like, one-click checkout process? It’s because Amazon has had held the patent for the process for almost ten years now. The only way, for eCommerce companies to stay competitive, was to license the method from Amazon. Nevertheless, things have changed now because the patent has expired and every eCommerce platform is striving hard to facilitate their customers. That said, Magento has made this feature as a standard in its latest release – Magento Version 2.2.2.

What is Instant Purchase?

Magento has defined the feature as Instant Purchase and this allows the customer to place the order in seconds without going through full checkout process making things much easier and faster. The instance purchase option used previously stored information such as shipping address, payment method, and delivery address. The stored information is retrieved in the event of an instant purchase.  This feature provides a seamless shopping experience.

Instance Purchase takes the form of a button on every product page and when the customers click on it, the system places their order using the default shipping address, billing address and stored payment method. Upon placing the order, the user would receive a pop-up notification from the notification area.

How does it work?

The new Instant Purchase feature provides returning customers with a faster checkout experience by using previously-stored payment credentials and shipping information to skip checkout steps. When a customer selects the “Instant Purchase” button on a product detail page, they are immediately taken to a confirmation page where they can place the order. There’s no need to enter their address, payment information, or shipping preference and everything is taken care by Magento itself.

Steps to activate Instant Purchase

1. Go to the Magento backend.
2. Choose stores → configuration → sales → sales.
3. Select Instant Purchase.
4. Set “yes” in the enabled drop-down list.
5. Finally, click on Save config.

Steps at the customer’s side

1. The customer should create an account with default shipping and billing address.
2. During the very first purchase, customers would want to save their credit card information by clicking the “Save for later use” checkbox.
3. The payment method saved can be viewed, or deleted, in the Stored payment methods section.
4. The Instant Purchase button will be enabled in product detail page.
5. Clicking on the Instant Purchase button will open up a pop of menu with already stored shipping and billing address, payment method, and shipping method. Clicking on Ok should place the order easily.
6. Hence the order is placed right from the product detail page itself.

Hope the above process was useful.  

A picture is worth a thousand words. Mind Maps are just that.It offers an alternative method to traditional testing for capturing thoughts, ideas, and information. Originated in 1970 by Tony Buzan, Mind Maps® are now used by millions of people around the world. Mind mapping is used in education, government and business as a creative method that is useful in training, brainstorming, organizing and problem-solving

Today, Online Stores is such an important part of any business. eCommerce has a complex set of rules – checkout, payment, shipping, order management, customer accounts, promotion rules, and more. It is not a wise option to just rely on traditional testing techniques for delivering a flawless website with a great user experience. When Mind Map is applied in eCommerce testing it can lead to clearer thinking and improving the testing process.

This blog examines mind mapping techniques in software testing with particular emphasis on testing payment process in Magento 2.

What is a Mind Map?

A mind map is a graphical illustration representing the ideas, concept, or process flow. Typically, mind maps consist of images, words, mind shapes, symbols, and many other forms brought into a single concept that’s scalable, editable, changeable and approachable.

How are Mind Maps different from traditional test cases?

The conventional testing approach starts with understanding the requirements, creating scenarios across various levels, then creating a myriad of test cases based on various types of testing.

As the scope of the article confines to Payment Process in Magento 2, the conventional testing method might end up having anywhere from 80 to 120 test cases. On the other hand, using Mind Maps simplify the scenario by giving the testers an overview of a large subject/area, enable them to plan routes/make choices and let them know where they are going and where they have been.

Furthermore, mind maps are easy to read and thus anyone with little technical knowledge can understand the workflow easily. Similarly, though it might take longer in the beginning, once created mind maps can be scaled up or down for different agile projects.

Payment Process in Magento 2 – Mind Map

With the help of mind map, we can generate, visualize, structure, and classify ideas that in turn can help in better problem-solving, decision-making, etc. Mind mapping is the combination of art and science, logic, and emotion, words and images, boring and fun.

When it comes to Magento 2, we have four different types of payment options out of the box:

• Credit Card
• PayPal
• Gift Card
• Check/Money Order

With this payment options in mind, we have come up with a tailor-made mind map for Payment Scenarios. This way it’s more comfortable and less-confusing to understand the conditional flow of the selected payment option.

Magento 2 Payment Scenarios Mind Map

A mind map, like the one shown above, will empower testers to build good test strategies with test coverage in lesser time compared to the traditional method of writing test cases. Not only testers but every stakeholder in the team can easily visualize and therefore understand the various permutations and combinations available in Magento 2 payment.

Hope this blog was useful. Please feel free to write to us if you have any queries or comments.

What’s API?

If you’re a developer or someone who have been tasting the basics of software development, you might have indeed come across the term API – Application programming interface. Ideally, API is defined as the software mediator between two software applications to communicate with each other. API includes a different set of rules, protocols, and tools that allow every software application (eg: a client) to get or write information to the information provider (eg: web server).

Why SOAP for eCommerce?

When it comes to e-Commerce websites, APIs play the big role of reading and writing information from and to the server. Be it a customer’s name or his already saved credit card details, every piece of information shown to the end user has to either read from or written to the web server. This is taken care by REST and SOAP APIs. REST and SOAP are models for web services, however, one that’s most recommend for eCommerce websites. Though REST is fast, efficient and simple, SOAP is standardized, secure and apt for payments. 

The long explanations end right here and what comes next are downright codes that will help you understand the procedure of creating a custom SOAP API in Magento 2.

The complete code is available on GitHub: Creating a custom SOAP API.

Creating a Custom Module for SOAP API

Step 1:

Create a custom module based on the Magento 2 structure in the folder app/code

Magento 2 root directory app/code/Dckap/Customapi

Step 2:

Create a registration.php file in the below path to register a module in your Magento 2.

Magento 2 root directory/app/code/Dckap/Customapi/registration.php

Step 3:

Create a module.xml file in the below path to define your Magento 2 extension

Magento 2 root directory/app/code/Dckap/Customapi/etc/module.xml

API Configuration:

Two API configurations are needed to create an API module: webapi.xml and di.xml

Step 4:

Create a webapi.xml file in the below path to configure access rights and API interface that specific method to use.

Magento 2 root directory/app/code/Dckap/Customapi/etc/webapi.xml

*/V1/customapi/name/* calls name method in CustomapiInterface
*/V1/customapi/name/:name* calls  name method in CustomapiInterface, receives parameter(name), and transfers it into function.

API is called through the GET method, but you can change it to POST, DELETE or some other methods later if needed.

Step 5:

Create a di.xml file in the below path. In di.xml, we define the particular model to which the interface will call to.

Magento 2 root directory/app/code/Dckap/Customapi/etc/di.xml

Step 6:

Create an interface in the below path.

Magento 2 root directory/app/code/Dckap/Customapi/Api/CustomapiInterface.php

Step 7:

Create a model in the below path

Magento 2 root directory/app/code/Dckap/Customapi/Model/Customapi.php

Step 8:

Create an acl.xml to add your module to the Magento resources. Also, add the code to the Magento role.

Magento 2 root directory/app/code/Dckap/Customapi/etc/acl.xml

Step 9:

Create a test file to communicate a new api call.

Output

stdClass Object

(

   [result] => Hello, Sathishraj

)

Communicating a new API call for an anonymous user

Output:

stdClass Object

(

   [result] => Hello, DCKAP

)

Hope this blog helped you understand the procedure of creating a Custom SOAP API in Magento 2. This is just a basic procedure and usage example, however, an ocean of applications and methods can be built with the aforementioned example as a foundation.

Every eCommerce Checkout Page is unique and different because they address a variety of requirements. Not all store owners/customers would need the same set of fields that the Magento platform offers. Here’s where Custom fields come into play. Creating custom fields enables businesses to add fields according to their business model as well as customers’ expectations. This article is about creating custom fields using the UI components in Magento 2, a new feature that allows store owners to add custom fields, per need, to the Checkout Page.

What are UI components in Magento 2?

UI components in Magento 2 are a new approach that makes building user-interface components less cumbersome. For developers, this approach allows reusing components in different locations. Also, they have few advantages over the old Magento 1’s user interface. The UI component approach:

• has a simplified layout, thus handling XML files is easy.
• pre-renders data in JSON format, thus more bound with Magento back-end.
• uses AJAX in the case of updates.

That said, there are two types of basic components: Listing and Form. The scope of this article confines to creating a custom field on the checkout page using the Form component in Magento 2.

The coding starts here…

Let’s imagine a scenario where a store owner wants to provide multiple shipping options to the customer – say free shipping to the customer’s address and also store or warehouse pick up. In the case of store/warehouse pickup, we’d want the customer to pick a preferred warehouse location, Name and Contact number of the person who’s going to take the delivery, and preferred delivery time. Thus, I would need three different custom options (a select option, input fields, and a date component) to save in quote and sales_order table as shipping method options.

You can download the entire module from the below GitHub repository: 

https://github.com/dckapblog/Custom-field-in-checkout-page

Create a new module in the Magento and follow the steps populated below. You could go through the following link to know more about creating a new module: http://devdocs.magento.com/videos/fundamentals/create-a-new-module/

For instance, I have created a module with Dckap as Vendor name and CustomFields as the module name.

Step 1

To create a custom option in the corresponding table, create InstallSchema.php in the path app/code/Dckap/CustomFields/Setup.

Input fields: (input_custom_shipping_field, date_custom_shipping_field, select_custom_shipping_field) of data type text.

Step 2

Among several input fields available in the UI Component system, I have chosen Select, Text, and Date as custom fields. To choose your own input fields, you can refer the following Magento blog for a detailed know-how on UI components:

https://devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html

To populate the chosen custom fields on the checkout page, create a plugin for the process method, Magento\Checkout\Block\Checkout\LayoutProcessor in the path app/code/Dckap/CustomFields/Plugin/Checkout/LayoutProcessorPlugin.php

where,

elementTmpl → the path to the .html template for the field type used.

component → the path to the .js component.

option → used to display the set of values for select option

template → the path to the .html field template under which the particular type of field is bound.

Step 3

Declare the plugin Dckap\CustomFields\Plugin\Checkout\LayoutProcessorPlugin for the class Magento\Checkout\Block\Checkout\LayoutProcessor in your module’s di.xml.

Step 4

To include the custom fields in shippingMethodItemTemplate,  declare a region custom-shipping-method-fields under the section shippingAddress in the file path app/code/Dckap/CustomFields/view/frontend/layout/checkout_index_index.xml

Step 5

Override the shipping-method-item.html in the path app/code/Dckap/CustomFields/view/frontend/web/template/shipping-address/

Here, I’m going to display the custom fields for the particular shipping method (say, freeshipping). To display other custom fields, use the region custom-shipping-method-fields that is declared as displayArea in checkout_index_index.xml file.

Step 6

To validate the custom fields and display the custom-shipping-method-fields, using selected shipping method, override the shipping js component that is used for rendering the shipping method template in the path app/code/Dckap/CustomFields/view/frontend/web/js/view/shipping.js

Where,

customShippingMethodFields → the custom scope declared in LayoutProcessor while constructing the custom UI component fields.

To validate the custom fields, use the function validateCustomFieldsShipping from setShippingInformation so that they can be validated along with default shipping fields. The custom-shipping-method-fields can be displayed using the selectedMethod observable.

Step 7

Override the above shipping js component as a mixin in the file path app/code/Dckap/CustomFields/view/frontend/requirejs-config.js

Step 8

Should you have followed closely and mimicked till Step 7, custom fields should be visible under the required shipping method. Once the fields are displayed, they can be saved in the quote table using a concept of extension attribute. Since we are going to apply the attributes in the shipping information, an extension attributes for \Magento\Checkout\Api\Data\ShippingInformationInterface can be created in the file path app/code/Dckap/CustomFields/etc/extension_attributes.xml.

Step 9

To include the extension attributes in the shipping information, override the Magento_Checkout/js/model/shipping-save-processor/default Component in requirejs-config.js

Step 10

The custom option fields can be set in extension_attributes in the address information payload in the file app/code/Dckap/CustomFields/view/frontend/web/js/shipping-save-processor.js

This payload is set under the shipping address information, while the next step of the checkout process is continued.

Step 11

On clicking the next button of shipping step, the custom shipping method fields will be validated along with the other default shipping information in the shipping js component.
The extended attributes are created for \Magento\Checkout\Api\Data\ShippingInformationInterface for which the implementation class used is Magento\Checkout\Model\ShippingInformationManagement. The Extension attributes are available in address information payload and can be saved in quote table using a plugin before the method saveAddressInformation of the implementation class. Create a plugin in app/code/Dckap/CustomFields/Plugin/Quote/SaveToQuote.php

Step 12

Declare the plugin Dckap\CustomFields\Plugin\Quote\SaveToQuote  for the class Magento\Checkout\Model\ShippingInformationManagement in di.xml

Step 13

Once the extension attribute is available in quote table, we can save the Custom fields in sales_order table. The observer is declared for sales_model_service_quote_submit_before event so that the custom fields are saved while placing an order.
Declare the observer Dckap\CustomFields\Observer\SaveCustomFieldsInOrder in app/code/Dckap/CustomFields/etc/events.xml to save the extension attributes.

Step 14

Create an observer SaveCustomFieldsInOrder.php in the path app/code/Dckap/CustomFields/Observer/ and save the extension attribute values in sales_order table.

Once the order is placed, the custom shipping method fields will be saved in the sales order table. The values can be shown in the order details using these custom fields values.

Hope the article turned out to be useful in creating custom fields in the Checkout page using UI components in Magento 2. Please feel free to drop us a line, should you have any queries or feedback. We’re looking forward to addressing more topics in the future.

When Magento Open Source 2.2.4 was released on May 2, 2018, it seemed that nearly every agency, developer, and Magento store had something to say about the changes that had been unveiled. This shouldn’t be surprising: Magento is big news. According to some estimates, there are nearly a quarter million Magento stores in existence, and the online marketplace is always getting bigger.

Almost two months have passed since the inception of Magento 2.2.4. And yes, we know that constitutes an eternity in the fast-moving world of online commerce. However, we still believe that we have some valuable and unique insights to share with you in this blog post. Our dedicated team of developers has worked with and tested the newest Magento releases extensively, and we’ve compiled a few of our most useful insights below.

What’s new in Magento 2.2.4?

Like most updates that Magento introduces, version 2.2.4 strives to make the platform a more profitable place for the countless stores selling through Magento. The main themes behind this release: increasing the conversion rates and decreasing cart abandonment. These are universal problems for most of the e-commerce businesses, which is why Magento is working to put new tools into the hands of store owners around the world.  

Broadly speaking, there were three main groups of changes implemented in Magento 2.2.4:

• New payment-related extensions
• Critical platform enhancements
• Functional bug fixes

Let’s take a quick look at the specifics of each of these categories in order to better understand how Magento 2.2.4 will impact your e-commerce store.

New payment-related extensions

One of the biggest causes of abandoned carts and lost conversions in the e-commerce world? Asking visitors to login in order to make a purchase. In fact, even requiring guests to provide excessive amounts of repeated information can drive potential customers away in this fast-paced, data security-conscious age. That’s why installing one or more of these newly integrated payment-related extensions might be a wise investment for your business to make.

Amazon Pay

Alexa, Fire TV, Amazon Prime, Kindle, and Audible…the list of universally recognized Amazon products and services goes on and on. This is why it’s so exciting that Amazon will finally be part of the payment process for e-commerce stores. Trust is everything when it comes to asking customers for their payment information — so why not rely upon the trust already established by one of the most recognizable names in the e-commerce industry?

Still not convinced? Remember that convenience is almost as important as trust, and Amazon Pay is one of the fastest, most customer-oriented payment integrations in the world. Moreover, Magento allows users to log in through their Amazon accounts, making it easy for the eCommerce businesses to retrieve necessary pieces of personal information such as delivery address, billing address, phone number, etc.

Configuring Amazon Pay in Magento Backend

You can configure Amazon Pay payment option in Configuration → Sales → Payment Methods.

Vertex

The only thing less fun than paying taxes? Calculating taxes. This is especially true for small and medium-sized businesses operating globally. In fact, the long and complex process of figuring out location-specific tax obligations for customers around the globe used to be a major hurdle for any business looking to expand internationally.

Vertex SMB was created specifically with those kinds of problems in mind: a fully automated, cloud-based solution capable of calculating instant, accurate sales tax charges for customers anywhere on planet earth. Exceptions management, returns management, and tax reports are addition features boasted by this nifty service. And now that Vertex SMB is fully integrated with Magento, e-commerce store owners have a powerful solution to one of the most pressing issues at their fingertips.

Configuring Vertex in Magento Backend

You can configure Vertex tax settings in Configuration → Sales → Tax.

Klarna Payments

Klarna may be new to Magento, but it was actually founded in 2005 in Stockholm, Sweden. As of now, Klarna helps over 70,000 online merchants process payments in a diverse variety of fast and convenient ways. Like Amazon Pay, Klarna Smooth Payments benefit from a stellar reputation. Klarna is active in 14 global markets, serves up to 60 million users, and accounts for 650K transactions per day. Moreover, the system is renowned for its exceptional commitment to customer service.  Klarna is also unique because it supports three distinct payment plans:

• Pay Now – Customers can pay in full using Direct Bank Transfer/Direct Debit. This can be done with all major cards and payment methods.
• Pay Later – Customers can buy now and pay later. Klarna allows Customers to pay for goods either 14 or 30 days after delivery.
• Slice It – Customers can spread the cost of their purchases over time at a low-interest rate. Klarna’s credit application process takes less than thirty seconds to complete, which helps make consumer products available to a broader market.

Configuring Klarna in Magento Backend

You can configure Klarna payment option in Configuration → Sales → Payment Methods.

Critical Platform Enhancements

In addition to the three aforementioned payment-related extensions, a few Magento enhancements have been announced that will add significant value to store owners.

Dotmailer Enhancements

Email collection (and subsequent email marketing) are crucial to the long-term success of just about every e-commerce store. After all, if you can’t build a consistent audience, you will be constantly spending time, money, and energy seeking new audiences.

Dotmailer offers one of the most powerful suites of email tools available to businesses in 2018. The Dotmailer Magento extension has helped countless organizations grow and thrive — which is why it’s so exciting that Magento 2.2.4 now includes an entirely new set of Dotmailer enhancements. Check out a quick run-down of these enhancements below:

Store owners can now…

• Design their own transactional email template
• Set transactional email at the Store level
• Access New Abandoned Cart report table
• Use advanced methods for syncing subscriber’s sales data
• Validate the deletion of cron job CSV files

Bundle products

Another critical platform enhancement worth taking note of is the release of a bundle product feature. It is now possible to duplicate a bundle product without stripping the original bundle product off its options. This is another big time-saver that will be especially valuable to organizations that sell a high volume, as it makes the flexible Magento platform even more adaptable.

Functional Bug Fixes

Before we conclude this article, we wanted to highlight a few of the specific functional bug fixes that we have identified as being the most noteworthy. However, it is important to note that new bugs are being found and fixed on a regular basis, so if you want the most comprehensive and up-to-date information, we recommend visiting the Magento Open Source 2.2.4 release notes or the Magento Commerce 2.2.4 release notes.

Catalog

• Magento no longer displays unused product attributes with a value of N/A or NO on the storefront.
• Fixed the “unexpected double slashes” issue in getUrl() method.
• You can save emojis in custom product options.
• Third-party category images now have size and type properties.

Cart and checkout

• Magento no longer combines the Custom Checkout and Shipping steps when Magento loads the checkout page.
• The XML_PATH_CUSTOMER_MUST_BE_LOGGED constant has been deprecated.

Dashboard

• The top destinations configuration field is now configurable on a store level.
• The scrollbar on the Admin store switcher is now scrollable on machines running OSX.

Email

• Order confirmation emails from the Admin in multi-store environments are no longer default to the primary store, but instead, are sent from the store that the customer use.

General

• A customer can now successfully log out of a session and then immediately log back in (need not to wait until logout success page).

Import/ Export

• Product images and image labels from CSV files can now be imported.
• Supports importing file names with round brackets.
• The layout update XML field can be used to include custom CSS in CMS pages.

Payment methods

• The multi-shipping checkout flow supports the CyberSource payment method.
• Payment integration error messages are open for customization for Third party developers.

Performance

• Improved product image loading by adding an additional cache of getImageSize().
• Separate cache storage for each cache type.

Reports

• Improved accuracy of The Products in Cart report.

In Conclusion

If this felt like a lot to take in, you’re not alone. (And in fact, June 27th marked the release of Magento 2.2.5, meaning a whole new slew of changes have now hit the platform!) However, the fact that Magento is always changing and evolving is exactly what makes it great. If you are a Magento store owner, you can rest assured knowing that your platform is always improving, and becoming a better, more effective place to sell. If you ever need help keeping up with those changes, of course, we will always be here to help! Contact DCKAP today for more info on how we can be of service!.

In my earlier days as a nerdy developer, I often found myself trying to do my work in the smartest way. That is, I didn’t concentrate too much on predefined guidelines and absolute quality! However, this quirky ideology of mine changed a couple of years back when I started working with Magento 2.

Given the plethora of technical guidelines and resources available from Magento, the new eCommerce platform was initially quite challenging to learn. Magento is more focused on maintaining high-quality work among its developers as well as providing various means of guidance to the community. Once I started following Magento’s guidelines, I realized that it made things more accessible than ever before. I highly recommend utilizing the following principles in order to achieve the best quality coding in Magento.

This is a beginner’s guide to the SOLID principles, which I came across during my quest to follow the guidelines for good programming. Budding programmers and developers can use the SOLID method described in this article to further improve their Magento coding skills.

What are SOLID Principles?

In object-oriented computer programming, the term SOLID is a mnemonic acronym for five design principles that are intended to make software designs more understandable, flexible, and maintainable.

The SOLID Principles are as follows:

• Single Responsibility Principle (SRP)
• Open/Closed Principle (OCP)
• Liskov Substitution Principle (LSP)
• Interface Segregation Principle (ISP)
• Dependency Inversion Principle (DIP)

Why should you practice SOLID Principles?

After learning a thing or two about SOLID and applying the principles to my daily coding work, I found the results to be immensely gratifying. Nowadays, I regularly use these principles to guide my work. Following the SOLID principles allows you to:

• Maintain high coding standards.
• Make code that is scalable and repairable – regardless of the size of change requests.
• Create universally understandable code.

Let’s take an in-depth look at what these principles mean.

Single Responsibility Principle (SRP)

a class should have only a single responsibility

This one is pretty straightforward. A class should only have a single responsibility, and it should not do too many things. A class with multiple responsibilities makes it more complicated to change since it might affect more than one function at once. Meanwhile, a class with just one responsibility can be easily modified. This makes the class much more maintainable.

Examples in Magento 2

\Magento\Framework\Event\Manager – Responsible for dispatching the events.

\Magento\Framework\Data\Form\FormKey\Validator – Responsible for validating the form key.

So, the next time you write a class, make it responsible for only one action in order to make your code robust and manageable.

Open/Closed Principle (OCP)

software entities … should be open for extension, but closed for modification

Assume your client approaches you to write the code for calculating the sum of numbers. You write a class (Add) with a method (Calculate) to calculate the sum and give it to the client, who is delighted with your work. Some time later, the same client approaches you to add the multiplication logic.

Now you edit the same class (Changing Add to Operation) and two methods (Add and Multiply) with the respective logic. However, this is not the right approach because your client may then ask you to add subtraction or division, causing you to modify the source code for each request.

As the principle states, for any modifications, a class should be allowed to extend its behavior but not to change its source code. Instead, it’s better write an interface (Operation Interface) with a calculate method, which the classes (Add or Multiply) can implement. When the client approaches you for another operation like division, you can create a new class by implementing the interface.

Examples in Magento 2

To add any router, implement the \Magento\Framework\App\RouterInterface and add the same to the RouterList(in di.xml). Here, no modification has been made to the existing code even though the router is added.

Liskov Substitution Principle (LSP)

Objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program

As per the object-oriented programming, when Class B extends Class A, Class B can be a substitute for Class A. LSP extends the same fundamental principle, with a significant change – Class B SHOULD be a substitute of Class A.

In the case of extending any Magento-native classes, you should follow the same structure. If you intend to remove any method or modify its parameters, then it will result in the violation of this principle. The violation may cause the application to break or produce unexpected results.

Examples in Magento 2

Assume a preference written for overriding the \Magento\Quote\Model\Quote::addProduct($product, $request, $processMode) method. Creating the class that extends the above, but modifies the addProduct() method by removing the $processMode parameter. This is a complete violation of the principle. So classes which already calls the addProduct() with three parameters will throw an error and cause the application to break.

Interface Segregation Principle (ISP)

Many client-specific interfaces are better than one general-purpose interface

This is another straightforward rule that focuses on splitting the big interfaces into smaller ones. The violation of this principle may force the implementation class to depend on the methods that they don’t use.

Assume there is a standard interface for compiling and rendering. When creating a separate implementation class for the compiler and render, based on SRP, the classes should be intended to use the other methods (in other words, compilers are forced to use rendering methods).

Examples in Magento 2

\Magento\Framework\View\Element\BlockInterface – implemented in all the blocks for rendering HTML content.

\Magento\Framework\DataObject\IdentityInterface – may implement in blocks or models for caching purposes.

Assume that the Magento Core Team has combined both and can have only the BlockInterface. However, doing so forces all blocks to have cache methods that they might not use, which violates the principle.

Dependency Inversion Principle (DIP)

one should “depend upon abstractions, [not] concretions”

DIP focuses on decoupling modules, stating that:

• High-level modules should not depend on low-level modules. Both should depend on abstractions.

When Class A (high-level) calls Class B (low-level), Class A depends on Class B. But as per this principle, Class A should not depend on Class B; it should depend on abstractions(interfaces).

• Abstractions should not depend on details. Details should depend on abstractions.

Interfaces should not depend upon the implementation class, but the implementation should depend upon the respective interface.

Since the code is decoupled to change the entire implementation class, it’s not necessary to make changes in the high-level class. In order to follow the principle, the high-level module also needs to be altered with the low-level class.

Examples in Magento 2

Refer any native classes where they mostly inject the interfaces into the constructor instead of the implementation class to create the respective objects. Even when using the factory, it is recommended to create the factory for the interface.

Conclusion

These are the five simple and most commonly used design principles in the process of Object Decomposition. Magento strongly encourages its developer community to apply these principles wherever needed. So, the next time you code a new feature or modify an existing one, keep the SOLID principles in mind and apply them to achieve better quality and maintainability in your code.

Leave a comment to add your own input or examples of the SOLID principles, or to write about any other design pattern. Together we can make the community even better.

At times during the development phase of a Magento 2 site, you might want to add a virtual product – as either a client requirement or an ad-hoc request. Creating a virtual product can be done in two ways:

1. From the Magento 2 backend as the administrator and
2. Programmatically (manually) from the front end.

In this article, we will walk you through the procedure and purpose of creating a virtual product, programmatically.

The Procedure

Straight ahead, below is the code which injects our necessary dependencies to the __construct function. 

In order to access a Magento project object, it’s necessary to inject interface functions to the already defined __construct function. The interface functions associated are \Magento\Catalog\Api\Data\ProductInterfaceFactory and \Magento\Catalog\Api\ProductRepositoryInterface.

Moving on, below is the code to create a virtual product using the injected interface functions:

The Purpose

Now, let’s understand the purpose of codes implemented:

• $this->productFactory->create() creates the product object. Once the object is created, properties of the product such as SKU, name, and description will be set.

• $product->setWebsiteIds([1]) assigns the product to one website and if there are multiple websites for which the same product is to be assigned, then you could call the website IDs through the store.

• $product->setTypeId(\Magento\Catalog\Model\Product\Type::TYPE_VIRTUAL) sets product as a virtual product, while TYPE_SIMPLE creates the product as a simple product.

• $product->setVisibility(\Magento\Catalog\Model\Product\Visibility::VISIBILITY_BOTH) sets product visibility as both catalog and search. VISIBILITY_IN_CATALOG sets product visibility as a catalog, VISIBILITY_IN_SEARCH sets product visibility as search, and VISIBILITY_NOT_VISIBLE makes the product not visible individually.

• $product->setStatus(\Magento\Catalog\Model\Product\Attribute\Source\Status::STATUS_ENABLED) makes the product enabled and “STATUS_DISABLED” makes the product disabled.   

• To add the image to the product, we have used the code “$product->addImageToMediaGallery($imagePath, [‘image’, ‘small_image’, ‘thumbnail’], false, false);”. Here in the $imagePath, we need to specify the entire path of the image file.

Apart from the default attributes of the product, we can also save the custom attributes of the products by using their attribute code. For example, if I have a text attribute called “created_by” and wish to save this attribute to the product, I can save the attribute using this code $product->setCreatedBy(‘Created By’).

If you have any queries regarding the procedure/code or you are in need of any technical assistance regarding your store setup, we’re just a click away. Feel free to drop us a line and we could help you and ease up your process of creating better Magento sites.

Not every online store sells physical products. Many eCommerce sites out there sell non-physical products such as books, gift cards, software, and a variety of services. These are termed “downloadable products”. Adding a downloadable product to your eCommerce store can be tricky sometimes and would necessitate a developer’s help at some point in time.

This is a know-how article on configuring a Downloadable Product in Magento 2. Also discussed are things that could go wrong during the process.

Note: We’ve used Magento 2.2.3 for this article.

How to Configure a Downloadable Product?

Step 1

In the Magento 2 admin panel, go to Catalog → Products from the left-side navigation panel.

In the upper-right corner, select Downloadable Product option from the Add Product drop-down menu.

As an outcome, a new Product page will open.

Step 2

In the new product page, fill out the basic product information (i.e, Product Name, SKU, Price, Quantity, etc).

In the Tax Class field, if you want to add tax for the product, select Taxable Goods, else select None from the drop-down box.

In the Weight field, select the This item has no weight, the right option to be chosen for downloadable products and virtual products.

Step 3

Then open the Downloadable Information section. This Downloadable Information has two subsections (1) Links – describes the link for the download and (2) Samples – describes the sample file).

Links:

• Give an appropriate heading for the download links
• Add a Link
  • Title: Give an appropriate title for the download.
  • Price: If you set the Links can be purchased separately, then need to enter the price of the download.
  • File & Sample: Here you can upload the file by selecting Upload File option from the drop-down or you can also enter the URL by selecting the URL from the drop-down.
  • Max. Downloads: To limit the number of downloads per customer you can specify a number or check the Unlimited check box should you wish so.
  • Shareable: This is the most important part of configuring a downloadable product, hence let’s see this in detail.

Sharable Downloadable Product

There are three options

1. If you wish only the registered users to download the product, then set downloadable product shareable option as No.
2. If you wish the item to be downloaded by both registered user and also the guest users, then set the downloadable product shareable option as Yes.
3. The Use Config option takes the value from the Master configuration panel – set in the System → Configuration → Catalog → Downloadable Product Options.

Note: Disable guest checkout if the cart contains the downloadable items with Shareable option No.

Possible Issues

If we have set the downloadable product Shareable option as No in the Master Configuration and enabled the guest checkout, then the guest user will be allowed to place the order and thereby an order confirmation email will also be sent to the email address. However, clicking on the download link will redirect to the login page – asking to log in as a registered user. He/she will not be able to download the item.

That said, if you set the shareable option as No, disable the guest checkout. Otherwise set the downloadable product shareable option as Yes.

Hope the article turned out to be useful in knowing a thing or two about configuring a downloadable product in Magento 2. Please feel free to drop us a line, should you have any queries or feedback. We’re looking forward to addressing more topics in the future.

With the successful creation and implementation of Magento 2, Magento has begun the process of phasing out support and new features for Magento 1. By 2020, Magento will stop providing security patches, software quality fixes, or any other upgrades for merchants using Magento 1. Those who are using some of the earlier versions of Magento 1, versions 1.9 to 1.12, have already noticed limited support from Magento.

If your e-commerce website uses any version of Magento 1, and you want to keep your business secure, compliant, and innovative, the time to start preparing to migrate to Magento 2 is now. While switching your store over to Magento 2 can be intimidating, the value of this new version of Magento far outweighs any concerns.

This article will explain the reasons why it is important for your company to migrate to Magento 2 as soon as possible and some strategies for making the transition go smoothly.

Why Migrate to Magento 2?

Transitioning from Magento 1 to Magento 2 is a big change, and it will take time to complete. With over 200,000 e-commerce businesses which have yet to make the move, it can be easy to wonder if moving to Magento 2 will be worth it for your e-commerce company. Here are some solid reasons to take migration into consideration:

Magento 2 Will Boost Your Conversion Rate

Like any other business decision you make for your e-commerce company, when you are thinking about whether and when you should migrate to Magento 2, you need to consider your bottom line. If you are worried about how this change will influence your online business, it is important for you to realize just how significantly Magento 2 can increase your profitability.

Magento 2 boasts significant improvements over Magento 1 including 50% better loading speed, 38% faster checkout, and the capability for 123,000 more orders to be processed per hour. This means that, when you move to Magento 2, your customers will have a better, more fulfilled experience interacting with your online store, which will lead to a higher conversion rate and more repeat and long-staying customers.

The longer you wait to start the transition to Magento 2, the longer you are missing out on the benefits this version of Magento has to offer your e-commerce business.

Magento 2 is Secure

In addition to speed and scalability, Magento 2 is more secure than Magento 1. Magento 2 uses strong hashing algorithms for maximum password security as well as increased security measures against XSS attacks. These tools, as well as other heightened security features, help protect your website and ensure that your business is as secure as possible.

If you postpone your e-commerce company’s transition to Magento 2, not only will you miss out on all of these beneficial security enhancements, but you will also see scale backs on your current security measures. By 2020, Magento will stop offering support, updates, and security measures for any merchants using Magento 1, leaving your website vulnerable.

Migration Takes Time

Another reason to consider planning your move to Magento 2 sooner rather than later is the timeline for migration. Transitioning to Magento 2 is not a quick and easy move that you can complete at the last minute. Even simple migrations, which require only moving data and code without code restructuring or design, will take between five to seven months to complete. Migrations with simple customizations can take up to seven to nine months, and if you have a more complicated migration with data, customizations, and integration like POS, ERP, and CRM, expect the transition to take even longer.

If you want a smooth transition to Magento 2 without feeling rushed or needing to compete with the thousands of other e-commerce businesses who have yet to move, you want to start as early as possible.

Strategies for a Smooth Transition

If you have a complicated migration, the process for moving your e-commerce business to Magento 2 can seem overwhelming. You can make the transition easier for yourself by taking certain steps to prepare your company for the move. Follow the strategies below for a seamless migration to Magento 2:

Conduct a Personal Audit

Review which extensions, features, add-ons, and functionalities are not proving beneficial to your current operation, and see which ones already have counterparts in Magento 2. Any features, especially customized ones, which you find not to be useful for your e-commerce website should be removed now. This will make your transition less complex and cut down on the time it will take for you to migrate to Magento 2.

Work with a Certified Magento Developer

After you conduct an audit, you should hire a certified Magento developer to take over the Magento 2 migration and ensure you do not sacrifice quality or security. Developers especially, a certified Magento professional solution partner, can make sure that the transition happens as quickly as possible, and they will help your e-commerce business to continue operating efficiently during the move.

Switching to Magento 2 from Magento 1 can seem complicated, but with the right developer, it does not have to be so difficult. For help transitioning to Magento 2, visit DCKAP and learn more about our Magento managed services.

With rich out-of-the-box features, seamless third-party integrations for the unique needs of your business, and the unlimited ability to customize, Magento has your eCommerce business covered, from small business to mid-market and enterprise.

Magento is a commerce solution for any business need, and below are examples of companies making the most of Magento’s infinite design and functionality solutions.

1) Munchkin

Parenting can be overwhelming, but using the Munchkin website is anything but that. Just the right amount of white space, balanced with vivid splashes of color and easy to read typesetting make navigating throughout the website a breeze. Product pages also come with handy downloadable instructions, which comes in handy in the event you didn’t keep a watchful eye on the instruction manual. You can always refer back to the Munchin website to keep them handy for you. Like their tagline says, it is the little things.

2) Fred Perry

Fred Perry’s website greets you with crisp imagery, subtle interactions and animation along with a clean use of white space to set the tone for their classic sportswear to streetwear brand. A seemingly clean and minimal website, reveals an extensive subculture section that gives an in-depth glimpse into their origin story and the subculture that came to be (both of which Fred Perry carries with pride)– you can dive into interviews and Spotify playlists to immerse yourself in the worlds of the laurel wreath bearers.

3) Sugarfina

The go-to artisan candy company for adults provides a just-as-sweet alternative to stopping by their adorable boutique stores. With beautiful and enticing presentations of their product, you’re sure to be left wide-eyed while you browse. There are options to customize your candy bento box, send a gift for a friend to choose what candy to fill with via their CandyDrop feature. The option to customize their product with your company logo and welcome message for corporate gifting, their online experience roots them as the ultimate candy boutique for grown-ups.

4) Tom Dixon

Modern and simplistic, Tom Dixon’s website decidedly focuses on stylized product imagery to set the tone. With product collection, mini-films featured in their homepage to tell the stories and intent of their designs, their product line is instantly elevated. The sleek styling carries throughout the site, on pages such as category listing pages, with product images styled to almost look as if you’re viewing them in a gallery space.

5) Boodles

With plenty of storytelling, it is evident that although a contemporary and clean website, the Boodles brand carries a long line of British heritage. Coupled with dreamy imagery, you are certainly enticed to click around whether it’s to do some actual browsing or to learn a bit more about the World of Boodles.

6) Bjorn Borg

Another tennis legend namesake brand on this list, Bjorn Borg (named after the Swedish former tennis player largely considered to be one of the greatest in the history of the sport), honors its roots with signature Swedish sans serif font styles and clean use of space. Bjorn Borg, a brand that honors its past but connected to the present, prominently features UGC on its homepage that puts the spotlight on its audience and their active and urban lifestyles.

7) Shinola

Shinola, the Detroit-based luxury goods brand takes pride in its craft and has a website that wants to be explored. Almost wherever you are on the site, you are given a glimpse of the craftsmanship and the details that characterize their product. Each product is given the premium treatment with thoughtful product descriptions, various product views, and macro shots and promising testimonials. A notable mention being the clever Free Ride to the Top bicycle button at the bottom of their pages.

8) Cobra

With a bold yet very sleek aesthetic, Cobra’s website effectively positions its product in a premium fashion. Their specialty is in golf clubs, and there’s no shortage of tech and performance specs when you dive into their brochure-like (and thoughtfully designed) product detail pages. You will know all the ins and outs of their product as a shopper.

If these examples have got your creative juices flowing and you’d like additional help from Magento Certified experts, please get in touch with us here at DCKAP, we’d love to hear from you!

Service Contracts

Magento is a modular system that enables third-party developers to customize and overwrite core parts of its framework. This flexibility, however, comes at a price. Business logic tends to leak across the layers of the Magento system, which manifests as a duplicated and inconsistent code.

Merchants might be reluctant to upgrade Magento because customized extensions that they have purchased might not be compatible with new versions of Magento. Also, Magento and third-party developers can find it difficult to track and report the dependencies that customized extensions have on other extensions.

To address these issues, the Magento system introduces service contracts.

Extension Attributes

Extension attributes are new in Magento 2. They are used to extend functionalities and often use more complex data types than custom attributes. Extension Attributes are used to allow for customization of the strict Service Contracts. These attributes do not appear on the GUI.

How to define Extension Attributes?

<config>
 <extension_attributes for="Path\To\Interface">
 <attribute code="name_of_attribute" type="datatype">
 </attribute>
 </extension_attributes>
</config>

How to use extension attributes in Magento 2 Checkout?

1. Create a module.xml and registration.php to register your module.

For example, app/code/Dckap/ExtensionAttributes /etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Dckap_ExtensionAttributes" setup_version="1.0.0" />
</config>

app/code/Dckap/ExtensionAttributes/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
Dckap_ExtensionAttributes,
__DIR__
);

2. Create the install script in the Setup directory.

app/code/Dckap/ExtensionAttributes/Setup/InstallSchema.php

<?php

namespace Vendor\ModuleName\Setup;

use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;

class InstallSchema implements InstallSchemaInterface
{

/**
* {@inheritdoc}
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$installer = $setup;

$installer->startSetup();

/* While module install, creates columns in quote_address and sales_order_address table */

$eavTable1 = $installer->getTable('quote_address');
$eavTable2 = $installer->getTable('sales_order_address');

$columns = [
'sample_attribute' => [
'type' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
'nullable' => false,
'comment' => 'freightcollect',
] 
];

$connection = $installer->getConnection();
foreach ($columns as $name => $definition) {
$connection->addColumn($eavTable1, $name, $definition);
$connection->addColumn($eavTable2, $name, $definition);
}

$installer->endSetup();
}
}

3. Define the extension attribute in XML

app/code/Dckap/ExtensionAttributes/etc/extension_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
<extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
<attribute code="sample_attribute" type="string" />
</extension_attributes>
</config>

4. Create the field for extension attributes in knockout HTML
app/code/Dckap/ExtensionAttributes/view/frontend/web/template/shipping-address/shipping-method-item.html

<input type="text" name="freight_collect_account_number" id="freight_collect_account_number" data-bind="value: sample_attribute, valueUpdate: 'afterkeydown', event: { 'keyup': check }">

5. Assigning the value for  extension attributes in knockout  js

app/code/Dckap/ExtensionAttributes/view/frontend/web/js/view/shipping.js

Observe the input field in initialize function

initialize: function (config) {
this.sample_attribute = ko.observable();
}

Set the value to extension attributes in shipping information

setShippingInformation: function () {
var sample_attribute_value = $("#freight_collect_account_number").val();
if (quote.shippingAddress().extensionAttributes == undefined) {
quote.shippingAddress().extensionAttributes = {};
}
quote.shippingAddress().extensionAttributes.sample_attribute=sample_attribute_value;
};

6. Save the extension attribute value using the plugin

Define the plugin in di.xml

app/code/Dckap/ExtensionAttributes/etc/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Quote\Model\Quote\Address">
<plugin name="add_freight_collect_information" type="Vendor\ModuleName\Plugin\Quote\FreightCollect" sortOrder="10" disabled="false"/>
</type>
</config>

Save the value of extension attributes in qoute address

app/code/Dckap/ExtensionAttributes/Plugin/Quote/FreightCollect.php

<?php

namespace Vendor\ModuleName\Plugin\Quote;

use Magento\Quote\Model\Cart\ShippingMethodConverter;
use Magento\Quote\Api\Data\ShippingMethodInterface;
use Magento\Quote\Api\Data\ShippingMethodExtensionFactory;

class FreightCollect
{
/**
* Hook into setShippingMethod.
* As this is magic function processed by __call method we need to hook around __call
* to get the name of the called method. after__call does not provide this information.
*
* @param Address $subject
* @param callable $proceed
* @param string $method
* @param mixed $vars
* @return Address
*/
public function around__call($subject, $proceed, $method, $vars)
{
$result = $proceed($method, $vars);
if($subject->getExtensionAttributes()){ $subject->setSampleAttribute($subject->getExtensionAttributes()->getSampleAttribute());
}
return $result;
}
}

7. Retrieve the extension attributes value using observer

Define the observer in events.xml
app/code/Dckap/ExtensionAttributes/etc/events.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="sales_model_service_quote_submit_before">
<observer name="ModuleName_sales_address_save" instance="Vendor\ModuleName\Observer\Observeorder" />
</event>
</config>

Get the value of extension attributes and save in order using the observer
app/code/Dckap/ExtensionAttributes/Observer/ Observeorder.php

<?php
namespace Vendor\ModuleName\Observer;
class Observeorder implements \Magento\Framework\Event\ObserverInterface
{
public function execute(\Magento\Framework\Event\Observer $observer)
{

/* before quote submit save the freight list values in sales_order_address table
*/ 
$order = $observer->getEvent()->getOrder();
$quote = $observer->getEvent()->getQuote(); $order->getShippingAddress()->setSampleAttribute($quote->getShippingAddress()->getSampleAttribute());
return $this;
}
}

Hope the article was useful. Please let us know if you have any queries or comments.

References

Magento supports inventory management for every business size, from a single store with a single website to an international network of websites, stores, warehouses, and drop shippers.

All merchants using Magento fall into two types of inventory management based on the number of locations or sources in your business.

Single-Source merchants manage on-hand inventory and complete orders in a single location. The merchants have multiple websites and sell products from the same catalog, inventory, and location.

Multi-Source merchants manage on-hand inventory and complete orders through multiple locations. This is known as Multi-Sourcing. The merchants have one website or a multisite implementation.

A representative image of Multi-Source Inventory

Gone are the days when we had to rely on a single inventory system, which not just kept multi-sourcing at bay, but was also a burden of excessive workload for merchants. Managing inventory for multiple warehouses can now be done like a breeze through Multi-Source Inventory (MSI).

Multi-Source Inventory got recently introduced in Magento 2.3, where it manages the inventory for multiple warehouses. Using MSI, we can manage a particular product quantity from different sources or locations.

Managing Multi-Source Inventory

• Manage Sources
• Manage Stocks
• Manage Product Inventory
• Order Management

Manage Sources

Merchants who sell their products on different inventories in different locations can create the source inventory for every location like US-California, US-Alabama, US-Washington etc.

While creating sources, the data should be entered under General, Contact Information, and Address with all the required fields like name, code, and country, etc.

Manage Stocks

Merchants can create multiple channels (i.e., Magento websites ) and assign sources for a channel where the merchants will be selling their products.

We have three sections to create and manage the stocks,

General – Name of the stock for your reference like the US stocks, UK stocks, etc.

Sales Channel – Select listed channels.

Sources – Assign sources for each channel.

Manage Product Inventory

Merchants can assign sources to the products when they create or edit a new product. You can add different product stocks for different locales.

The available product quantity gets reduced when an order gets placed for an assigned source. If product source quantity is out of stock, then the customer will not be able to place an order in such a locale.

Order Management

The source selection algorithm is used when an order gets placed for the products. The quantity of the product is reduced after the shipment is made in an assigned locale. The admin also has the option to change the locale manually while shipping the products.

Multi-Source Inventory (MSI) in Magento 2.3 has changed the scene in the inventory system with its multi-sourcing function, by giving the merchant the liberty to manage multiple sources and handle stock for every warehouse, making it a better choice when compared to the single inventory system.

It’s mandatory for the online store to use the State/Province field in their system. But in some countries, there is no need to include a few states at the time of checkout.

In this article, I will show you how to restrict some US States in the checkout. For this, I have created a US State restriction selection drop-down in the admin panel system configuration. In the example below, you may find Dckap as Namespace and CustomerAddresses as ModuleName.

Step 1

We have to create a system configuration in the admin panel for getting the allowed US states for checkout. Create a system.xml file in the path below and the configuration will be displayed in Stores → Configuration → Sales → Checkout

Path: app/code/Dckap/CustomerAddresses/etc/adminhtml/system.xml

<section id="checkout" translate="label" type="text" sortOrder="305" showInDefault="1" showInWebsite="1" showInStore="1">

    <label>Checkout</label>

    <tab>sales</tab>

    <resource>Magento_Checkout::checkout</resource>

    <group id="state_filter" translate="label" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">

          <label>Allowed US States in Checkout</label>

          <field id="us_state_filter" translate="label comment" type="multiselect" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">

                <label>Allowed US States in Checkout </label> <source_model>Dckap\CustomerAddresses\Model\Config\Region\ RegionInformationProvider</source_model>

          </field>

    </group>

</section>

First of all, we need to get the list of the allowed states, so we will need to gather such details from the Magento\Directory\Model\ResourceModel\Region\Collection. From this collection, we will be able to get the allowed country name, and by using the country details, we will get the states’ data, so we will have to override some files for collecting such information.

Path: app/code/Dckap/CustomerAddresses/etc/frontend/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

      <type name="Magento\Directory\Model\ResourceModel\Region\Collection">

           <plugin name="Dckap_CustomerAddresses_Limit_State_Filter_Plugin" type="Dckap\CustomerAddresses\Plugin\StateFilter\StateFilter"/>

      </type>

</config>

Then we will have to update the US state list in that multi-select box form using below class.

Dckap\CustomerAddresses\Model\Config\Region\RegionInformationProvider

Path : Dckap\CustomerAddresses\Model\Config\Region\RegionInformationProvider

namespace Dckap\CustomerAddresses\Model\Config\Region;

class RegionInformationProvider

{

  /**

   * @var \Magento\Directory\Api\CountryInformationAcquirerInterface

   */

  protected $countryInformationAcquirer;

  protected $addressRepository;

  public function __construct(

      \Magento\Directory\Api\CountryInformationAcquirerInterface $countryInformationAcquirer

  ) {

         $this->countryInformationAcquirer = $countryInformationAcquirer;

  }

  public function toOptionArray()

  {

        $countries = $this->countryInformationAcquirer->getCountriesInfo();

        foreach ($countries as $country) {

            // Get regions for this country:
 
            $regions = [];

            if ($availableRegions = $country->getAvailableRegions()) {

                 foreach ($availableRegions as $region) {

                      $regions[] = [

                         'value' => $region->getName(),

                         'label' => $region->getName()
   
                       ];

                 }

             }

        }

        return $regions;

     }

}

Step 2

In Magento2 admin panel, go to Stores → Configuration from the left-side navigation panel. Then Goto General section → General → Country options → Choose ‘United States’ in Allowed Countries. Because we only list the allowed countries states in our custom system configuration field.

And then select the US States from the Allowed US States in Checkout drop-down which you will want to display in the checkout form.

Step 3

To get the chosen allowed US States for the checkout page by using the below set of code, we must override the Magento\Directory\Model\ResourceModel\Region\Collection for the checkout form State/Province drop down.

<?php

namespace Dckap\CustomerAddresses\Plugin\StateFilter;

class StateFilter

{

  /**

   * @var \Magento\Framework\App\Config\ScopeConfigInterface

   */

  protected $scopeConfig;

  protected $allowedUsStates;

  /**

   * StateFilter constructor.

   * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig

   */

  public function __construct(\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig)

  {

      $this->scopeConfig = $scopeConfig;

  }

  public function afterToOptionArray($subject, $options)

  {

      $allowedStates = $this->scopeConfig->getValue('checkout/state_filter/us_state_filter', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);

      $this->allowedUsStates = explode(",", $allowedStates);

      $result = array_filter($options, function ($option) {

          if (isset($option['label'])){

              return in_array($option['label'], $this->allowedUsStates);

          }

          return true;

      });

      return $result;

  }

}

Here,

$this->allowedUsStates => This variable has an array of allowed US state values.

$option => This variable has all the US states.

By using the above after function, we must compare both the state values and return the chosen state value, if that was present in the $option.

Step 4

Open your terminal and go to the Magento 2 root. Run from there with the following command:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
php bin/magento cache:flush

Finally, the chosen states will show up in the checkout page state/province selection drop down.

If you found this blog helpful, then please do let us know if you have any queries.

Having a smooth user experience is a prime factor that makes an e-commerce website a good one. Infinite Scroll Ajax Pagination in Magento 2 helps every e-commerce website in achieving this.

Need for Infinite Scroll Ajax Pagination

Nowadays, customers in e-commerce websites needn’t have to make more interactions to view the next list of products. Scroll pagination helps in sorting this out without any interactions to view all the products with the smooth user experience.

Implementation of Infinite Scroll Ajax Pagination with Magento 2

Here, we’ll show you how to implement the ajax scroll pagination with a simple javascript method in Magento 2. This will help in increasing the customer user experience. If you know about the query and layout file structure in Magento 2, it’s simple to implement the ajax scroll pagination in the category product list page.

Step 1:

Create app/code/DCKAP/AjaxScroll/etc/module.xml file to create a module using the code below

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="DCKAP_AjaxScroll" setup_version="1.1.0">
 </module>
</config>

Step 2:

Create app/code/DCKAP/AjaxScroll/registration.php to register that module using the code below

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'DCKAP_AjaxScroll',

__DIR__

);

Step 3:

Create a layout catalog_category_view.xml file, which overrides the Magento core list.phtml file, where we will add the script of ajax infinite scroll pagination.

Path: app/code/DCKAP/AjaxScroll/view/frontend/layout/catalog_category_view.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
         <referenceBlock name="category.products.list">
               <action method="setTemplate">
                    <argument name="template" xsi:type="string">DCKAP_AjaxScroll::product/list.phtml</argument>
               </action>
         </referenceBlock>
      </body>
</page>

Step 4:

Create app/code/DCKAP/AjaxScroll/view/frontend/templates/product/list.phtml file

Copy the code of vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

And paste in your list.phtml. Add the jquery script code below in the bottom of the list.phtml file

<script>

require(["jquery"],function($) {
   var url=$('.next').attr('href');
   if (typeof url === "undefined") {
       $('#load-more-product').html('');
    }
$('#load-more-product-link').on('click', function () {
    var url=$('.next').attr('href');
    $('#load-more-product').hide();
    $('#load-more-loader').show();
    $.get(url, function (data) {
          $('#load-more-loader').hide();
          $('#load-more-product').show();
          var result=$(data.products).find('.product-item-info');
          var nxtUrl =$(data.products).find('.next').attr('href');
          result.each(function(index,value) {
              $('#product-collections').append(value);
              $( "form[data-role='tocart-form']" ).catalogAddToCart();
           });
    if (typeof nxtUrl === "undefined") {
           $('#load-more-product').html('<em>No More product in this Category.</em>');
    }else{
           $('.next').attr('href',nxtUrl);
    }

});

});

});
</script>

Note: Add the code below at the bottom of the product list items code

<div id="load-more-product">
    <a id="load-more-product-link" href="javascript:void(0)">Load more Items</a>
</div>
<div id="load-more-loader">
    <img src="You can add your load image as your wish" width="100" height="100" />
</div>

You can change the text as you wish in the script and HTML.

Step 5:

Open your terminal and go to the Magento 2 root. Run from there with the following command:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

Once the commands get executed, Infinite ajax scroll pagination will start working. Now, you can smoothly run your e-commerce website without any glitches or interactions to view the upcoming list of products. A user-friendly website is indeed a good website.

Magento released Magento 2 version in Magento Live Australia 2015. From then on, Magento has been nudging M1 merchants to migrate to M2. Meanwhile, it has been supporting both Magento 1.x Open Source (formerly known as Community Edition) and Commerce (formerly known as Enterprise Edition). But a few months back, Magento provided more clarity on its support commitments for Magento 1 and it has urged Magento 1 merchants to make the transition to Magento 2.

Magento 1 to Magento 2 Migration – It’s High Time

A blog – Supporting Magento 1 through Jun 2020, published by Magento clearly states – ‘While we’re committed to supporting the success of all merchants, the time to upgrade to Magento Commerce 2 is now’.

Migrating from M1 to M2 has its challenges but with the Magento migration tool and proper planning, smooth migration can be achieved.  The level of effort to migrate from Magento 1 to Magento 2 depends upon how you have built your site and its level of customization. Initial estimates indicate that an average Magento 2 migration is only about 20% larger than a Magento 1.x upgrade.

If you are keen on improving performance, scalability, and security, then you should definitely make an on migrating to Magento 2.

This blog will explain the steps to migrate from M1 to M2.

Magento 2 migration involves four components: 

1. Data Migration
2. Extension & Custom Code Migration
3. Theme
4. Customization

Before you start the migration, you need to create a plan and follow the best practices for migration.

• Review extensions and custom modules on your Magento 1.x site.
• Stop all admin activities and cron jobs in Magento 1.x site.
• Copy the Magento 1.x database to the dev environment.
• Build the new dev server and install the new Magento 2.x in it.
• Use the Magento Data Migration Tool.
• Start your migration.
• Make changes to the migrated data (if needed).
• Update incremental data.
• UAT
• Go live

Data Migration

The Data Migration Tool is a command-line interface (CLI) used for transferring data from Magento 1 to Magento 2. The Tool verifies consistency between Magento 1 and 2 database structures (tables and fields), tracks the data transfer progress, creates logs, and runs data verification tests.

Please refer to our Blog MAGENTO 2 – DATA MIGRATION for more information on Data Migration.

Extension and custom code Migration

• You have to review all the extensions, including third party and custom extensions.
• You need to make a list of extensions you are using and check out/buy compatible versions in the Magento Marketplace.
• If the extensions are not available, then you need to migrate the code from Magento 1.x to Magento 2.x using the Magento Code Migration Toolkit, which will help to reduce efforts.
• Also, we can develop our own custom module following the best practices from the Magento developer guide.

Theme and Customization

Magento 2 follows new approaches and architecture for developing themes and customization. If you have installed a theme from a third party vendor for the Magento 1.x site, then you have to check with the vendor whether the 1.x theme will support Magento 2. Otherwise, we will need to create a custom theme using the Magento 2 frontend developer guide.

Recommendation during Migration

• Use a copy of the database from Magento 1 instance.
• Remove outdated and redundant data.
• To boost performance, you may enable the direct_document_copy option in your config.xml.

Once the Migration is over, we will need to test the Magento 2 store thoroughly to make sure that everything is fine.

References