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

1. 1

   In your Squarespace site, go to Settings > Advanced > Code Injection

2. 2

   Go to the Sample Code page in the Foxy admin, and copy the code snippet in Step 1

3. 3

   Back in Squarespace settings, paste the code from the previous step in the Footer text box

4. 4

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

5. 5

   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: 

1. 1

   Go to the Template Configurations in the Foxy admin

2. 2

   Under the Cart section, select the Customize Cart Display option

3. 3

   Uncheck the Show Product Code to hide the code product option

4. 4

   In the text box beside Custom Product Options to Hide, input SKU to hide the SKU product option

5. 5

   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. 

1. 1

   Add the webhook to Integromat following this tutorial: Integrating the Foxy Webhook with Integromat

2. 2

   Add a new module connected to the Foxy webhook, select Flow Control then Iterator, and choose _embed: fx:items[] for the Array field
   

3. 3

   Add a new Squarespace module connected to the Iterator and select Update Stock Quantities (under the Inventory section)

4. 4

   In the Connection field, click Add

5. 5

   Enter a name for the connection then click Continue, a window will pop up to authenticate your Squarespace account and select a site

6. 6

   In the Decrease Stock field, click Add item

7. 7

   Select code for the Product Variant ID field, and quantity for the Quantity field
   

8. 8

   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
   

9. 9

   If the test completes without errors, you can activate the scenario