尝试将标志添加到货币转换器

Question

www.womenpalace.com

你好:)

我正在尝试在我的货币转换器旁边添加标志图像。

这是转换器代码：

<select id ="currencies" class="currencies" name="currencies" data-default-shop-currency="{{ shop.currency }}" onchange="onFlagChange(this.options[this.selectedIndex].value)"> 
{% capture codes %},USD,EUR,GBP,CAD,ARS,AUD,ILS,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK,{% endcapture %}
{% assign supported_codes = settings.supported_currencies | split: ' ' %}
<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
{% for code in supported_codes %}
{% if code != shop.currency and codes contains code %}
<option value="{{ code }}">{{ code }}</option>
{% endif %}
{% endfor %}
</select>

我做了一些JavaScript代码，当我选择不同的货币时，强制IMG进入chenge

function onFlagChange(userSelection){
var newUrl;
var optionUrl =
[
{key:"USD",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/USD.png?13296612461826194053"},
{key:"GBP",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/GBP.png?11949257934149418133"},
{key:"EUR",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/EUR.png?11949257934149418133"},
{key:"ILS",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/ILS.png?11949257934149418133"},
{key:"RUB",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/RUB.png?11949257934149418133"}
]
var pick = optionUrl.find(function(e) { return e.key === userSelection; });
if (pick) {
newUrl = pick.value;
}
$('#flags').attr('src',newUrl);
}

这是我选择不同货币时应该更改的 IMG

<span>
<img src="https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/{{ shop.currency }}.png" id="flags" >
</span>

一切正常，但是当我刷新/浏览到另一个页面时，IMG 更改为美元标志。 即使我选择英镑。

任何建议 即使刷新或浏览到另一个页面，我如何制作标志以预览所选货币？

这是整个系统：

<script type="text/javascript" src="/services/javascripts/currencies.js" data-no-instant></script>
<script type="text/javascript" src="{{ "jquery.currencies.min.js" | asset_url }}" data-no-instant></script>
<script type="text/javascript">
{% if settings.currency_format %}
Currency.format = '{{ settings.currency_format }}';
{% endif %}
var shopCurrency = '{{ shop.currency }}';
/* Sometimes merchants change their shop currency, let's tell our JavaScript file */
Currency.money_with_currency_format[shopCurrency] = {{ shop.money_with_currency_format | strip_html | json }};
Currency.money_format[shopCurrency] = {{ shop.money_format | strip_html | json }};
/* Default currency */
var defaultCurrency = '{{ settings.default_currency }}' || shopCurrency;

if ($(window).width() >= 768) {
var $currencySelector = $(".top_bar .currencies");
} else {
var $currencySelector = $("#mobile_menu .currencies");
}

/* Cookie currency */
var cookieCurrency = Currency.cookie.read();
/* Fix for customer account pages */
$('span.money span.money').each(function() {
$(this).parents('span.money').removeClass('money');
});
/* Saving the current price */
$('span.money').each(function() {
$(this).attr('data-currency-{{ shop.currency }}', $(this).html());
});


// If there's no cookie.
if (cookieCurrency == null) {
if (shopCurrency !== defaultCurrency) {
Currency.convertAll(shopCurrency, defaultCurrency);
}
else {
Currency.currentCurrency = defaultCurrency;
}
}
// If the cookie value does not correspond to any value in the currency dropdown.
else if ($currencySelector.length && $currencySelector.find('option[value=' + cookieCurrency + ']').length === 0) {
Currency.currentCurrency = shopCurrency;
Currency.cookie.write(shopCurrency);
}
else if (cookieCurrency === shopCurrency) {
Currency.currentCurrency = shopCurrency;
}
else {
Currency.convertAll(shopCurrency, cookieCurrency);
}
$currencySelector.val(Currency.currentCurrency).change(function() {
var newCurrency = $(this).val();
Currency.convertAll(Currency.currentCurrency, newCurrency);
jQuery('.selected-currency').text(Currency.currentCurrency);
});
var original_selectCallback = window.selectCallback;
var selectCallback = function(variant, selector) {
original_selectCallback(variant, selector);
Currency.convertAll(shopCurrency, $currencySelector.val());
jQuery('.selected-currency').text(Currency.currentCurrency);
};
function convertCurrencies() {
if($currencySelector.val() && $currencySelector.val() != $currencySelector.data('default-shop-currency')) {
Currency.convertAll($currencySelector.data('default-shop-currency'), $currencySelector.val());
jQuery('.selected-currency').text(Currency.currentCurrency);
}
}

</script>

谢谢

Answer 1

您可以通过 302 重定向到特定于货币的新 URL 来实现此目的。但是您可能会更乐意设置一个cookie，然后根据该cookie选择当前货币。

Answer 2

也许在函数 convertCurrencies 结束时调用 onFlagChange($currencySelector.val((( - 页面加载后货币会发生变化，因此它以不同的 img src 开头。 可能 .change(( 没有触发 onchange 侦听器。

请原谅任何愚蠢的格式，在平板电脑上打字很特别......

Answer 3

好吧，这不是最干净的方法，但它不适用于页面更改的原因是因为该事件仅在做出选择后触发。此外，src 网址不是持久性的。您还需要一个在加载时触发的事件。

function onFlagChange(userSelection){
var newUrl;
if(!userSelection) { // NEW CODE
userSelection = $('#currencies').find(":selected").text();
}
var optionUrl =
[
{key:"USD",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/USD.png?13296612461826194053"},
{key:"GBP",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/GBP.png?11949257934149418133"},
{key:"EUR",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/EUR.png?11949257934149418133"},
{key:"ILS",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/ILS.png?11949257934149418133"},
{key:"RUB",value:"https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/RUB.png?11949257934149418133"}
]
var pick = optionUrl.find(function(e) { return e.key === userSelection; });
if (pick) {
newUrl = pick.value;
}
$('#flags').attr('src',newUrl);
}

然后添加一个jQuery onLoad事件，或者把它放在主体的DOM中，或者像这样选择

<select id="currencies" onload="onFlagChange(false)">