Jump to content

Plus & Minus sign next to Buy button


peterp

Recommended Posts

Hi All,

I'm putting together a demo of the etrade skin for a client and one of their requirements is to be able to click on either a plus sign or a minus sign to increase or decrease the quantity being bought. I have looked through the forum however I don't seem to be able to find any solutions. Is it possible to have this functionality for the etrade skin which will work on the main page as well as a mobile.

Any help will be appreciated

Best Regards,

Peterp

Link to comment
Share on other sites

You are looking for a "spinner".

HTML5 has <input type="number"> which gives an up/down triangle.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

The JQuery UI has a spinner class.
http://api.jqueryui.com/spinner/

Here are various JQuery plugins.
https://www.jqueryscript.net/tags.php?/input spinner/

Sometimes a spinner refers to a "loading" indicator. Regardless of its appearance, its called a "throbber".

Link to comment
Share on other sites

Hi Brian,

       Thanks again for your help I have utilised the first option and that seems to do the job for now maybe in the future I might have to use a plugin

Best Regards,

Peterp

Link to comment
Share on other sites

Hi fabriceunko,

           The files I modified were for and etrend skin and they are content.product.php and content.homepage.php.

Regards,

Peterp

Link to comment
Share on other sites

Hi Fabriceunko,

       I'm by no means an expert however the path to use is 'skins>foundation>templates/content.category.php" line 116 or there about. it should be something like this

  <input type="text" name="quantity" value="1" maxlength="3" class="quantity text-center">

Change the above line to this
  <input type="number" name="quantity" value="1" maxlength="3" class="quantity text-center">

if you want to limit the minimum to 1 you will need to add the attributes 'min' and 'max' to this line.

The other program that you might have to change is 'skins>foundation>templates>content.homepage.php' however I have had a look at your online store and you don't have any quantities on your homepage.

However if you do want to change it in the future you wil need to go to line 62 or there about it should be something like this

 <input type="text" name="quantity" maxlength="3" value="1" class="quantity required text-center">

Change it to be as below
 <input type="number" name="quantity" maxlength="3" value="1" class="quantity required text-center">

If you want to limit the minimum and maximum quantities then you will have to add the 'min' and 'max' attributes in the input statement.

I hope this helps

best regards,

peterp

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...