Jump to content

Botones desplegables añadir cantidad


PSuser

Recommended Posts

Muy buenas.

Estoy intentando crear unos botones desplegables de cantidad en la lista de productos que me permitan añadir el producto al carrito. Es decir, cuando entras en la página de categoría y se muestran todos los productos, cada producto tiene un botón que permite añadir al carrito una unidad tal que así.

5aa0101381c5a_Capturadepantalla2018-03-07alas17_14_59.png.5facfed1672caee7315999aa1a3fcaaa.png

Cuando haces clic en el botón "+", se despliega un campo mostrando la cantidad y el botón de disminuir cantidad, tal que así.

5aa010de10209_Capturadepantalla2018-03-07alas17_18_23.png.16e78e1c1acfd53e7b6ab14445fd9a82.png

Mi problema viene a que cuando haces click en cualquier botón de añadir un producto se despliega todo en todos los productos y yo solo quiero que se despliegue en el producto que has añadido.

Por si sirve de ayuda adjunto lo que he añadido en el archivo .tpl

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<center>
                            <div class="multi_cart_div_{$product->id|intval}_{$id_combination|intval} mc_div_qty_outer">

                            {if $MC_PROD_CART_HIGHLIGHT == 'Switch_Button'}
                                <input {if $combination['cart_quantity'] > 0}checked{/if} type="checkbox" class="mult_chk" value="{$product->id|intval}" style="display:none;">
                                <div class="mc_cbox_container_div" style="padding-right:10px;display:inline;">
                                    <div class="yes-notselected checkyes_{$product->id|intval}">
                                        <i style="font-weight:bolder;" class="{$MC_TICK_MARK|escape:'html':'UTF-8'}"></i>
                                    </div>
                                    <div class="no-selected checkno_{$product->id|intval}">
                                        <i style="font-weight:bolder;" class="{$MC_TIMES_ICON|escape:'html':'UTF-8'}"></i>
                                    </div>
                                </div>
                            {/if}

                                <div id="contenedorProductolistado" class="mc_div_qty_inner">
                                    <div id="listadoParteoculta">
                                    <a
                                    style="border-color: {$MC_PLUSMINUS_BGCOLOR|escape:'html':'UTF-8'};"
                                    class="btn btn-default button-minus multi_cart_quantity_down {if quantity_{$product->id|intval} == 0} unvisible{/if}" title="Subtract" rel="nofollow" value="{$product->id|intval}">
                                        <span
                                            class="multi_cart_quantity_span"
                                            style="background-color: {$MC_PLUSMINUS_BGCOLOR|escape:'html':'UTF-8'};
                                                border-color: {$MC_PLUSMINUS_BGCOLOR|escape:'html':'UTF-8'};
                                                background-image: none;
                                                color: {$MC_PLUSMINUS_ICONCOLOR|escape:'html':'UTF-8'};">
                                            <i class="{$MC_MINUS_ICON|escape:'html':'UTF-8'}"></i>
                                        </span>
                                    </a>
                                    <span
                                    style="display:inline-block;
                                            text-align:center;
                                            vertical-align:middle;
                                            padding:0px;">
                                        <input type="text"  name="quantity_{$product->id|intval}" value="{$combination['cart_quantity']|escape:'htmlall':'UTF-8'}" mc_cart_min_qty="{$combination['minimal_quantity']|intval}" id_product_attribute="{$id_combination|escape:'htmlall':'UTF-8'}"                                 mc_cart_qty="{$combination['cart_quantity']|escape:'htmlall':'UTF-8'}" mc_input_prodid="{$product->id|intval}" comb_addcart="1" class="multicart_quantity_input_comb form-control grey mc_text_qty_{$product->id|intval} mc_qty_input_textbox_style" autocomplete="off" />
                                    </span>
                                    </div>
                                    <a
                                    style="border-color: {$MC_PLUSMINUS_BGCOLOR|escape:'html':'UTF-8'};"
                                    class="btn btn-default button-plus multi_cart_quantity_up" title="Add" rel="nofollow" value="{$product->id|inval}">
                                        <span
                                            class="multi_cart_quantity_span"
                                            style="background-color: {$MC_PLUSMINUS_BGCOLOR|escape:'html':'UTF-8'};
                                                border-color: {$MC_PLUSMINUS_BGCOLOR|escape:'html':'UTF-8'};
                                                background-image: none;
                                                color: {$MC_PLUSMINUS_ICONCOLOR|escape:'html':'UTF-8'};">
                                            <i class="{$MC_PLUS_ICON|escape:'html':'UTF-8'}"></i>
                                        </span>
                                    </a>
                                </div>

                        </div>
                    </center>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Y esto en el JavaScript

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

$("#mostrarListado").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    // e.preventDefault();
            $(".listadoParteoculta").show("slow");
});

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Si me ayudan con esto me harían un gran favor.

Muchas gracias.

Saludos

Edited by PSuser (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...