This topic contains a step-by-step illustration of solving a typical design customization task using Magento 2 templates.

Sample template customization: changing a layout of the mini shopping cart

In the Magento basic Blank theme, in the mini shopping cart, products are listed under the Go to Checkout button, like following:

Illustration of customizing Magento 2 templates

WebDux decided they want to change this and display the product list before the Go to Checkout button.

The template responsible for displaying the mini-shopping cart items and controls is <Magento_Checkout_module_dir>/view/frontend/web/template/minicart/content.html. Here is the part of the code WebDux worked with:

Illustration of customizing Magento 2 templates

They created a new Wd_magento2 theme and copied the content.phtml to the theme directory: app/design/frontend/WebDux/wd_magento2/Magento_Checkout/web/template/minicart/content.html In their copy of the templates, they changed the order of the blocks as follows:

Illustration of customizing Magento 2 templates

When the Wd_magento2 theme was applied, the mini shopping cart with products looked like following:

Illustration of customizing Magento 2 templates

0 Likes
817 Views

You may also like

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter message.