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 thespan
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-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