Can You Use Metafields / Metadata With Shopify Buybutton.js?
I've been looking for this answer for some time and cannot find anything on it. Does anyone know if metafields or metadata can be included in the Shopify Buy Button products?
Some background - We have a Shopify site that has the Shopify App "Product Reviews" installed and used heavily on the site. There is a secondary site (WordPress) where we are using the Shopify Buy Button code to add some products specific to that site (several collections from the Shopify store). We want to add the Product Reviews to the modal pop-up for the products we have set up on the buy buttons. The data for the reviews is stored in product.metafields.spr.reviews
.
We have added custom templates and classes to the buy button embed code to custom style the look, but for the life of me, I cannot find out if getting the metadata for the product is even possible. I am very familiar with WordPress, so I have created an automated way to add the products and collections to the pages we want them on, and the buy button code is added when the page has a product or collection to display. So, customizing the code is not an issue.
I could use the API to pull product metadata and then insert it onto the popup, but that just seems like a lot of extra work and I do not want to go down that path if there is a better solution.
Is there a way to do it using the ui.createComponent
? And if so, how would you add that to the code?
Here is some of the code for a reference (it is output via php so there are a few php variables in it):
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,}
}
});
Answer
Sorry, metafields are not accessible through BuyButton.js or the JavaScript Buy SDK. For more information see this thread: https://github.com/Shopify/js-buy-sdk/issues/168
Related Questions
- → Does anyone know how to solve IP canonicalization with shopify platform?
- → How can I add a featured image from a blog post to my homepage on shopify
- → Shopify - Get list of product from a specific collection
- → Shopify webhooks not wanted
- → Comparing two large files are taking over four hours
- → Need "add to cart" button price to update with correct amount depending on what checkbox is checked
- → How to append a variable inside another vaiable name in liquid html
- → GET /admin/webhooks.json returns an empty array
- → Javascript function not getting executed properly
- → How to give border to to current displaying border
- → Shopify background image
- → Dynamic Attribute Names in Shopify Cart
- → What after added shopify store into shipstation