Manage Products with Divhunt CMS

Overview

This article provides information on how to manage Foxy products with Divhunt CMS and dynamically populate add to cart form data with Divhunt CMS data (ie: product name, price, image, etc.).

Want to integrate Foxy without using Divhunt CMS? No problem. You can manually link a Divhunt button to a Foxy purchase link. Links can be created manually or via our Link & Form Builder (available in the Foxy admin).

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 Divhunt, go to Project Settings.

4. 4

   In the left navigation, click on Custom Code.

5. 5

   Go to the Body End tab.

6. 6

   Paste the copied Foxy loader.js snippet into the code editor.

7. 7

   Click Save.

Create Products CMS Collection

To dynamically populate your product detail page and add to cart forms, you'll need a Products CMS collection.

1. 1

   In Divhunt, create and connect your CMS for your product data (or access your existing collection).

2. 2

   Add fields for any data/media needed to build out your product detail page.

3. 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.

Create Product Detail Page

A product detail page is needed for customers to purchase products. This page can be called whatever you'd like.

1. 1

   In Divhunt, go to Pages.

2. 2

   Right click on your Products page.

3. 3

   Set the Page Route to /products/:slug .

4. 4

   Click on Source.

5. 5

   Select your Products CMS collection.

6. 6

   Save changes.

Create Add To Cart Form

1. 1

   In Divhunt, go to your product detail page.

2. 2

   Add a Form element wherever you want your add to cart form to show.

3. 3

   Select your form and go to the Settings panel.

4. 4

   Under the Form section, choose POST for the Method setting.

5. 5

   For the Action setting, enter https://YOUR_STORE.foxycart.com/cart, replace YOUR_STORE with your Foxy subdomain.

Add Product Data & Fields

At minimum, Foxy just needs a product name and price. This can be dynamic data from Divhunt CMS, static, or a mix of both dynamic and static. In addition, you can pass any other hidden, visible, or configurable data. Add the following required and optional fields to your form.

Name (required)

1. 1

   Add a text input field.

2. 2

   In the Input Settings (below Properties), set the Field Name as name (lowercase n).

3. 3

   For the Field Value, traverse the data structure (Page > Data > Name) and get the name of your product.

4. 4

   Set the Field Type to hidden.

Price (required)

1. 1

   Add a text input field.

2. 2

   In the Input Settings (below Properties), set the Field Name as price (lowercase p).

3. 3

   For the Field Value, traverse the data structure (Page > Data > Price) and get the price of your product.

4. 4

   Set the Field Type to hidden.

Image (optional)

1. 1

   Add a text input field.

2. 2

   In the Input Settings (below Properties), set the Field Name as image (lowercase i).

3. 3

   For the Field Value, traverse the data structure (Page > Data > Image) and get the image url of your product.

4. 4

   Set the Field Type to hidden.

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 field.

2. 2

   In the Input Settings (below Properties), set the Field Name as image (lowercase i).

3. 3

   For the Field Value, input 1 (or whatever you want the starting quantity to be).

4. 4

   Set the Field Type to number.

5. 5

   Set the Required property to Yes.

6. 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.

Testing

To test your add to cart forms, simply publish your Divhunt 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.