SHOPIFY BUY BTN ONLY WITHOUT IFRAME

gistfile1.txt

<h1 class="text-center">Single Shopify Product BUTTON ONLY</h1>
<h3>
Product is coming from Rico's store - Nuva Organics
</h3>

<script src="https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js" type="text/javascript"></script>

<script type="text/javascript">

var client = ShopifyBuy.buildClient({
  apiKey: 'b4763ca24397865402e1817a64c60b55',
  domain: 'nuvaorganics-com.myshopify.com',
  appId: '6'
});


var ui = ShopifyBuy.UI.init(client);

ui.createComponent('product', {
  id: [508737847341],
  node: document.getElementById('product'),
  options: {
    option: {
      templates: {
        option: '' +
          '<div class="{{data.classes.option.wrapper}}">' +
            '<p class="{{data.classes.option.label}}">{{data.name}}</p>' +
            '<div>' +
              '{{#data.values}}' +
              '<button {{#data.styleAttr}} {{name}} {{/data.styleAttr}} data-value="{{name}}" data-option={{data.name}} class="{{#disabled}}{{data.classes.option.optionDisabled}}{{/disabled}} {{#selected}}{{data.classes.option.optionSelected}}{{/selected}} {{data.classes.option.option}}">{{#data.optionName}}{{name}}{{/data.optionName}}</button>' +
              '{{/data.values}}' +
            '</div>' +
          '</div>'
      },
      styles: {
        wrapper: {
          'padding-bottom': '10px',
          'border': 0,
        },
        label: {
          'margin-top': '0'
        },
        option: {
          'border': '1px solid #c7c2c0',
          'display': 'inline-block',
          'margin-top': '0!important',
          'margin-right': '5px',
          'background-color': '#fff',
          'height': '45px',
          'width': '45px',
          'cursor': 'pointer',
          'font-weight': 'bold',
        },
        optionDisabled: {
          'opacity': '0.2',
          'position': 'relative',
          ':before': {
            'content': '""',
            'position': 'absolute',
            'height': '60px',
            'width': '1px',
            'background': 'black',
            'top': '-8px',
            'left': '21px',
            'transform': 'rotate(45deg)'
          }
        },
        optionSelected: {
          'border-color': 'black'
        }
      }
    },
    product: {
      // layout: 'horizontal',
      variantId: "all",
      iframe: false,

      DOMEvents: {
        'click .shopify-buy__option-select': function (evt, target) {
          var data = target.dataset;
          var product = ui.components.product[0];
          product.updateVariant(data.option, data.value);
        }
      },

      contents: {
        img: false,
        imgWithCarousel: false,
        title: false,
        price: false,
        variantTitle: false,
        quantity: false,
        description: false,
        buttonWithQuantity: false,
        button: true,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },
      styles: {
        quantity: {
          'margin-top': '0!important',
        },
        quantityInput: {
          'border-radius': 0
        },
        button: {
          'background-color': 'black',
          'border-radius': 0,
        }
      },
      text: {
        button: 'Add to bag'
      },
      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();

          }
        },
        styleAttr: function () {
          return function (text, render) {
           
          }
        }
      },
    },

    toggle: {
      styles: {
        toggle: {
          'background-color': 'white',
          'border-radius': 0,
          'border': '2px solid black',
          'border-right': 0,
          ':hover': {
            'background-color': 'white',
          }
        },
        count: {
          'color': 'black'
        },
        iconPath: {
          'fill': 'black'
        }
      }
    }
  }
});

</script>