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:

• Create a Dynamic Page in Webstudio

• Set up a CMS: Webstudio provides a Headless CMS Finder tool to help with this.

• Fetched CMS data: On this page you can find definitions of all parts required and video tutorials. Also here are some integration guides for connecting to a few CMS.

Add Sidecart Functionality

To display the sidecart when a customer adds a product to the cart, you need to include the Foxy loader file in your Webstudio project.

Obtain the Foxy Loader Code

1. 1

   Log in to your Foxy admin dashboard.

2. 2

   Navigate to the Settings -> Website & Products

3. 3

   Copy the code snippet from the Foxy loader.js section textarea.

Add the Code in Webstudio

1. 1

   Open your Webstudio project.

2. 2

   Click on the Webstudio logo in the top-left corner and select Project Settings.

3. 3

   In the General section, locate the Custom Code field.

4. 4

   Paste the copied Foxy loader code into this field.

5. 5

   Save your changes.

Create an Add To Cart Form

Next, you'll use Webstudio's Form Element to design your add to cart form. Once you have your form designed, please follow the steps below to connect the form to CMS data and Foxy:

1. 1

   In Webstudio's Builder, add a Form Component to your page.

2. 2

   Select your add to cart form and go to the Form Settings panel.

3. 3

   In your Form Settings, set the Action as https://CHANGE.foxycart.com/cart  (replace CHANGE with your Foxy subdomain, found here)

4. 4

   Anywhere inside of the Form, add a Text Input component. Make it have a Type as "hidden".

5. 5

   On the Properties & Settings add to the Name field the value name

6. 6

   For the Value bind the information that comes from your CMS.

7. 7

   Click on the Blue + icon to get the Binding modal to appear.

8. 8

   Use the Expression Editor to traverse the data structure and get the and get the name of your product.

9. 9

   Anywhere inside of the Form, add a Text Input component. Make it have a Type as "hidden".

10. 10

    On the Properties & Settings add to the Name field the value price

11. 11

    For the Value bind the information that comes from your CMS.

12. 12

    Click on the Blue + icon to get the Binding modal to appear.

13. 13

    Use the Expression Editor to traverse the data structure and get the and get the price of your product.

14. 14

    Publish and test.

Extend Your Add To Cart Form

Your add to cart form can be as simple or as complex as needed, depending on your use case. The following information covers different ways to extend your add to cart form. 

Add a Quantity Field

1. 1

   Anywhere inside of the Form, add a Text Input component. Make it have a Type as "number".

2. 2

   On the Properties & Settings add to the Name field the value quantity

3. 3

   For the Value field you can add 1 as a starting value.

Update Inventory Counts

Automatically update product inventory counts after each successful transaction with our Foxy Webhooks. We have a tutorial on how to connect the Webhook with Make, from there you just need to add the logic to update your inventory according to your CMS. This can be done with other no code tools like Zapier, or even with serverless functions.