buy-button-js同一页面上的多个产品

Question

试图找出如何使用Shopify/buy-button-js将多个产品添加到单个页面？

我目前必须通过重复ui.createComponent功能来执行此操作，并使用document.getElementById调用按钮。 （您可以在Current JS示例中看到这一点）

如何将ID放在一个数组中，仍然可以通过document.getElementById调用它们，如Trying JS示例所示？

尝试JS

ui.createComponent('productSet', {
  id = [489690562602,524100337706,524102565930],

  node(id[0]).getElementById('bday'),
  node(id[1]).getElementById('gws'),
  node(id[2]).getElementById('toy'),

  options: { etc....

HTML

<div id="bday" align="center"></div>
<div id="ppb" align="center"></div>
<div id="tyc" align="center"></div>

当前的JS （只需要id: 524242288682, & node: document.getElementById('XXX'),)更改每个要导入的产品。其他所有内容保持不变。

ui.createComponent('product', {
  id: 489690562602,
  node: document.getElementById('bday'),
  options: { 
    product: {
        width:'100%',
      buttonDestination: 'modal',
      contents: {
        options: false,
        price: false,
        title:false,
        img: false
      },

      styles: {
       button:{
        'width': '100%',
        'height': '60px',
        'background':'#FF6C37',
        ':hover':{'background-color':'#AC441E'},
        ':focus':{'background-color':'#AC441E'},
       },

      }
    }
  }
});

ui.createComponent('product', {
  id: 524242288682,
  node: document.getElementById('pbb'),
  options: { 
    product: {
      /*STAYS THE SAME*/
      },

      styles: {
       button:{
         /*STAYS THE SAME*/
       },

      }
    }
  }
});

ui.createComponent('product', {
  id: 524113510442,
  node: document.getElementById('tyc'),
  options: { 
    product: {
      /*STAYS THE SAME*/
      },

      styles: {
       button:{
         /*STAYS THE SAME*/
       },

      }
    }
  }
});