Entrada de combinaciones en tabla para pedidos B2B

valeriamadrid

Hola a todos, estoy con un problema que me está volviendo loco con nuestros clientes B2B. Vendemos ropa y también algunos productos industriales que tienen muchísimas variantes de talla, color, etc.

El tema es que, en la página del producto, PrestaShop por defecto solo permite seleccionar una combinación (por ejemplo, Talla S, Color Azul) y añadir al carrito, luego otra combinación, y así sucesivamente. Para nuestros clientes B2B que hacen pedidos grandes con muchas unidades de diferentes tallas y colores, esto es un infierno. Se tardan una eternidad y se equivocan mucho.

Necesitamos una forma de mostrar una tabla o matriz en la página del producto donde puedan ver todas las combinaciones disponibles y poner directamente las cantidades para cada una (por ejemplo, Talla S: 5 unidades, Talla M: 10 unidades, Talla L: 3 unidades) y luego hacer clic en un único botón de 'Añadir todo al carrito'.

¿Alguien ha implementado algo similar o tiene alguna idea de cómo abordar esto? Nuestros clientes se quejan muchísimo.

valeriaiberia90

Uf, @valeriamadrid, te entiendo perfectamente. Nosotros tuvimos una solicitud idéntica de un cliente que vende uniformes de trabajo. La forma nativa de PrestaShop es muy poco eficiente para pedidos con muchas combinaciones.

Me suena que sin un módulo específico o una buena dosis de personalización de plantilla y JavaScript, esto es casi imposible de conseguir de forma limpia. ¿En qué versión de PrestaShop tienes la tienda? Saberlo es clave porque cambia un poco cómo se gestionan las plantillas y los hooks.

Milo

Hola @valeriamadrid. @valeriaiberia90 tiene razón, esta funcionalidad es un clásico en entornos B2B y PrestaShop 8.2.8 no lo trae de serie. La selección de combinaciones una a una es la única opción nativa.

Para implementar una matriz de cantidades, tendrás que modificar el template del producto y añadir lógica JavaScript. No hay una opción en el Back Office para esto directamente. La clave es sobrescribir o modificar el archivo product.tpl de tu tema (o el partial que maneje las combinaciones) para que, en lugar de dropdowns, genere una tabla HTML.

El proceso sería:

Identificar el archivo de plantilla: En el tema Classic (o uno basado en él), el archivo principal es themes/classic/templates/catalog/product.tpl. La parte de combinaciones suele estar en _partials/product-variants.tpl o _partials/product-combinations.tpl.
Iterar sobre las combinaciones: Necesitarás acceder a todas las combinaciones del producto ($product.combinations).
Generar la tabla HTML: Crear una tabla con las cabeceras de los atributos (ej. 'Talla', 'Color') y filas para cada combinación. En cada celda de combinación, colocar un campo <input type="number"> con el nombre adecuado para identificar la combinación (por ejemplo, name="qty_{$combination.id_product_attribute}").
Añadir botón 'Añadir todo': Un botón que, al hacer clic, recopile todas las cantidades de los campos de input.
Lógica JavaScript (AJAX): Esta es la parte más compleja. Necesitarás JS para recoger todos los id_product_attribute y sus cantidades correspondientes, y luego enviar una solicitud AJAX al controlador del carrito para añadir múltiples productos a la vez. Esto probablemente requiera un override del controlador FrontController o del módulo de carrito para manejar la entrada múltiple.

Aquí tienes un fragmento de Smarty básico que te daría la estructura para listar las combinaciones con inputs de cantidad. Esto iría donde actualmente se renderizan los selectores de combinación en tu .tpl:

{if isset($product.combinations) && $product.combinations}
  <div class="product-combinations-matrix">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Combinación</th>
          <th>Referencia</th>
          <th>Precio</th>
          <th>Stock</th>
          <th>Cantidad</th>
        </tr>
      </thead>
      <tbody>
        {foreach from=$product.combinations item='combination' key='id_product_attribute'}
          <tr>
            <td>
              {foreach from=$combination.attributes item='attribute'}
                {$attribute.group_name}: {$attribute.attribute_name}{if !$attribute@last}, {/if}
              {/foreach}
            </td>
            <td>{$combination.reference}</td>
            <td>{$combination.price}</td>

Este es solo el HTML/Smarty. La parte de JavaScript para recoger los datos y enviarlos al carrito sería el siguiente paso, y es donde reside la mayor parte de la lógica compleja. Requerirá que tu desarrollador interactúe con el objeto prestashop.on('updatedCart') y posiblemente con la API del carrito de PrestaShop.

valeriamadrid

¡Increíble, @Milo! Muchísimas gracias por la explicación tan detallada y el fragmento de código Smarty. Esto es justo lo que necesitábamos para empezar a trabajar.

La estructura de la tabla y los input con los id_product_attribute es perfecta como base. Ya tenemos a nuestro desarrollador mirando la parte de JavaScript para manejar el AJAX y el envío múltiple al carrito, pero con tu Smarty ya tenemos la parte visual y la recolección de datos bien definida.

Confirmo que en nuestra PrestaShop 8.2.8 esto nos ha servido de maravilla como punto de partida. ¡Mil gracias de nuevo por la ayuda tan directa y útil!