Announcement

Collapse
No announcement yet.

How to Style Product Flags

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • birdwaves
    replied
    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!

    Leave a comment:


  • birdwaves
    replied
    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:


  • Matt Zimmermann
    replied
    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:


  • birdwaves
    replied
    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:


  • birdwaves
    replied
    Originally posted by Matt Zimmermann View Post
    Did you add the new class to your custom CSS file?
    I've made a little progress, but not quite there yet. I reasoned that since my Product Flag is "VEGAN" that my class should be ".vegan". And that worked!

    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:


  • Matt Zimmermann
    replied
    Did you add the new class to your custom CSS file?

    Leave a comment:


  • birdwaves
    replied
    Originally posted by Bruce - PhosphorMedia View Post
    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">
    and replace it with
    Code:
     <span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">
    and then as Matt said, add:
    .flag-vegan {background:Green} for example, in your CSS file
    Thanks for chiming in here. I was away, and now taking up the thread on this again. I've replaced the code as you suggested. But when I inspect element, the class still comes up as ".category-product-flag", not ".flag-vegan".

    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:


  • birdwaves
    replied
    Originally posted by lesliekirk View Post

    Quick question - is your site live? Can I peek at it?
    Sorry, I'm working on the Dev site, which is .htaccess protected.

    Leave a comment:


  • Bruce - PhosphorMedia
    replied
    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">
    and replace it with
    Code:
     <span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">
    and then as Matt said, add:
    .flag-vegan {background:Green} for example, in your CSS file

    Leave a comment:


  • Matt Zimmermann
    replied
    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:


  • lesliekirk
    replied
    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!
    Quick question - is your site live? Can I peek at it?

    Leave a comment:


  • birdwaves
    replied
    Originally posted by Matt Zimmermann View Post
    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>
    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:


  • Matt Zimmermann
    replied
    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:


  • birdwaves
    started a topic How to Style Product Flags

    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!
Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept