Воссоздать функциональность кнопки покупки и корзины с моей собственной кнопкой и селектором вариантов

Question

Кнопку покупки Shopify, как известно, сложно настроить. Их сценарий (ниже) создает раскрывающееся меню вариантов и кнопку "Купить". Я пытаюсь отредактировать вставку, чтобы использовать свой собственный селектор вариантов и кнопку вместо их. В идеале отредактированная вставка захватит выбранный вариант и откроет боковую корзину Shopify (элемент переключения) после того, как покупатель нажмет мою кнопку "Купить".

<div id='product-component-PRODUCTCOMPONENTNUMBER'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'STORENAME.myshopify.com',
      storefrontAccessToken: 'NUMBER',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: 'PRODUCTIDNUMBER',
        node: document.getElementById('product-component-PRODUCTCOMPONENTNUMBER'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
...
...
...

</script>