私はしばらくの間、この答えを探していて、何も見つかりませんでした。メタフィールドやメタデータがShopify Buy Button製品に含まれているかどうかは誰にも知られていますか?shopify buybutton.jsでメタフィールド/メタデータを使用できますか?
背景 - Shopifyアプリケーション「製品レビュー」がインストールされ、サイトで頻繁に使用されているShopifyサイトがあります。 Shopify Buy Buttonコードを使用して、そのサイトに固有のいくつかの製品を追加するセカンダリサイト(WordPress)があります(Shopifyストアのいくつかのコレクション)。購入ボタンで設定した商品のモーダルポップアップに商品レビューを追加します。レビューのデータはproduct.metafields.spr.reviews
に保存されています。
購入ボタン埋め込みコードにカスタムテンプレートとクラスを追加してカスタムスタイルの外観にしましたが、私にとっては製品のメタデータを取得することが可能かどうかはわかりません。私はWordPressに慣れ親しんでいますので、私たちが必要とするページに商品やコレクションを追加する自動化された方法を作りました。また、ページに商品やコレクションを表示するときに購入ボタンのコードが追加されます。したがって、コードをカスタマイズすることは問題ではありません。
APIを使用して製品のメタデータを取得してポップアップに挿入することもできますが、それは余分な作業のように思えますし、より良い解決策がある場合はそのパスを控えてください。
ui.createComponent
を使用する方法はありますか?もしそうなら、それをコードにどのように追加しますか?ここで
は、参照用のコードの一部(いくつかのPHP変数はそれであるので、それがPHPを介して出力される)されています
ui.createComponent('collection', {
id: <?php echo $idkey; ?>, // collection id
node: document.getElementById('collection-component-<?php echo $idval['hash'];?>'), //collection unique hash
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"iframe": false,
"buttonDestination": "modal",
"variantId": "all",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"options": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"events":{
"openModal": function (product) { /* debug only */ },
},
"text": {
"button": "VIEW PRODUCT INFO",
},
},
"cart": {
"contents": {"button": true},
"styles": {
"button": {
"background-color": "#761b79",
"font-family": "Droid Sans, sans-serif",
":hover": {"background-color": "#6a186d"},
":focus": {"background-color": "#6a186d"},
"font-weight": "normal"
},
"footer": {"background-color": "#ffffff"}
},
"googleFonts": ["Droid Sans"]
},
"modalProduct": {
"iframe": false,
"layout": "horizontal",
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": true,
"buttonWithQuantity": true,
"button": false,
"quantity": false,
"reviews": true
},
"DOMEvents": {
'click .product-reviews': function (evt, target) { /* debug code only */}
},
"templates": {
"title" : '<h1 class="{{data.classes.modalProduct.title}}" data-element="product.title">{{data.title}}</h1>',
"reviews": '<div class="{{data.classes.product.reviews}}">[ review data goes here ]</div>'
},
"classes": {
"reviews" : "product-reviews"
},
"order" :[
"imgWithCarousel",
"title",
"price",
"buttonWithQuantity",
"reviews",
"description"
],
"styles": {
"button": {
"background-color": "#761b79",
"font-family": "Droid Sans, sans-serif",
":hover": {"background-color": "#6a186d"},
":focus": {"background-color": "#6a186d"},
"font-weight": "normal"
},
"reviews" : {
"color" : "#444"
}
},
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Droid Sans, sans-serif",
"background-color": "#761b79",
":hover": {"background-color": "#6a186d"},
":focus": {"background-color": "#6a186d"},
"font-weight": "normal"
}
},
"googleFonts": ["Droid Sans"]
},
"productSet": {"iframe": false,}
}
});
ありがとうございます。それが私が探していたものです。決定的な答えです。彼らは将来的にサポートを追加するように見えます。当面は、APIを使用して呼び出しを行い、それを追加する必要があります。 –