2

I m working on Magento 2.3.5 p1, can we add currency flag in currency switcher that appeared at top header?

if yes please let me help on this. Thanks in advanced.

1

2 Answers 2

4

You can add the flag to the currency switcher using the below way.

create file currency.phtml in

app/code/design/frontend/{theme_vendor}/{theme_name}/Magento_Directory/templates/currency.phtml

And add the below code in this file.

<?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 = '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 = '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; ?>

Then you have to add the ".png" images to the

app/code/design/frontend/{theme_vendor}/{theme_name}/web/images

the image name should be your currency code like I have two currencies in the dropdown INR and USD, So your image name should be INR.png and USD.png.

Then run the below command and clear cache.

php bin/magento setup:static-content:deploy -f

Check the below screenshot.

enter image description here

Hope this solution will work for you.

0

enter image description here

You can add the flag to the currency switcher using the below way.

create file currency.phtml in

app/code/design/frontend/{theme_vendor}/{theme_name}/Magento_Directory/templates/currency.phtml

And add the below code in this file.

<?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<?php /* @escapeNotVerified */ echo $id?>">
    <strong class="label switcher-label"><span><?php /* @escapeNotVerified */ echo __('Currency') ?></span></strong>
    <div class="actions dropdown options switcher-options">
        <div class="action toggle switcher-trigger" id="switcher-currency-trigger<?php /* @escapeNotVerified */ echo $id?>">
            <strong class="language-<?php echo $block->escapeHtml($block->getCurrentCurrencyCode()) ?>">
            <?php $flagImage = 'images/'.$block->getCurrentCurrencyCode().'.png'; ?>
                <img src="<?= $this->getViewFileUrl($flagImage); ?>">
                <span><?php echo $block->escapeHtml($currentCurrencyCode) ?><?php if(!$this->helper('Smartwave\Porto\Helper\Data')->getConfig('porto_settings/header/currency_short')): ?> - <?php echo @$block->escapeHtml($currencies[$currentCurrencyCode]) ?><?php endif; ?></span>
            </strong>
        </div>
        <ul class="dropdown switcher-dropdown" data-mage-init='{"dropdownDialog":{
            "appendTo":"#switcher-currency<?php /* @escapeNotVerified */ echo $id?> > .options",
            "triggerTarget":"#switcher-currency-trigger<?php /* @escapeNotVerified */ echo $id?>",
            "closeOnMouseLeave": false,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":null}}'>
            <?php foreach ($currencies as $_code => $_name): ?>
                <?php if ($_code != $currentCurrencyCode): ?>
                    <li class="currency-<?= $block->escapeHtmlAttr($_code) ?> switcher-option">
                        <?php $flagImage = 'images/'.$_code.'.png'; ?>
                        <a href="#" data-post='<?= /* @noEscape */ $block->getSwitchCurrencyPostData($_code) ?>'>
                            <img src="<?= $this->getViewFileUrl($flagImage); ?>"> <?= $block->escapeHtml($_code) ?> </a>
                    </li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<?php endif; ?>

You can add the flag to the currency switcher using the below way.

create file currency.phtml in

app/code/design/frontend/{theme_vendor}/{theme_name}/Magento_Directory/templates/currency.phtml

And add the below code in this file.

<?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 = '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 = '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; ?>

Then you have to add the ".png" images to the

app/code/design/frontend/{theme_vendor}/{theme_name}/web/images

the image name should be your currency code like I have two currencies in the dropdown INR and USD, So your image name should be INR.png and USD.png.

Then run the below command and clear cache.

php bin/magento setup:static-content:deploy -f

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.