商品一覧ページ以外にもカートボタンを表示させたい

日本語 ディスカッション 技術的なQ＆A

AI-generated summary

WordPress上でShopifyのBuy Buttonを使い、どのページでもヘッダーから「カートを見る」ボタンを押すと右側にスライドカートを表示したい、という相談。添付画像はヘッダー常設のカートボタンのイメージとして使われている。\n\n- 1つの見解では、Buy Button標準機能だけでは難しく、BuyButton.jsのカスタマイズで対応できなければStorefront APIを使った独自実装が必要。\n- 具体策として、WordPressのheader.phpに空のDIVを置き、Buy Buttonのtoggle設定でafterRender時にその要素へカートトグルを移動する方法が提示された。iframe:falseやsticky:falseの設定例、件数・アイコン表示の指定も共有されている。\n\n未解決点は、Buy Buttonが特定の商品またはコレクションに紐づく仕様のため、ヘッダーに置けても「商品全般に対する汎用カート」としてニーズを満たすかが不明なこと。結論として、実装案は出たが、要件に完全適合するかは引き続き確認が必要。

1

wordpressにコレクションをBuyButtonで埋め込んでいます。

どのページに行っても、カートボタンをヘッダーに常に配置したいのですが、

何か方法はありますでしょうか？

検討がつかず、どなたかご助言いただけますと幸いです。

（挙動としては、どのページにおいても、「カートを見る」ボタンを押すと、

右からカートがスライドで表示（デフォルトの表示のされ方）にしたいと思っています）

Screenshot at Mar 23 19-09-56.png
Screenshot at Mar 23 19-09-56.png2164×926 179 KB

2

おそらくBuyButtonの範疇ではできないと思います。

以下にBuyButton.jsの仕様があるので、ここで書いてあるカスタマイズでできれば可能ですが、できない場合は、Storefront APIなど使って自作するしかないと思います。

https://shopify.github.io/buy-button-js/

3

header.phpに空のDIVを用意します。

例えば id=“shopify-toggle-box” とします。

購入ボタンのJSに “toggle”: {} の部分がありますが、それを以下に変えたらできました。

CSSはWP側で適宜つけます。

"toggle": {
    "iframe":false,
    "sticky":false,
    "contents":{
      "count": true,
      "icon": true,
      "title": false
    },
    "text":{},
    "events": {
        afterRender: function (component) {
          document.getElementById('shopify-toggle-box').appendChild(component.node);
        },
    }
  },
4

ご回答ありがとうございます。

ちなみに、BuyButtonは、どれかの商品か、コレクションに対しての指定になると思うので、ヘッダーに固定で表示できても、内容は特定の商品かコレクションになるかと思うのですが、それはニーズにあっていますか？（商品全般の汎用的なカート機能は提供していなかったと思います）