0

verán tengo el siguiente problema. Por medio de Ajax tengo un carrito de compras que al agregar una cantidad para un producto, multiplica el valor del producto por la cantidad. Ejemplo Cantidad = 2 Valor del producto = 20, por lo tanto el subtotal = 40. esto lo tengo para un solo producto, pero al momento de agregar más de un producto, no logro saber cómo puedo hacer ese ajax para n cantidades de productos, ya que mi código es el siguiente:

<script>
    $(document).ready(function () {
        $('#tdb1').click(function(){
            var quantity = $( "input[name*='cart_quantity[]']" ).val();
            var productPrice = '<?=$jsubtotal?>';
            $.ajax({
                url: 'data.php',
                type:'POST',
                data: {
                    quantityPHP : quantity,
                    productPricePHP : productPrice
                }
            })
                .done(function(res){
                    $('#idsubtotal').html('$' +  res)
                });
        })
    });    
</script>

La duda que tengo es esa, agrego un producto con un botón id = "tdb1", ejecuta el click.function y llama mi ajax, pero cuando agrego otro y por un for establezco que ahora para el segundo su id = "tdb2" no logro saber cómo ejecutar mi Ajax para el segundo, cómo asocio o concateno el 2 para que mi ajax quede dinámico cada que hagan clic en otro botón llame la función y quede con id = "tdb2" y esto para n productos, "tdb3", "tdb4" etc.

Muchas gracias por su apoyo!! :)

Agrego el HTML. Estoy usando la librería oscommerce, al momento de llamar la siguiente función me regresa esto:

//Función Oscommerce.

tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh', 'javascript:void(0)')

//La función realiza lo siguiente:

function tep_draw_button($title = null, $icon = null, $link = null, $priority = null, $params = null) {
    static $button_counter = 1;
    $types = array('submit', 'button', 'reset');

    if ( ($params['type'] == 'submit') && isset($link) ) {
        $params['type'] = 'button';
    }

    if ( ($params['type'] == 'button') && isset($link) ) {
        $button .= '<a onclick="sendAjax(this)" id="tdb' . $button_counter . '" href="' . $link . '"';
    }
    return $button;
}

//Esto pinta en el HTML

<a onclick="sendAjax(this)" id="tdb4" href="javascript:void(0)" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span>
    <span class="ui-button-text">Update</span>
</a>

Yo agregué el atributo onclick para que siempre ejecute esa función, solo que no me queda claro cómo agregar el id de ese botón para que pinte correctamente mi html con el cálculo.

3
  • 1
    En la pregunta pon tu html y como creas esos botones dinamicamente para que podamos ayudarte
    – masterguru
    el 30 may. 2022 a las 5:50
  • 1
    Agrega el fragmento del código html. de la tabla
    – W Aleman
    el 30 may. 2022 a las 8:44
  • Gracias! lo acabo de editar sobre la pregunta. En verdad les agradezco.
    – UseIP
    el 31 may. 2022 a las 4:31

1 respuesta 1

0

A grandes rasgos, no declaras un listener para cada botón, sino un solo listener para todos los productos. Si cada producto puede ser representado por un elemento XML tal que

<producto id="XX">
   <precio>YY</precio>
   <cantidad>ZZ</cantidad>
</producto>

Entonces tu html ya tiene todo lo que necesita. Por ejemplo, si cada bloque tuviera la forma

<div id="tbd1" class="producto">
    Nombre Producto 1
    <input type="number" value="10" class="price"/>
    <input type="number" value="2" class="quantity"/>
    <button class="enviar">Enviar</button>
</div>

En vez de declarar un listener para cada ID, lo haces para la clase enviar. Dentro del handler, como sabes qué botón generó el evento (por ejemplo mediante jQuery(this)) entonces sabes su elemento padre, y si sabes el padre, ya sabes los dos input que lo acompañaban. Tienes todo.

Hay más de una manera de armar un carrito, pero básicamente te diría que eso de mandar el precio es un poco peligroso. Como en todo comercio uno debiera poder elegir qué comprar y cuánto comprar, pero es el backend que debiera recalcular el precio. Esto lo puedes hacer enviando siempre el carrito completo (pares ID=>cantidad) o bien manteniendo un valor que persiste durante la sesión y se va recomputando incrementalmente.

Como no puedo imitar un backend en estos snippets, lo siguiente es un ejemplo muy burdo de cómo se podría usar un contenedor de producto tal que las funciones que manejan el evento click no tengan por qué saber de antemano el ID, o el precio de lo que se dibujará en la página.

const productscontainer = document.querySelector('#products'),
  messages = document.querySelector('#total label'),
  cartTotal = document.querySelector('#cart_total');

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

function computeCartTotal() {
  return [...productscontainer.querySelectorAll('.producto')].reduce((accum, producto) => {
    let price = Number(producto.querySelector('.price').value),
      quantity = Number(producto.querySelector('.quantity').value)
    return accum += price * quantity
  }, 0);
}

[1, 2, 3, 4, 5].forEach((i) => {
  const itemPrice = Math.round(10 + 100 * Math.random());
  let producto = document.createElement('div')
  producto.className = 'producto'
  producto.textContent = `producto ${i}, precio `;
  producto.id = `item_${i}`
  const priceInput = document.createElement('input')
  priceInput.value = itemPrice;
  priceInput.type = 'number';
  priceInput.disabled = true;
  priceInput.className = 'price';
  producto.appendChild(priceInput);
  let inputNumber = document.createElement('input')
  inputNumber.type = 'number'
  inputNumber.className = 'quantity'
  inputNumber.value = 0

  let addBtn = document.createElement('button')
  addBtn.textContent = '+';
  addBtn.className = 'add_product';
  let subBtn = document.createElement('button')
  subBtn.textContent = '-';
  subBtn.className = 'del_product';


  producto.appendChild(addBtn);
  producto.appendChild(inputNumber);
  producto.appendChild(subBtn);
  productscontainer.appendChild(producto);
})
const updateValue = debounce(() => {
  cartTotal.value = computeCartTotal()
  messages.textContent = 'El total de su carrito es de'
});

jQuery('#container .producto input.quantity').on('change', updateValue);
jQuery('#container .producto button').on('click', (e) => {
  let currentTotal = Number(cartTotal.value || 0),
    $button = jQuery(e.target),
    producto = $button.closest('.producto'),
    price = Number(producto.find('input.price').val()),
    quantityInput = producto.find('input.quantity')[0],
    quantity = Number(quantityInput.value),
    delta = $button.hasClass('del_product') ? -1 : 1

  if (delta === 1 || quantity > 0) {
    quantityInput.value = quantity + delta;

    let msg = `${delta>0?'Añadido':'Eliminado'}: ${producto[0].id}`
    messages.textContent = msg
    updateValue();


  }




})
#container,
#total,
#messages {
  max-width: 400px;
  min-height: 1.1em;
}

#container .producto {
  display: block;
  border: 1px solid #ccc;
  font-size: 0.9em;
}

#container .producto input.price {
  margin: 0 5px;
  width: 30px;
  display: inline-block;
  text-align: right;
  padding-right: 0;
  padding-left: 5px;
}

#container .producto button {
  margin: 0;
  width: 30px;
  float: right;
}

#products .producto input.quantity {
  margin: 0 10px;
  width: 50px;
  float: right;
}

#total {
  padding-top: 0.5em;
  margin-top: 0.5em;
  font-size: 0.9em;
  border-top: 1px solid #000;
}

#cart_total {
  margin: 0 0 0 10px;
  width: 70px;
  float: right;
}

#total div {
  float: right;
}

#total div::before {
  content: '$ ';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="products">

  </div>
  <div id="total">
    <label>
El total de su carrito es de
</label>
    <div><input type="number" readonly id="cart_total" value="0" /></div>

  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.