Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
Forum Search
Google Site Search
 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 CSS product image overlays, options and more
Previous Page | Next Page
Author « Topic »
Page: of 5

kelleymoore
Ecommerce Template Expert

USA
986 Posts

Posted - 07/25/2023 :  04:10:38  
I have the following parameters in my includes.asp file:

showinstock=TRUE
stockdisplaythreshold=5

The code isn't working for me, either. I just get the stock number in parentheses next to the option.

Patrick, I tried both the noshowoptionsinstock=TRUE and FALSE (which would make sense) and no inventory numbers show up at all with either setting. I replaced it with the showinstock=TRUE parameter.

David, just to be sure, I went to your site and copied the ectcart.js code mod exactly and it still isn't working. Do we, perhaps, need a bit of CSS somewhere to make this work?

Kelley

Edited by - kelleymoore on 07/25/2023 04:25:01

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/25/2023 :  07:25:26  
Patrick, I'm pretty sure you do not want this set
$noshowoptionsinstock=TRUE;


Kelley, are you sure it's not a cache issue?
Try a browser you never use.
Most browsers hard cache css and js files these days. A simple refresh will not do.
That's why I came up with this - https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=114969
Now, my css and js changes always show up instantly.

Let me know if it doesn't take on a different browser.

Thanks,
David

kelleymoore
Ecommerce Template Expert

USA
986 Posts

Posted - 07/25/2023 :  08:11:25  
Hi David,

You are correct. I tried it in a different browser on a product that I hadn't visited in quite some time and I see that it now works. I read the post about changing the file names, but that is a lot of work when I do an updater, so I'll have to ponder that for a bit.

Thanks for all your help. It's still interesting to me that I couldn't get that simple CSS strikethrough to work.

Regards,
Kelley

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/25/2023 :  10:16:03  
quote:
read the post about changing the file names, but that is a lot of work when I do an updater, so I'll have to ponder that for a bit.


Hi Kelly, if you are referring to my tip on the css and js caching issue, it's not impacted by updates at all. It's a one time thing and you should use it with your site css files as well, not just the ect css and js files.

You want your regular visitors to always see those changes, so I felt it was a must have.

Oh, and the strikethrough, that's been a known issue for years - sometimes it works, sometimes not. It seems like there are only certain styling that will work with select options using pure css.

Thanks,
David

Edited by - dbdave on 07/25/2023 10:18:23

midvalleydrifter001
Ecommerce Template Expert

USA
933 Posts

Posted - 07/25/2023 :  15:35:22  
Hi David,

I am already using the updated css and js file method so the files are updated automatically.

<script src="js/ectcart.js?ver=1690322552"></script>

Here is a page that I have an item with stock level set to 4

https://www.slixprings(DOT)com/proddetail.php?prod=SliX-Bead-Shotgun-Sights

The "Low Stock" text will not show up for some reason.

I am using the following css for "Zero" stock though.

label.ectlabel.oostock {
color: #ff0000;
background-color: #e7e7e7;
}

.ectlabel.oostock::after{
content: " - Out of Stock";
}





dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/25/2023 :  15:52:16  
Hi Patrick, the part about the cached css and js files was for Kelley.
Maybe you missed this response to you.

quote:
Patrick, I'm pretty sure you do not want this set
$noshowoptionsinstock=TRUE;


I did confirm that yes, you will need to remove that or set it to false.

David

midvalleydrifter001
Ecommerce Template Expert

USA
933 Posts

Posted - 07/25/2023 :  15:54:28  
I have it set to FALSE but it still doesn't work

$noshowoptionsinstock=FALSE;

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/25/2023 :  18:09:48  
Hi Patrick, this whole exchange with Kelley is related to select (drop down) options.
The page you linked to shows radio options.
My trick there is specifically designed too work with the drop down options.
It looks like you have the radio option working with the css though.

Thanks,
David

midvalleydrifter001
Ecommerce Template Expert

USA
933 Posts

Posted - 07/25/2023 :  18:13:27  
Yes... I'm using radio options

I do have it working for Out of Stock but I can't figure out how to get it to work for Low Stock

Patrick

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/25/2023 :  18:51:36  
There in the ectcart.js file there is the code for the other options, but I may have another solution that will not call for editing that js file.
I'm testing some javascript that may work for this - standby.
David

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/25/2023 :  19:24:20  
Ok Patrick, I really love javascript for it's versatility of working in the DOM without having to edit core ECT files.
The code below will check your product detail page for radio options and check the last few characters for a number and close parenthesis and if there, add the low or out of stock text.
It will also add your styling.
Once you know this works, you can remove that other css you have set.

I have tested this on my live site with a few radio option products and it seems to work just fine.

Just open your proddetail page in your html editor and add this block of code at the bottom of the page before the closing </body> tag.

<script>
//begin radio option low stock text
var radioss = document.getElementsByTagName('input');
for (var inputcount = 0; inputcount < radioss.length; inputcount++) {
if (radioss[inputcount].type === 'radio') {
checkforsibling = radioss[inputcount].nextSibling;
if (checkforsibling != null) {
var checklowstock = radioss[inputcount].nextSibling.innerText;
var islowstocktwo = checklowstock.slice(-2);
var islowstockone = checklowstock.slice(-1);
if (islowstocktwo !== '0)' && islowstockone == ')') {
radioss[inputcount].nextSibling.innerText = checklowstock + ' Low Stock';
radioss[inputcount].nextSibling.style.color = "#ff0000"; //set text css color here or remove this line for no color
radioss[inputcount].nextSibling.style.backgroundColor = "#e7e7e7"; //set background text css color here or remove this line for no background color
} else if (islowstocktwo == '0)') {
radioss[inputcount].nextSibling.innerText = checklowstock + ' Out Of Stock';
radioss[inputcount].nextSibling.style.color = "#ff0000"; //set text css color here or remove this line for no color
radioss[inputcount].nextSibling.style.backgroundColor = "#e7e7e7"; //set background text css color here or remove this line for no background color
}}}}
//end radio option low stock text
</script>


Let me know how you get along.
David

Edited by - dbdave on 07/25/2023 19:27:16

midvalleydrifter001
Ecommerce Template Expert

USA
933 Posts

Posted - 07/25/2023 :  19:32:57  
BINGO !!! That did it.

Thanks so much

Patrick

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/25/2023 :  19:41:56  
Nice. I did go take a look and I see when you make a selection, it drops the text.
I suppose I could work that out, but as the customer has seen the message, they should know that the numbers mean.
It's late right now, but I can probably work it out (in the next few days) if it's a problem for you.

David

Edited by - dbdave on 07/25/2023 19:42:45

kelleymoore
Ecommerce Template Expert

USA
986 Posts

Posted - 07/26/2023 :  06:50:14  
Hi David,

I don't see it working on my Android phone. Is there anything else you could add to the script to work on mobile devices?

Kelley

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/26/2023 :  08:30:25  
Hi Kelley, it should be fine, but is this also another cache issue?
Do you have a different browser on your mobile you do not typically use, you can try?

I'll test my site on my mobile, but this should not be limited by any browser.

David

midvalleydrifter001
Ecommerce Template Expert

USA
933 Posts

Posted - 07/26/2023 :  15:50:39  
Hey David,

So I tried this on a different product page that has "8" Options and it went all goofy.

For an Option that had Zero stock it worked fine but some of them showed "Low Stock" when in fact there was lots in stock.

The rest of them showed correctly as in stock.

Not sure if it has to do with more than 2 Options that you set this up for prior?

Patrick

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/26/2023 :  16:46:11  
Hi Patrick, today I discovered an issue with this in that if you are using the parameter to show the price difference on options, it would choke and show out of stock on those.
Also, I realized that if there is a stock level of 10, or 20, or 30 for example, there wan an issue as I was checked the last two characters and with that "0" there, it would show out of stock.
So I have updated the code to fix these tow issues.

I notice on my site, when I select an option, it did not lose the added text like your site. So it must have something to do with the custom radio display you have there.
I have some new code below and it has quite a bit of diagnostic output so run this and send me a link to a page that is looking crazy and I'll take a look.

Thanks,
David

<script>
//begin low stock message on radio options
//this does not work well when you have the pricing different showing - it wrecks the nameplate options!
var radioss = document.getElementsByTagName('input');
for (var inputcount = 0; inputcount < radioss.length; inputcount++) {
if (radioss[inputcount].type === 'radio') {
//console.log ('step 1');
checkforsibling = radioss[inputcount].nextSibling;
if (checkforsibling != null) {
//console.log ('step 2');
var checklowstock = radioss[inputcount].nextSibling.innerText;
var checkbuck = checklowstock.includes('$');
if (checkbuck == false) {
//console.log ('checklowstock is '+checklowstock);
var islowstockthree = checklowstock.slice(-3);
var islowstockone = checklowstock.slice(-1);
//console.log ('islowstockthree is '+islowstockthree);
//console.log ('islowstockone is '+islowstockone);
if (islowstockthree !== '(0)' && islowstockone == ')') {
radioss[inputcount].nextSibling.innerText = checklowstock + ' Low Stock';
radioss[inputcount].nextSibling.style.color = "#ff0000";
radioss[inputcount].nextSibling.style.backgroundColor = "#e7e7e7";
// console.log ('fired lowstock is '+checklowstock);
} else if (islowstockthree == '(0)') {
radioss[inputcount].nextSibling.innerText = checklowstock + ' Out Of Stock';
radioss[inputcount].nextSibling.style.color = "#ff0000";
radioss[inputcount].nextSibling.style.backgroundColor = "#e7e7e7";
// console.log ('fired zerostock is '+checklowstock);
}}}}}
//end low stock message on radio options
</script>

midvalleydrifter001
Ecommerce Template Expert

USA
933 Posts

Posted - 07/26/2023 :  16:55:21  
I have applied it.

Here is a link.

https://www.slixprings(DOT)com/proddetail2.php?prod=SliXshot-Black-Powder-Nipples

All options have a stock level of over 20 except one which is at "4"

My threshold is set at "5"

midvalleydrifter001
Ecommerce Template Expert

USA
933 Posts

Posted - 07/26/2023 :  16:59:23  
So this is really weird at this page works fine.

One option has a stock level of "4" and the others higher.

https://www.slixprings(DOT)com/proddetail2.php?prod=SliX-Bead-Rifle-Sights

dbdave
ECT Moderator

USA
10406 Posts

Posted - 07/26/2023 :  19:16:07  
Hi Patrick, the issue is (and I didn't know) you are using parenthesis in your option descriptions.
My hack here is looking for a numerical value with a closing parenthesis.
I can fix the ones with text by telling the code to look for a numerical value only, but I see some of your options have numbers there.
I think we can fix this by having you enter a class there for an option that's low.

I'm not sure why I didn't think of it before, but in the admin there is place to enter a class for each option.
If it's out of stock, enter the class name of - out
If it's low stock, enter the class name of - low

Then you should be able to go back to your old way of doing it and just do away with my javascript.

div.low label {
color: #ff0000;
background-color: #e7e7e7;
}
div.low label::after{
content: " - Low Stock";
}
div.out label {
color: #ff0000;
background-color: #e7e7e7;
}
div.out label::after{
content: " - Out of Stock";
}

I think that should be the css, but may need tweaking.
Do you think that would work?

I can go back to the ect/js file and work out the similar change that I use for the select options and it would be automated, but then you have a mod to that file on each update.

David

Edited by - dbdave on 07/26/2023 19:17:18
Page: of 5 « Topic »  
Previous Page | Next Page
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000