Jump to content

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


sailing123

Recommended Posts

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.

 

Link to comment
Share on other sites

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 + ']"]');

 

Link to comment
Share on other sites

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}">

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...