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,