您可以将元字段/元数据与 shopify buybutton.js 一起使用吗?
Can you use metafields / metadata with shopify buybutton.js?
我一直在寻找这个答案有一段时间了,但找不到任何内容。有谁知道元字段或元数据是否可以包含在 Shopify Buy Button 产品中?
一些背景信息 - 我们有一个 Shopify 网站,该网站安装了 Shopify 应用程序 "Product Reviews" 并在该网站上大量使用。有一个辅助站点 (WordPress),我们在其中使用 Shopify Buy Button 代码添加一些特定于该站点的产品(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,}
}
});
抱歉,无法通过 BuyButton.js 或 JavaScript Buy SDK 访问元字段。有关详细信息,请参阅此线程:https://github.com/Shopify/js-buy-sdk/issues/168
我一直在寻找这个答案有一段时间了,但找不到任何内容。有谁知道元字段或元数据是否可以包含在 Shopify Buy Button 产品中?
一些背景信息 - 我们有一个 Shopify 网站,该网站安装了 Shopify 应用程序 "Product Reviews" 并在该网站上大量使用。有一个辅助站点 (WordPress),我们在其中使用 Shopify Buy Button 代码添加一些特定于该站点的产品(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,}
}
});
抱歉,无法通过 BuyButton.js 或 JavaScript Buy SDK 访问元字段。有关详细信息,请参阅此线程:https://github.com/Shopify/js-buy-sdk/issues/168