doofinder-add-to-cart-detail-extended.mustache

<div>
  <button type="button" class="my-df-addtocart-btn" data-addtocart="{{id}}">
    {{#translate}}Add To Cart{{/translate}}
  </button>
</div>

doofinder-add-to-cart-detail.mustache

<div>
  <button type="button" class="my-df-addtocart-btn" data-addtocart="{{id}}">Add To Cart</button>
</div>

doofinder-add-to-cart-options-complete.js

var dfClassicLayers = [
  {
    // ...
    callbacks: {
      loaded: function(instance) {
        instance.layer.layer.on('click', '[data-addtocart]', function(e){
          // Get the product ID
          var productId = parseInt(this.getAttribute('data-addtocart'), 10);
          // Do something with it, like adding it to the shopping cart
          alert('The product with ID #' + productId + ' was added to your shopping cart.');
        });
      }
    },
    display: {
      results: {
        template: document.getElementById('my-results-template').innerHTML
      }
    }
  }
];

doofinder-add-to-cart-options-extended.js

var dfClassicLayers = [
  {
    // ...
    display: {
      // ...
      translations: {
        'Add To Cart': 'Añadir al carrito'
      }
    }
  }
];

doofinder-add-to-cart-options.js

var dfClassicLayers = [
  {
    // ...
    display: {
      results: {
        template: document.getElementById('my-results-template').innerHTML
      }
    }
  }
];

doofinder-add-to-cart-styles.html

<style type="text/css">
  .my-df-addtocart-btn {
    background-color: #333;
    border: 0;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 16px;
    padding: 16px;
    width: 100%;
  }
</style>

doofinder-addtocart.mustache

<script type="text/x-mustache-template" id="my-results-template">
  {{#is_first}}
    {{#banner}}
      <a class="df-banner" {{#banner.blank}}target="_blank"{{/banner.blank}} href="{{banner.link}}">
        <img src="{{banner.image}}">
      </a>
    {{/banner}}
  {{/is_first}}
  {{#total}}
    {{#results}}
      <div class="df-card">
        <a class="df-card__main" href="{{#url-params}}{{link}}{{/url-params}}" data-df-hitcounter="{{dfid}}">
          {{#image_link}}
            <figure class="df-card__image">
              <img src="{{#remove-protocol}}{{image_link}}{{/remove-protocol}}" alt="{{title}}">
            </figure>
          {{/image_link}}
          <div class="df-card__content">
            <div class="df-card__title">{{title}}</div>
            <div class="df-card__description">{{{description}}}</div>
            {{#price}}
            <div class="df-card__pricing">
              <span class="df-card__price {{#sale_price}}df-card__price--old{{/sale_price}}">
                {{#format-currency}}{{price}}{{/format-currency}}
              </span>
              {{#sale_price}}
                <span class="df-card__price df-card__price--new">
                  {{#format-currency}}{{sale_price}}{{/format-currency}}
                </span>
              {{/sale_price}}
            </div>
            {{/price}}
          </div>
        </a>
        <div>
          <button type="button" class="my-df-addtocart-btn" data-addtocart="{{id}}">
            {{#translate}}Add To Cart{{/translate}}
          </button>
        </div>
      </div>
    {{/results}}
  {{/total}}
  {{^total}}
    <p class="df-no-results">{{#translate}}Sorry, no results found.{{/translate}}</p>
  {{/total}}
</script>