All articlesDoofinder Training Integrate the Doofinder Layer with your Shopping Cart Sam SmithEcommerce Consultant at Doofinder 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.Table of ContentsAdd the Add To Cart button to the templateDetect a product being added to the cartTranslating the button labelAdding StylesThe EndAdd the Add To Cart button to the templateIn 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 cartFor 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 labelIf 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 StylesAlthough 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 EndAs 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). FREE EBOOKS Increase your eCommerce sales by 20%The 10 largest eCommerce sites in the worldHow to start an online shop from scratch