Categorías
PrestaShop

Como añadir un selector de combinaciones y otro de cantidad al listado de productos en Prestashop 1.6

El objetivo de esta modificación, es agilizar el proceso de compra de un producto de nuestro catálogo, añadiendo a la vista del listado de productos un selector de cantidad y otro de combinaciones. De este modo, el usuario no necesitará entrar a la pagina del producto, para configurarlo y realizar la compra, sino que desde el propio listado de productos podrá añadir al carro los productos ya configurados.

Para ello editamos los siguientes ficheros:

/* myprestashop/htdocs/controller/front/CategoryController.php */

public function initContent(){
 // dentro de initContent() añadimos estas lineas...
 $products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);
 $combinations = $this->getProductAttributeCombinations($products);
 $this->context->smarty->assign('combinations', $combinations);
 
}

public function getProductAttributeCombinations($products) {
    $combinations = array();
    foreach($products as $product)
    {
        $product = new Product ($product['id_product'], $this->context->language->id);
        $combinations[$product->id] = $product->getAttributeCombinations($this->context->language->id);
    }
    return $combinations;
}

Con esto ya tenemos un objeto que contiene las diferentes combinaciones de cada producto del listado.

<!-- myprestahop/htdocs/themes/mytheme/product-list.tpl

{foreach from=$combinations key=k item=comb}
    {if $k == $product.id_product && isset($comb[0].group_name) }
        <label class="comb_title">{$comb[0].group_name} </label>
        <select id="attribute_wanted_{$product.id_product|intval}">
        {foreach from=$comb item=attr}
            <option value="{$attr.id_product_attribute}">{$attr.attribute_name} {if ($attr.price > 0)}--- precio: {($attr.price + $product.price_tax_exc)|string_format:"%.2f"} €{/if}</option>
        {/foreach}
        </select>
    {/if}
{/foreach}
<label>{l s='Cantidad :'}</label>
<input style="width: 40px;text-align: right;" type="number" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" /><br>
<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product-attribute="{$product.id_product_attribute|intval}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
    <span>{l s='Add to cart'}</span>
</a>

Editamos la vista añadiendo los dos selectores justo encima del botón de añadir al carrito.

/* myprestashop/htdocs/themes/mytheme/js/modules/blockcart/ajax-cart.js */

//for every 'add' buttons...
$(document).off('click', '.ajax_add_to_cart_button').on('click', '.ajax_add_to_cart_button', function(e){
    e.preventDefault();
    var idProduct =  parseInt($(this).data('id-product'));
    var idProductAttribute =  parseInt($(this).data('id-product-attribute'));
    var minimalQuantity =  parseInt($(this).data('minimal_quantity'));
    if (!minimalQuantity)
        minimalQuantity = 1;
    if ($(this).prop('disabled') != 'disabled')
        // Modificamos la siguiente linea que 
        // invoca a la función ajaxCart.add()
        // pasandole por parametro los nuevos datos
        // de que disponemos. 
        ajaxCart.add(idProduct, $('#attribute_wanted_'+idProduct).val() || idProductAttribute, false, this, $('#quantity_wanted_'+idProduct).val() || minimalQuantity);
});
//for product page 'add' button...
if ($('.cart_block').length) {
    $(document).off('click', '#add_to_cart button').on('click', '#add_to_cart button', function(e){
        e.preventDefault();
        ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
    });
}

Y por último pasamos los nuevos parametros a la funcion ajaxCart.add() para que se agregue al carro la selección del producto incluyendo la cantidad y la combinación seleccionada.

Un saludo,

4 respuestas a «Como añadir un selector de combinaciones y otro de cantidad al listado de productos en Prestashop 1.6»

Hola Jesus, lamento que no te haya funcionado correctamente. El ejemplo que pongo en el post está extraído de un desarrollo real de un proyecto que está en producción actualmente. Dale una vuelta a ver si te ha pasado algo, aunque con el tiempo que he tardado en responderte seguro que ya diste con la solución 😉

Buenas tardes,

Ante todo, muchas gracias por el post porque me ha servido de gran ayuda para un proyecto.

Sin embargo, me preguntaba si era posible imprimir el campo de selección de atributos en los resultados de la búsqueda.

Actualmente, y aplicando el tutorial, el listado de atributos se me imprime correctamente en las listas de producto de la categoría, pero no en los resultados de la búsqueda.

Muchas gracias por su tiempo y ayuda 🙂

Hola Santiago, me alegro que te haya sido util el post. Para que se imprima el listado de atributos en los resultados de búsqueda busca el controlador y el template asociados a esa funcionalidad (creo que el template es el mismo pero está unas lineas antes que el ejemplo, aunque no estoy seguro) y adapta el código del ejemplo si fuera necesario. Probablemente ya diste con la solución por ti mismo dado el tiempo que tardé en contestar a tu pregunta pero por si acaso ahí te dejo mi ayuda.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *