close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Advive on adding a +/- style box for quantity selection on an add to cart page?

Thread began 6/06/2015 9:37 am by Nathon Jones Web Design | Last modified 6/09/2015 5:29 pm by Ray Borduin | 464 views | 5 replies |

Nathon Jones Web Design

Advive on adding a +/- style box for quantity selection on an add to cart page?

How do I create a quantity field on my add to cart page that has +/- selectors to allow the user to increase/decrease the quantity required without having to physically type a number?

Thank you.
NJ

Sign in to reply to this post

Ray BorduinWebAssist

If you are using html5 you can just use <input type="number">, and the browser will do it automatically.

To do something with more bells and whistles you could probably find a script that works with jquery to do it.

Sign in to reply to this post

Nathon Jones Web Design

I changed the quantity field on my product detail page to this:
<input type="number" name="whiskyCART_1_Quantity_Add" value="1" size="4" min="1" max="99" style="width: 60px;">

...and it works a treat. However on the View Cart page I tried changing this:
<input type="text" id="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" name="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" size="3" value="<?php echo $whiskyCART->DisplayInfo("Quantity"); ?>" onkeypress="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" />

...to this...

<input type="number" id="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" name="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" size="3" value="<?php echo $whiskyCART->DisplayInfo("Quantity"); ?>" onkeypress="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" min="1" max="99" style="width: 50px;padding: 5px;font-size: 14px;" />

...but when you click the "Update" button it doesn't update the totals?

Simply select the "View" or "Buy" button on the following page and then add the item to basket:
http://www.nathonjoneswebdesign.co.uk/whiskybroker/index.php

Thank you.
NJ

Sign in to reply to this post

Ray BorduinWebAssist

It looks like it is depending on the onkeypress event, which isn't fired when clicking on the arrows.

Try copying the onkeypress code and adding it to the onchange event as well like:

php:
<input type="number" id="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" name="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" size="3" value="<?php echo $whiskyCART->DisplayInfo("Quantity"); ?>" onkeypress="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" onchange="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" min="1" max="99" style="width: 50px;padding: 5px;font-size: 14px;" />
Sign in to reply to this post

Nathon Jones Web Design

That's great Ray, thank you. Do you know why this wouldn't be working in Internet Explorer? It doesn't even show the arrows on my basic add to cart page OR the view cart page:
http://www.nathonjoneswebdesign.co.uk/whiskybroker/buy-whisky-online-Scotland.php?wbid=5

Also, we just noticed this at the foot of our view cart page...what the?

<script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
</script>
<script src="WA_eCart/js/eC_Display.js"></script>
<script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
</script>
<script src="WA_eCart/js/eC_Display.js"></script>
<script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
</script>
<script src="WA_eCart/js/eC_Display.js"></script>
<script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
</script>
<script src="WA_eCart/js/eC_Display.js"></script>



Upon checking other pages that feature the eCart behaviour we also notice that this code is duplicated. What's causing that, is there a fix or will we have to just manually double check that every time we apply an eCart behaviour to a page?

Appreciate the help. Thank you.
NJ

Sign in to reply to this post

Ray BorduinWebAssist

IE doesn't support all HTML5 input types yet (including number). There are solutions out there for this, like polyfill: http://html5please.com/#number

That code is added when you add a display manager to the page. My guess is that you have added multiple display managers, deleted them but didn't delete that code, and re-added them, causing the duplicated code.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...