Shopify integration

For the default shopify integration, we will be doing changes to the following directories.

    Layout/
        theme.liquid

    Sections/
        product-template.liquid

    Assets/
        circuly.js

Initial setup

  • Load the cdn script.
  • Add the circuly-cart element.
  • Add the basket element.
  • Add the circuly.js asset script
<!-- theme.liquid --><html>  <head>    ...    <script type="module" src="https://cdn2.circuly.io/v1/1.8/cart.js"></script>    <script src="{{ 'circuly.js' | asset_url }}" defer></script>  </head>  <body>    ...    <div data-embed="circuly-cart-button" persistent></div>    <div data-embed="circuly-basket" right persistent>      <script type="text/props">        {          "api_key": String,        }      </script>    </div>    <div id="circuly-cart"></div>  </body></html>

To make sure the cart loads as intended. We add the persistent attribute to display it on page load.

Page buttons

  • Assign the liquid current_variant.id variable to the span element.
<!-- product-template.liquid -->{%- assign current_variant = product.selected_or_first_available_variant -%}<span class="variant-sku" style="display: none;">  {{ current_variant.id }}</span>
  • Add buttons.
<!-- product-template.liquid -->{%- assign current_variant = product.selected_or_first_available_variant -%}<span class="variant-sku" style="display: none;">  {{ current_variant.id }}</span><button onclick="addProductToCart()"></button><button onclick="addSubscriptionToCart()"></button>

Cart interaction

  • Create the circuly.js file under the Assets directory.
// circuly.jslet product_id = document.querySelector(".variant_sku");window.addEventListener("variantChange", variantChanged);function variantChanged(e) {  product_id = e.detail.variant.id;}function addProductToCart() {  let addProductEvent = new CustomEvent("circuly-add-to-content", {    detail: {      sku: `${product_id}`,      subscription: false,      quantity: 1,    },  });  dispatchEvent(addProductEvent);}function addSubscriptionToCart() {  let addSubscriptionEvent = new CustomEvent("circuly-add-to-content", {    detail: {      sku: `${product_id}`,      subscription: true,      subscription_start: null,      subscription_end: null,      quantity: 1,    },  });  dispatchEvent(addSubscriptionEvent);}
Table of Contents