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

日本語 ディスカッション 技術的なQ＆A
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);
        },
    }
  },
1 Like
4

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

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