Display matching Variant images when product list is sorted by category

  • I've created a page to list all products that are red

    PHP
    1. <?php
    2.     perch_shop_products([
    3.         'category' => 'colours/reds',
    4.         'sort' => 'year',
    5.         'sort-order' => 'DESC',
    6.         'sort-type' => 'numeric',
    7.         'template' => 'products/fabric_list_rd.html',
    8.         'variants' => true,
    9.     ]);
    10. ?>

    In variants.html I've added an image and a category

    Code
    1. <perch:group label="Variant">
    2.     <perch:shop id="sku" type="text" label="SKU" required="true" order="1" />
    3.     <perch:shop id="imageVariant" type="image" label="Variant image" order="5" width="800" />
    4.     <perch:shop id="imageVariant" type="image" width="84" height="84" density="1.6" crop="true" />
    5. </perch:group>
    6. <perch:group label="Categories">
    7.     <perch:categories id="colours" label="Colours" set="colours" display-as="checkboxes"/>
    8.     <perch:categories id="neutrals" label="Neutrals" set="neutrals" display-as="checkboxes"/>
    9. </perch:group>


    In 'fabric_list_rd.html' I'm using

    Code
    1. <perch:variants>
    2. <perch:variant id="imageVariant" type="text">
    3. </perch:variants>

    to get the path of the image (will be wrappered with an image tag). However this returns all the image paths for all the Variant images. I would like it to only return the image path of those Variants that are in the category "Reds" I've tried various perch:if statements to no effect, I've also tried

    Code
    1. <perch:variants>
    2.     <perch:categories id="colours" set="colours">
    3.         <perch:if id="catPath" value="fabric/reds/">
    4.             <perch:variant id="imageVariant" type="text">
    5.         </perch:if>
    6.     </perch:categories>
    7. </perch:variants>


    Any help would be much appreciated.

  • with the help of Hussein I've kind of got this working with


    However for every match its generating two sets of <li> tags the first set is identical to the second bar the image having no src.

  • I think this is casued by using perch:categories and perch:variants together. Drew could you please confirm whether or not they can be used together in this way (i.e Can variants be assigned to categories?)