Untitled

{% comment %}
  Accepts:
  - product: {Object} Product (required)
  - show_variant_options: {Boolean} Show variant swatches at the bottom (optional)
  - hide_title: {String} Hide product title (optional)
  - image_ratio: {String} Product media ratio (optional)
  - show_vendor: {Boolean} Show product vendor (optional)
  - show_cart_button: {Boolean} Show Add to cart button (optional)
  - show_quickview_button: {Boolean} Show Quickview button (optional)
  - show_wishlist_button: {Boolean} Show Wishlist button (optional)
  - column_wrapper: {Boolean} Wrap product card (optional)

  Usage:
  {% render 'product-card-4', product: product %}
{% endcomment %}

{% liquid
  if show_variant_options == nil 
    assign show_variant_options = settings.show_swatch_option
  endif

  assign show_title = true
  if hide_title == true
    assign show_title = false
  endif

  if image_ratio == nil or image_ratio == blank
    assign image_ratio = settings.pcard_image_ratio | default: '1/1'
  endif

  if image_ratio == 'original'
    assign image_ratio = product.featured_image.aspect_ratio | default: '1/1'
  endif

  if show_vendor == nil
    assign show_vendor = settings.show_vendor
  endif

  assign sold_out = false
  if product.available == false
    assign sold_out = true
  endif

  assign discount = ''
  assign compare_at_price = product.compare_at_price
  assign price = product.price
  assign on_sale = false
  if compare_at_price > price
    assign on_sale = true
    assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
  endif
          
  assign show_on_sale_badge = false
  if settings.on_sale_badge != 'hide' and on_sale
    assign show_on_sale_badge = true
  endif

  assign quick_add_text = 'products.product.quick_add' | t
  unless product.has_only_default_variant
    capture quick_add_text
      render 'new-locale', key: 'products.product.select_options'
    endcapture
  endunless

  assign sold_number = product.metafields.foxkit.sold_number

  if product.available 
    assign variant_id = product.first_available_variant.id
  else 
    assign variant_id = product.selected_or_first_available_variant.id
  endif
  assign selected_variant_id = ''
  if section.settings.change_product_variant_on_fitlering
    assign variant_id = product.selected_or_first_available_variant.id
    assign selected_variant_id = product.selected_variant.id
  endif

  if pcard_alignment == nil
    assign pcard_alignment = settings.pcard_alignment
  endif

  assign pcard_default_image = settings.pcard_default_image
  if image_ratio == nil or image_ratio == blank
    assign image_ratio = settings.pcard_image_ratio | default: '1/1'
  endif

  if show_cart_button == nil
    assign show_cart_button = settings.show_cart_button
  endif

  if show_quickview_button == nil
    assign show_quickview_button = settings.show_quickview_button
  endif

  if show_wishlist_button == nil
    assign show_wishlist_button = settings.show_wishlist_button
  endif

  if show_compare_button == nil
    assign show_compare_button = settings.show_compare_button
  endif

  assign preview_image = product.media[0].preview_image
  if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != nil
    assign preview_image = product.selected_variant.image
  endif

  if image_ratio == 'original'
    assign image_ratio = product.media[0].aspect_ratio | default: '1/1'
  endif

  assign second_image = ''
  if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
    assign second_image = product.images[1]
  endif

  assign product_card_classes = 'm-product-card m-product-card--style-4'
  if sold_out
    assign product_card_classes = product_card_classes | append: ' m-product-card--soldout'
  endif
  if on_sale
    assign product_card_classes = product_card_classes | append: ' m-product-card--onsale'
  endif
  if settings.show_second_img and second_image != blank
    assign product_card_classes = product_card_classes | append: ' m-product-card--show-second-img'
  endif
%}

{%- if column_wrapper -%}<div class="m:column">{%- endif -%}
  <div 
    class="{{ product_card_classes }}{% if animated %} m-scroll-trigger animate--{{ animation_effect }}{% endif %}" 
    data-view="card"
    {% if sold_number != blank %} 
      data-sold-number="{{ sold_number }}"
    {% endif %} 
    data-product-id="{{ product.id }}"
    {% if animated %}
      data-cascade
      style="--animation-order: {{ index }};"
    {% endif %}
  >  
      <div class="m-product-card__media">
          <a class="m-product-card__link m:block m:w-full" href="{{ product.url }}">
              {% if preview_image != blank %}
                <div class="m-product-card__main-image">
                  {%- liquid 
                    assign asp_rat = image_ratio | default: preview_image.aspect_ratio
                    if asp_rat == 'original'
                      assign asp_rat = preview_image.aspect_ratio
                    endif
                    assign alt = alt | default: preview_image.alt | escape
                  -%}
                  {%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
                  <responsive-image class="m-image"  style="--aspect-ratio: {{ asp_rat }}">
                    {{ preview_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
                  </responsive-image>
                </div>
        
                {%- if second_image != blank -%}
                  <div class="m-product-card__hover-image">
                    {%- liquid 
                      assign asp_rat = image_ratio | default: second_image.aspect_ratio
                      if asp_rat == 'original'
                        assign asp_rat = second_image.aspect_ratio
                      endif
                      assign alt = alt | default: second_image.alt | escape
                    -%}
                    {%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
                    <responsive-image class="m-image"  style="--aspect-ratio: {{ asp_rat }}">
                      {{ second_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
                    </responsive-image>
                  </div>
                {%- endif -%}
              {% else %}
                {% if pcard_default_image != blank %}
                  {%- liquid 
                    assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio
                    if asp_rat == 'original'
                      assign asp_rat = pcard_default_image.aspect_ratio
                    endif
                    assign alt = alt | default: pcard_default_image.alt | escape
                  -%}
                  {%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
                  <responsive-image class="m-image"  style="--aspect-ratio: {{ asp_rat }}">
                    {{ pcard_default_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
                  </responsive-image>
                {% else %}
                  <div style="--aspect-ratio: {{ image_ratio }}">
                    {{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
                  </div>
                {% endif %}
              {% endif %}
          </a>
          <div class="m-product-card__tags">
            {% if settings.show_badge_sale %}
              {% for tag in product.tags %}
                {% if tag contains 'tag__' %}
                  {%- liquid 
                    assign tag_content = tag | split: '__' | last
                    assign type = tag_content | split: '_' | first
                    assign tag_name = tag_content | split: '_' | last
                  -%}
                  <span class="m-product-card__tag-name m-product-tag m-product-tag--{{ type }}">{{ tag_name }}</span>
                {% endif %}
              {% endfor %}
            {% endif %}
            <span class="m-product-card__tag-name m-product-tag m-product-tag--preorder" data-foxkit-preorder-badge="{{ product.id }}"></span>
            {% if show_on_sale_badge %}
              {%- liquid 
                if settings.on_sale_badge == 'show_percentage'
                  assign sale_class = 'm-product-tag--discounted'
                else
                  assign sale_class = 'm-product-tag--sale'
                endif
              -%}
              <span class="m-product-card__tag-name m-product-tag {{ sale_class }}">
                {%- if settings.on_sale_badge == 'show_text' -%}
                  {{ 'products.product.on_sale' | t }}
                {%- elsif settings.on_sale_badge == 'show_percentage' -%}
                  {{ discount | append: '%' | prepend: '-' }}
                {%- endif -%}
              </span>
            {% endif %}
          </div>
          {%- if settings.show_badge_soldout -%}
            <span class="m-product-tag m-product-tag--soldout"{% unless sold_out %} style="display: none;"{% endunless %}>{{ 'products.product.sold_out' | t }}</span>
          {%- endif -%}
    
          {%- if show_quickview_button or show_wishlist_button or show_compare_button -%}
            <div class="m-product-card__action m:hidden md:m:flex">
              {% liquid
                assign tooltips = 'compare,quickview'
                assign tooltip_items = tooltips | split: ','
              %}
              
              {%- if show_wishlist_button -%}
                {% assign wishlist_app = settings.wishlist_app %}
                {% if wishlist_app == 'growave' %}
                  <div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--top">
                    <span class="m-tooltip-icon m:block">
                      {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
                      {% unless the_snippet_fave_icon contains 'Liquid error' %}
                        {{ the_snippet_fave_icon }}
                      {% else %}
                        {% render 'mm-ssw-widget-faveicon' with product.id %}
                      {% endunless %}
                    </span>
                    <div class="m-tooltip__content " data-revert-text="">
                      {{ 'products.product.add_to_wishlist' | t }}
                    </div>
                  </div>
                {% else %}
                  {% liquid 
                    render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top' 
                  %}
                {% endif %}
              {%- endif -%}
              
              {%- for tooltip in tooltip_items -%}
                {%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
                {%- if [settings_key] -%}
                  {% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--top' %}
                {%- endif -%}
              {%- endfor -%}
            </div>
          {%- endif -%}

          {% liquid
            assign metafields_time = product.metafields.global['minimog_countdown']
            if settings.show_countdown and metafields_time != blank
              render 'countdown-timer', time: metafields_time, separator: false, short_label: true, extra_classes: 'm-product-card__countdown m:hidden' 
            endif
          %}
      </div>
      <div class="m-product-card__content m:text-{{ pcard_alignment }}">
        <div class="m-product-card__info">
          {%- if show_vendor -%}
            <span class="m-product-card__vendor">{{ product.vendor }}</span>
          {%- endif -%}
          {% if show_title == true %}
            <h3 class="m-product-card__title">
              <a href="{{ product.url }}" class="m-product-card__name{% if settings.uppercase_prd_name %} m:uppercase{% endif %}">
                {{ product.title }}
              </a>
            </h3>
          {% endif %}
          {% if settings.show_review_badge %}
            <div class="m-product-card__reviews m:text-color-body">
              {% render 'product-reviews-app__badge', product: product %}
            </div>
          {% endif %}
        
          <div class="m-product-card__price">
            {% render 'product-prices', product: product, is_product_card: true %}
          </div>
          {% if product.has_only_default_variant == false and show_variant_options %}
            {% render 'product-card-option', product: product, show_variant_options: show_variant_options, pcard_alignment: pcard_alignment %}
          {% endif %}
        </div>
    
        {%- if sold_out == false and show_cart_button -%}
          {% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
        {%- endif -%}
    
        <div class="m-product-card__content-footer">
          <div class="m-product-card__description">
            {{ product.description | strip_html | truncatewords: 15, '...' }}
          </div>
          <div class="m-product-card__action">
            {% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
            <div class="m-product-card__action-icons">
              {% liquid
                assign tooltips = 'compare,quickview,'
                assign tooltip_items = tooltips | split: ','

                if show_cart_button
                  render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
                endif
              %}

              {%- if show_wishlist_button -%}
                {% assign wishlist_app = settings.wishlist_app %}
                {% if wishlist_app == 'growave' %}
                  <div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--top">
                    <span class="m-tooltip-icon m:block">
                      {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
                      {% unless the_snippet_fave_icon contains 'Liquid error' %}
                        {{ the_snippet_fave_icon }}
                      {% else %}
                        {% render 'mm-ssw-widget-faveicon' with product.id %}
                      {% endunless %}
                    </span>
                    <div class="m-tooltip__content " data-revert-text="">
                      {{ 'products.product.add_to_wishlist' | t }}
                    </div>
                  </div>
                {% else %}
                  {% liquid 
                    render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top' 
                  %}
                {% endif %}
              {%- endif -%}
              
              {%- for tooltip in tooltip_items -%}
                {%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
                {%- if [settings_key] -%}
                  {% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--top' %}
                {%- endif -%}
              {%- endfor -%}
            </div>
          </div>
        </div>
      </div>
    <input hidden name="id" required value="{{ variant_id }}" data-selected-variant="{{ selected_variant_id }}">
  </div> <!-- .m-product-card -->
{%- if column_wrapper -%}</div><!-- .m:column -->{%- endif -%}