Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
 Posted - 10/04/2017 : 13:24:33
Hi all!
Is there a way to add text such as "available" to the options quantity?
Currently is shows as:
Small (9)
Large (10)
Would be better if it showed:
Small (9 avaliable)
Large (10 available)
I poked around in the code but not sure if there is way to add text, not sure where.
Any help is appreciated!
Julie
Browns Summit NC USA
|
Sinbad
ECT Moderator
USA
65937 Posts |
Posted - 10/04/2017 : 14:08:44
|
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/04/2017 : 14:11:05
what about this -  https://www.w3schools.com/cssref/sel_after.asp If you need help Julie, email me a link to a page where I can see an option on your site. David ECT Power User 
Edited by - dbdave on 10/04/2017 14:12:31
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/04/2017 : 14:21:39
Hi Marlene - Yes, I know we can not add text in the stock field, I was asking where in the code could the text be added as a custom edit. (I did post in the suggestion forum but seems like I'm the only one who dislikes (1) with no text.  ) David - Sounds like that may work but no idea how I could implement it.  Any ideas? Page with options: https://www.**seeprofile**.com/proddetail.asp?prod=Kong-Pawzzles-Pyramid Julie Browns Summit NC USA |
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/04/2017 : 14:33:23
There is no class on just the number there, but the span for the option has an ID. They are sequential. What is the max number of options you have on a product? and will all of them have a number beside it? Try adding this to the top of your css file and see if it adds the word available after the number there. #optn0x0y0::after { content: "available"; } David ECT Power User |
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/04/2017 : 14:53:10
Aw, man! That is so close but it puts the text after ....... #optn0x0y0::after { content: " available)"; <<added space and ) } Small: (9) available) Maybe a way to hide the first ")" ? Then it would be perfect! Small: (9 available) I don't think I have anything that has more then 10 options, most have less. Julie Browns Summit NC USA |
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/04/2017 : 14:57:26
Tried this:
#optn0x0y0::after {
content: " - in stock";
}
#optn0x0y1::after {
content: " - in stock";
}
Which gives me:
Small (9) - in stock
Large (10) - in stock
Never mind, can't do that due to options with 0 qty. Back to using "available"....
Julie
Browns Summit NC USA
Edited by - Positivek9 on 10/04/2017 15:13:53
|
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/04/2017 : 15:24:12
so there is an extra closing parenthesis being added? weird. How about #optn0x0y0::after { content: "(available"; } David ECT Power User |
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/04/2017 : 15:41:27
No, I added it so it would close the text. The first () are hard-coded around the qty numbers (incproddetail I'm guessing).... Using yours it gives me: Small (9)(available If I do this: #optn0x0y0::after { content: " available"; } Then it looks like: Small (9) available I don't know... it's so close but I don't like that "available" is hanging outside  Julie Browns Summit NC USA |
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/04/2017 : 15:57:20
Oh, so my solution does work I don't really see a problem with it being outside the parenthesis. You can style that text to, so maybe you can add some flavor to it. It's also updater-proof Just need to add some id's to it to get it to show on all options. David ECT Power User |
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/04/2017 : 17:10:00
LOL Yes it does work! I'll play around with it... Julie Browns Summit NC USA |
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/04/2017 : 18:33:21
I think I know a way - standby David ECT Power User |
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/04/2017 : 21:48:50
Well I dug to the bottom of my bag of tricks for doing it with css, and I came up short. I do have an easy solution though it involves some jquery. I think you are already calling the jquery library on the page there so, just add this to the bottom of the page there before the closing body tag.
<script type="text/javascript">
$('#optn0x0y0, #optn0x0y1').text(function (_,txt) {
return txt.slice(0, -1);
});
</script>
This little gem looks for those ID's and slices the last character off. If the last character is not getting cut off, then maybe you need the jquery library just add the line below in the <head> </head> section of the page. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> Then put this in your css #optn0x0y0::after, #optn0x0y1::after { content: " available)"; } You need to add more id's if you have products with more than 2 choices. check your options to see what the max number of choices are for an option and add those id's #optn0x0y2 #optn0x0y3 #optn0x0y4 and so on Let me know how you get along. David ECT Power User  |
midvalleydrifter001
Ecommerce Template Expert
USA
933 Posts |
Posted - 10/04/2017 : 21:55:29
This is what I use by adding a Unicode character.
Example here. https://www (dot) badmanbullets.com/OnlineStore/proddetail.php?prod=SliXshot-Black-Powder-Nipples
#optn0x0y0::after {
content: " \2190 available";
}
Patrick
|
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/04/2017 : 22:06:45
Interesting take on it Patrick. My solution there should work on .asp and .php so you can get that withing the parenthesis if you like. David ECT Power User |
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/05/2017 : 07:46:24
Hey Patrick - That's what I did... I love the arrow symbol!
David - I'll give that jquery a try.
Julie
Browns Summit NC USA
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/05/2017 : 08:52:47
OMG! That works like a charm David!
You are awesome!!! Thanks so much!!
I think you should post that in the Tips forum.
Screenshot:
[img]https://www.pawtasticpet.com/screenshotoption.png[/img]
Julie
Browns Summit NC USA
|
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/05/2017 : 09:04:31
Glad you like it I had tested it on my dev site with just the product ID enclosed in a span tag. It is possible with just javascript, but the jquery there is so easy and clean. this line is the magic really - return txt.slice(0, -1); The -1 just looks at the "end" if the string and removes one character. If you change that to -2, then it would remove two. If you took off the minus there, and used the number two, it would remove the first two characters in the string. David ECT Power User |
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/05/2017 : 15:21:53
Came up with a weird issue with a product with 3 options. It's not dropping the ) on the last one. For the life of me, I can't puzzle out why.  https://www.**seeprofile**.com/proddetail.asp?prod=Bio-Spot-Flea-Tick-Spot-On-for-Cats Oh, never mind! Duh! Need to add more to the script is all. Julie Browns Summit NC USA
Edited by - Positivek9 on 10/05/2017 15:23:42
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 10/06/2017 : 14:08:26
Hey David,
Is there any way to make the behavior the same when clicking on an option?
When you select a size, the ")" comes back into the display and stays unless you reload the page.
Julie
Browns Summit NC USA
|
dbdave
ECT Moderator
USA
10409 Posts |
Posted - 10/06/2017 : 15:26:16
I'll take a look at that. It will be later this evening or tomorrow am. David ECT Power User |
| |
Adding text to qty in options