Debut Theme - product-card-list-variant.liquid

{% comment %}
    Renders a product card using "List" style

    Accepts:
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="product-card product-card--list">
  <a class="full-width-link" href="{{ variant.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }} - {{ variant.option1 }}</span>
  </a>

  <div class="list-view-item__link">
    <div class="list-view-item__image-column">
      <div class="list-view-item__image-wrapper product-card__image-wrapper">
      {% unless product.featured_media == null %}
        <img class="list-view-item__image" src="{{ variant.media | img_url: '95x95', scale: 2 }}" alt="{{ product.featured_media.alt }}">
      {% endunless %}
      </div>
    </div>

    <div class="list-view-item__title-column">
      <div class="list-view-item__title" aria-hidden="true">
        <span class="product-card__title">{{ product.title }} - {{ variant.option1 }}</span>
      </div>
      {% if show_vendor %}
        <div class="list-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    </div>

    <div class="list-view-item__price-column">
    {%- liquid
      if product.title
        assign compare_at_price = variant.compare_at_price
        assign price = variant.price
        assign available = variant.available
        assign variant = variant
      else
        assign compare_at_price = 1999
        assign price = 1999
        assign available = true
      endif

      assign money_price = price | money
    -%}

    <dl class="price price--listing
      {%- if available == false %} price--sold-out {% endif -%}
      {%- if compare_at_price > price %} price--on-sale {% endif -%}
      {%- if product.price_varies == false and product.compare_at_price_varies %} price--compare-price-hidden {% endif -%}
      {%- if variant.unit_price_measurement %} price--unit-available {% endif -%}"
    >
      {% if show_vendor and product %}
        <div class="price__vendor price__vendor--listing">
          <dt>
            <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
          </dt>
          <dd>
            {{ product.vendor }}
          </dd>
        </div>
      {% endif %}

      {%- comment -%}
        Explanation of description list:
          - div.price__regular: Displayed when there are no variants on sale
          - div.price__sale: Displayed when a variant is a sale
          - div.price__unit: Displayed when the first variant has a unit price
          - div.price__availability: Displayed when the product is sold out
      {%- endcomment -%}
      <div class="price__regular">
        <dt>
          <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
        </dt>
        <dd>
          <span class="price-item price-item--regular">
            {%- if product.price_varies -%}
              {{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
            {%- else -%}
              {{ money_price }}
            {%- endif -%}
          </span>
        </dd>
      </div>
      <div class="price__sale">
        <dt>
          <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
        </dt>
        <dd>
          <span class="price-item price-item--sale">
            {%- if product.price_varies -%}
              {{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
            {%- else -%}
              {{ money_price }}
            {%- endif -%}
          </span>
        </dd>
        <div class="price__compare">
          <dt>
            <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
          </dt>
          <dd>
            <s class="price-item price-item--regular">
              {{ compare_at_price | money }}
            </s>
          </dd>
        </div>
      </div>
      <div class="price__unit">
        <dt>
          <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
        </dt>
        <dd class="price-unit-price">
          {%- capture unit_price_separator -%}
            <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
          {%- endcapture -%}
          {%- capture unit_price_base_unit -%}
            <span>
              {%- if variant.unit_price_measurement -%}
                {%- if variant.unit_price_measurement.reference_value != 1 -%}
                  {{- variant.unit_price_measurement.reference_value -}}
                {%- endif -%}
                {{ variant.unit_price_measurement.reference_unit }}
              {%- endif -%}
            </span>
          {%- endcapture -%}

          <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
        </dd>
      </div>
      <div class="price__badges price__badges--listing">
        <span class="price__badge price__badge--sale" aria-hidden="true">
          <span>{{ 'products.product.on_sale' | t }}</span>
        </span>
        <span class="price__badge price__badge--sold-out">
          <span>{{ 'products.product.sold_out' | t }}</span>
        </span>
      </div>
    </dl>

    </div>
  </div>
</div>