How To Guides

How To Guides

How to Setup Miva Multi-Product Add To Cart

This tutorial will walk though how to create a category list page which will allow your customers to add 2 or more products to the cart with a single add to cart button.

This type of functionality will allow you to create a quick order page on your Miva Store or simply give your customers an interface to quickly add multiple products at once without having to click between pages.

Keep in mind that the multi-add functionality is not limited to any specific page like the category page. Instead, it is an action that can be use anywhere on any page. Other possible uses cases would include the search page, a wholesale ordering form, or a custom product page what not only adds the product the customer is viewing, but also a custom upsell (or related product) all with a single click.

Background

To fully understand how the multi-product add works, it is important to understand how a single product add works in Miva. Each time you click add to cart you are submitting a form which contains a few hidden inputs. These hidden inputs tell Miva what product to add, and how many. There is also an hidden input for an Action which tells Miva what to do. The default action to add a single product to the cart is ADPR (this stands for Add Product) The best way to illustrate this is with an example:

You’ll notice 4 key elements in the form above:

1. Action of ADPR – This tells miva what to do, in this case add a product to the cart.
2. Product_Code – This is the code of the product Miva will be adding
3. Quantity – This is the quantity of the product that will be added
4. Screen=BASK – This is the page the customer is taken too after the form is submitted

New Multi-Product Add Action – ADPM

In 9.0003 we released a new action called ADPM (ADd Product Multiple) which uses the same concepts above but it allows you to submit multiple products within the form to be added to the cart. So instead of accepting a single product code and quantity, it accepts an array of product codes and and array of quantities. Arrays in Miva are signified by the square brackets [ ] with a unique number identifying it.

So lets take a look at what a multiple product add form looks like:

Javascript

You’ll notice a few key differences.

1. The Action is now ADPM. This tells Miva that the data being submitted will be an array and it needs to attempt to add multiple products to the cart.
2. The product code and quantity hidden inputs are now arrays. In the code above there is a foreach loop of products on a category page. For each product It is printing a hidden input for its unique product code and text box for quantity.

When this form is submitted Miva will look for any product with a quantity greater than 0 and add it to the cart. Products with a quantity of 0 will be skipped. The product codes / quantities are matched up via the unique product:id parameter that is pass in for the array value in the brackets.

The code above will produce this HTML output for a category with 3 products assigned.

One thing we’re missing is the product name to identify which product is being added. Im going to add a table with a header row to keep everything aligned. This will give us something like this:

Here is the code:

**Error Messages**

If there are any errors, for example one of the products you added is out of stock, or is missing a required attribute, the action will add all other products and display all error messages on the screen. This makes it important that the page the user is taken to when they hit submit has the error messages array also on the page to be able to display the proper error messages.

In a CSSUI Store the code looks like this:

In a MMUI store there is an item tag:

Example of 3 products being submitted but only 2 being added:

Then on the basket page you will see this error message. Notice two of the products were added but the “Guitar 1” product was not because it has attributes that are required and they are not currently passed in our form.

Error Message

Working with Attributes

The multiple product add action does fully support attributes. This allows your customer to select attributes for multiple products on a single page an add them to the cart. Lets modify our example above to include product attributes.

First in order for attributes to display we need to assign the product_attributes item the page. Next add the item tag to call in the attribute template:

It looks like this:

This item tag needs to be in the form where you want the product attributes to display. Lets create a new table cell for it:

Table Cell

The last part to this is to modify the attribute template to allow multiple attributes to appear on the page and be submitted correctly.

In the attribute template you need to take the product attribute code and product attribute value inputs appear as arrays:

You’ll need to update these values wherever they appear in the attribute template. Here is a full example you can use using a default attribute template

Additional Examples: https://gist.github.com/steveosoule/665741fbcd02c9e53cdc