4 min read • Updated 2 years ago
Use Wix Store to manage Foxy products
As soon as you make the following changes, they will be live, so you may want to duplicate your Wix site and test or have Foxy already configured.
Step 1: Wix Website 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
In Wix Dashboard, go to Settings > Custom Code (under Advanced)
Click the Add Custom Code button at the top right
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)
Back in Wix settings, paste the code from the previous step in the text box
For the "Add Code to Pages" setting, select All pages and Load code once
For the "Place Code in" setting, select Body - End
Click Apply
Click the Add Custom Code button again to add another code snippet
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 -->
For the "Add Code to Pages" setting, select All pages and Load code on each new page
For the "Place Code in" setting, select Body - End
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
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
After placing the button on the page, select the button and click the link icon to open the link settings
Select Web Address as the link type
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
For the "How does it open?" option, select Current window
Click Done to save changes
Publish the site to see it live