我一直在寻找这个答案一段时间,找不到任何东西。有没有人知道如果元场或元数据可以包含在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来完成呼叫并添加它。 –