我一直在尋找這個答案一段時間,找不到任何東西。有沒有人知道如果元場或元數據可以包含在Shopify購買按鈕產品中?您可以使用shopify buybutton.js使用metafields /元數據嗎?
一些背景 - 我們有一個具有Shopify應用程序安裝,並大量使用網站上的「產品評測」一Shopify網站。有一個輔助網站(WordPress),我們使用Shopify購買按鈕代碼來添加一些特定於該網站的產品(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來完成呼叫並添加它。 –