Field
Settings
Rendered Button
Basic HTML

This project is not covered by Drupal’s security advisory policy.

What it does
This module provides an interface to dynamically generate the shopify buy button into Drupal nodes.


Prerequisites
You need to follow the steps till #7 as mentioned in the below link to generate the Shopify script so that you can use it in the CMS configuration section.
https://help.shopify.com/en/manual/online-sales-channels/buy-button/crea...


What options are provided
A UI for the editors to add

  • Required field to add Shopify Client information in JSON format 
              {
            "domain": "XYZ.myshopify.com",
            "storefrontAccessToken": "YOUR TOKEN"
          }
  • Required field to add the options object from the script in JSON format
  • Required field to add Shopify Script Money Format in String
    • Example: %24%7B%7Bamount%7D%7D
  • Optional field to add Shopify Script Popup HTML code in HTML format
    • Site builders may need to add additional CSS styling to properly render this HTML.
  • An option to enable or disable the script from loading.



    • How to use

    • Create a new Text (formatted,long) field with permission to render specific attributes as HTML in your desired content type. The HTML snippet is below.
    • You can configure this by adding the attributes under Filter Settings on admin/config/content/formats/manage/basic_htm path
    • Add <div id data-shopify-id data-shopify-node class=""> and save
    • Add below HTML into the newly created Text (formatted,long) WYSIWYG field after selecting source and replace the ID with your products' product ID
    • You may change/remove the class attribute, but the id and the data attributes are required
        <div class='shopify-btn' id='product-component-<ID>' data-shopify-id='<ID>' data-shopify-node='product-component-<ID>'></div>
  • To render the button you will have to create a twig file having similar code such as
    {{ items[0]['content']['#text'] | raw }} in case the field cardinality is 1


    • Supporting organizations: 
    Digitas
    Provide time to develop this as a module

    Project information

    Releases