I have been reviewing the drop down option for "Custom CSS Class" for both Categories and Products as I have a special requirement, however I am having trouble understanding what I am able to do with the CSS formatting to make it work.

What I would like to do is enable (add "instock") quickbuylayout="instock" for only one category, in addition to the default layout which is in my includes file.

The following is in my includes file for all products.asp pages.
quickbuylayout="productimage,productname,discounts,reviewstars,productid,sku,description,options,listprice,price,currency,detaillink,addtocart"

Is there a full help file showing how to set all this and what the steps are?

Thanks, Peter

CCI - Tools for the Discriminating Chef

:EDIT: - Updated, and tested response below.

Hi Peter, You would add the "instock" to the layout, but set it to display:none; in your css file.

So below in blue would be for the stock showing on the products page, if you have that.
The class in red is the quickbuy. You can remove the part in red, and the comma, if you are not wanting this on the products page, just quickbuy.
.prodinstock,.qbuywrapper .prodinstock {
display:none;
}

Then add your special-class to products where you want to show stock
Next, you add that to your css file to display.
So below in blue would be for the stock showing on the products page, if you have that.
The class in red is the quickbuy.
.special-class .prodinstock, .special-class .qbuywrapper .prodinstock {
display:block;
}


I have tested this, It does work.
Please let us know if you are having trouble.
Thanks,
David

Thanks Dave for the quick reply. We had a long weekend so could only get back to you today.

I added ,instock to my includes file (which then displayed instock) and then the following to my style.css file to turn off displaying instock.

.prodinstock,.qbuywrapper .prodinstock {
display:none;
}

.special-class .prodinstock, .special-class .qbuywrapper .prodinstock {
display:block;
}

and then added to product "Custom CSS Class"
.special-class .prodinstock, .special-class .qbuywrapper .prodinstock

So I am doing something wrong as it does not trigger the "instock" for item 380-060P as my test item.

Any clue you can give me? Thanks Peter

CCI - Tools for the Discriminating Chef

Hi, did you use the quick entry feature to give that product a special class name, and then change the css I provided to match that class name?

Alternately, if it's just one product, you can use that product id

.380-060P .prodinstock, .380-060P .qbuywrapper .prodinstock

However, I remember reading somewhere that classes cannot start with a number - so not sure if that will work -

quote:

---

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

---

https://www.w3.org/TR/CSS2/syndata.html

If you are still having trouble after confirming your class name is in plate, you can message me a link to the site by clicking my username.
Thanks,
David

follow-up - I check the site in your profile and searched that product.
I only see the following classes product ect_380-060P
So it seems the cart developers are smart and when the product id starts with a number, the ect_ gets added as a prefix - brilliant.

So first, I do not see where you have added a class too that product.
You can do that, or if it's only one product, you can just this this css

.ect_380-060P .prodinstock, .ect_380-060P .qbuywrapper .prodinstock {
display:block;
}

Thanks,
David

Thanks Dave,

I added the following to the "Custom CSS Class" for item 380-060P. Naturally I want this to show for the complete category and not just for one item.
.special-class .prodinstock, .special-class .qbuywrapper .prodinstock

So if looking at the products.asp page I would think that the item 380-060P should show instock however it is not.
https://www.canadacutlery.ca/products.asp?cat=Forged+Full+Tang+Series

Thanks, Peter



CCI - Tools for the Discriminating Chef

We are working on a hidden category right now, this is why I selected a visible category for the test.

CCI - Tools for the Discriminating Chef

Hi Dave,

OK - I think I finally figured out what I needed to do.

1. What was missing is I had to add to the description field of the product the following:
<div class="special-class"></div>

2. In the "Custom CSS Class" drop down is:
special-class .prodinstock, .special-class .qbuywrapper .prodinstock

3. and in my Style.css file is:
.prodinstock,.qbuywrapper .prodinstock {
display:none;
}

.special-class .prodinstock, .special-class .qbuywrapper .prodinstock {
display:block;
}

That seems to have made it work for the test item 380-060P.

So now I need to figure out how to make it work for a category as I would have to do that for every item that I want to display "instock"

That is a lot of work if the category has 200 or 300 items.

Thanks, Peter


CCI - Tools for the Discriminating Chef

Hi, I think that's not right - I did test this on my dev site.

Step 1
List the products in your admin that you want to show the stock - just select that category on the drop down and it should show all products in that category only.
One the left, select custom css for the quick entry and enter something like "showstock" without the quotes - this will be your special class.
This should be a quick process, and you can just use ctrl>c to copy the first entry, then work your way down and use ctrl>v to paste
Alternately you can download the csv for that category and enter them in the csv file and then upload.

Step 2
Add these entries to your sites css file


The "special-class" was really just a placeholder for a class you might come up with, but "showstock" seems to make sense.
You do not need to add any class to your product descriptions.
You do not want to add this "special-class .prodinstock, .special-class .qbuywrapper .prodinstock" to your custom css class as it may have undesired effects.

Give it a go with these clarified instructions and post back if it's not working.
Thanks,
David

Thanks Dave,

OK that cleans it up nice, however, what do I need to add to remove stock levels on the other product details pages?

Thanks, Peter

CCI - Tools for the Discriminating Chef

.prodinstock,.qbuywrapper .prodinstock {
display:none;
}
.showstock .prodinstock, .showstock .qbuywrapper .prodinstock {
display:block;
}

The part in red is what hides that.
Are you seeing it on products without the "showstock" class added?

Thanks,
David

Hi Dave,

Yes that is what is in my style.css file, however, the details pages all show stock levels and not just the the ones with "instock" added.

"Are you seeing it on products without the "showstock" class added?" = Yes

Thanks, Peter

CCI - Tools for the Discriminating Chef

Hi Peter, you never mentioned the detail pages.
So if you want to hide it there, then we need more classes added to the css file

try this in your css file instead - the part in red being new.



Thanks,
David

That is perfect David, exactly what we needed.

Very much appreciated for your help.

Best Regards, Peter

CCI - Tools for the Discriminating Chef

Happy to help.
Thanks,
David