Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div>
<button type="button" class="my-df-addtocart-btn" data-addtocart="{{id}}">
{{#translate}}Add To Cart{{/translate}}
</button>
</div>
<div>
<button type="button" class="my-df-addtocart-btn" data-addtocart="{{id}}">Add To Cart</button>
</div>
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
}
}
}
];
var dfClassicLayers = [
{
// ...
display: {
// ...
translations: {
'Add To Cart': 'Añadir al carrito'
}
}
}
];
var dfClassicLayers = [
{
// ...
display: {
results: {
template: document.getElementById('my-results-template').innerHTML
}
}
}
];
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment