Estoy tratando de recuperar los atributos de datos del carrito, pero no funciona.
También me gustaría saber si hay alguna forma de acortar el código.
HTML:
<div id="product-listing" class="hidden"> <div> <img src="img1.jpg" /> <div class="description">Lagavulin 16 Year Old</div> <button class="add-to-cart" data-product-id="1" data-product-title="Lagavulin 16 Year Old" data-category="Scotch"> Add To Cart </button>Vainilla js:
function onPageLoad(event) { var title = document.getElementsByTagName("title")[0].innerText; console.log({ event_name: "page loaded", page_title: title, }); } var photo = document .getElementsByClassName("add-to-cart") .getAttribute("data-product-id"); for (var i = 0; i < photo.length; i++) { photo[i].onclick = function() { console.log({ event_name: "add_to_cart", product_id: data-product-id, product_title: data-product-title, }); } };Esto debería funcionar:
Array.from(document.getElementsByClassName("add-to-cart")).forEach(x => x.onclick = () => console.log({ event_name: "add_to_cart", product_id: x.getAttribute("data-product-id"), product_title: x.getAttribute("data-product-title") })); <button class="add-to-cart" data-product-id="1" data-product-title="Lagavulin 16 Year Old" data-category="Scotch">Add To Cart</button> <button class="add-to-cart" data-product-id="2" data-product-title="Some other Scotch" data-category="Scotch">Add To Cart</button> No estaba iterando correctamente sobre los elementos devueltos por getElementsByClass y tampoco estaba usando element.getAttribute("") correctamente.
Para hacerlo más corto usé streams.
Prueba de esta manera:
var photo = document .getElementsByClassName("add-to-cart"); for (var i = 0; i < photo.length; i++) { photo[i].onclick = function() { console.log({ event_name: "add_to_cart", product_id: photo[i].getAttribute("data-product-id"), product_title: photo[i].getAttribute("data-product-title"), }); } };Prueba esto
var photo = document.querySelectorAll('.add-to-cart'); photo.forEach(function(button){ button.addEventListener('click',function(){ console.log(this.getAttribute('data-product-id')); },{passive:true}); });