Thanks for checking out this project. It was for myself to learn more about the capabilities of Foxy and how it can handle a complex mix of products using the Webflow CMS.
Preview in Webflow: https://preview.webflow.com/preview/flexible-foxy-variant-test?preview=1042e288f8b3aea41b009fa184c92a0f
Published Site: http://flexible-foxy-variant-test.webflow.io
Showcase Page: https://webflow.com/website/Flexible-Foxy-Store
Forum Discussion: https://forum.webflow.com/t/ecommerce-tutorial-foxy-io-webflow-cms-clonable/62857
Official Foxy Website: https://foxy.io (affiliate link)
The goal of this project was to test the flexibility that Foxy provides when implemented using the Webflow CMS. Specifically how is it possible to mix'n'match a combination of variants and add-ons to a store of different types of products. Some of these big box ecommerce solutions either can't handle this challenge or charge higher plan pricing to do so.
Here I've create a new collection called Products and added the following basic fields:
The image is the main product image for this project. You can add more image fields if needed. The categories are a multi-reference field that links to a separate Category collection. Since it's multi-reference a product can appear in multiple categories in the store. The price is a numerical value input. This number is your base price for a product prior to any variants or add-ons.
Each variant and add-on will need two fields:
The label is what the site visitor will see on the dropdown or checkbox fields. The code is what tells Foxy how to adjust the price, weight, product code, and more based on what the visitor chooses. For each variant or add-on, you will need to make sure and add both these fields. There's no limit to how many you can have. For this project example, I chose a maximum of 3 variants and 2 add-ons.
Note: a product can have up to the maximum number but is not required to have any or all variant/add-on options used. A script will remove unsused fields later.
The product has an image, name, and price which can be seen in the CMS form below. The category is not shown here but is used for organizing products elsewhere. Those are the basic settings. We will get to the fun part in a minute.
As you can see it has a single variant applied and no other options. If we look at the CMS form below, it is possible to see the code that makes it possible. There is label called Amount which shows up in the cart followed by the selected variant. There are 4 variants listed by comma-separated-value or csv.
If it is necessary to adjust the price or other variable for a variant, that code is place inside of bracket {} after the name. In our example {p+2} adds $2 to the price of the 2 Slices variant. Following that logic, the following two variants are increased by $4 and $8. For a list of variable that can be adjusted see this article. NEED LINK!
As you can see it has two add-ons applied and no variants. If we look at the CMS form below, it is possible to see the code that makes it possible. There is label called Left-Hand Controller ($50) which shows up in the cart followed by the selected variant. Since this is a checkbox which is a yes/no option there is no csv. For the code to work here, you must enter Yes followed by the variables in brackets. The yes is what talks to the script that we will add later for when a checkbox is activated or selected. The ($50) is added to the label so that the customer knows what to expect. This is not necessary for the script to work and is purely for the customer experience.
Find the footer code input in the project settings.
Now copy+paste the following scripts into the box and click "save changes".
Here's a brief description of what each script does.
It is possible to use the following code block on either the product CMS collection template page or inside of a collection list on any page (like the homepage).
Once you've added the code into the embed editor and placed all of the fields from the CMS, it should look like this.
In the script, the first option uses the unique product slug or url to connect to the Foxy scripts. The 2nd, 3rd, and 4th options connect each variant selector to the code input into the CMS. The class name can be whatever you choose as long as it matches in both instances for that variant. Do not use a class name that is used elsewhere on the site or else there could be unexpected styling implemented by the combo class.
To add/remove variants to match the # of variants used in the project CMS, simple copy/delete this single line:\
Make sure to adjust the class name and linked code field so that each variant is unique.
The next part of the embed begins the form. Again make sure the action url matches your Foxy store. The CMS fields should be connect as seen in this example.
You can replace the H2 and H4 tags to whatever your project calls for whether it is different heading tags or specific class names.
Now to the variant selectors. Each variant is inside of a div with the class name of variant-container. Changing the selector's class name will unlink the script in the project settings that dynamically hides empty variants. Remember that the class name on the select element links the selector to the appropriate code in the script above.
To add/remove variants to match the # of variants used in the project CMS, simple copy/delete these three lines:
Make sure to adjust the class name and linked code field so that each variant is unique and matches the script option.
Now to the add-on checkboxes. Each variant is inside of a div with the class name of variant-container. Make sure to connect the value to the CMS code field and not the label.
To add/remove add-on checkboxes to match the # of add-ons used in the project CMS, simple copy/delete these three lines:
Thanks for reading this tutorial. I hope you've found it helpful. If you have any questions or suggestions please reach out to me on the forum post. Foxy.io is also on the forum.
If you are signing up for either Webflow or Foxy and enjoyed this site/tutorial, I'd be grateful if you use my affiliate links. I don't do this for the clicks, but because these two products are great tools that work very well together.
-Matthew
