Ayuda con añadir cantidad de productos

[daniel_jimenez]

Hola Buenas tardes

 

Estoy construyendo una tienda online usando el tema AngarThemes y ya la tengo bastante avanzada, pero me ha pedido el cliente que le ponga en todas partes los típicos botones de incrementar y decrementar productos en el/los listados de productos.

Sé muy poco de php y estoy empezando ahora un poco de programacion en los tpl.

El único sitio donde tengo el código de esos botones es en la ficha de cada producto.

Por lo que he puesto el codigo (lo copio más abajo)  en el product.tpl de la carpeta miniatures

El resultado es que me incluye bien el product-add-to-cart en todos los productos, pero las flechas se ven solo en el primer producto.

He visto que viene de un fichero js, llamado product.js e intuyo que lo hace solo una vez porque no está preparado para llamarse más de una vez .

No se que hacer para renderizarlo en todos los productos de la página. Añado código y pantallazos... espero que alguien me pueda ayudar.. si necesitáis más info os la doy encantado..

 

products.js:

$(document).ready(function () {

  createProductSpin();

...................

 

 

  function createProductSpin()

  {

    let quantityInput = $('#quantity_wanted');

    quantityInput.TouchSpin({

      verticalbuttons: true,

      verticalupclass: 'material-icons touchspin-up',

      verticaldownclass: 'material-icons touchspin-down',

      buttondown_class: 'btn btn-touchspin js-touchspin',

      buttonup_class: 'btn btn-touchspin js-touchspin',

      min: parseInt(quantityInput.attr('min'), 10),

      max: 1000000

    });

 

    var quantity = quantityInput.val();

    quantityInput.on('keyup change', function (event) {

      const newQuantity = $(this).val();

      if (newQuantity !== quantity) {

        quantity = newQuantity;

        let $productRefresh = $('.product-refresh');

        $(event.currentTarget).trigger('touchspin.stopspin');

        $productRefresh.trigger('click', {eventType: 'updatedProductQuantity'});

      }

      event.preventDefault();

 

      return false;

    });

  }

});

 

 

product.tpl

.......

  <div class="product-actions">
              {block name='product_buy'}
                <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
                  <input type="hidden" name="token" value="{$static_token}">
                  <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
                  <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">
                  {block name='product_add_to_cart'}
                    {include file='catalog/_partials/product-add-to-cart.tpl'}
                  {/block}
                </form>
              {/block}        
            </div>

 

...........

 

product-add-to-cart.tpl

 

<div class="product-add-to-cart">
  {if !$configuration.is_catalog}
    {block name='product_quantity'}
      <div class="product-quantity clearfix">
        <span class="control-label">{l s='Quantity' d='Shop.Theme.Catalog'}</span> {* AngarTheme *}
        <div class="qty">
          <input
            type="text"
            name="qty"
            id="quantity_wanted"
            value="{$product.quantity_wanted}"
            class="input-group"
            min="{$product.minimal_quantity}"
            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
          >
        </div>

        <div class="add">
          <button
            class="btn btn-primary add-to-cart"
            data-button-action="add-to-cart"
            type="submit"
            {if !$product.add_to_cart_url}
              disabled
            {/if}
          >
            <i class="material-icons shopping-cart">&#xE547;</i>
            {l s='Add to cart' d='Shop.Theme.Actions'}
          </button>
        </div>
      </div>
    {/block}

    {block name='product_availability'}
      <span id="product-availability">
        {if $product.show_availability && $product.availability_message}
          {if $product.availability == 'available'}
            <i class="material-icons rtl-no-flip product-available">&#xE5CA;</i>
          {elseif $product.availability == 'last_remaining_items'}
            <i class="material-icons product-last-items">&#xE002;</i>
          {else}
            <i class="material-icons product-unavailable">&#xE14B;</i>
          {/if}
          {$product.availability_message}
        {/if}
      </span>
    {/block}
    
    {block name='product_minimal_quantity'}
      <p class="product-minimal-quantity">
        {if $product.minimal_quantity > 1}
          {l
          s='The minimum purchase order quantity for the product is %quantity%.'
          d='Shop.Theme.Checkout'
          sprintf=['%quantity%' => $product.minimal_quantity]
          }
        {/if}
      </p>
    {/block}
  {/if}
</div>

 

 

 

Muchas gracias