概要

一部のテーマではアイコンが自動的に更新されません。このガイドでは、少しのカスタムコードを使ってこの問題を修正する方法を説明します。以下の手順に従って、すべてが正しく同期されるようにしましょう。 この不一致がどのように見えるかの例です:

開始前の重要なステップ！

カートアイコンの問題を修正するには、カートアイコンのクラス名を特定する必要があります。テーマはそれぞれ異なるため、このステップにより、コードがあなたのストアに合わせて確実に動作するようになります。

1. Chrome Developer Toolsを使用する

テーマはそれぞれ異なるため、Chrome Developer Tools（検証）を使用してカートアイコンのクラス名を特定する必要があります。

Google Chromeで、ストアフロント上のカートアイコンを右クリックし、検証を選択します。
カートアイコンのHTML要素を見つけます（例: <span class="cart-count-bubble">）。
Chrome Developer Toolsの使い方でお困りですか？ ステップバイステップの手順については、こちらのガイドをご覧ください。

2. サポートを求める（任意）

カートアイコンのクラスが見つからなかったり、行き詰まったりしても、心配はいりません！選択肢があります:

テーマの開発者に連絡する: テーマを最もよく知っているのは開発者であり、正しいクラスを見つける手助けをしてくれます。
Shopify Expertを雇う: 追加のサポートが必要な場合、Shopifyには信頼できるエキスパートのディレクトリがあります。Shopify Expertはこちらから探せます。

🚧 カスタムコードに関する免責事項

以下に示すサンプルコードはテンプレートに過ぎず、そのままコピー＆ペーストしても動作しません。プレースホルダーのクラス名（例: .cart-count-bubble > span）を、あなたのカートアイコンの特定のクラス名に置き換える必要があります。

ステップバイステップの修正

このプロセスは、最もシンプルな解決策（レベル1）から始まる3段階の修正レベルに分かれています。各レベルは前のレベルを基にしています。まずレベル1を試し、必要な場合にのみレベル2または3に進んでください。

ステップ1: Upcartでカスタムコードを追加する

まず、UpcartエディターにカスタムHTMLコードを追加する必要があるため、そのセクションを準備しましょう:

Upcart Editor > Settings に移動し、Custom HTML タブを開きます（タブの列に収まらない場合は More settings の中にあります）。
場所を Scripts (Before Load) に設定します。
編集したコードをここに貼り付けます（各レベルの例を以下に示します）。

このようになります:

HTMLの場所がScripts Before Loadに設定されたUpcartのCustom HTML設定

ステップ2: レベルごとに修正を適用する

レベル1（基本）

カートが読み込まれると、このスクリプトはカートのラインアイテムの数量を合計し、その値をテーマのカートバブル内のカウント要素に書き込みます。カウントがシンプルなネストされた要素（たとえば .cart-count-bubble > span）にあるテーマに適しています。 お忘れなく

.cart-count-bubble > span をあなたのカートアイコンのクラスに置き換えてください。
コードを追加した後、ストアフロントでテストしてください。

cart-count-bubbleセレクターを使用してレベル1のカウントスクリプトをUpcartのCustom HTMLに貼り付ける様子

レベル1のサンプルコード

<script>  
window.upcartSubscribeCartLoaded((event) => {  
    const countEl = document.querySelector('.cart-count-bubble > span');  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    countEl.innerText = itemCount;  
});  
</script>

レベル2（中級）

レベル1で解決しなかった場合、テーマがカウントの変更時にカートアイコンのHTML全体を置き換えている可能性があります。このバージョンは、カートが空の状態と空でない状態のアイコンのマークアップを再構築し、カウントとアイコンが同期し続けるようにします。 お忘れなく

#cart-icon-bubble-custom を、あなたのテーマのカートアイコンのラッパーセレクターに置き換えてください。
保存後にテストしてください。

レベル2のサンプルコード

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    const iconWrapperEl = document.querySelector('#cart-icon-bubble-custom');  
    if (itemCount === 0) {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

レガシーに関する注意: window.upcartOnCartLoaded のコールバックは引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて upcartSubscribeCartLoaded を使用してください。なお、event.cart には item_count プロパティはありません。上記のスクリプトは event.cart.items.reduce((total, item) => total + item.quantity, 0) で合計を算出し、それを itemCount として渡しています。cart.item_count を埋め込む古いバージョンのスニペットは ReferenceError をスローし、アイコンが更新されないまま気づかれない状態になります。

レベル3（上級）

テーマがデスクトップとモバイルで別々のカートアイコンのマークアップを使用している場合は、同じ更新ロジックを2つのセレクターに対して実行し、各ビューポートで正しいHTMLとカウントが表示されるようにします。 お忘れなく

#cart-icon-bubble-custom-desktop と #cart-icon-bubble-custom-mobile を、あなたのテーマのクラスに置き換えてください。
デスクトップとモバイルの両方のビューで十分にテストしてください。

デスクトップとモバイルで別々のカートアイコンセレクターを使用してレベル3のスクリプトをUpcartのCustom HTMLに貼り付ける様子

レベル3のサンプルコード

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    // Desktop  
    const desktopIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-desktop');  
    if (itemCount === 0) {  
        desktopIconWrapperEl.innerHTML = `<span>Cart</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span>`;  
    } else {  
        desktopIconWrapperEl.innerHTML = `<span>Cart (${itemCount})</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span>`;  
    }  
  
    // Mobile  
    const mobileIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-mobile');  
    if (itemCount === 0) {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

まだ解決しませんか？

これらのレベルのいずれでも問題が解決しない場合でも、心配はいりません。まだ選択肢はあります！これはおそらく、テーマにより高度なカスタマイズが必要であることを意味します。 次にできることは以下のとおりです:

テーマの開発者にサポートを依頼する。
あなたのストアに合わせたカスタムソリューションを作成できる Shopify Expert を雇う。

はじめに

カートモジュール

カート設定

スティッキーカートボタン

Multicart

カスタマイズ

アナリティクス

連携と互換性

請求とアカウント

トラブルシューティング

カートアイコンの数量/カウンターが更新されない

概要

開始前の重要なステップ！

1. Chrome Developer Toolsを使用する

2. サポートを求める（任意）

🚧 カスタムコードに関する免責事項

ステップバイステップの修正

ステップ1: Upcartでカスタムコードを追加する

ステップ2: レベルごとに修正を適用する

レベル1（基本）

レベル1のサンプルコード

レベル2（中級）

レベル2のサンプルコード

レベル3（上級）

レベル3のサンプルコード

まだ解決しませんか？

​概要

​開始前の重要なステップ！

​1. Chrome Developer Toolsを使用する

​2. サポートを求める（任意）

​🚧 カスタムコードに関する免責事項

​ステップバイステップの修正

​ステップ1: Upcartでカスタムコードを追加する

​ステップ2: レベルごとに修正を適用する

​レベル1（基本）

​レベル1のサンプルコード

​レベル2（中級）

​レベル2のサンプルコード

​レベル3（上級）

​レベル3のサンプルコード

​まだ解決しませんか？

概要

開始前の重要なステップ！

1. Chrome Developer Toolsを使用する

2. サポートを求める（任意）

🚧 カスタムコードに関する免責事項

ステップバイステップの修正

ステップ1: Upcartでカスタムコードを追加する

ステップ2: レベルごとに修正を適用する

レベル1（基本）

レベル1のサンプルコード

レベル2（中級）

レベル2のサンプルコード

レベル3（上級）

レベル3のサンプルコード

まだ解決しませんか？