[Resolved] Help required with the Qty function on product page

[sailing123]

Hi,

I was hoping someone could bring me assistance as to slightly modify the qty function on the product page.

Basically, on the product page, the qty is shown via a box but on the mobile checkout page, Cubecart is using a text "Qty abbreviated" followed by a sign - or +.
I would like to use this "Qty + or -"  instead of the box on the product page.

So on the content.product.php, I replaced coding:

<input type="text" name="quantity" value="1" maxlength="6" class="quantity required text-center">
 <input type="hidden" name="add" value="{$PRODUCT.product_id}">

by that of the content.checkout.small.php for the quantity:

{$LANG.common.quantity_abbreviated}
            <a href="#" class="quan subtract" rel="{$hash}"><svg class="icon"><use xlink:href="#icon-minus-circle"></use></svg></a>
            <span class="disp_quan_{$hash}">{$item.quantity}</span>
            <input name="quan[{$hash}]" maxlength="6" class="quantity required text-center" type="hidden" value="{$item.quantity}">
            <span id="original_val_{$hash}" class="hide">{$item.quantity}</span>
            <a href="#" class="quan add" rel="{$hash}"><svg class="icon"><use xlink:href="#icon-plus-circle"></use></svg></a>

Qty + or - now appears on my product page but some modifications are required. I changed the value, the class, etc, I have played around a bit but I am no coding expert and sometimes, I found my way but not this time !

Would anyone know what needs to be changed ?

Many thanks,

S.

 

[bsmither]

Please give us a web address to examine the situation.

[sailing123]

Hi bsmither,

Thank you. I will message you the details, if I may, as it is password protected at the moment to prevent google crawling. I hope that's OK.

S.

[bsmither]

In the skin template content.product.php, try this set of statements:

{$LANG.common.quantity_abbreviated}
<a href="#" class="quan subtract" rel="{$PRODUCT.product_id}"><svg class="icon"><use xlink:href="#icon-minus-circle"></use></svg></a>
<span class="disp_quan_{$PRODUCT.product_id}">1</span>
<input name="quantity" maxlength="6" class="quantity required" type="hidden" value="1">
<span id="original_val_{$PRODUCT.product_id}" class="hide">1</span>
<a href="#" class="quan add" rel="{$PRODUCT.product_id}"><svg class="icon"><use xlink:href="#icon-plus-circle"></use></svg></a>

Since this action came from a different template (with different variables), we need to make sure that the javascript that drives this feature includes the appropriate form element for this template.

In the skin's javascript file 2.cubecart.js, near the bottom of the file:

Find:
function update_quantity(rel, sign) {
    var target = $('input[name="quan[' + rel + ']"]');

Change to:
function update_quantity(rel, sign) {
    var target = $('input[name="quantity"], input[name="quan[' + rel + ']"]');

 

[sailing123]

Hi,

Just done these changes, a number now appears between the signs +/- which is new and good but it does not add to basket.

S.

[bsmither]

We mistakenly removed a necessary form element.

Restore the following statement. Add it after the set of new statements:

After:
<a href="#" class="quan add" rel="{$PRODUCT.product_id}"><svg class="icon"><use xlink:href="#icon-plus-circle"></use></svg></a>

Add:
<input type="hidden" name="add" value="{$PRODUCT.product_id}">

 

[sailing123]

Fantastic ! All resolved.

What I did at the end was to replace <div class="medium-2 columns show-for-medium-up">

by <div class="small-12 columns"> to create enough space for the buttons and to make it work on mobile screen as currently there is no qty shown, only on the mobile checkout page.

Super pleased. Many thanks for your prompt and accurate advice :-)

S.

[sailing123]

OK, talked too fast, all OK in Firefox but Chrome is not happy.

Qty - 1 +  appears all fine until you try to add more than one and it is impossible, instead, the letter NaN appears instead of the number. If I try to reduce the qty, same issue, all blocked.

It only lets me to add to basket.

[bsmither]

If Chrome is still using the copy of 2.cubecart.js it has in its internal cache, that may be the reason.

Editing a page resource (CSS, javascript, images) will probably require you to force the browser to reload those resources. I'm not sure how Chrome does it, generally it is CTRL-F5.

[sailing123]

You got it again !!! I always refresh page, cubecart cache but nothing was working so I decided to clear all my browser cookies and boom it worked :-)

Many thanks. Off for the weekend now and a nice glass of wine, well deserved only if I say so myself :-)

Have a good week-end.

S.