Set "active" css class within category template

  • Is there anyway to dynamically set a css class within a Perch template? I am displaying categories on my shop page and would like the category that is currently active to have a different style than non-active categories.


    My category template is:


    Code
    1. <perch:before>
    2. <ul class="nav nav-tabs" role="tablist">
    3. <li role="presentation"><a href="/shop" aria-controls="all" role="tab">All</a></li>
    4. </perch:before>
    5. <li role="presentation">
    6. <a href="/shop?cat=<perch:category id="catSlug"/>" aria-controls="<perch:category id="catSlug"/>" role="tab"><perch:category id="catTitle" /></a>
    7. </li>
    8. <perch:after>
    9. </ul>
    10. </perch:after>


    And in my shop page I am using perch_get to grab the category from the URL and filter products:



    What I would like to do is to pass the value of perch get to the category template too. Then, if this value is equal to catSlug give this category the "active" class.


    Is this possible within perch? Or has anyone come up with a clever solution to do achieve the same thing?


    Thanks

  • drewm

    Approved the thread.
  • What I would like to do is to pass the value of perch get to the category template too. Then, if this value is equal to catSlug give this category the "active" class.


    Is this possible within perch? Or has anyone come up with a clever solution to do achieve the same thing?


    You can use PerchSystem::set_var() to pass a variable to the templating engine. And you can use perch:if tags to perform your check.


    PHP
    1. PerchSystem::set_var('active_catSlug', perch_get('cat'));
    2. perch_categories();


    HTML
    1. <perch:if id="catSlug" match="eq" value="{active_catSlug}">
    2. <!--* matched *-->
    3. </perch:if>