Esto funcionaba para mí antes, pero dejó de funcionar. Estoy tratando de obtener el atributo de datos para poder agregarlo al carrito a través de AJAX.
ACTUALIZACIÓN: mi objetivo es obtener los datos del atributo data-variant-id para poder agregarlos al carrito a través de la API AJAX de Shopify. Anteriormente, tenía un botón que decía AGREGAR AL CARRITO y funcionaba bien. De repente, el botón dejó de funcionar cuando agregué una etiqueta de icono.
Este es el fragmento:
// Fake Shopify const Shopify = { addItem (id, qty, cb) { console.log("Shopify.addItem - id: %s, qty: %i", id, qty) setTimeout(cb, 200) } } const refreshCart = () => console.log("refreshCart") $('[data-variant-id]').each(function() { $(this).on('click', function(e) { e.preventDefault(); var button = e.target var variantId = button.dataset.variantId console.log('variantId', variantId); // Add Item to cart Shopify.addItem(variantId, 1, function() { // Now its added. lets refresh the cart drawer refreshCart(); // Now its refreshed. Lets open the drawer $('[data-drawer-trigger]')[0].click(); }) }) }) @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"); [data-drawer-trigger] { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <button data-variant-id="40173189300410" value="Add to Cart" class="btn-icon"><i class="fas fa-shopping-cart"></i></button> <button data-drawer-trigger>Drawer Trigger Button</button>var button = e.target
Este es tu problema.
Cuando hace clic en el botón, lo más probable es que esté haciendo clic en <i> , que es el elemento identificado por e.target .
El evento aparece en el botón que activa su controlador de eventos, pero luego su <i> no tiene ningún atributo data-* , por lo que button.dataset.variantId no está undefined .
La solución simple es usar el enlace this de jQuery en el controlador de eventos que se une al evento currentTarget (el elemento en el que agregó el controlador). Tampoco necesitas .each()
$('button[data-variant-id]').on("click", function(e) { e.preventDefault() const variantId = this.dataset.variantId // note `this` console.log('variantId', variantId); // Add Item to cart Shopify.addItem(variantId, 1, function() { // Now its added. lets refresh the cart drawer refreshCart(); // Now it's refreshed. Lets open the drawer $('[data-drawer-trigger]').eq(0).click(); // using `.eq(0)` is safer }) })Además, su icono debe ser
<i class="fas fa-shopping-cart"></i> Tenga en cuenta el nombre de la clase fas , no far .