Manage products with Webstudio CMS

Overview

This article will walk you through creating an add to cart form and binding it to Webstudio CMS data.

This article assumes you have already completed the following in Webstudio:

• Create a dynamic page

• Set up a CMS (at minimum, you'll need a field for product name and product price)

• Fetch CMS data

By the end of this article, you will have completed the following:

• Create an add to cart form in Webstudio

• Bind dynamic CMS / product data to the add to cart form

Add Code Snippet

1. 1

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

2. 2

   Copy snippet from the Foxy loader.js section.

3. 3

   In Webstudio, go to your project.

4. 4

   Click on the Webstudio logo (top left corner) and select Project Settings.

5. 5

   In the General section, copy/paste the Foxy loader snippet in the Custom Code field.

6. 6

   Save changes.

Create Add To Cart Form

1. 1

   In Webstudio, add a Form component to your product detail page.

2. 2

   With your Form component selected, go to the Form Settings panel.

3. 3

   Set the Action as https://CHANGE.foxycart.com/cart (replace CHANGE with your Foxy subdomain, found in the Foxy admin under Settings > General).

4. 4

   Set the Method as Post.

Add Product Data & Fields

At minimum, Foxy just needs a product name and price. This can be dynamic data from CMS data, static, or a mix of both dynamic and static. In addition, you can pass any other hidden, visible, or configurable data.

Name (required)

1. 1

   Add a Text Input component to your form.

2. 2

   Set the Name as name (lowercase n).

3. 3

   Set the Type as hidden.

4. 4

   Set the Value as a static product name value or bind it to a CMS field using Webstudio's Expression Editor.

Price (required)

1. 1

   Add a Text Input component to your form.

2. 2

   Set the Name as price (lowercase p).

3. 3

   Set the Type as hidden.

4. 4

   Set the Value as a static product price value or bind it to a CMS field using Webstudio's Expression Editor.

Code (aka SKU) (optional)

1. 1

   Add a Text Input component to your form.

2. 2

   Set the Name as code (lowercase c).

3. 3

   Set the Type as hidden.

4. 4

   Set the Value as a static product code value or bind it to a CMS field using Webstudio's Expression Editor.

Image (optional)

1. 1

   Add a Text Input component to your form.

2. 2

   Set the Name as image (lowercase i).

3. 3

   Set the Type as hidden.

4. 4

   Set the Value as a static product image URL value or bind it to a CMS field using Webstudio's Expression Editor.

Quantity (optional)

By default, a quantity of 1 will be added to cart. Once a product is in the cart, customers can easily change the quantity. If you'd like to allow customers to specify a quantity before adding a product to cart, please follow the steps below:

1. 1

   Add a Text Input component to your form.

2. 2

   Set the Name as quantity (lowercase q).

3. 3

   Set the Type as number.

4. 4

   Set the Value as 1 (or whatever you want the default quantity to be).

Custom (optional)

In addition to standard Foxy parameters like name and price, you can add any other preset or configurable fields (ie: size, color, format, etc.). Any hidden or visible field with a value, will be included in the product info in cart.

Update Inventory Count

Using Foxy Automations, Make, Zapier, Pipedream or similar automation tools, you can create an automation to auto-update your product inventory count in your data source, after each successful Foxy transaction.

Testing

To test your add to cart forms, simply publish your Webstuio site and navigate to one of your product pages. Click to add product to cart. You should see product information and image (when applicable) in cart.

Limitations

Currently, this approach does not support CMS driven product variants. That said, you can have static/preset product variants (ie: a select field with size options). We're still working on this, but if you have a need for dynamic variant support, please let us know.