commercetools-8.x-1.2-alpha1/modules/commercetools_content/templates/commercetools-product-list-item.html.twig

{#
/**
 * @file
 *
 * Default product card template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The commercetools product data.
 *
 * @ingroup themeable
 */
#}
{{ attach_library('commercetools/commercetools.bootstrap_checker') }}

<figure{{ attributes.addClass("h-100", "card", "flex-row") }}>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <a class="h-100" href="{{ url }}">
          <div class="h-100 d-flex flex-wrap align-items-center">
            <img src="{{ product.images.0.url }}" class="p-2 m-auto max-width" alt="{{ product.name }}" style="max-height: 16rem; width: auto; max-width: 100%">
          </div>
        </a>
      </div>
      <div class="col-8 card-body d-flex flex-column">
        <h2 class="card-title fs-5 text-truncate text-primary"><a class="text-decoration-none" href="{{ url }}">{{ product.name }}</a></h2>

        <div class="border-top py-3 mb-3">
          {% for attr in product.attributes %}
            <div class="fw-medium">
              <span>{{ attr.label }}:&nbsp;</span>
              <span>{{ render_var({ '#theme': 'commercetools_product_attribute_label', '#key': attr.name, '#label': attr.labelValue }) }}</span>
            </div>
          {% endfor %}
        </div>

        <div class="border-top pt-3">
          <a href="{{ url }}" class="card-btn btn btn-primary btn-sm float-end">{{ 'Details'|t }}</a>
          <span class="price">
            {% if product.price.discounted %}
              <del>{{ product.price.localizedPrice ?? unavailable_data_text }}</del>
              <span class="discount text-danger">{{ product.price.discounted.localizedPrice }}</span>
            {% else %}
              {{ product.price.localizedPrice ?? unavailable_data_text }}
            {% endif %}
          </span>
        </div>
      </div>
    </div>
  </div>
</figure>