Announcement

Collapse
No announcement yet.

How to Style Product Flags

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

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

  • 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>
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


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

      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!
        Quick question - is your site live? Can I peek at it?
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        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 {}
          Matt Zimmermann
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          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">
            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
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


            • 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.

              Comment


              • 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.

                Comment


                • Did you add the new class to your custom CSS file?
                  Matt Zimmermann
                  Director of UI/UX Standards and Theme Development
                  / Miva, Inc.

                  Comment


                  • 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.

                    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?



                      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.
                        Matt Zimmermann
                        Director of UI/UX Standards and Theme Development
                        / Miva, Inc.

                        Comment


                        • 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?

                          Comment


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

                            Comment

                            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