Sure!
This code is placed in footer.php. It only runs on a certain product category and only shows on mobile devices. (the latter is done with CSS).
Im not a web-dev, so there’s most likely a better way, but this works for now. Also, this works only on simple products. On variable products you’d need more info, like the variation_id. I’m still working on that.
Furthermore, it’s most likely best to put the script in a different file, instead of this source. So it’s quite hacky.
In tagmanager I created a new tag+trigger. Tag should use data-layer, and the trigger (custom event type) triggers on clicks in the button below.
<?php if (function_exists( 'is_woocommerce' )) : ?>
<?php if (is_product() && strpos(get_the_title(), 'cape')) : ?>
<div class="winkelmand_knop_float_container">
<form id="in_winkelmand_knop" method="post" enctype='multipart/form-data' action="<?php global $product; echo $product->add_to_cart_url();?>">
<script>
function functie() {
var name = document.getElementById("productName").value;
var id = document.getElementById("productId").value;
var sku = document.getElementById("productSKU").value;
var price = document.getElementById("productPrice").value;
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': {
'products': [{
'name': name,
'id': id,
'price': price,
'sku': sku,
'brand': 'our brand',
'category': 'Apparel',
'quantity': 1
}]
}
}
});
}
</script>
<input id="productName" value="<?php global $product; echo $product->get_name();?>" type="hidden" />
<input id="productId" value="<?php global $product; echo $product->get_id();?>" type="hidden" />
<input id="productSKU" value="<?php global $product; echo $product->get_sku();?>" type="hidden" />
<input id="productPrice" value="<?php global $product; echo $product->get_price();?>" type="hidden" />
<button class="winkelmand_knop_float" type="submit" OnClick="functie()">In mijn mandje</button>
</form>
</div>
<?php endif; ?>
<?php endif; ?>
