Add to cart

You are reading about requirements for the integration done by the Luigi's Box team. You can safely skip this part of the documentation if you are integrating yourself using either API or Luigi's Box frontend libraries.

Adding products to cart is heavilly dependent on the specifics of your ecommerce store technical solution. If you want us to implement "add to cart" button from the product tile (in search, autocomplete, recommender or any service that we are integrating) you will need to provide us with the technical interface which we can use to add the product to cart.

The technical interface that you provide must serve the full UX interaction including:

Add the product to cart
Display the confirmation popup
Update the cart icon in the menu

Based on our experience, we list some of the frequently used interfaces that we can use.

Using a Javascript function

You can implement a Javascript function which accepts 2 arguments - ID of the product and optionally a quantity of the product to add to cart.

javascript

function AddToCart(productId, quantity) {
}

In the product tile implementation, we will call this function and pass it the product id that you specify. This function will take care of full UX interaction as stated above.

Using a specific HTML structure

Adding to cart can often be integrated by setting up the HTML structure in a certain way, which your ecommerce platform recognizes. If your ecommerce platform works this way, it is enough for us if you specify the HTML structure. For example, you may specify that the add to cart button must be incorporated in the following structure.

html

<form action="/store/cart" method="post">
  <input type="hidden" name="product_id" value="2342"/>
  <input type="hidden" name="quantity" value="1"/>
  <button>Add to cart</button>
</form>

In most cases, this scenario relies on Javascript listeners which intercept clicking on the "add to cart" button, read the prescribed HTML structure and handle the user interaction. For this solution to work, these listeners must be set up as "live listeners" and handle product tiles which are added dynamically. In other words, this solution must handle product tiles which are added after the page has been rendered, e.g., when the user clicks next page in the pagination. Luigi's Box services are integrated as single page applications and there will be no page load.