告知バーの送料設定に関してご質問

[roxamme]

告知バーの送料設定に関してご質問です。

海外向けに販売してます、ホームの告知バーに送料を表記したいのですが、送料3000円に設定した場合、ドルで告知バーに表記したいのです。為替も日々変わるので、送料設定をドルで設定する方法はありますか？

サポートセンター問い合わせましたが、為替等と連動して表記する事は残念ながらShopifyの標準機能では叶いません。との事でした。

[Qcoltd]

最初に、本回答の最後の「注意点」からご覧いただいた方が良いです。

「注意点」に問題がない場合、下記のようなカスタマイズを行います。

まず、

ストア管理画面 > オンラインストア > 利用中のテーマの「コード編集」から、

セクション (sections) > announcement-bar.liquidを開き、下記のコードを見つけます。

 "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },

上記の、

"type": "text",

 を、

"type": "html",

に変更します。

さらに、

セクション (sections) > announcement-bar.liquidから

              <div class="page-width">
                <p class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.text | escape }}
                  {%- if block.settings.link != blank -%}

というコードを探し、

{{ block.settings.text | escape }}

を

{{ block.settings.text }}

に変更します。

これで、

告知バーのテキストにHTMLを入力することができるようになりましたので、

ストア管理画面 > オンラインストア > 利用中のテーマの「カスタマイズ」から、

告知バーのテキストに、3000円を下記のように入力します。

(この時点では通貨単位は付けません。後ほどJavaScriptで付与します。)

<span class="js-adjust-price">3000</span>

そうしましたら、

下記のコードを、

セクション (sections) > announcement-bar.liquid

の最終行に追加します。

<script>
window.addEventListener('load', (event) => {
  const originalPriceElement = document.querySelector('.js-adjust-price');

  const originalPrice = originalPriceElement.textContent;
  const ratedPrice = originalPrice * Shopify.currency.rate;

　　　　const f = new Intl.NumberFormat(Shopify.locale + '-' + Shopify.country
, {
    style: 'currency',
    currency: Shopify.currency.active
　　　　});

  const ratedPriceWithCurrency = f.format(ratedPrice);
  originalPriceElement.textContent　= ratedPriceWithCurrency;
});
</script>

注意点

• 前提として、ShopifyのGEOLOATIONアプリや、国(通貨)セレクター/言語セレクターで、通貨や言語を切り替えている場合のみ動作します。
• 十分に検証していないため、不具合がある可能性があります。
• 通貨によっては金額がズレる可能性があります。
• CSSなどで表示調整を行わないと、一瞬3000が表示されてから、現地通貨の金額に切り替わります。

ご参考まで。

(キュー田辺)