orange_ecom_starter-2.0.x-dev/templates/commerce/commerce-product--teaser.html.twig

{#
/**
 * @file
 *
 * Product Teaser template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The rendered product fields.
 *   Use 'product' to print them all, or print a subset such as
 *   'product.title'. Use the following code to exclude the
 *   printing of a given field:
 *   @code
 *   {{ product|without('title') }}
 *   @endcode
 * - product_entity: The product entity.
 * - product_url: The product URL.
 *
 * @ingroup themeable
 */
#}

{% extends "commerce-product.html.twig" %}

{% block content %}
  <div class="product-teaser">
    <a href="{{ product_path }}" class="product-thumbnail product-thumbnail--teaser {{ product_entity.field_image_hover.entity.fileuri ? 'product-thumbnail--with-hover' }}">
      <div class="product-thumbnail__content">
        {% if product_variation_images %}
          {% for product_variation_image in product_variation_images %}
            {# Use first image of the first variation. #}
            {% if loop.first %}
              <img src="{{ product_variation_image.images.0.entity.uri.value|image_style('product_thumbnail') }}" alt="{{ product_variation_image.images.0.alt }}" class="product-thumbnail__image" />

              {% if product_entity.field_image_hover.entity.fileuri %}
                <div class="product-thumbnail__image-hover">
                  <img src="{{ product_entity.field_image_hover.entity.uri.value|image_style('product_thumbnail') }}" alt="{{ product_entity.field_image_hover.alt }}" />
                </div>
              {% endif %}
            {% endif %}
          {% endfor %}
        {% else %}
          <img src="{{ product_thumbnail_url }}" alt="{{ product_thumbnail_alt }}" />
        {% endif %}
      </div>
    </a>
    <div class="product-teaser__title">
      <a href="{{ product_path }}" tabindex="-1">{{ product.title }}</a>
    </div>
    {% if has_multiple_variations %}
      <div class="product__variations-notice">
        <div class="product__more-options-label">
          <a href="{{ product_path }}" tabindex="-1">
            {{ 'More Options'|t }}
          </a>
        </div>
      </div>
    {% endif %}
    <div class="product-teaser__price">
      {{ product.variation_price }}
    </div>
    {% if product.variation_list_price %}
      <div class="product-teaser__list-price">
        {{ product.variation_list_price }}
      </div>
    {% endif %}
  </div>
{% endblock content %}