Jump to content

[Solved]How to Add Quantity in Product List 1.6

Chris2013
 Share

Recommended Posts

Chris2013 Newbie

Chris2013

Posted
Posted (edited)

Hi Guys

 

Been trying to add a quantity box to the productlist_tpl pretty much like the actual product page

 

I have tried to follow this http://mypresta.eu/en/art/developer/prestashop-quantity-field-on-product-list.html from this clever chap and edit it to suit 1.6 but with no luck

 

Any ideas on how to achieve this?

 

 

Chris

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

Chris2013

Posted
  • Author
Posted

Ah ha the man of the article himself :)

 

The cart only adds one item, I must have a typo somewhere either in the .tpl or .js file

I'll give it a go again and let you know.

 

Thanks for taking the time to reply.

 

Chris

Link to comment
Share on other sites
Chris2013 Newbie

Chris2013

Posted
  • Author
Posted

Nope no joy, this is what i have

in my ajax-cart.js

 

//for every 'add' buttons...
        $('.ajax_add_to_cart_button').unbind('click').click(function(){
            var idProduct =  $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
            if ($(this).attr('disabled') != 'disabled')
                ajaxCart.add(idProduct, null, false, this, $('quantity_to_cart_'+idProduct+'').val());
            return false;
        });

and this in my product_list.tpl

 

 

                {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
                            {if ($product.allow_oosp || $product.quantity > 0)}
  <div style="margin-left:6px; display:block; clear:both; margin-top:10px; position:relative; padding:5px; background:#eee; overflow:hidden;">
  <input style="position:absolute; margin-top:3px; left:6px; padding: 0 3px; text-align:center; height: 20px; border: 1px solid #ccc; display:inline-block; float:left; width:16px;" type="text" name="qty" id="quantity_to_cart_{$product.id_product|intval}" value="1"/>
  {if isset($static_token)}
    <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
  {else}
    <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
  {/if}
  </div>                     
{else}  

Link to comment
Share on other sites
  • 2 months later...
CrystalPhoenix18 Newbie

CrystalPhoenix18

Posted
Posted (edited)

Tried this and my product page comes up completely blank - no header, no footer, no product - just a white page.  I have modded my js file in both the theme and in the main modules directory - no apparent harm there.  As soon as I add the new text to the product_list.tpl, I get the blank page - any idea what could be wrong?  Using PS 1.6 & Alysum theme.

Edited by CrystalPhoenix18 (see edit history)
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

blank page = errors in code

you probably did something wrong, unfortunately there is no other thing that could be wrong

in this case inspection of code is necessary

 

+ turn on error reporting and check page for errors

Link to comment
Share on other sites
  • 2 weeks later...
  • 2 weeks later...
ddt81 Newbie

ddt81

Posted
Posted

hello this guide works in prestashop 1.6

what kind of problems you've got at the moment?

HI. i work with prestashop 1.6.0.8. after the change prestashop me always returns the error: "product not found" when I click on the add to cart button.

 

Where i wrong?

 

i've change the product_list.tpl and the ajax_cart.... 

 

Thanks!

 

Link to comment
Share on other sites
ddt81 Newbie

ddt81

Posted
Posted (edited)

HI. i work with prestashop 1.6.0.8. after the change prestashop me always returns the error: "product not found" when I click on the add to cart button.

 

Where i wrong?

 

i've change the product_list.tpl and the ajax_cart.... 

 

Thanks!

 

 

I tried on a new version (virgin) of prestashop 1.6.08 ... same problem.

Edited by ddt81 (see edit history)
Link to comment
Share on other sites
  • 1 month later...
iFritz Newbie

iFritz

Posted
Posted

Hi All,

 

how do i proceed if i want to have the plus and minus buttons there?

I was trying to copy the following code from the product.tpl

<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $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}" />
							<a href="#" data-field-qty="qty" class="btn btn-default button-minus product_quantity_down">
								<span><i class="icon-minus"></i></span>
							</a>
							<a href="#" data-field-qty="qty" class="btn btn-default button-plus product_quantity_up ">
								<span><i class="icon-plus"></i></span>
							</a>
							<span class="clearfix"></span>
						</p>

right after

if ($product.allow_oosp || $product.quantity > 0)

in the product-list.tpl.

This works quiet well. the only thing i dont get is how to assign the product.css to the product-list.tpl when its loaded.

Same applies for the JS file to trigger the plus and minus buttons. I cant find a related php file. Ist it controlled in the backend?

 

Thanks for your help.

Link to comment
Share on other sites
iFritz Newbie

iFritz

Posted
Posted (edited)

I'm a bit closer:

Found out that the categorycontroller.php in /controller/front is responsible.

Therefor i've created this

_THEME_CSS_DIR_.'product.css' => 'all',

after line #46 and this

$this->addJS(_THEME_JS_DIR_.'product.js');

after line 56.

 

But now i get this in the chrome inspector(console):

Uncaught ReferenceError: quantityAvailable is not defined product.js:250
(anonymous function) product.js:250
n.event.dispatch jquery-1.11.0.min.js:3
r.handle

an help would be much appreciated

 

 

UPDATE: Changes successful. Will post solution shortly.

Edited by iFritz (see edit history)
  • Like 1
Link to comment
Share on other sites
iFritz Newbie

iFritz

Posted
Posted (edited)

Here we go: 

 

 

Open file product-list.tpl in the /themes/default-boostrap/ folder and after the statement in line 123(approx)

{if ($product.allow_oosp || $product.quantity > 0)}

you add:

<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} style="display: true;"{/if}>
<label>{l s='Quantity:'}</label>
        <input type="text" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" />
	<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_down" style="clear:none;">
	<span><i class="icon-minus"></i></span>
							</a>
	<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-plus product_quantity_up " style="clear:none;">
								<span><i class="icon-plus"></i></span>
							</a>
							<span class="clearfix"></span>
						</p>

Go to the very last line in the file and add the following to the end:

{if $display_qties == 1 && $product->quantity}
	{addJsDef quantityAvailable=$product->quantity}
{else}
	{addJsDef quantityAvailable=0}
{/if} 

Close the file product-list.tpl

 

 

Open the file ajax-cart.js in your themes folder and change the line

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

into

ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val()); 

Thanks to vekia for his tutorial where the code changes above is from.

 

Close the file.

 

Open the CategoryController.php in /controller/front/ and change in line 42 this

//TODO : check why cluetip css is include without js file
			$this->addCSS(array(
				_THEME_CSS_DIR_.'scenes.css' => 'all',
				_THEME_CSS_DIR_.'category.css' => 'all',
				_THEME_CSS_DIR_.'product_list.css' => 'all',
			));

into

//TODO : check why cluetip css is include without js file
			$this->addCSS(array(
				_THEME_CSS_DIR_.'scenes.css' => 'all',
				_THEME_CSS_DIR_.'category.css' => 'all',
				_THEME_CSS_DIR_.'product_list.css' => 'all',
				_THEME_CSS_DIR_.'product.css' => 'all',
			)); 

in line 55 change this

}
		$this->addJS(_THEME_JS_DIR_.'category.js');
		
	} 

into

}
		$this->addJS(_THEME_JS_DIR_.'category.js');
		$this->addJS(_THEME_JS_DIR_.'product.js');
		
	}

These changes has been tested with the default boostrap theme only!

I dont like to chnge the cotroller files in the core, so a more elegant solution would be much appreciated.

 

UPDATE: To keep the functionality after an eventual core update, i recommend to copy the CategoryController.php in /override/controller/front/

And do not forget to trigger(delete or rename) the /cache/class_index.php file.

Edited by iFritz (see edit history)
  • Like 1
Link to comment
Share on other sites
veshop Newbie

veshop

Posted
Posted

Thanks iFritz, it work perfect on my PS 1.6.0.9. I just have to take away the <span> between 

<span><i class="icon-minus"></i></span>

AND

<span><i class="icon-plus"></i></span>

otherwise the buttons were composed of two plus and two minus icons.


Do you maybe know, how I can add also the mailalerts hook when the products are out of stock?  It would be more pratical if a custom could directly subscribe to the allerts from the product-list, without open the details of the product. 

 

Link to comment
Share on other sites
iFritz Newbie

iFritz

Posted
Posted

Thanks iFritz, it work perfect on my PS 1.6.0.9. I just have to take away the <span> between 

<span><i class="icon-minus"></i></span>

AND

<span><i class="icon-plus"></i></span>

Can you explain why you had to delete it? May i see the sourcecode?

 

 

 

Do you maybe know, how I can add also the mailalerts hook when the products are out of stock?  It would be more pratical if a custom could directly subscribe to the allerts from the product-list, without open the details of the product. 

Is it the input field to opt in to get a message when items are back in stock? Do you have a screenshot?

Link to comment
Share on other sites
veshop Newbie

veshop

Posted
Posted

Thanks for your reply iFritz!

I have to delete the span and add a padding. 
Without removing the span, there was a problem with showing the +/- also if the buttons work well. 
Without adding the padding:5px; , the buttons was too small after remove span. I attached you the screenshoot with span and without span.
I don't know why, but now with my changes it worked well on my site.

And here is the changed code I used in product-list.tpl insead of yours.
 

<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} style="display: true;"{/if}>
<label>Quantit&agrave</label>
        <input type="text" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|

intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" />

<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_down" style="clear:none; padding:5px;">
	<i class="icon-minus"></i>
							</a>
	
	<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-plus product_quantity_up " style="clear:none; padding:5px;" >
								<i class="icon-plus"></i>
							</a>
							<span class="clearfix"></span>
						
</p>

 

 

Is it the input field to opt in to get a message when items are back in stock? Do you have a screenshot?

Yes! I mean exactly the input field to opt in and get a messages when the items are back in stock. When you are registered you just have click on the button, if not, you have to insert your email.

Do you know how I can put it under "Aggiungi al comparatore" (should be in english something like Add to compare) ? I try different solutions, but I can't program and without some fortune I can't make it work. I'm sure it's something very stupid, but I can't add. 

post-844276-0-38663200-1412858400_thumb.png

Link to comment
Share on other sites
veshop Newbie

veshop

Posted
Posted

hi veshop,

 

i think the span problem has something to do with your template. I presume you are not using the default bootstrap theme?

 

I'll check on the other poblem and let u know.

Hi fritz and sorry for the late answer but I don't got the notify. 

 

 

Yes , I use the default bootstrap theme of prestashop 1.6.0.9 But important that I got it work thanks your code :) It work also on my samsung s4, so I think there aren't problems.

 

 

Thanks also very much for looking in the other "problem"  :)

Link to comment
Share on other sites
iFritz Newbie

iFritz

Posted
Posted (edited)

Hi veshop,

 

try this: open the product-list.tpl and find this:

{else}
								<span class="button ajax_add_to_cart_button btn btn-default disabled">
									<span>{l s='Add to cart'}</span>
								</span>

							{/if}

and change it with this:

{else}
<span class="button ajax_add_to_cart_button btn btn-default disabled"><span>{l s='Add to cart'}</span></span>
<!-- Out of stock hook -->
<div id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}>{$HOOK_PRODUCT_OOS}</div>
{/if}
 

At the very end put this piece of code:

{addJsDef oosHookJsCodeFunctions=Array()}

Close the file and open the CategoryController.php in your overrides folder and find the following lines:

$this->assignScenes();
		$this->assignSubcategories();
		$this->assignProductList();

		$this->context->smarty->assign(array(

paste this below:

'HOOK_PRODUCT_OOS' => Hook::exec('actionProductOutOfStock', array('product' => $this->product)),

Done. You should have the first steps. But: I'm stuck with the JS filed required. Cant tell how to call it...Maybe someone else can help. And: this should be moved to its own topic! Admin?

Edited by iFritz (see edit history)
Link to comment
Share on other sites
  • 4 weeks later...
joseagro Newbie

joseagro

Posted
Posted

Hi Frizt, thanks for your help.

Yes i´ve loaded product.js into: /themes/minimal_16_theme/override/controller/front/CategoryController.php

 

public function setMedia()
{
parent::setMedia();
 
if (!$this->useMobileTheme())
{
//TODO : check why cluetip css is include without js file
$this->addCSS(array(
_THEME_CSS_DIR_.'scenes.css' => 'all',
_THEME_CSS_DIR_.'category.css' => 'all',
_THEME_CSS_DIR_.'product_list.css' => 'all',
        _THEME_CSS_DIR_.'product.css' => 'all',
));
}
$scenes = Scene::getScenes($this->category->id, $this->context->language->id, true, false);
if ($scenes && count($scenes))
{
$this->addJS(_THEME_JS_DIR_.'scenes.js');
$this->addJqueryPlugin(array('scrollTo', 'serialScroll'));
}
$this->addJS(_THEME_JS_DIR_.'category.js');
    $this->addJS(_THEME_JS_DIR_.'product.js');
}
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
veshop Newbie

veshop

Posted
Posted

Hi there iFritz. I was testing my site and saw that something don't work fine in the search results. I have PS 1.6.0.9 and default theme.


1)
In product-list all work fine, also + and -. But when I'm search something, in the results there didn't work the + and -, but I can only insert the quantity and add it to cart. If I click on + and - it do nothing, only the link in the link bar change with a # on the end.

Before click:
/cerca?controller=search&orderby=position&orderway=desc&search_query=vespa&submit_search=

After click:
/cerca?controller=search&orderby=position&orderway=desc&search_query=vespa&submit_search=#

2)
The second thing that I saw is, that in the search results the resized textbox that I have risezed isnt. I attached you the picture.


3) Do you maybe know if it's possible to limit the adding by clicking the + button? I explain me better.
For example, I have 3pcs of product A. If I click on + in the product page, it only arrive to 3, if I continue to click on + it stay on 3. But if I click on product-list, if I continue click on +, it continue to count over 3 and obviously if I than add to cart, it say there aren't enought items.


Hope you can help me, above all for question 1.
 

post-844276-0-52256900-1416579573_thumb.png

Link to comment
Share on other sites
veshop Newbie

veshop

Posted
Posted

I have a news.

I actived the debug mode and saw that some errors are present.

I saw that when the first part of code is adding in product-list.tpl ( the part that begin with <p id="quantity_wanted_p> ) this errors appear in product-list page
 

 

Notice: Trying to get property of non-object in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 328
Notice: Trying to get property of non-object in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 322


and this errors appears in the search results:

Notice: Trying to get property of non-object in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 320

 

Notice: Undefined index: allow_oosp in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 314
Notice: Trying to get property of non-object in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 314
Notice: Trying to get property of non-object in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 314



Instead when adding the second part in product-list.tpl ( {if $display_qties == 1 && $product->quantity} etc. ) this errors appear in product-list page

Notice: Trying to get property of non-object in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 422
Notice: Undefined index: display_qties in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code


An this errors appears in the search results page:

Notice: Undefined index: display_qties in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 413
Notice: Trying to get property of non-object in /tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 413
 
 

I don't know if that can help you.
If you solve my problems, especially the first but also the other are a little important,I will give you a little reward.  :)

Link to comment
Share on other sites
veshop Newbie

veshop

Posted
Posted (edited)

Hi to everyone!

I found a working solution for me. Tested only on default theme (make some changes in css) of PS 1.6.0.9. I make some changes from the solution of iFritz. I changed only ajax-cart.js and product-list.tpl. You don't need to change controller or add other at the end of product-list.tpl. And also all errors disappear!

 

This solution, work also fine in search results and have the two arrows in the textbox, but not the one of your template. If you use the arrow ^ (up), it stop at the maxium disponible items. For example, if you have only 5pcs in stock, if you continue clicking on ^, it stop when the quantity is 5. Naturally you can add the quantity also with the keyboard and it will work fine!

Here all what I do.

 

1) Open the file ajax-cart.js in /themes/yourtheme/js/modules/blockcart and change as Vekia and iFritz say this line:

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

into:

ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());

2) Then go in /themes/yourtheme/ and open product-list.tpl Look for this code:

{if ($product.allow_oosp || $product.quantity > 0)}

And after it, add this:

<input min="1" max="{$product.quantity}"  type="number" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" value="1" />

STOP. That's all!

 

 

You can also customized it with some other code as I do:

I add a label "Quantità", a radius around the textbox, it replace the textbox with a label "Ultimo pezzo disponibile" (last piece disponible) when it's the last piece in stock and replace the textbox with a label "Clicca su varianti qui a destra" when there are attributes for the product.

<b><font color="black">Quantit&agrave</b><br></font>
        <input style="-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;" min="1" max="{$product.quantity}" size="1" type="number"  name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" value="1" />

{else}<font size="3" color="red"><b>Ultimo pezzo  disponibile!</b></font>{/if}


{else}<font size="3" color="green"><b>Clicca su varianti qui a destra</b></font>{/if}

I attached also a screenshoot to view the result of the code.

 

 

Hope it can help someone other!  :)
 

EDIT:

The arrows don't appears in IE desktop browser.
The arrows don't appears in mobile browser, but when you touch on the field to input the quantity, automatically the number keyboard appear and not the qwerty.

post-844276-0-76684600-1416843846_thumb.png

Edited by veshop (see edit history)
  • Like 1
Link to comment
Share on other sites
bhaskey Newbie

bhaskey

Posted
Posted

I am trying all of the given solution all of the solutions (Vekia, iFritz even veshop), all the codes are able to add a text box in product listing, but whatever i enter in it, it all adds quantity as 1. (in all three solutions).

I am using 1.6.0.9

Link to comment
Share on other sites
bhaskey Newbie

bhaskey

Posted
Posted

I am trying all of the given solution all of the solutions (Vekia, iFritz even veshop), all the codes are able to add a text box in product listing, but whatever i enter in it, it all adds quantity as 1. (in all three solutions).

I am using 1.6.0.9

Somebody plz look into this...veshop, i guess you are using same version, could you please help that what could be possible problem in my case.

Link to comment
Share on other sites
  • 2 weeks later...
veshop Newbie

veshop

Posted
Posted

Really so so sorry the late answer. Yes, I use the same version as you. 
And I'm also really sorry to say you, I don't know where your problem can be. I'm not a programmer, I just copy here and there some codes and think about how to adjust to my needs. I just go with fortune and tries.  Hope someone will help you.

 

Somebody plz look into this...veshop, i guess you are using same version, could you please help that what could be possible problem in my case.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...