Manage products with Wix Studio

Overview

The following article will walk you through using Wix Studio eCommerce to manage products for your Foxy store. This approach will only work if you're using Wix Studio. If you're using Wix, please refer to this article.

Configure Wix Studio

1. 1

   In Wix Studio editor, go to the Products Page.

2. 2

   Remove the default add to cart button element, quantity element, etc.

3. 3

   Add a new button element to the page. This will be used instead of the default add to cart button element.

4. 4

   Right click on the new add to cart button. From the menu, select Add Code > On Click.

5. 5

   On the right side of the popup code editor, under Properties & Events, input foxy-add-to-cart in the ID field.

6. 6

   On the left side of the code editor, remove all existing code.

7. 7

   Copy/paste the code below into the code editor: 

   const FOXY_DOMAIN = 'YOUR_STORE.foxycart.com'
   
   $w.onReady(async function () {
     $w('#productPage1')
       .getProduct()
       .then((product) => {
         const name = product.name;
         const price = product.price;
         const code = product.sku;
         const inventory = product.quantityInStock;
         const image = `https://static.wixstatic.com/media/${product.mediaItems[0].id}`;
   
         $w(
           '#foxy-add-to-cart'
         ).link = `https://${FOXY_DOMAIN}/cart?name=${name}&price=${price}&code=${code}&quantity_max=${inventory}&image=${image}`;
         $w('#foxy-add-to-cart').target = '_self';
       })
       .catch((error) => {
         console.error(error);
       });
   });

8. 8

   In the first line of the code, replace YOUR_STORE with your Foxy store subdomain.

9. 9

   Publish changes.

Add Code Snippets

The following snippets are required for everything to work.

Foxy Code Snippet

1. 1

   In the Foxy admin, go to Settings > Website & Products.

2. 2

   Copy the Foxy loader.js code snippet (other code snippets on the page are not needed).

3. 3

   In the Wix dashboard go to Settings > Custom code (under Development & integrations).

4. 4

   Click the Add Custom Code button at the top right.

5. 5

   Paste the Foxy loader.js code snippet in the text box.

6. 6

   Enter a name for the code snippet (ie: Foxy Loader).

7. 7

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

8. 8

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

9. 9

   Click Apply.

Wix Studio Code Snippet

1. 1

   In the Wix dashboard go to Settings > Custom code (under Development & integrations).

2. 2

   Click the Add Custom Code button at the top right.

3. 3

   Copy/paste the snippet from below into the text box:

   <script>
     const ADD_TO_CART_LABEL = 'Add to Cart';
   
     var FC = FC || {};
     FC.onLoad = function () {
       FC.client.on('ready.done', function () {
         foxyAddToCart();
   
         let previousUrl = window.location.pathname;
         const urlObserver = new MutationObserver(function () {
           if (window.location.pathname !== previousUrl) {
             previousUrl = window.location.pathname;
             foxyAddToCart();
           }
         });
         urlObserver.observe(document, { subtree: true, childList: true });
   
         function foxyAddToCart() {
           const buttonObserver = new MutationObserver(function (mutationsList) {
             if (mutationsList.some((mutation) => mutation.type === 'childList')) {
               // mini cart
               const minicartBtn = document.querySelector(
                 "[data-hook='cart-icon-button']"
               );
               if (minicartBtn && !minicartBtn.hasAttribute('foxy-id')) {
                 minicartBtn.setAttribute('foxy-id', 'mini-cart-btn');
                 minicartBtn.addEventListener('click', (e) => {
                   e.preventDefault();
                   e.stopImmediatePropagation();
                   FC.client.event('sidecart-show').trigger();
                 });
               }
   
               const minicartQty = document.querySelector(
                 '[data-hook="items-count"]'
               );
               if (minicartQty && !minicartQty.hasAttribute('data-fc-id')) {
                 minicartQty.setAttribute('data-fc-id', 'minicart-quantity');
                 FC.client.updateMiniCart();
               }
   
               const minicartLink = document.querySelector(
                 `a[href="https://${FC.settings.storedomain}/cart?cart=view"]`
               );
               if (minicartLink && !minicartLink.hasAttribute('foxy-id')) {
                 minicartLink.setAttribute('foxy-id', 'mini-cart-link');
                 minicartLink.addEventListener('click', (e) => {
                   e.preventDefault();
                   e.stopImmediatePropagation();
                   FC.client.event('sidecart-show').trigger();
                 });
               }
   
               // add-to-cart button
               const wixAddBtn = Array.from(document.querySelectorAll('a')).find(
                 (a) => a.innerText.trim() === ADD_TO_CART_LABEL
               );
               if (wixAddBtn && !wixAddBtn.hasAttribute('foxy-id')) {
                 const atcLink = wixAddBtn.href;
                 wixAddBtn.href = '';
   
                 wixAddBtn.setAttribute('foxy-id', 'add-to-cart');
                 wixAddBtn.addEventListener('click', (e) => {
                   e.preventDefault();
                   e.stopImmediatePropagation();
   
                   FC.client.event('cart-submit').trigger({
                     data: { cart: 'add' },
                     url: atcLink,
                   });
                 });
               }
             }
           });
   
           buttonObserver.observe(document.body, {
             childList: true,
             subtree: true,
           });
         }
       });
     };
   </script>

4. 4

   If your add to cart button label is not "Add to Cart" (case-sensitive), in the first line of the code snippet you just copied/pastes, update the ADD_TO_CART_LABEL value.

5. 5

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

6. 6

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

7. 7

   Click Apply

Testing

To test, load your published url in any browser. Navigate to a product page and click the add to cart button. The Foxy sidecart should slide in with the product added.

Limitations

Currently, this approach does not support product variants. We're still working on this, but if you have a need for variant support, please let us know.

Sync Data Back To Wix Studio

By using our Byteline Sync integration, you can easily and automatically sync Foxy customer, transaction, and inventory updates with Wix.