FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

DOMのカスタマイズがうまくできません

解決済

DOMのカスタマイズがうまくできません

jarinkogirl
観光客
7 1 1

https://shopify.github.io/buy-button-js/advanced#customizing-the-dom

こちらを参考に、BuyButtonで出力したコレクションにカスタマイズをしようとしているのですが、何も出力されません。

記述が間違っているのでしょうか?

どなたか、ご教授、お願いいたしますm(_ _)m

Screenshot at Mar 26 11-38-29.png

1 件の受理された解決策

jarinkogirl
観光客
7 1 1

成功

自己解決いたしました。

以下の記述を追加したら、表示されました。

(orderに'details'を加えました。)

"templates": {
                              "details": '<div id="{{data.title}}">' +
                                '<span class="{{data.classes.product.price}}">{{data.selectedVariant.price}}</span>' +
                                '<div class="{{data.classes.product.description}}">{{data.description}}</div>' +
                              '</div>'
                            },
                            "classes": {
                              "details": 'product-details',
                            },
                            "styles": {
                              "details": {
                                'background-color': 'grey'
                              }
                            },
                            "order": [
                              'img',
                              'title',
                              'price',
                              'options',
                              'quantity',
                              'button',
                              'details'
                            ],

元の投稿で解決策を見る

1件の返信1

jarinkogirl
観光客
7 1 1

成功

自己解決いたしました。

以下の記述を追加したら、表示されました。

(orderに'details'を加えました。)

"templates": {
                              "details": '<div id="{{data.title}}">' +
                                '<span class="{{data.classes.product.price}}">{{data.selectedVariant.price}}</span>' +
                                '<div class="{{data.classes.product.description}}">{{data.description}}</div>' +
                              '</div>'
                            },
                            "classes": {
                              "details": 'product-details',
                            },
                            "styles": {
                              "details": {
                                'background-color': 'grey'
                              }
                            },
                            "order": [
                              'img',
                              'title',
                              'price',
                              'options',
                              'quantity',
                              'button',
                              'details'
                            ],