Question

www.womenpalace.com

你好：）

我试图在我的货币转换器旁边添加Flags图片。

这是转换器代码：

＆＃13;

<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>

＆＃13;

当我选择不同的货币时，我制作了一些JavaScript代码来强制IMG变形

＆＃13;

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);
    }

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

这是整个系统：

＆＃13;

<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>

＆＃13;

由于

Answer 1

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

Answer 2

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

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

Answer 3

这不是最干净的方法，但是它没有处理页面更改的原因是因为事件仅在选择后触发。 src url也不是持久的。您还需要一个在加载时触发的事件。

＆＃13;

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);
    }

＆＃13;

然后添加一个jQuery onLoad事件或将其放在body上的DOM中或选择这样

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

尝试将Flags添加到货币转换器

3 个答案: