カートドロワーが自動的に更新されない

概要

この記事では、商品カートを追加してもカートドロワー(カートアイコン)が自動更新されないarrow-up-right PageFly ページの問題について説明します。これは、お客様が「カートに追加」ボタンをクリックしても、ストアのテーマのカートドロワーが、商品が自動的に更新される代わりに静的なままになることを意味します。

基本的に、PageFly は Shopify テーマとうまく連携します。ただし、一部のテーマ、特にカートの仕組みが PageFly と競合する場合、カートドロワーが自動的に更新されないことがあります。

修正方法

この問題を修正するには、以下の手順に従ってください。

  • Shopify 管理画面 > オンラインストア > テーマに移動します。

  • 現在のテーマで > カスタマイズをクリックします。

  • 左側のサイドバーで、アプリ埋め込みをクリックします。

  • PageFly Theme Helper の横にあるチェックボックスをオンにします。

  • 保存をクリックします。

これにより、Shopify テーマの 60% で問題が修正されます。問題が解決しない場合は、以下の特定のテーマ向けソリューションを確認してください。テーマがリストにない場合は、サポートチームにお問い合わせください。

circle-info

注: テーマ名を変更した場合、元のテーマ名を知っている必要があります。

詳細については、以下のビデオチュートリアルをご確認ください。

PageFly Theme Helper が機能しない場合の修正方法

まず、Shopify 管理画面のテーマファイルにアクセスする必要があります。

Shopify 管理画面 > オンラインストア > テーマ > コードを編集に移動します。

circle-info

注: 各テーマによって、この問題を修正するためのコードは異なります。お使いのテーマのコードは以下のリストにあります。

Narrative テーマ

Narrative テーマでは、theme.liquid ファイル内に必要なコードarrow-up-rightを追加するだけです。

Venue テーマ

Venue テーマでは、theme.liquid ファイル内に必要なコードarrow-up-rightを追加するだけです。

Turbo テーマ

  1. app.js.liquid ファイルに移動し、refreshCart を検索します。

  2. このビデオarrow-up-rightのように window.refreshCart を追加します。

  3. app.js.liquid ファイルで add.js を検索し、このビデオarrow-up-rightのようにその下のコードをコピーします。

  4. カートに追加機能が機能するように、theme.liquid ファイルの window.__pagefly_helper_store コード内に、上記でコピーしたコードをこのビデオarrow-up-rightのように追加します。

Dawn - Origin - Taste - Craft - Refresh - Sense Theme Popup Notification

Dawn テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

注: コード内の「View my cart」というテキストは、ストアの言語に合わせて変更する必要があります。

Dawn - Origin - Taste - Craft - Refresh - Sense Theme New Version With Cart Drawer

Dawn - カートドロワーでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Blockshop テーマ

Blockshop テーマでは、theme.liquid ファイル内に必要なコードarrow-up-rightを追加するだけです。

Boundless テーマ

  1. テーマの javascript ファイルに移動し、ajaxCart を見つけます。

  2. var ajaxCart = window.ajaxCart のように、ajaxCart の後に window.ajaxCart を追加します。

  3. theme.liquid にこのコードarrow-up-rightを追加します。

Porto テーマ

Porto テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Cospora テーマ

Cospora テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Flex テーマ

Flex テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Grid テーマ

Grid テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Galleria テーマ

Galleria テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Debutify & Palo Alto テーマ

Debutify テーマでは、以下の手順に従ってください。

  1. theme.js.liquid ファイルに移動し、theme.ajaxCart、ajaxify、ajaxCart を検索します。

  2. ライブビューでこのキーワードを使って、load 関数または update 関数があるかどうかを確認します。

例: theme.ajaxCart.update() または ajaxCart.load()

上記のキーワードのいずれかがある場合は、theme.liquid ファイルにこのコードarrow-up-rightを追加します。

こちらにチュートリアルリンクがありますこちらarrow-up-right

上記ガイドに従っても機能せず、カートドロワーが空白になる場合

このコードarrow-up-rightを追加してください。

Avone テーマ

Avone テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Showtime テーマ

Showtime テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Rebranding テーマ

Rebranding テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Envy テーマ

Envy テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Basel テーマ

Basel テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Ella テーマ

Ella テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Lusion テーマ

Lusion テーマでは、ソリューションについてはこちらのリンクこちらarrow-up-rightをご確認ください。

Atlantic テーマ

Atlantic テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Motion テーマ

Motion テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Maker テーマ

Maker テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Debut テーマ

Debut テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

注: このコードをテーマに追加しても機能しない場合があります。ライブビューで console.log() を開き、何かエラーが出ていないか確認できます。「$ is not define…」というエラーが表示される場合、この行を theme.liquid ファイルにコピー&ペーストする必要があります。

Express テーマ

Express テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Impulse テーマ

Impulse テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

上記のコードが機能しない場合は、代わりにこのコードarrow-up-rightを追加してみてください。

Wokiee テーマ

Wokiee テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

ABZ - Icon

ABZ - Icon では、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Streamline テーマ

Streamline テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Bold-Movivatior

Bold-Movivatior テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Brooklyn テーマ

Brooklyn テーマでは、ソリューションについてはこのビデオarrow-up-rightをご確認ください。

上記ガイドに従っても機能せず、カートドロワーが空白になる場合

このコードarrow-up-rightを追加してください。

Lorenza テーマ

Lorenza テーマでは、テーマが縮小されていないことを確認する必要があります。

ソリューションについては、このビデオarrow-up-rightをご確認ください。

Kalles テーマ

Kalles テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Prestige - Warehouse テーマ

Prestige または Warehouse テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

上記のコードが機能しない場合は、代わりにこのコードarrow-up-rightを追加してください。

EcomSolid

EcomSolid テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Focal

Focal テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Focal 8.10

Focal 8.10 テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Retina

  • ステップ 1: retina.js のコードを更新します。

Slate テーマ

ソリューションについては、このビデオarrow-up-rightの説明に従ってください。

Expanse テーマ

ソリューションについては、このビデオarrow-up-rightの説明に従ってください。

Custom Theme (minimog)

theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

MeroxIO Custom Theme

ソリューションについては、このビデオarrow-up-rightに従ってください。

Showcase テーマ

Showcase テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Lorenza テーマ

ソリューションについては、このビデオarrow-up-rightに従ってください。

MODULAR テーマ

MODULAR テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Electro - Zeexo テーマ

ステップ 1: テーマコードで bc.script.js.liquid を検索して開きます。

ステップ 2: AT_AddCart を検索し、このビデオのリンクarrow-up-rightのように window に移動します。

ステップ 3: theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Boost テーマ

Boost テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Reach

Reach テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

District テーマ

ソリューションについては、このビデオarrow-up-rightに従ってください。

Vela テーマ

  • ステップ 1: vela.js のこの関数を window に移動し、コードヘルパーを追加しました。

Pipeline, Testament テーマ

  • ステップ 1: まず cartUpdateCallback を window に移動します。

Shella テーマ

Shella Theme Version 5.0.1

Shella Theme 5.0.1 では、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Prestige Theme - Warehouse

Prestige テーマ - Warehouse (一部のバージョンのみ) では、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Lammer Theme 4.0.0

Lammer theme 4.0.0 では、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Warehouse 2.5.2 Theme

Warehouse 2.5.2 テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Turboant Theme

Turboant テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Broadcast Theme

Broadcast テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Be Yours 4.1.0 Theme

Be Yours 4.1.0 テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Solodrop-2.4.0 Theme

Solodrop-2.4.0 テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

Pop version 3.0.4 Theme

Pop version 3.0.4 テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

詳細については、このビデオガイドarrow-up-rightをご覧ください。

Flow version 16.3.1 Theme

Flow version 16.3.1 テーマでは、theme.liquid ファイルにこのコードarrow-up-rightを追加してください。

詳細については、このビデオガイドarrow-up-rightをご覧ください。

ヒントとベストプラクティス

すべてのテーマで、この同じコードarrow-up-rightが必要です。

お使いのテーマが上記リストにない場合は、テーマプロバイダーに独自のテーマコードを依頼し、以下のデモのように赤い枠内のコードを更新してもらうよう依頼してください。

このコードも theme.liquid ファイルに追加する必要があります。

Last updated

Was this helpful?