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

{#
/**
 * @file
 *
 * Default product template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The commercetools product data.
 * - add_to_cart: The add to cart form.
 *
 * @ingroup themeable
 */
#}
{{ attach_library('commercetools/commercetools.bootstrap_checker') }}
{{ attach_library('commercetools_content/gallery_modal') }}

{% set modalSelector = 'ct-content-modal-' ~ random() %}

{% set buttons = [] %}
{% set images = [] %}
{% for image in product.images %}
  {% set img %}
    <img src="{{ image.url }}" alt="{{ image.label }}" style="width: 100%; object-fit: contain; height: 100%;" />
  {% endset %}
  {% set button %}
    <button class="btn btn-link modal-button" data-slide-to="{{ loop.index0 }}" data-bs-toggle="modal" data-bs-target="#{{ modalSelector }}">
      <img src="{{ image.url }}" alt="{{ image.label }}" style="max-height: 24rem; width: 100%; object-fit: contain; height: 100%;" />
    </button>
  {% endset %}

  {% set images = images|merge([img]) %}
  {% set buttons = buttons|merge([button]) %}
{% endfor %}

<article{{ attributes.addClass("product") }}>
  <div class="row my-4">
    <div class="col-12 col-md-6">
      {% block left_side %}
        <div class="card-img-wrapper text-center">
          {% if buttons %}
            {% include 'commercetools-carousel.html.twig' with {
              items: buttons
            } %}
          {% endif %}
        </div>
      {% endblock left_side %}
    </div>

    <div class="col-12 col-md-6 mt-4 mt-md-0">
      {% block right_side %}
        <div class="card-body">
          <div class="product-price fs-4">
            {% 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 %}
          </div>
          <div class="product-availability mt-2 mb-2">{{ '@count available'|t({'@count': product.availability}) }}</div>
        </div>
        {% if add_to_cart %}
          {{ add_to_cart }}
        {% endif %}
      {% endblock right_side %}
    </div>
  </div>
</article>

{% if images %}
  {% set modal_content %}
    {% include 'commercetools-carousel.html.twig' with {
      items: images
    } %}
  {% endset %}

  {% include 'commercetools-gallery-modal.html.twig' with {
    selector: modalSelector,
    title: product.name,
    content: modal_content,
  } %}
{% endif %}