Ok, I think I finally got it to all happen. I found a suitable area in the Search page's "Search Results Layout" field to put the code in (not the Product List Layout area). The span with the class "category-product-flag" needed the additional code.
Ditto for the Category Page. The span with the class "category-product-flag" needed the additional code.
So for anyone else that is trying to figure out how to style product flags, you need to edit the pages for Product, Search and Category.
Thanks to Matt and Bruce!
Announcement
Collapse
No announcement yet.
How to Style Product Flags
Collapse
X
-
Thanks so much for following up so quickly!
To clarify, it turns out I had edited the Product display page, not Category display page. Bruce's comment above suggested the Category display page. So that's my bad. I did however find the code snippet in Product display and replaced it with the suggested code. So that's how I arrived at this point.
But now I am trying to find that same code snippet in the Category and Search page templates per your suggestion and I'm not finding that snippet "<span class="product-product-flag">".
I find no reference to product-flag in the code of the search page Category Product List Layout area.
In the Category Display page I only see this reference: <span class="category-product-flag &mvt:clean_flag;">&mvt:product:customfield_values: customfields:product_flag;</span>
How to put the code in these two pages?
Leave a comment:
-
You will need to add the new code for the flags to the category, product, and search pages to get them to display there. The flags are product level elements, so you should not have to target them by category.
Leave a comment:
-
Upon further inspection I see that the .vegan class is inserted only when I go to the Vegan category page.
When I inspect element of a product in the Vegan category I see: <span class="category-product-flag vegan">VEGAN</span>
So we do see the .vegan class inserted.
But If I do a product search, for instance, of a product only Flagged as vegan, the product flag is not tagged with the .vegan class. I see this when I inspect element: <span class="category-product-flag">VEGAN</span>
So the code I changed in Product Layout display is targeting Categories, not Product Flags. (I think)
That won't work, because I might have products with the same flag but from different categories. I could have several products flagged as "New" but they belong to different categories.
How to target only the product flags, without using categories?
Leave a comment:
-
Originally posted by Matt Zimmermann View PostDid you add the new class to your custom CSS file?
But my new problem is that it only works for VEGAN. my .kid-friendly and .pet-friendly Classes don't work. And when I inspect element, I indeed see that those classes are not inserted. Only when I use the VEGAN product flag is the .vegan class inserted.
Leave a comment:
-
Originally posted by Bruce - PhosphorMedia View PostIf you are using the built in flags, then in the Category Product List template, you'd search for:
Code:<span class="product-product-flag">
Code:<span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">
.flag-vegan {background:Green} for example, in your CSS file
So obviously I'm missing something here. I assume that the code I substituted is supposed to insert the name of the selected product flag. For the record, my Product flags are: HOT, KID-FRIENDLY, NEW, PET-FRIENDLY, SALE and VEGAN.
Thanks for your help.
Leave a comment:
-
If you are using the built in flags, then in the Category Product List template, you'd search for:
Code:<span class="product-product-flag">
Code:<span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">
.flag-vegan {background:Green} for example, in your CSS file
Leave a comment:
-
To make these edits, you would have to modify the code for the product page within Product Display Layout. Then, in your custom.css file, you would target it with a class like:
Code:.flag-vegan {}
Leave a comment:
-
Originally posted by birdwaves View Post
Can you give me an example based on one of them, for instance Vegan? Also, where would your code go? I have a custom css file I'm using that I edit in User Interface > CSS Resources. But I'm not clear on where you'd put the above code that would provide the class.
Thanks for you help!
Leave a comment:
-
Originally posted by Matt Zimmermann View PostYou could try adding a class based on the flag and targeting it that way through CSS:
Code:<span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">&mvt:product:customfield_values:customfields:product_flag;</span>
Thanks for you help!
Leave a comment:
-
You could try adding a class based on the flag and targeting it that way through CSS:
Code:<span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">&mvt:product:customfield_values:customfields:product_flag;</span>
Leave a comment:
-
How to Style Product Flags
HI,
I'm looking to style Product Flags Individually. I've got Hot, Sale, New and Vegan product flags. I want to style each one differently. Is there a way to add a class to each of them or something?
Thanks!Tags: None
Leave a comment: