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