If you are not using the latest version of our plugins, you will have to provide custom JavaScript code to make the button work.
When the add cart button option is enabled, we create an event that triggers every time a person has clicked the button. This event is called 'doofinder.cart.add'.
You need to catch this event and create a function in your code, to call your store's API for the implementation to work. This function will vary from platform to platform. You have to paste the script into your HTML code.
Example of generic implementation:
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}");
});
Important Update
We have updated the add to cart feature for most platforms. For installations prior to the release of this update, of the plugins mentioned below, you do not need to copy it manually. Simply follow this previous step, to update the script in the store, which is required for it to work properly.
- Shopify, BigCommerce: you must deactivate and reactivate the search engine from the plugin.
- Magento2, Prestashop, WooCommerce: you must install the latest version of doofinder from the plugin's marketplace.
- Ekm: no api for add-to-cart.
To enable or disable the add to cart button in your layer, go to your Admin > Layers > Appearance and swith the add to cart toggle on or off.
To customize your 'Add to cart' button, read the article 'Appearance'.
In case you added custom code to make the 'Add to cart' button work in your page, it's not necessary to remove it when disabling the button, but it's recommended if you don't intend to re-enable this feature in the future.
Add Quantity Selector
You can incorporate a quantity selector next to your "Add to Cart" button, as shown in this example:
To do so, it is necessary to include the attribute quantity={true} in the add-to-cart code line within the product card template. Please note that the unit selector appears after clicking on the "Add to Cart" button.
To access the product card template, navigate to Layers > Appearance, scroll to the Advanced section, and click on Customize. For detailed guidance on managing the product card template, refer to this article.
Add to cart with a variant
The add-to-cart feature comes with a variant that allows you to select size, for example, before adding it to the cart, without having to go through the product page.
To activate this option, please email Support through our contact form, and we will manage it for you.
If needed, simply log in to your Doofinder admin panel. Click on 'Help' in the top blue bar, then select 'Contact our Support Team’.