Thanks to the capacity of customization of the Doofinder Javascript layers, integrating the Add To Cart button in the design of your layer is very simple, although it requires some basic knowledge of web development (if you read this article and you don’t understand anything, you may have to talk to your web developer).
In order to add additional content to the results of the layer we need to:
- Add a button to the results template. The button will contain a reference to the internal identifier of our product, which corresponds to the id field of the data feed.
- Set up an event handler to listen to the event of pressing any Add To Cart button painted in the search results of the layer. We will obtain the identifier corresponding to the pressed product and execute Javascript code that does something productive with it.
- Optionally we can add visual styles to our button (recommended).
- If we are going to reuse our template in several languages, we can use translations in our template.
Add the Add To Cart button to the template
In order not to mess our source code, we will create the template inside a script tag and will include it in our page, where the layer can find it.
The template is just the default template with a bit of extra HTML code:
As you can see, the data-addtocart attribute contains the identifier for the product.
To use this template, you have to configure it in the layer options:
Detect a product being added to the cart
For this we will use the callbacks of the layer, specifically the loaded callback, which indicates that the layer has been configured and allows us to make adjustments on the fly.
When executed, the loaded callback receives the layer configuration instance. We just have to use the included tools to listen to the click event on the cart button using event delegation:
In this case all we are doing is displaying a Javascript alert, which is not precisely useful.
As each software is different, this is where you have to use all your creativity and modify the callback so that your product ends up added to the shopping cart by using its unique identifier.
Translating the button label
If you plan to use the same template for different search engines in different languages, you should know that you can do it without duplicating the template.
By default the base language of the layer is English, so simply modify the template to look like this:
And if your layer is not in English, add the translation to the options:
Adding Styles
Although this will not be a problem for you, remember that using CSS you can modify the style of the button.
In our example we’ve used the my-df-addtocart-btn CSS class, which could have the following associated style:
The End
As you can see, including an Add To Cart button in your layer is a matter of a few minutes. We hope this example will be useful to you.
You can ask any questions that may arise to our great support team (support@doofinder.com).