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

jarinkogirl
観光客
7 1 1

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

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

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

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

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

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

Screenshot at Mar 23 19-09-56.png

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1076 248 418

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

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

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

 

Technical Partner Manager, Japan
0 件の「いいね!」
nyabuson
新規メンバー
1 0 1

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);
        },
    }
  },

 

junichiokamura
Community Manager
Community Manager
1076 248 418

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

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

Technical Partner Manager, Japan
0 件の「いいね!」