Use Wix Stores to manage Foxy products

Step 1: Wix Website Editor setup

You can create products and design pages as desired. In Product Page settings, under the "Add to Cart" section, select Stay in Product Page option for the "When button is clicked" setting. 

Step 2: Add Foxy code snippets

1. 1

   In Wix Dashboard, go to Settings > Custom Code (under Advanced)

2. 2

   Click the Add Custom Code button at the top right 

3. 3

   In the Foxy admin, go to the Sample Code page and copy the code snippet from Step 1 (code from Step 2 is not needed)

4. 4

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

5. 5

   For the "Add Code to Pages" setting, select All pages and Load code once

6. 6

   For the "Place Code in" setting, select Body - End

7. 7

   Click Apply

8. 8

   Click the Add Custom Code button again to add another code snippet

9. 9

   Paste the following code in the text box 

   <!-- FOXYCART --><script>  var FC = FC || {};  FC.onLoad = function () {    // Refresh page when Foxy sidecart detach from DOM, to reset product option states on product page    // Can be removed if no product options    FC.client.on("sidecart-detach", function () {      window.location.reload();    });  };   // Add product to Foxy cart when Add to Cart button is clicked  document    .querySelector("[data-hook='add-to-cart']")    ?.addEventListener("click", () => {      // Get product info      const name = document.querySelector("[data-hook='product-title']").innerText;      const price = document        .querySelector("[data-hook='formatted-primary-price']")        .innerText.slice(1);      const quantity = document.querySelector("[data-hook='number-input-spinner-input']")?.value;      const image =        document.querySelector("[data-hook='product-image']")?.src ||        document          .querySelector('[data-hook="responsive-gallery-media"]')          .style.backgroundImage.slice(4, -1)          .replace(/"/g, "");      const code = document.querySelector("[data-hook='sku']")?.innerText.split(": ")[1];       const atcLink = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&price=${price}&quantity=${quantity ?? 1}&image=${encodeURIComponent(image)}${code ? `&code=${encodeURIComponent(code)}` : ""}`;       // Dropdown options      const allVariantValues =        document.querySelectorAll("[data-hook='dropdown-base-text']").length !== 0          ? Array.from(              document.querySelectorAll("[data-hook='dropdown-base-text']")            ).map((div) => encodeURIComponent(div.innerText))          : Array.from(              document.querySelectorAll("[data-hook='native-select']")            ).map((select) =>              encodeURIComponent(select.options[select.selectedIndex].text)            );            const allVariantName = Array.from(        document.querySelectorAll("[data-hook='options-dropdown-title']")      ).map((div) => encodeURIComponent(div.innerText));       // Color option      const colorOption = document        .querySelector("[data-hook='product-colors-title']")        ?.innerText.split(": ")        .map((el) => encodeURIComponent(el));       if (allVariantValues.length > 0 && !allVariantValues.includes("Select")) {        // if there are variants and all options are selected        let variantParams = "";         // add color option if exists        if (colorOption)          variantParams += `&${colorOption[0]}=${colorOption[1]}`;         allVariantName.forEach(          (name, index) => (variantParams += `&${name}=${allVariantValues[index]}`)        );         FC.client.event("cart-submit").trigger({          data: { cart: "add" },          url: atcLink + variantParams,        });      } else if (allVariantValues.length === 0 && colorOption?.length === 2) {        // only color options        FC.client.event("cart-submit").trigger({          data: { cart: "add" },          url: atcLink + `&${colorOption[0]}=${colorOption[1]}`,        });      } else if (allVariantValues.length === 0 && !colorOption) {        // if there are no variants or color options        FC.client.event("cart-submit").trigger({          data: { cart: "add" },          url: atcLink,        });      }    });</script><!-- FOXYCART -->

10. 10

    For the "Add Code to Pages" setting, select All pages and Load code on each new page

11. 11

    For the "Place Code in" setting, select Body - End

12. 12

    Click Apply

After finishing the steps above, you should be able to add products to Foxy cart by clicking the "Add to Cart" button on the product page. If you'd like to create a mini-cart button that opens the sidecart without adding a product (i.e. a "View Cart" button), follow the steps below.

Optional: Add a Foxy mini-cart button

1. 1

   In Wix Website Editor, add a new button from the Add panel on the left side of the editor. You can use the cart icon like the screenshot below
   

2. 2

   After placing the button on the page, select the button and click the link icon to open the link settings

3. 3

   Select Web Address as the link type

4. 4

   In the "What's the web address (URL)?" field, copy and paste this link: https://YOURSTORE.foxycart.com/cart?cart=view, then change YOURSTORE in the URL to your Foxy store subdomain

5. 5

   For the "How does it open?" option, select Current window
   

6. 6

   Click Done to save changes

7. 7

   Publish the site to see it live