commercetools-8.x-1.2-alpha1/modules/commercetools_content/templates/commercetools-line-items.html.twig

{#
/**
 * @file
 * Default theme implementation for line items.
 *
 * Available variables
 * - attributes: A list of HTML attributes for the wrapper element.
 * - lineItems: The array of order or cart line items.
 * - lineStyle: lineStyle: Available options: default, form, summary.
 *
 *
 * @ingroup themeable
 */
#}

{{ attach_library('commercetools/commercetools.bootstrap_checker') }}

{% if lineStyle == 'default' %}
  {% set gridClasses = [['col-md-2'], ['col-md-5'], ['col-md-2'], ['col-md-3']] %}
{% elseif lineStyle == 'summary' %}
  {% set gridClasses = [['col-4', 'col-md-3'], ['col'], [], ['col']] %}
{% else %}
  {% set gridClasses = [['col-md-2'], ['col-md-3'], ['col-md-3', 'd-flex'], ['col-md-3'], ['col-md-1']] %}
{% endif %}

{% set productRoute = constant('Drupal\\commercetools_content\\Routing\\RouteProvider::ROUTE_PREFIX') ~ constant('Drupal\\commercetools_content\\Routing\\RouteProvider::PAGE_PRODUCT_ROUTE') %}

<div {{ attributes.addClass("line-items") }}>
  {% for lineItem in lineItems %}
    <div class="row d-flex justify-content-between align-items-center py-2" data-line-item-id="{{ lineItem.id }}">
      <div class="{{ gridClasses[0]|join(' ') }} text-center">
        <img class="w-100" src="{{ lineItem.variant.images.0.url }}" alt="{{ lineItem.name }}"/>
      </div>

      <div class="{{ gridClasses[1]|join(' ') }}">
        <span>
          <a class="fs-5 text-decoration-none fw-bold" href="{{ url(productRoute, {slug: lineItem.productSlug}, {query: {sku: lineItem.variant.sku}}) }}">{{ lineItem.name }}</a>
        </span>
        {% if lineStyle =='summary' and lineItem.quantity > 1 %}
          <span>&Cross;{{ lineItem.quantity }}</span>
        {% endif %}

        {% if lineItem.variant.attributes and lineStyle != 'summary' %}
          {% for lineAttribute in lineItem.variant.attributes %}
            <div>
              <span class="me-2 fw-bold">{{ lineAttribute.label }}:</span><span>{{render_var({ '#theme': 'commercetools_product_attribute_label', '#key': lineAttribute.name, '#label': lineAttribute.labelValue })}}</span>
            </div>
          {% endfor %}
        {% endif %}
      </div>

      {% if lineStyle !='summary' %}
        <div class="{{ gridClasses[2]|join(' ') }} text-center">
          {% if lineStyle == 'form' %}
            <button data-mdb-button-init="" data-mdb-ripple-init="" class="btn btn-link d-none quantity-btn quantity-minus px-2" data-mdb-button-initialized="true" data-cart-action="minus-quantity">
              <i class="bi bi-dash-lg"></i>
            </button>
            <input class="line-item-quantity form-number form-control" type="number" name="lineItems[{{ lineItem.id }}][quantity]" value="{{ lineItem.quantity }}" step="1" min="1">
            <button data-mdb-button-init="" data-mdb-ripple-init="" class="btn btn-link d-none action-button quantity-plus px-2" data-mdb-button-initialized="true" data-cart-action="plus-quantity">
              <i class="bi bi-plus-lg"></i>
            </button>
          {% else %}
            <span>{{ lineItem.quantity }}</span>
          {% endif %}
        </div>
      {% endif %}

      <div class="{{ gridClasses[3]|join(' ') }} text-align-right">
        {% if lineItem.isDiscounted %}
          <del>{{ lineItem.originalTotalPrice.localizedPrice }}</del>
          <span class="discount text-danger">{{ lineItem.totalPrice.localizedPrice }}</span>
        {% else %}
          <span>{{ lineItem.totalPrice.localizedPrice }}</span>
        {% endif %}
      </div>

      {% if lineStyle == 'form' %}
        <div class="{{ gridClasses[4]|join(' ') }} text-end">
          <a href="#" class="text-muted d-none" data-cart-action="remove-line-item">
            <i class="bi bi-x-lg"></i>
          </a>
          <input class="line-item-remove" type="hidden" name="lineItems[{{ lineItem.id }}][remove]" value="0">
        </div>
      {% endif %}
    </div>

    {% if loop.index != loop.last %}
      <hr class="my-2">
    {% endif %}
  {% endfor %}
</div>