Adding multiple products in a single add to cart

Just getting started with Foxy?

This article assumes you have an understanding of how product add to carts work with Foxy. If you're not familiar with that yet, then please take a look at the introductory article here.

While you can have as many different add to cart links and forms on your website as you want - sometimes instead of a customer needing to add multiple different products to their cart individually, you have products that are specifically linked and so should be added together at the same time.

Let's continue with our Red Velvet Cake product from the previous article - but let's begin with the link format first:

https://example.foxycart.com/cart?name=Red+Velvet+Cake&price=24.99&code=cake-rv&weight=0.5&shape=Circle&servings=6

Now let's say that you want to add a set of $2 candles with the cake as an additional product. To do that, you add an additional set of product parameters (again, Foxy products needs to have at least a name and a price), but with the names of the parameters prefixed by a number. The new product's parameters would look like this:

2:name=Set+of+6+Candles&2:price=2&2:code=acc-can

See how each product parameter is prefixed by 2: - that groups all of those parameters together and separates them from any other parameters in the cart. Any parameters without a number prefix are assumed as being prefixed by 1:.

Combined with the existing add to cart - that gives us a link that looks like this:

https://example.foxycart.com/cart?name=Red+Velvet+Cake&price=24.99&code=cake-rv&weight=0.5&shape=Circle&servings=6+pieces&2:name=Set+of+6+Candles&2:price=2&2:code=candle6

As always, you can try out that link by clicking here.

As a form, it's the same process - you just need to prefix the names of the inputs with the number:

<form action="https://example.foxycart.com/cart">
	<input type="hidden" name="name" value="Red Velvet Cake">
	<input type="hidden" name="price" value="24.99">
	<input type="hidden" name="code" value="cake-rv">
	<input type="hidden" name="weight" value="0.5">
	<input type="hidden" name="2:name" value="Set of 6 Candles">
	<input type="hidden" name="2:price" value="2">
	<input type="hidden" name="2:code" value="candle6">
	<label for="shape">Shape:</label>
	<select name="shape" id="shape">
		<option value="Circle">Circle</option>
		<option value="Square">Square</option>
		<option value="Rectange">Rectangle</option>
	</select>
	<label>Number of layers:</label>
	<input type="radio" name="servings" id="servings1" value="6 pieces"> <label for="servings1">6 pieces</label>
	<input type="radio" name="servings" id="servings2" value="12 pieces"> <label for="servings2">12 pieces</label>
	<input type="radio" name="servings" id="servings3" value="20 pieces"> <label for="servings3">20 pieces</label>
	<button>Add To Cart</button>
</form>

You can try out the form here:

Bundling products together

You may have noticed in the approach above - while the products are added at the same time, they are two completely separate products in the cart. Foxy supports bundled product functionality that links products together in the form of a single parent product, and one or more child products.

To make a product into a bundled product, any child products just need a single additional parameter called parent_code. This is the code of the parent product that it will be a child for. Child products don't need to be added at the same time as their parent - but the parent product does need to exist (either already, or in the same add to cart) before a child can be added.

Modifying our add to cart link from above, adding the parent_code would result in an add to cart like this:

https://example.foxycart.com/cart?name=Red+Velvet+Cake&price=24.99&code=cake-rv&weight=0.5&shape=Circle&servings=6+pieces&2:name=Set+of+6+Candles&2:price=2&2:code=candle6&2:parent_code=cake-rv

You can see that the second product for the candles has the additional 2:parent_code=cake-rv parameter, where the value references the code from the first Red Velvet Cake product (code=cake-rv)

You can try out the add to cart with a bundled product with this link.

Locking bundled products together

If you try out the link above, while you will see that the products display bundled together visually - it's possible to remove the candles product separately from the cake product.

If you want to lock the bundled products together, so the child product(s) can not be removed separately from the parent product, that is achieved by also passing a parameter of quantity_min=1 for the child product(s).

For our example link - as the child product is the second product, we'll need to prepend the parameter with 2: to ensure it's connected with that product, resulting in an updated add to cart that looks like this:

https://example.foxycart.com/cart?name=Red+Velvet+Cake&price=24.99&code=cake-rv&weight=0.5&shape=Circle&servings=6+pieces&2:name=Set+of+6+Candles&2:price=2&2:code=candle6&2:parent_code=cake-rv&2:quantity_min=1

You can try out the bundled and locked product with this link.

Technical Documentation

Other Products

Site Tools