Quantity up and down ajax on product detail page

[mdusamaansari]

Hi Techies,

 

I am using PS version 1.5.4.1.

 

I need quantity up and quantity down as in shopping cart page. The quantity up and quantity down is available in 1.6 version. But I need in version 1.5.4.1.

 

Here with attached my requirement as image with circled red.

 

Thanks in advance.

 

mdusamaansari

[TimShoper]

Hi

 

In file product.tpl

 

find and delete

 

 

<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>

<label>{l s='Quantity :'}</label>

<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} />

</p>

 

 

In place of the remote unit, add

 

 

<script type="text/javascript" src="{$js_dir}incrementing.js"></script>

<div class="buyid" id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>

<input id="uprice" type="hidden" value="{Tools::ps_round($productPrice)}" />

<input type="text" name="qty" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} disabled="disabled" /><input type="button" class="incbtn inc"><input type="button" class="incbtn dec">

</div>

 

 

add this file global.css

 

.buyid {margin:5px 1px;}

 

.buyid input[name=qty]{

    border: 1px solid #D2D1CD;

    color: #BEBEBA;

    font-size: 12px;

    font-weight: normal;

    height: 17px;

    width: 28px;

padding:0 2px;

margin:0;

}

 

.incbtn {

border:none;

width:19px;

height:19px;

vertical-align:top;

cursor:pointer;

margin: 0 0 0 1px;

}

.inc {

background:url(../img/up.png) no-repeat 0 0;

}

 

.dec {

background:url(../img/down.png) no-repeat 0 0;

}

 

.inc:hover {background:url(../img/upa.png) no-repeat 0 0;}

.dec:hover{background:url(../img/downa.png) no-repeat 0 0;}

 

Open modules / blockcart / ajax-cart.js find and replace:

 

find:

ajaxCart.add(idProduct, null, false, this);

replace:

 

 

 

var incval = $(this).parent().parent().find('input[name=qty]').val();

ajaxCart.add(idProduct, null, false, this, parseInt(incval));

 

 

 

Copy the files from the archive img

Copy the file "incrementing.js"

 

https://www.sendspace.com/file/gqqj2m

Edited July 22, 2014 by TimShoper (see edit history)

[mdusamaansari]

 

Hi

 

In file product.tpl

 

find and delete

 

 

<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>

<label>{l s='Quantity :'}</label>

<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} />

</p>

 

 

In place of the remote unit, add

 

 

<script type="text/javascript" src="{$js_dir}incrementing.js"></script>

<div class="buyid" id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>

<input id="uprice" type="hidden" value="{Tools::ps_round($productPrice)}" />

<input type="text" name="qty" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} disabled="disabled" /><input type="button" class="incbtn inc"><input type="button" class="incbtn dec">

</div>

 

 

add this file global.css

 

.buyid {margin:5px 1px;}

 

.buyid input[name=qty]{

    border: 1px solid #D2D1CD;

    color: #BEBEBA;

    font-size: 12px;

    font-weight: normal;

    height: 17px;

    width: 28px;

padding:0 2px;

margin:0;

}

 

.incbtn {

border:none;

width:19px;

height:19px;

vertical-align:top;

cursor:pointer;

margin: 0 0 0 1px;

}

.inc {

background:url(../img/up.png) no-repeat 0 0;

}

 

.dec {

background:url(../img/down.png) no-repeat 0 0;

}

 

.inc:hover {background:url(../img/upa.png) no-repeat 0 0;}

.dec:hover{background:url(../img/downa.png) no-repeat 0 0;}

 

Open modules / blockcart / ajax-cart.js find and replace:

 

find:

ajaxCart.add(idProduct, null, false, this);

replace:

 

 

 

var incval = $(this).parent().parent().find('input[name=qty]').val();

ajaxCart.add(idProduct, null, false, this, parseInt(incval));

 

 

 

Copy the files from the archive img

Copy the file "incrementing.js"

 

https://www.sendspace.com/file/gqqj2m

 

 

Hi TimShoper,

 

Really am very much thankful for your support. I fount this is very helpful for me.

 

I am using version 1.5.4.1. I found a small issue that, my qty named input field value is not getting updated when I press "plus" or "minus". So the default value is sending to blockcart. 

 

Here is my online link, where you can check it out. http://store.unikmobil.dk/

 

Thanks in advance.

[schibinet]

Hi TimShoper,

 

I'm Paul, thank you for you help on incrementing problem, 

 

So i would like to try your solution but the link with incrément.js is desactived..

 

If you have this file i would be wonderful

 

Thank you in advance,

 

[ranjit1155]

i am new please explain how to go product.tpl and how to display on home page Price: $69.99 

Old Price: $199.99

Edited May 6, 2015 by ranjit1155 (see edit history)