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!
Generating image thumbnails is a common requirement in web applications, especially when handling media-heavy content.…
In today’s digital landscape, web application security is paramount. As a powerful PHP framework, Laravel…
October was an exciting month for MageComp! From significant updates across our Magento 2 extension…
In modern web development, seamless navigation and state management are crucial for delivering a smooth…
Magento Open Source 2.4.8 beta version released on October 8, 2024. The latest release of…
Hello Magento Friends, Creating catalog price rules programmatically in Magento 2 can be a valuable…