Jump to content
peterp

Plus & Minus sign next to Buy button

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

Share this post


Link to post
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".

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I come back to you because I am very bad ... can you give me a track what to change? for the skin foundation ..

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

thank you, I found this line but on the change itself that I did not know how to do. with your code I get the following change

1558088693-screenshot-2019-05-17-peintur

which is already not bad but I would like to get that

1558088736-screenshot-2019-05-17-jquery-

lien

Share this post


Link to post
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...