Brooklyn theme - product-grid-collage-variant.liquid

{% comment %}
  This snippet controls the collage product grid.  Depending on the number of products in
  a collection we want to display them in rows of 1, 2, 3, or a reversed row of 3.

  A '3 row' has the large product left align with two smaller product on the right.

  The 'reversed 3 row' has the large product right aligned with two smaller products on
  the left.

  If we're near the end of the loop and there are not enough products to make
  complete rows of 3, we switch to a 2 item row.

  Depending on where we are in the group of three products and if it's reversed,
  we want to set the grid_item_width for each item in the collection.

  The collage grid is only used for the desktop breakpoint.

  For example:
  1  = 1
  2  = 2
  3  = 3
  4  = 2 + 2
  5  = 3 + 2
  6  = 3 + reverse 3
  7  = 3 + 2 + 2
  8  = 3 + reverse 3 + 2
  9  = 3 + reverse 3 + 3
  10 = 3 + reverse 3 + 2 + 2
  11 = 3 + reverse 3 + 3 + 2
  etc.

  Change the grid item width by using classes from the grid in
  the grid_item_width variable.

  Example:
    - {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endcomment %}

{% assign collection_index__product = forloop.index %}
{% assign remaining_length__product = collection_product_count__product | minus: collection_index__product %}

{% comment %}
  If there are more than three items left we want to put them in a 3
  or reverse 3 row

  3 row = 1 large product on the left, 2 small on the right
  reverse 3 row = 2 small products on the left, 1 large on the right
{% endcomment %}
{% if remaining_length__product > 3 %}
  {% assign is_three_row__product = true %}
{% endif %}

{% comment %}
  Put remaining items in a 2 row if necessary.
{% endcomment %}
{% if remaining_length__product < 4 and three_row_index__product > 2 %}
  {% assign is_three_row__product = false %}
{% endif %}

{% comment %}
  If the total number of products is divisible by 3, we will just use
  3 and reversed 3 item rows
{% endcomment %}
{% if divisible_by_three__product == 0 %}
  {% assign is_three_row__product = true %}
{% endif %}

{% comment %}
  If we set is_three_row__product to true based on the conditionals above.
{% endcomment %}
{% if is_three_row__product == true %}

  {% if three_row_index__product > 2 %}
    {% if is_reverse_row__product %}
      {% assign is_reverse_row__product = false %}
    {% else %}
      {% assign is_reverse_row__product = true %}
    {% endif %}
    {% assign three_row_index__product = 0 %}
  {% endif %}

  {% comment %}
    Assign grid classes for 3 rows and reverse 3 rows
  {% endcomment %}
  {% case three_row_index__product %}
    {% when 0 %}
      {% if is_reverse_row__product %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole reverse' %}
      {% else %}
        {%- assign width = 650 -%}
        {%- assign height = 480 -%}
        {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds' %}
      {% endif %}
    {% when 1 %}
      {% if is_reverse_row__product %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole reverse' %}
      {% else %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third' %}
      {% endif %}
    {% when 2 %}
      {% if is_reverse_row__product %}
        {%- assign width = 650 -%}
        {%- assign height = 480 -%}
        {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds reverse clearfix' %}
      {% else %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third clearfix' %}
      {% endif %}
  {% endcase %}

  {% if three_row_index__product == 0 %}
    <div class="grid__item collage-grid__row">
      <div class="grid">
  {% endif %}

  {% comment %}
    Wrap one-third items in reversed groups, so they can be floated properly without changing the order of products in the grid.
  {% endcomment %}
  {% if is_reverse_row__product and three_row_index__product == 0 %}
    <div class="grid__item collage-grid__reverse--wrapper one-whole medium--one-third large--one-third">
      <div class="grid">
  {% endif %}

  {% comment %}Product Grid Item{% endcomment %}
  {% include 'product-grid-item-variant' %}

  {% comment %}
    Close out wrapper div for one-third reverse items
  {% endcomment %}
  {% if is_reverse_row__product and three_row_index__product == 1 %}
      </div>
    </div>
  {% endif %}

  {% if three_row_index__product == 2 %}
        </div>
      </div>
    <div class="grid__row-separator"></div>
  {% endif %}

  {% comment %}
    Increment the group of three counter
  {% endcomment %}
  {% if three_row_index__product <= 2 %}
    {% assign three_row_index__product = three_row_index__product | plus: 1 %}
  {% endif %}

  {% continue %}
{% endif %}

{% if collection_product_count__product == 1 %}
  {% comment %} Set full width when there is 1 product in a collection by making
  `grid_item_width` an empty string {% endcomment %}
  {% assign grid_item_width = '' %}
  {%- assign image_size = '990x' -%}
  {%- assign width = 990 -%}
  {%- assign height = 630 -%}
  {% include 'product-grid-item-variant' %}
  {% break %}
{% else %}
  {% comment %} Set item with to half if it isn't in a 3 row. {% endcomment %}
  {% assign grid_item_width = 'one-whole medium--one-half large--one-half' %}
  {%- assign image_size = '480x' -%}
  {%- assign width = 360 -%}
  {%- assign height = 270 -%}
  {% include 'product-grid-item' %}

  {% comment %}add grid row separator between the last two rows{% endcomment %}
  {% if remaining_length__product == 2 %}
    <div class="grid__row-separator"></div>
  {% endif %}

  {% comment %} We still need to increment the three_row_index_product {% endcomment %}
  {% if three_row_index__product <= 2 %}
    {% assign three_row_index__product = three_row_index__product | plus: 1 %}
  {% endif %}
{% endif %}