FROM CACHE - jp_header

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

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

roxamme
訪問者
2 0 0

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

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

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

1件の返信1

Qcoltd
Shopify Partner
1061 436 430

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

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

 

まず、

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

セクション (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が表示されてから、現地通貨の金額に切り替わります。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/