4 min read • Updated 2 years ago
Use Squarespace Commerce to manage your Foxy products
Before getting started
Some Squarespace features are not supported, please disable them:
Quick View - more details here
Express Checkout - steps to disable here
Ajax loading - not all themes support this feature. Steps to disable this feature can be found here
Add Foxy code snippet
In your Squarespace site, go to Settings > Advanced > Code Injection
Go to the Sample Code page in the Foxy admin, and copy the code snippet in Step 1
Back in Squarespace settings, paste the code from the previous step in the Footer text box
In the same Footer text box, paste the code below, after the existing code:
<!-- FOXYCART --> <script> var FC = FC || {}; FC.onLoad = function () { FC.client.on("ready.done", function () { // modify mini-cart links document .querySelectorAll(".sqs-custom-cart") .forEach( (link) => (link.href = `https://${FC.settings.storedomain}/cart?cart=view`) ); // modify mini-cart quantity document .querySelectorAll(".sqs-cart-quantity") .forEach((qty) => qty.setAttribute("data-fc-id", "minicart-quantity")); document .querySelector(".sqs-add-to-cart-button") ?.addEventListener("click", () => { // get product info from elements const name = document.querySelector(".ProductItem-details-title").innerText; const quantity = document.querySelector(".product-quantity-input")?.lastElementChild.value; const image = document.querySelector(".ProductItem-gallery-slides-item-image")?.src; const cartUrl = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&quantity=${quantity ?? 1}&image=${encodeURIComponent(image)}`; // get variant info from static Squarespace context const variantData = Static.SQUARESPACE_CONTEXT.product.variants; // select elements for variants const variantSelect = document.querySelectorAll("select[data-variant-option-name]"); if (variantSelect.length > 0) { // product has variants // get selected variant name and value from elements const allVariantName = Array.from(variantSelect).map( (variant) => variant.dataset.variantOptionName ); const allVariantValue = Array.from(variantSelect).map( (variant) => variant.value ); // if all variants have valid selected values if (!allVariantValue.includes("")) { // concat variant name and value let variantParam = ""; allVariantName.forEach( (name, index) => (variantParam += `&${encodeURIComponent(name)}=${encodeURIComponent(allVariantValue[index])}`) ); // find the selected variant info from variant data let selectedVariant; if (allVariantName.length === 1) { selectedVariant = variantData.find( (variant) => variant.attributes[allVariantName[0]] === allVariantValue[0] ); } else if (allVariantName.length === 2) { selectedVariant = variantData.find( (variant) => variant.attributes[allVariantName[0]] === allVariantValue[0] && variant.attributes[allVariantName[1]] === allVariantValue[1] ); } // get product info from variant data const price = selectedVariant.onSale ? selectedVariant.salePrice.decimalValue : selectedVariant.price.decimalValue; const stock = selectedVariant.stock.quantity; const { sku, id: variantId } = selectedVariant; const weight = selectedVariant.shippingWeight.value; const { height, len, width } = selectedVariant.shippingSize; // trigger Foxy cart-submit event only if product is in stock if (stock !== 0) { FC.client.event("cart-submit").trigger({ data: { cart: "add" }, url: cartUrl + variantParam + `&price=${price}&quantity_max=${stock}&code=${variantId}&SKU=${encodeURIComponent(sku)}&weight=${weight}&height=${height}&length=${len}&width=${width}`, }); } } } else { // product has no variants const price = variantData[0].onSale ? variantData[0].salePrice.decimalValue : variantData[0].price.decimalValue; const stock = variantData[0].stock.quantity; const { sku, id: variantId } = variantData[0]; const weight = variantData[0].shippingWeight.value; const { height, len, width } = variantData[0].shippingSize; // trigger Foxy cart-submit event only if product is in stock if (stock !== 0) { FC.client.event("cart-submit").trigger({ data: { cart: "add" }, url: cartUrl + `&price=${price}&quantity_max=${stock}&code=${variantId}&SKU=${encodeURIComponent(sku)}&weight=${weight}&height=${height}&length=${len}&width=${width}`, }); } } }); }); }; </script> <!-- /FOXYCART -->
Save the changes and test
When a product is added to cart, you'll also see the SKU and code product options listed under the product. If you wish to hide them, follow the steps below:
Go to the Template Configurations in the Foxy admin
Under the Cart section, select the Customize Cart Display option
Uncheck the Show Product Code to hide the code product option
In the text box beside Custom Product Options to Hide, input SKU to hide the SKU product option
Scroll to the bottom of the page and click the Update button to save
Optional: Update product inventory using Integromat
This setup requires all products to be tracked for inventory (i.e. no products or variants are configured as "unlimited quantity" in Squarespace), or it'll result in an error and the scenario would be deactivated.
Add the webhook to Integromat following this tutorial: Integrating the Foxy Webhook with Integromat
Add a new module connected to the Foxy webhook, select Flow Control then Iterator, and choose _embed: fx:items[] for the Array field
Add a new Squarespace module connected to the Iterator and select Update Stock Quantities (under the Inventory section)
In the Connection field, click Add
Enter a name for the connection then click Continue, a window will pop up to authenticate your Squarespace account and select a site
In the Decrease Stock field, click Add item
Select code for the Product Variant ID field, and quantity for the Quantity field
Test the scenario by clicking Run once. You can then complete a new transaction or refeed the webhook for a completed transaction from the Foxy admin: in the transactions page, expand one of the transactions. Under the Webhooks section of the transaction, check the box for your Integromat webhook and click the Refeed selected webhooks button
If the test completes without errors, you can activate the scenario