commercetools-8.x-1.2-alpha1/modules/commercetools_content/templates/commercetools-cart-form.html.twig

{#
/**
 * @file
 * Default theme implementation for a cart form.
 *
 * Available variables
 * - attributes: A list of HTML attributes for the wrapper element.
 * - children: The child elements of the form.
 *
 * @see template_preprocess_form()
 *
 * @ingroup themeable
 */
#}
{{ attach_library('commercetools/commercetools.bootstrap_checker') }}

<form{{ attributes }}>
  <section class="pb-4">
    <div class="overflow-hidden">
      <section class="w-100">
        <div class="row">
          <div class="col-12">
            <div class="card card-registration card-registration-2 overflow-hidden border-0">
              <div class="card-body p-0">
                <div class="row g-0">
                  <div class="col-lg-9">
                    {% block card_items %}
                    <div class="pt-5 pe-5">
                      <div class="d-flex justify-content-between align-items-center mb-5">
                        <h3 class="fw-bold mb-0">{{ "Cart items"|t }}</h3>
                        <h4 class="mb-0 text-muted fs-6">
                          {% trans %}
                            {{ form['#cart']['totalLineItemQuantity'] }} item
                          {% plural form['#cart']['totalLineItemQuantity'] %}
                            {{ form['#cart']['totalLineItemQuantity'] }} items
                          {% endtrans %}
                        </h4>
                      </div>
                      {% if form['#cart'].lineItems %}
                        <div class="cart-line-items">
                          {{ render_var({ '#theme': 'commercetools_line_items', '#lineItems': form['#cart'].lineItems, '#lineStyle': 'form' }) }}
                        </div>
                        <div class="cart-update-button-wr d-none">
                          {{ form.cartUpdate }}
                        </div>
                      {% else %}
                        <div class="cart-empty-text">
                          {{ "Your cart is empty."|t }}
                        </div>
                      {% endif %}
                    </div>
                    {% endblock %}
                  </div>
                  <div class="col-lg-3 bg-body-tertiary">
                    {% block summary %}
                    <div class="p-5">
                      <h3 class="fw-bold mb-5">{{ 'Summary'|t }}</h3>
                      {{ form|without('lineItems', 'cartUpdate', 'actions') }}

                      {% if form['#cart'].isDiscounted %}
                        <div class="d-flex justify-content-between">
                          <h6>{{ 'Subtotal'|t }}</h6>
                          <h6>{{form['#cart']['originalTotalPrice']['localizedPrice']}}</h6>
                        </div>

                        {% if form['#cart'].discount.centAmount > 0 %}
                          <div class="d-flex justify-content-between text-success">
                            <h6>{{ 'Discount'|t }}</h6>
                            <h6>- {{ form['#cart'].discount.localizedPrice }}</h6>
                          </div>
                        {% endif %}

                        {% for discount in form['#cart']['discountCodes'] %}
                          <div class="d-flex justify-content-between text-success">
                            <h6>{{ discount.code }}</h6>
                            <h6>- {{ discount.amount.localizedPrice }}</h6>
                          </div>
                        {% endfor %}
                      {% endif %}

                      <hr class="my-4">
                      <div class="d-flex justify-content-between mb-5">
                        <h6 class="fw-bold">{{ 'Total price'|t }}</h6>
                        <h6 class="fw-bold">{{form['#cart']['totalPrice']['localizedPrice']}}</h6>
                      </div>

                      {{ form.actions }}
                    </div>
                    {% endblock %}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </section>
</form>