カートドロワーが自動的に更新されない
概要
この記事では、商品カートを追加してもカートドロワー（カートアイコン）が自動更新されない PageFly ページの問題について説明します。これは、お客様が「カートに追加」ボタンをクリックしても、ストアのテーマのカートドロワーが、商品が自動的に更新される代わりに静的なままになることを意味します。
基本的に、PageFly は Shopify テーマとうまく連携します。ただし、一部のテーマ、特にカートの仕組みが PageFly と競合する場合、カートドロワーが自動的に更新されないことがあります。
修正方法
この問題を修正するには、以下の手順に従ってください。
Shopify 管理画面 > オンラインストア > テーマに移動します。
現在のテーマで > カスタマイズをクリックします。
左側のサイドバーで、アプリ埋め込みをクリックします。
PageFly Theme Helper の横にあるチェックボックスをオンにします。
保存をクリックします。
これにより、Shopify テーマの 60% で問題が修正されます。問題が解決しない場合は、以下の特定のテーマ向けソリューションを確認してください。テーマがリストにない場合は、サポートチームにお問い合わせください。
詳細については、以下のビデオチュートリアルをご確認ください。
PageFly Theme Helper が機能しない場合の修正方法
まず、Shopify 管理画面のテーマファイルにアクセスする必要があります。
Shopify 管理画面 > オンラインストア > テーマ > コードを編集に移動します。
Narrative テーマ
Narrative テーマでは、theme.liquid ファイル内に必要なコードを追加するだけです。
Venue テーマ
Venue テーマでは、theme.liquid ファイル内に必要なコードを追加するだけです。
Turbo テーマ
app.js.liquid ファイルに移動し、refreshCart を検索します。
このビデオのように window.refreshCart を追加します。
app.js.liquid ファイルで add.js を検索し、このビデオのようにその下のコードをコピーします。
カートに追加機能が機能するように、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 テーマ
テーマの javascript ファイルに移動し、ajaxCart を見つけます。
var ajaxCart = window.ajaxCart のように、ajaxCart の後に window.ajaxCart を追加します。
theme.liquid にこのコードを追加します。
Porto テーマ
Porto テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。
Cospora テーマ
Cospora テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。
Flex テーマ
Flex テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。
Grid テーマ
Grid テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。
Galleria テーマ
Galleria テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。
Debutify & Palo Alto テーマ
Debutify テーマでは、以下の手順に従ってください。
theme.js.liquid ファイルに移動し、theme.ajaxCart、ajaxify、ajaxCart を検索します。
ライブビューでこのキーワードを使って、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 テーマ
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 ファイルに追加する必要があります。
Last updated
Was this helpful?