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.js

let 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-cart", {
    detail: {
      sku: `${product_id}`,
      subscription: false,
      quantity: 1,
    },
  });
  dispatchEvent(addProductEvent);
}

function addSubscriptionToCart() {
  let addSubscriptionEvent = new CustomEvent("circuly-add-to-cart", {
    detail: {
      sku: `${product_id}`,
      subscription: true,
      subscription_start: null,
      subscription_end: null,
      quantity: 1,
    },
  });
  dispatchEvent(addSubscriptionEvent);
}
Table of Contents