Hello Magento Friends,
In this article, we will learn about How to Add Currency Flag to Currency Switcher Dropdown in Magento 2.
Magento 2 provides a robust platform for eCommerce businesses, allowing extensive customization to meet specific needs. One of the common customizations is enhancing the user experience by adding currency flags to the currency switcher dropdown. This small yet significant tweak can improve the overall look and feel of your online store and make it easier for customers to identify and switch between currencies.
Contents
Before diving into the technical steps, let’s understand why adding currency flags is beneficial:
Step 1: First, we need to create a “default.xml” file inside our extension at the following path.
app/code/Vendor/Extension/view/frontend/layout/default.xml
Then add the code as follows
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="currency"> <action method="setTemplate"> <argument name="template" xsi:type="string">Magecomp_Mobilelogin::currency.phtml</argument> </action> </referenceBlock> </body> </page>
Step 2: First, we need to create a “currency.phtml” file inside our extension at the following path.
app/code/Vendor/Extension/view/frontend/templates/currency.phtml
Now add the below mentioned code
<?php /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile /** * Currency switcher * * @var \Magento\Directory\Block\Currency $block */ ?> <?php if ($block->getCurrencyCount() > 1): ?> <?php $currencies = $block->getCurrencies(); ?> <?php $currentCurrencyCode = $block->getCurrentCurrencyCode(); ?> <?php $id = $block->getIdModifier() ? '-' . $block->getIdModifier() : '' ?> <div class="switcher currency switcher-currency" id="switcher-currency<?= $block->escapeHtmlAttr($id) ?>"> <strong class="label switcher-label"><span><?= $block->escapeHtml(__('Currency')) ?></span></strong> <div class="actions dropdown options switcher-options"> <div class="action toggle switcher-trigger" id="switcher-currency-trigger<?= $block->escapeHtmlAttr($id) ?>" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" data-trigger-keypress-button="true"> <strong class="language-<?= $block->escapeHtml($block->getCurrentCurrencyCode()) ?>"> <?php $flagImage = 'Vendor_Extension::images/'.$block->getCurrentCurrencyCode().'.png'; ?> <img src="<?= $this->getViewFileUrl($flagImage); ?>"> <span><?= $block->escapeHtml($currentCurrencyCode) ?> - <?= @$block->escapeHtml($currencies[$currentCurrencyCode]) ?></span> </strong> </div> <ul class="dropdown switcher-dropdown" data-target="dropdown"> <?php foreach ($currencies as $_code => $_name): ?> <?php if ($_code != $currentCurrencyCode): ?> <li class="currency-<?= $block->escapeHtmlAttr($_code) ?> switcher-option"> <?php $flagImage = 'Vendor_Extension::images/'.$_code.'.png'; ?> <a href="#" data-post='<?= /* @noEscape */ $block->getSwitchCurrencyPostData($_code) ?>'> <img src="<?= $this->getViewFileUrl($flagImage); ?>"> <?= $block->escapeHtml($_code) ?> - <?= $block->escapeHtml($_name) ?></a> </li> <?php endif; ?> <?php endforeach; ?> </ul> </div> </div> <?php endif; ?>
Step 3: Then you have to add the “.png” images to the below path
app/code/Vendor/Extension/view/frontend/web/images/
The image name should be your currency code you have two currencies in the dropdown INR and USD, so your image name should be INR.png and USD.png.
Output:
Adding currency flags to the currency switcher dropdown is a great way to enhance the user experience on your Magento 2 store. With the steps outlined in this blog, you can easily implement this feature and provide a more intuitive shopping experience for your customers. Customizations like these can significantly contribute to the global appeal of your eCommerce site.
If you have any questions or need further assistance, feel free to reach out in the comments below!
Happy Coding!
In Shopify Remix, managing form submissions and data fetching is crucial for building interactive and…
When positioning oneself in the constantly developing field of internet sales, it is critical to…
One major challenge student entrepreneurs encounter is difficulty balancing academics and business. Most find themselves…
In this article, we will learn how to set up Vite in the Shopify remix…
Hello Magento Friends, In Magento 2, customizations to the admin panel can significantly enhance the…
Hello Magento Friends, Magento 2 provides a robust event-driven architecture that allows developers to observe…