How to create product bundles that can be directly added to your cart

To get an idea of what the result will be after following this how-to, please check out our product-bundle demo. As you can see in the demo, the following is happening:

1. A user can select which tile, beam and (optionally) sand is preferred.
2. A user can enter the total square meters of their terrace.
3. A user will get an advise with tiles, beams and (optionally sand).
4. All quantities (and prices) in the advise are automatically calculated.
5. The user can add all the products with the correct quantities directly to their cart with one click.

Let's get started!

Result slots

Let's start by defining what product categories we want to see in the results. In our case (demo), we have 3 "product categories" we want to show in the results: Tiles, Beams and optionally Sand. We can use "Result slots"  to define these product categories in the results.

Enabling result slots

To start using Result slots, we'll first have to enable them. You can do this under "Settings -> Product bundles -> Enable result slots".

Adding the result slots to our matching

Next, go to "Matching -> Data matching" and you'll find the "Result slots" button in the top-right of the screen. Click the button and add the result slots you need in your case. 

In our example, we want to show 3 "product categories" in our results; Tiles, Beams and (optionally) Sand. So we'll add a result slot for each of them. 

When you have uploaded your feed, you can use matching rules to match the right products from your feed to the right result slot (e.g. category) as shown in the image below. 

Matching the right products to your flow

Let's start with a very simple flow where we'll simply ask the user which tile color they prefer and which beam color they want. 

Since we are now asking two questions related to two different kind of products categories (beams and tiles), it is necessary that we only match the beams from our product feed to the 'beam color' answers and only match the tiles from our product feed to the 'tiles color' answers. We can achieve this by using the result slots we've created. 

Using result slots in matching rules to only match specific categories

When creating a matching rule, to match the products from your feed to a specific answer of your flow, you can now select a result slot to only apply the matching rule to the products of your specific result slot

In the screenshot below, we're matching the answer 'light gray tile' of the tile color question to the 'Tiles' slot. So we only want this color rule to apply to the "Tiles" slot.

We'll repeat this for all the answers for the beam color question, selecting the "Beams" result slot instead.

Let's check out the results so far. When we preview our configuration and reach the advise, we can now see a tile and a beam advised in the correct colors.

Awesome! However, you might be wondering, why don't we see the "Sand" result slot in our advise? This happens because we don't have any question with answers that have a matching rule applied to the "Sand" slot in our flow yet. Let's change that.

Adding an optional result slots

In some cases you only want to show a result slot when a certain answer (or combination of answer) is chosen. 

In our (demo) case we only want to show 'sand' in the results if a users needs sand.. Let's update our flow and add a "Sand" question "Do you need sweeping sand" with two simple yes/no answers as shown in the image below.

Conditionally showing or hiding result slots

After we've added the question with the answers, we can go to "Matching -> Data matching" and match the products from our feed to the "Sand" answers, using the 'Sand' result slot. 

For the "Yes" answer, we'll simply just select the "Sand" slot.

For the "No" answer, we want to hide the sand slot.

Great! When we preview our advise again we'll see that a sand product is being shown when we choose "Yes" for the "Sand" question. If we choose "No", the sand product is hidden.

Adding calculations based on user input

In our demo, we want to automatically show the correct quantities and prices for each product the user needs for their project. 

So when a user needs tiles, beams and sand for his 20 square meters terrace, we want to automatically calculate the correct price and amount of tiles, beams and sand based on his input (20 square meters). 

Let's update our flow and ask the user what square meters (number input) their terrace is and what tile size they prefer. We can use this information determine the amount of tiles, beams and sand we need. Based on the quantity of each product, we can calculate the right price.

After we have added the questions to our flow, we need to match the products from our feed to the answers of the two new added questions ('tile size' & 'square meters'). 

For the tile size question: we'll match the products from our feed ('tiles' slot) to the correct "size" answer as shown in the image below. 

Enabling variables

To calculate the quantities and prices, we can use variables. Variables can be used to store information that your users provide and show this information later in your flow or use this in a calculation. 

For example, when a user says he prefers a 40x40cm tile and needs tiles for his 20 square meters terrace, we can store both inputs (40x40 and 20m2) in two variables and use these inputs to calculate the right tile quantity. 

To start using variables we'll have to enable them first. You can do this under "Settings -> Configure -> Enable variables.

Adding the necessary variables

Let's start by adding the "tile_size" variable to each of the tile size answers. In the screenshot below, you can see that we have added a variable "tile_size" with value "40" for the tile size answer "40x40 CM". Repeat this for each of the tile size answers.

Once we've set the tile size variables for each of the tile sizes, we can use the "tile_size" variable in combination with the "Square meters" input from our user to calculate the right tile quantity based on the needed square meters and the tile size. 

To do this, edit the (only) answer of the "Square meters" question and add a variable "square_meters" and check the "Use input" checkbox. The square meters user input will now be stored in the "square_meters" variable.

We have now created two variabels. 

1. tile_size  (selected tile size answer of user is stored as value > 40x40cm, 60x60cm, 100x100cm). 
2. square_meters (m2 input of user is stored as value).

We can now use both variables to calculate the right quantities for each product category (tile, beam and sand).  

Since the product sizes differ for tiles and beams, the quantity needed for each product category differs given the stated m2 of the user. Therefore, we have to separately calculate the quantities for the tiles and beams based on the user input. 

We create two additional variables: "quantity_tiles" and "quantity_beams" at the square meters question.

Calculation example

Let's for example look at calculation for the "quantity_tiles" variable: {ceil((vars.square_meters*100)/vars.tile_size)}

In this calculation, we:

1. Take the previously defined "square_meters" variable and multiply it by 100 resulting in the total square centimeters. 
2. Next, we'll divide the total square centimeters by the tile_size variable defined in the previous "tile size" question. 
3. Lastly we'll round this calculation up with the ceil function.

For example: let's say a user wants a 60x60cm tile and needs 20 square meters of tiles. In this case the:

1. 'square_meters' value is 20 and it is multiplied by 100 to calculate the square centimeters. Resulting in 2000 square centimeters.  
2. The 2000 square centimeters is then divided by 60 (the selected tile_size). Resulting in 33.33 tiles. 
3. The result is rounded up with the ceil function. Resulting in 34 tiles. 

We do the same for the "quantity_beams" variable, but just using a little bit of a different calculation.

Using variables in your flow

Variables can be used practically anywhere in your flow. For example, you can use a variable in the question text:

This results in the following:

Using variables in your advise

Where it get's really interesting, is when you combine your product feed information with the calculated variables. 

For example, this allows you to calculate the correct price based on the amount of products calculated, edit your product title with the right quantity or use the variables to enrich your landing page with query parameters. 

To do this we'll have to enable "Calculated properties". You can do this under "Settings -> Feed -> Enable calculated properties".

Once we've enabled the calculated properties, you will see a calculator icon appear next to your mapping properties when you go to "Feed -> Mapping". 

Updating the product title to show the correct quantity of products

First, let's change our product title to show the correct quantity of products. Click the calculator icon next to the title property. Because the tile quantity is different from the beams quantity, we'll need to select the correct result slot in the dropdown and use the "quantity_tiles" variable in the title.

As you can see, we can combine feed properties using the feed. prefix and variables using the vars. prefix.

Let's do the same for the beams result slot, using the correct "quantity_beams" variable instead.

Lastly, since we don't have a specific quantity_sand variable, we'll add a calculation directly in the property mapping to calculate the sand quantity.

Great! Let's check out the result so far. We can now see that the products advised contain the correct quantities in their titles.

Calculating the correct prices

First, let's make sure that the mapping for our price properties are correctly set to the "Number" type. You can find this under "Feed -> Properties".

Once that's done, head back to "Feed -> Mapping" and click the calculator next to the "Price" property. Just like the title mapping, select the right slot, use the correct variables and use the "feed.price" property to calculate the price. Repeat this for each slot.

Awesome! If we preview the flow, we can now see that the calculated prices are also correctly displayed.

Showing an add to cart button

To start showing an add to cart button, we need to make sure there's an add-to-cart url available for the e-commerce platform you're using.

Finding the add-to-cart url for your e-commerce platform

The "add to cart url" is different for every e-commerce platform. Not all platforms have an out of the box "add to cart url" available. Here is a list of a few of the most popular e-commerce platforms and their "add to cart urls":

• Woocommerce: https://example.com/?add-to-cart=123&quantity=1
• Lightspeed: https://example.com/cart/add/123/?quantity=1
• Shopify: https://example.com/cart/add?id=123&quantity=1
• BigCommerce: https://example.com/cart.php?action=add&product_id=123&qty=1
• Shopware: use our free plugin or see GitHub
• Magento:  use our free plugin or see GitHub 
• Logic4: https://example.com/webfunctions/cart.ashx?RequestType=addtocart&ProductId=123&Qty=1

Mapping the add-to-cart urls

Once you have found the add-to-cart url for your e-commerce platform, we have to first enable the add-to-cart-url mapping. We can do this under "Settings -> Feed -> Enable Add-to-cart URL mapping".

Great! Go to "Feed -> Mapping" and click the calculator icon next to the Add-to-cart URL property. 

We can now repeat the same steps as we did for the title and price mapping. Simply go through each result slot and construct the add-to-cart url using feed.id (to add the correct product) and the quantity variables (to add the correct quantity).

The above example will fire a "GET" request to the url for each of the products in your bundle. In some cases you need to "POST" request instead. You can do this by changing the request type to "POST" and enter the post url and body. Choose POST (JSON) if your backend expects a JSON body and choose POST (FORM) if your backend expects a form body. In both POST cases, please construct the body in JSON format.

You might also need to send additional headers (for example bearer tokens for authentication), you can do this by constructing a JSON object with desired headers in the POST headers field.

Previewing the flow

Let's preview our flow. We can now see a sticky add-to-cart button with a summary of the total price. Awesome!

When we click the button, we'll see that Qonfi will "simulate" executing all the add-to-cart urls. This only happens when previewing your flow in Qonfi and is useful for debugging and seeing exactly which add-to-cart url's Qonfi would execute.

When your flow is live on your website, the following will happen:

1. The button is clicked.
2. A loading screen is shown.
3. In the background, Qonfi will execute each mapped add-to-cart url for the products shown.
4. After all products are added, Qonfi will redirect the user to your cart page.

Changing the cart redirect url

To change the url the user is redirected to after all products are added to the cart, go to "Settings -> Results -> Advanced -> Cart url".