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

概要

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

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

修正方法

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

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

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

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

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

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

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

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

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

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

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

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

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

Narrative テーマ

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

Venue テーマ

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

Turbo テーマ

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

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

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

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

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

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

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

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

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

Blockshop テーマ

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

Boundless テーマ

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

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

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

Porto テーマ

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

Cospora テーマ

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

Flex テーマ

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

Grid テーマ

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

Galleria テーマ

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

Debutify & Palo Alto テーマ

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

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

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

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

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

こちらにチュートリアルリンクがありますこちら。

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

このコードを追加してください。

Avone テーマ

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

Showtime テーマ

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

Rebranding テーマ

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

Envy テーマ

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

Basel テーマ

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

Ella テーマ

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

Lusion テーマ

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

Atlantic テーマ

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

Motion テーマ

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

Maker テーマ

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

Debut テーマ

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

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

Express テーマ

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

Impulse テーマ

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

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

Wokiee テーマ

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

ABZ - Icon

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

Streamline テーマ

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

Bold-Movivatior

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

Brooklyn テーマ

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

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

このコードを追加してください。

Lorenza テーマ

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

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

Kalles テーマ

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

Prestige - Warehouse テーマ

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

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

EcomSolid

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

Focal

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

Focal 8.10

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

Retina

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

• ステップ 2: theme.liquid でこのコードを使用します。

Slate テーマ

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

Expanse テーマ

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

Custom Theme (minimog)

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

MeroxIO Custom Theme

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

Showcase テーマ

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

Lorenza テーマ

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

MODULAR テーマ

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

Electro - Zeexo テーマ

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

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

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

Boost テーマ

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

Reach

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

District テーマ

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

Vela テーマ

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

• ステップ 2: theme.liquid ファイルにこのコードを追加します。

Pipeline, Testament テーマ

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

• ステップ 2: theme.liquid ファイルにこのコードを追加します。

Shella テーマ

• ステップ 1: ソリューションについては、このビデオに従ってください。

• ステップ 2: theme.liquid ファイルにこのコードを追加します。

Shella Theme Version 5.0.1

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

Prestige Theme - Warehouse

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

Lammer Theme 4.0.0

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

Warehouse 2.5.2 Theme

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

Turboant Theme

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

Broadcast Theme

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

Be Yours 4.1.0 Theme

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

Solodrop-2.4.0 Theme

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

Pop version 3.0.4 Theme

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

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

Flow version 16.3.1 Theme

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

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

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

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

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

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