Use Wix Stores to manage Foxy products

Step 1: Wix Site Editor Setup

Adding products via Quick View mode and Buy Now button is currently not supported. Please disable these features. 

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. In Wix Dashboard, go to Settings > Custom Code (under Advanced)
  2. Click the Add Custom Code button at the top right 
  3. In the Foxy admin, go to the Sample Code page and copy the code snippet from Step 1
  4. Back in Wix settings, paste the code from the previous step in the text box
  5. For the "Add Code to Pages" setting, select All pages and Load code once
  6. For the "Place Code in" setting, select Body - End
  7. Click Apply
  8. Click the Add Custom Code button again to add another code snippet
  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
        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;
          const code = document.querySelector("[data-hook='sku']")?.innerText.split(": ")[1];
    
          const atcLink = `https://${FC.settings.storedomain}/cart?name=${name}&price=${price}&quantity=${quantity}&image=${image}&code=${code ?? ""}`;
    
          // Dropdown options
          const allVariantValues = Array.from(
            document.querySelectorAll("[data-hook='dropdown-base-text']")
          ).map((div) => encodeURIComponent(div.innerText));
          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(": ");
    
          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. For the "Add Code to Pages" setting, select All pages and Load code on each new page
  11. For the "Place Code in" setting, select Body - End
  12. Click Apply

Create a Foxy Mini-Cart

Since Wix cart will be replaced by Foxy's, you'll need to create a new button element for the mini-cart functionality. In the button link settings, set the URL as https://YOURSTORE.foxycart.com/cart?cart=view (change YOURSTORE to your Foxy store subdomain), and open in Current window.


In This Article

Related Articles

Getting started with Foxy + Wix
Create a purchase button in Wix

Need help?

Can't find the answers you're looking for? Our team is here to help. Please click below to contact us.

Contact Us