Add To Cart Button

Adding an "Add to Cart" button to your Doofinder recommendations carousel makes it easier for users to explore and select items directly from the carousel. This simple addition creates a smoother experience by allowing users to add items to the shopping cart directly from the carousel, making interactions with recommendations more convenient and intuitive.

Step 1: Customize The Recommendations Template

To display the add to cart button, please follow these steps:

1. Go to your Doofinder Admin panel, and on your left side menu look for Recommendations.
2. Scroll down to Advanced Configuration and open the panel.
   
3. Look for the Template option and click on "Customize" to enter the template.
4. Click “Yes, customize it” on the pop-up window.
5. Once inside the template, simply add the following code in the desired place:

   <df-add-to-cart></df-add-to-cart>
   

   

   We recommend adding it just below the link element, just as shown on the image.

6. Save the changes.

That’s it, you should now see the add to cart button within your carousel:

Step 2: Configure The Add To Cart Event

Now that the button displays correctly, we need to assign it a function so it performs an action when clicked.

If you are using our plugins, this function has already been configured by our teams, so you don’t need to worry about it. The default behaviour is as follows:

• If the product doesn’t have variants, clicking the add to cart button will add the product to the cart.

• If the product has variants, clicking the add to cart button will redirect the user to the product page.

If you are not using our plugins, you will need to configure the JavaScript event, so clicking the add to cart button will have the desired effect. This event is exactly the same as the add to cart button from the Doofinder Search Layer

document.addEventListener('doofinder.cart.add', function(event) {
  const { item_id, amount } = event.detail;
  // add custom code to send the data to your cart API
  console.log(`added ${amount} of item #${item_id}`);
});

Advanced Options

You can customize the button and how it will handle promises, for example:

<df-add-to-cart successIconDisplayMilliseconds=0 promiseResolveTimeoutMilliseconds=1000></df-add-to-cart>

• successIconDisplayMilliseconds: The time in milliseconds the :heavy_check_mark: icon is displayed after the promise is successfully resolved. 500ms by default. Put a 0 if you want to not display it. While the :heavy_check_mark: is being displayed, the button is disabled and therefore not clickable.

• promiseResolveTimeoutMilliseconds: The time in milliseconds the client has to resolve/reject the promise. After this time, the promise is automatically rejected and the process is considered as failed. 5000ms by default.