1

I am currently creating a custom page on my Big Cartel site. On this page I would like to show a list of products from specific categories (ie: Shirts, Jackets and Jeans). The current code I have is:

{% for product in products %}
  {% if forloop.first %}
    <ul id="products" class="{% if forloop.length == 1 %}single_product{% endif %}{% if forloop.length == 2 %}double_product{% endif %}">
  {% endif %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5 class="mmi-accent">On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5 class="mmi-accent">Sold Out</h5>
        {% when 'coming-soon' %}
            <h5 class="mmi-accent">Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% if forloop.last %}
    </ul>
  {% endif %}
{% endfor %}

The problem currently is the above code shows all products from every category I have.

I have seen a similar question here: How to use BigCartel "Variables" to Call Different Product Categories

It advised how to change from all products to a specific single category by editing the opening for loop. So it would look like this:

{% for product in categories.shirts.products %}

Again this would only show the category 'Shirts' products list. I would like to also show 'Jackets' and 'Jeans' within the same list. Is this possible?

Thanks in advance.

Community
  • 1
  • 1
Richard Teahan
  • 51
  • 8

2 Answers2

1

I managed to work the problem out in the end, having a tinker with the code. Basically creating 3 for loops as li's (or a loop for each category required) within the ul itself.

Heres the full example code:

<ul id="products">

  {% for product in categories.jacket.products %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5>Sold Out</h5>
        {% when 'coming-soon' %}
            <h5>Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% endfor %}

 {% for product in categories.dress.products %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5>Sold Out</h5>
        {% when 'coming-soon' %}
            <h5>Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% endfor %}

  {% for product in categories.baby-grow.products %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5>Sold Out</h5>
        {% when 'coming-soon' %}
            <h5>Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% endfor %}

</ul>

Hope that helps anyone else.

Richard Teahan
  • 51
  • 8
0

Here's another (DRY-er) way:

{% for category in categories.active %}
  {% if category.name contains 'jacket' or category.name contains 'dress' or category.name contains 'baby-grow' %}
    <h2>{{ category.name }}</h2>
    {% for product in category.products %}
      <p>{{ product.name }}</p>
      <img src="{{ product.image | product_image_url | constrain: '50' }}">
    {% endfor %}
  {% endif %}
{% endfor %}

Loop through the active categories, then check if each category matches one of the specific categories you want to display. If yes, loop through that category's products.

David
  • 29
  • 1
  • 6