SAVE 70% ON ALL OF OUR APPS
<< HERE >>
In the realm of e-commerce, Magento 2 stands out as a powerful and flexible platform. Merchants worldwide rely on it to provide robust shopping experiences. However, with great flexibility comes the need for precise customizations. One such customization is dynamically updating shipping methods in the checkout process, especially when products are added or removed from the mini cart.
Have you ever faced a situation where your checkout page displays an incorrect shipping method until the entire page is reloaded? This can be frustrating for both developers and customers. In this blog post, we will dive deep into solving this issue by exploring how to update shipping methods seamlessly in Magento 2, specifically when products are manipulated within the mini cart.
By the end of this exploration, you will have a clear understanding of the problem at hand and a step-by-step solution to implement a more user-friendly and efficient checkout process.
At the core of this issue is the need to dynamically show or hide the free shipping method based on the products in the mini cart. Suppose you have certain products that qualify for free shipping and others that do not. Your custom plugin correctly handles the display of free shipping when such products are added to the cart. However, when a qualifying product is removed from the mini cart, the free shipping option still appears at checkout until the page is manually reloaded.
This discrepancy not only misguides the customers but also degrades the overall user experience. Therefore, our goal is to ensure that the shipping methods refresh automatically without requiring a page reload whenever a product is added or removed from the mini cart.
Let’s assume you have a plugin that overrides the beforeAppend method in the \Magento\Shipping\Model\Rate\Result class. This custom code effectively displays the free shipping method only if the cart contains qualifying products.
beforeAppend
\Magento\Shipping\Model\Rate\Result
To trigger the update of shipping methods dynamically, we need to listen for add and remove events in the mini cart and bind these events to a function that refreshes the shipping methods.
Create or Update the JS Component:
define([ 'jquery', 'Magento_Customer/js/customer-data', 'Magento_Checkout/js/action/get-totals', 'Magento_Checkout/js/model/cart/totals-processor/default' ], function ($, customerData, getTotalsAction, defaultTotal) { 'use strict'; return function (config, element) { $(element).on('click', '.action-delete', function () { setTimeout(function(){ // Refresh the totals and the shipping methods getTotalsAction([], true); }, 1000); }); $(element).on('click', '.action-update', function () { setTimeout(function(){ // Refresh the totals and the shipping methods getTotalsAction([], true); }, 1000); }); }; });
Update the Layout XML to Include the JS Component:
checkout_cart_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Framework\View\Element\Template" name="custom.minicart.js" template="Vendor_Module::minicart.phtml" /> </referenceContainer> </body> </page>
Create the Template File:
minicart.phtml
<?php $layout = $block->getLayout(); /** * @var \Magento\Framework\View\Element\Js\Components $dynamicpart */ $dynamicPart = $layout->createBlock('Magento\Framework\View\Element\Js\Components'); ?> <script type="text/x-magento-init"> { "*": { "Vendor_Module/js/minicart": {} } } </script>
After implementing the above code:
Updating shipping methods dynamically when products are added or removed from the mini cart in Magento 2 can significantly enhance the user experience. Implementing a JavaScript solution to listen for these events and trigger shipping method refreshes ensures that your checkout process is always accurate and user-friendly.
Q: Why do I need to refresh shipping methods dynamically?
A: Dynamic refreshes ensure that the shipping options presented to the customer are always accurate, preventing confusion and enhancing the overall user experience.
Q: Is it possible to handle this without JavaScript?
A: While backend solutions handle many aspects, JavaScript is essential for dynamic updates without requiring page reloads, thus enhancing the user experience.
Q: Can this solution affect website performance?
A: Properly implemented, this solution should have minimal impact on performance. Make sure to debounce or throttle events if necessary to prevent excessive calls.
By following this guide, you’ll be well-equipped to create a more interactive and user-friendly checkout experience in Magento 2.
Vedran K. is a Marketing Associate at HulkApps, brings both passion and innovation to his work. Outside of work, his passion for seeking out the newest styles in shoes reveals his flair for fashion and keen sense of trends.
Get our news and insights delivered directly to your inbox.
Your cart is currently empty.
Please share a few essential pieces of information that'll help our support members work quickly on your project
As soon as we review your idea, we'll give you an update. Please notice that any access to the product(s) or service offered by HulkApps does not count for a refund. However, should you experience problems with your order, we urge you to reach out to our dedicated support team .
Rising to serve you better, we are delighted to announce that PlanetX has been acquired by HulkApps, a Chicago-based leading Shopify agency. The combination of HulkApps Shopify services and PlanetX's strong capabilities in the eCommerce industry will lead to continued growth for both companies.
Choose your wishlist to be added
Copy wishlist link to share
Copy
We will notify you on events like Low stock, Restock, Price drop or general reminders so that you don’t miss the deal
See Product Details