Customizations/Development Archives

Checkout: Trigger updates on country/region changes

May 17, 2023 hacpires Customizations/Development, Frontend, Magento 2

You can create a mixin for Magento_Checkout/js/action/set-shipping-information and use that to add an event listener to the shipping address select fields (or any other field for that matter). Under you theme root folder create a requirejs-config.js file declaring the mixin The create the mixin file set-shipping-information-mixin.js under the declared Theme_Vendor/Theme_Name/Magento_Checkout/js/action folder with the following content:

Magento mixin to replace/expand a javascript component

December 28, 2021 hacpires Backend, Customizations/Development, Magento 2

As a developer we are often facing the task to replace or expand the existing Magento functionality of a UI component that is rendered via javascript. Magento best practices recommend using mixins to do so. Here is a simple example of using a mixin to replace the purchase order payment method title that is rendered in the checkout page. This[…]

How to make magento mobile menu collapse on all levels

December 24, 2021 hacpires Customizations/Development, Frontend, Magento 2

By default, magento mobile menu is set to collapse only at the top level and not on all levels. To overcome this default feature one must override the _toggleMobileMode function that is implemented in the lib\web\mage\menu.js file.Overriding or extending javascript functionality in magento should be done using mixins. A mixin is a class whose methods are added to, or mixed in, with[…]

Change default validation in checkout fields

November 14, 2021 hacpires Customizations/Development, Frontend, Magento 2, Tips & Tricks

By default Magento 2 has predefined validations for all checkout fields, like postal/zip code and phone. Changing them can easily be done through the xml checkout file. The same method can also be used to change or add tooltip on checkout fields. As an example, suppose you want to change the zip code to allow only 5 digits and the[…]

Minimize Magento downtime when deploying changes in production mode

October 12, 2021 hacpires Backend, Customizations/Development, Frontend, Magento 2, Tips & Tricks

Here are a few suggestions to minimize downtime on Magento, whenever you need to deploy changes in production mode. Changes on phtml template files in the child theme(no downtime) All templates are updated in folder var/view_processed (no need to delete it first) Changes in less, css, js files in the child theme(no downtime if css and js are served from[…]

Logging in Magento Modules

July 18, 2021 hacpires Backend, Customizations/Development, Frontend, Magento 2

When creating a magento module logging in often required for multiple reasons. Logging can be done in multiple ways, specially if you want o logging to a custom file rather than to the default magento files. Let’s assume we are creating a sample module to display some content in the frontend. As always, to create a module we will need[…]

Show sku in the Magento checkout page

July 14, 2021 hacpires Customizations/Development, Frontend, Magento 2

To add the product sku to the order summary in the magento checkout page you will need to create a module to extend the magento quote object and use it on the KnockoutJs template to render the product details. #1 Create module In this module we will override the Magento\Quote\Model\Cart\Totals\Item class with a custom one. Although this is the ultimate[…]

How to add a Logout link to the Customer Account Dashboard

July 13, 2021 hacpires Backend, Customizations/Development, Magento 2

To add a Logout link to the customer account dashboard you will need to change/create the layout file responsible for the customer account page. That file is customer_account.xml and you should place it inside the Magento_Customer/layout folder in your custom theme with the following content:

Installing Magento locally with Docker

July 12, 2021 hacpires Customizations/Development, Magento 2

It you are looking to install magento in your local machine I would recommend using Docker instead of the usual xampp-type solution where you need to configure all the services required by your own. On top of that, since magento 2.4.0 it is mandatory to have elasticsearch running to install magento. This means yet another setup task to complete before[…]

How to hide/remove the Add to Cart button on magento 2

April 20, 2021 hacpires Customizations/Development, Extensions, Frontend, Frontend, Magento 2

Sometimes it is useful to remove or hide the Add to Cart button throughout a magento 2 website. An easy way to do this without changing the actual template is by creating a plugin (also called interceptor) to change the isSaleable function that is used on those templates. Here I created the function that will be called after the isSaleable[…]