你可以在shopify buybutton.js中使用元数据/元数据吗?

时间:2017-06-18 17:48:57

标签: shopify

我一直在寻找这个答案,并且找不到任何东西。有没有人知道Shopify Buy Button产品中是否可以包含元数据或元数据?

一些背景 - 我们有一个Shopify网站,其中安装了Shopify App“产品评论”并在网站上大量使用。有一个辅助站点(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,}
    }
});

1 个答案:

答案 0 :(得分:0)

抱歉,无法通过BuyButton.js或JavaScript Buy SDK访问元字段。有关更多信息,请参阅此主题:https://github.com/Shopify/js-buy-sdk/issues/168