This article provides information on how to manage Foxy products with Framer CMS and dynamically populate add to cart form data with Framer CMS data (ie: product name, price, image, etc.).
Want to integrate Foxy without using Framer CMS? No problem. You can manually link a Framer button to a Foxy purchase link. Links can be created manually or via our Link & Form Builder (available in the Foxy admin).
Create Products CMS Collection
1
In Framer, create a new CMS collection for your product data (or access your existing collection).
2
Add fields for any data/media needed to build out your product detail page.
3
Add fields for any data/media that needs to be sent to the cart when a customer clicks "add to cart" (ie: product name, price, sku, image, etc.). You can use the same fields for both your page and the add to cart form.
Add Snippets
1
In the Foxy admin, go to Settings > Website & Products.
2
Copy snippet from the Foxy loader.js section.
3
In Framer, go to Site Settings > General.
4
Scroll to the Custom Code section.
5
In the End of <body> tag text box, paste the copied Foxy loader.js snippet.
In your product detail page, click on your add to cart form.
9
In the form element settings, click the + button in the Code Overrides section.
10
For the File field, choose the file just created (ie: Foxy).
11
For the Override field, choose withFoxyForm.
Add Product Data & Fields
At minimum, Foxy just needs a product name and price. This can be dynamic data from from Framer CMS, static, or a mix of both dynamic and static. In addition, you can pass any other hidden, visible, or configurable data.
Name (required)
1
Add a text input field to your add to cart form.
2
Remove the text element for the field label (this will be a hidden field so no label is needed).
3
In the input element settings, change the Type to Text.
4
Change the Name to name (lowercase).
5
Add a Value property to the element by clicking the + button beside the Input section title.
6
Click the + button beside Value, then hover over Set Variable and choose your product name CMS field.
7
Add a Hidden property to the element.
8
Set the value to Yes.
Price (required)
1
Duplicate the product name input element.
2
Change the Name to price (lowercase).
3
Change the Value to your product price CMS field.
Image (optional)
By default, the first image found within the form element will be shown in the Foxy cart. If you would like to use a different image, please follow the stops below:
1
Navigate to the Assets tab.
2
Open the code file for the Foxy code overrides (ie: Foxy.tsx).
In the code editor, paste the code snippet below any existing code.
5
Go back to your product detail page.
6
In the image element settings, click the + button in the Code Overrides section.
7
For the File field, choose the Foxy code overrides file (ie: Foxy)
8
For the Override field, choose withFoxyImage .
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
Duplicate one of your other fields or add a new text field.
2
Change the Type to Number.
3
Change the Name to quantity (lowercase).
4
Change the Value to 1.
5
Set the Required property to Yes.
6
Add a Min property and set its value to 1.
Custom Data & Fields (optional)
A complete list of Foxy standard product parameters can be found here. You can pass these parameters as hidden or visible/configurable fields. In addition, you can pass any custom parameters to the cart (ie: Color, Size, Format, etc.). You can use any type of field: input, select, radio, checkbox, etc. Values can be CMS driven, static, or set by the customer.
Add View Cart Link (optional)
Add a view cart link to your Framer website, navigation, etc to make it easy for customers to get back to their cart:
1
Add a linkable element anywhere in your Framer website.
2
In the element settings, click the Link section to create a link for the element.
3
For the Link To setting, enter https://YOUR_STORE.foxycart.com/cart?cart=view
4
Replace YOUR_STORE with your Foxy subdomain.
Testing
To test your add to cart forms, simply publish your Framer 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.
Need Help?
Did this article answer your questions? Need help with anything? Please click below to contact us.