Can you use metafields / metadata with shopify buybutton.js? - shopify

Question

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 1

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