sailing123 Posted January 27, 2017 Share Posted January 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 27, 2017 Share Posted January 27, 2017 Please give us a web address to examine the situation. Quote Link to comment Share on other sites More sharing options...
sailing123 Posted January 27, 2017 Author Share Posted January 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 27, 2017 Share Posted January 27, 2017 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 + ']"]'); Quote Link to comment Share on other sites More sharing options...
sailing123 Posted January 27, 2017 Author Share Posted January 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 27, 2017 Share Posted January 27, 2017 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}"> Quote Link to comment Share on other sites More sharing options...
sailing123 Posted January 27, 2017 Author Share Posted January 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
sailing123 Posted January 27, 2017 Author Share Posted January 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 27, 2017 Share Posted January 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
sailing123 Posted January 27, 2017 Author Share Posted January 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.