告知バーをカスタマイズして「送料無料バー」を実装する方法

はじめに このカスタマイズ方法はDawn（12.0.0）をベースに紹介しておりますので、他テーマはもちろん、Dawnのバージョン違いでは構造が異なります。 ご利用テーマの構造を理解した上で、自己責任で実装してください。 他テーマや他バージョンでの実装方法についての質問は一切受け付けませんので、予めご了承ください。 準備 商品追加時やカートの数量変更時のイベントを制御するJSファイルをテーマのアセット内から探します。 Dawn（12.0.0）の場合は以下が該当します。

商品追加時 product-form.js

数量変更時 cart.js

これらのファイル内に以下のイベントをトリガーする1行を追加します。 document.dispatchEvent(new Event('cart:update')); 商品追加時の「product-form.js」は以下を参考にイベントトリガーを挿入してください。 if (!customElements.get('product-form')) { customElements.define( 'product-form', class ProductForm extends HTMLElement { //省略 onSubmitHandler(evt) { //省略 .then((response) => response.json()) .then((response) => { //省略 document.dispatchEvent(new Event('cart:update')); }) //省略 } //省略 ); } 数量変更時の「cart.js」は以下を参考にイベントトリガーを挿入してください。 class CartItems extends HTMLElement { // 省略 updateQuantity(line, quantity, name, variantId) { // 省略 fetch(`${routes.cart_change_url}`, { ...fetchConfig(), ...{ body } }) .then((response) => { return response.text(); }) .then((state) => { // 省略 publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items', cartData: parsedState, variantId: variantId }); document.dispatchEvent(new Event('cart:update')); }) // 省略 } // 省略 } Dawnのバージョン違いの場合はほぼ同じ構造ですが、微妙にコードが異なりますのでご注意ください。基本的にfetch内に挿入すれば「cart:update」イベントが発生するはずです。 スニペットファイルを追加 「新しいスニペットを追加する」より「free-shipping-announce.liquid」を新規作成し、以下のLiquidコードを貼り付けます。 {%- liquid assign free_shipping_price = free_shipping_price | times: 100 assign free_shipping_price_money = free_shipping_price | money assign remaining_price_money = free_shipping_price | minus: cart.total_price | money -%}

{%- liquid if cart.empty? echo message1 | replace: '{price}', free_shipping_price_money else if cart.total_price >= free_shipping_price echo message2 else echo message3 | replace: '{price}', remaining_price_money endif endif -%}

{%- if block.settings.link != blank -%} {%- endif -%} {%- endif -%} {%- when 'shipping-announce' -%} {% render 'free-shipping-announce', free_shipping_price: block.settings.free_shipping_price, message1: block.settings.message1, message2: block.settings.message2, message3: block.settings.message3 %}

{%- endcase -%} {%- endfor -%} スライド用も同様に タグ内（ハイライト部分）を編集します。 {%- elsif section.blocks.size > 1 -%} {% render 'icon-caret' %} {%- for block in section.blocks -%} <div class="slideshow__slide slider__slide grid__item grid--1-col" id="Slide-{{ section.id }}-{{ forloop.index }}" {{ block.shopify_attributes }} role="group" aria-roledescription="{{ 'sections.announcements.announcement' | t }}" aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}" tabindex="-1" > {%- case block.type -%} {%- when 'announcement' -%} {%- if block.settings.text != blank -%} {%- if block.settings.link != blank -%} {%- endif -%} {{ block.settings.text | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}

{%- if block.settings.link != blank -%} {%- endif -%} {%- endif -%} {%- when 'shipping-announce' -%} {% render 'free-shipping-announce', free_shipping_price: block.settings.free_shipping_price, message1: block.settings.message1, message2: block.settings.message2, message3: block.settings.message3 %}

{%- endcase -%} {%- endfor -%} {% render 'icon-caret' %} {%- if request.design_mode -%} {%- endif -%} {%- endif -%} 以上でテーマ編集は完了です。 設定 管理画面よりカスタマイザーを開き「告知バー」セクションに「送料案内」ブロックを追加します。

続いてブロック設定の編集画面を開き、ストアに合わせて「送料無料対象価格」や各メッセージを編集し保存してください。

メッセージ内はHTMLタグが使えますので、価格部分の色を変えたり装飾も可能です。 最後にテーマプレビューなどで、動作や出力に問題がないか検証してください。検証項目は以下の通りです。

カートページの数量変更時 商品ページの商品追加時 ホームやコレクション、検索結果ページ等のクイック追加時

カートにアイテムが追加されました

告知バーをカスタマイズして「送料無料バー」を実装する方法

客単価向上におすすめ！簡単なカスタマイズで「送料無料バー」が実装できます。

2024年9月

2024年10月