commercetools-8.x-1.2-alpha1/modules/commercetools_content/templates/commercetools-product-cards-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") }}>
  <a class="h-100" href="{{ url }}">
    <div class="card-img-wrapper h-100 d-flex flex-wrap align-items-center">
      <img src="{{ product.images.0.url }}" alt="{{ product.name }}" class="card-img card-img-top p-2 m-auto max-width" style="max-height: 12rem; width: auto; max-width: 100%" />
    </div>
  </a>
  <div class="card-body">
    <h2 class="fs-5 text-truncate text-primary"><a class="card-title text-decoration-none" href="{{ url }}">{{ product.name }}</a></h2>
  </div>
  <div class="card-footer bg-transparent">
    <div class="row">
      <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 class="card-footer bg-transparent">
    <a href="{{ url }}" class="card-btn btn btn-primary btn-sm float-end">{{ 'Details'|t }}</a>
  </div>
</figure>