templates/App/checkout/partials/product_upsells_page.html.twig line 1

Open in your IDE?
  1. {% import 'App/checkout/currency_macros.html.twig' as currencyPosition  %}
  4. {% if product.upsells %}
  5.     {% for upsell in product.upsells%}
  6.         {% if not upsell.productDetail.outOfStock %}
  7.             {% set choosedUpsellQuantity = choosedUpsells[upsell.id] is defined ? choosedUpsells[upsell.id]['quantity'] : 0 %}
  8.             <div class="upsell-list">
  9.                 <div class="upsell-product">
  10.                     <div class="row">
  11.                         <div class="col-5 pr-3 pt-0">
  12.                             {% if upsell.imagePath %}
  13.                                 {% if discountPercentage is defined and discountPercentage > 0%}
  14.                                     <div class="product-offer-badge">{{ discountPercentage }}% {{ 'extraDiscount'| trans }}</div>
  15.                                 {% endif %}
  16.                                 <img class="w-100" src="{{ asset('assets/uploads/'~upsell.imagePath) }}" alt="{{ upsell.title }}" >
  17.                             {% endif %}
  18.                         </div>
  19.                         <div class="col-7 pt-0 product-info">
  20.                             <h3 class="product-title">{{ upsell.title }}</h3>
  21.                             <div class="product-pricing">
  22.                                 {% if upsell.productDetail.recommendRetailPrice != upsell.variants | first.totalPrice %}
  23.                                     <span class="original-price">
  24.                                             {{ currencyPosition.smallNumbers(convertEURToAnotherCurrency(currency, upsell.productDetail.recommendRetailPrice), currency|currency_symbol, 'small-upsell-unit' ) }}
  25.                                         </span>
  26.                                 {% endif %}
  27.                                 <span class="discounted-price dl-price dl-upsell-price">
  28.                                         <dd>
  29.                                         {{ currencyPosition.smallNumbers(upsell.variants | first.totalPrice, currency|currency_symbol ) }}
  30.                                         </dd>
  31.                                     </span>
  32.                             </div>
  33.                             <div class="upsell-product__description text-left">
  34.                                 {{ upsell.description | raw }}
  35.                             </div>
  36.                             <div class="upsell-product__manage mt-2 d-flex justify-content-between align-items-center">
  37.                                 <div class="upsell-counter-container">
  38.                                     <span role="button" class="btn add-to-card-btn add-upsell-to-card-btn change-quantity {% if choosedUpsellQuantity %}d-none{% endif %}" data-operation="+">{{ 'addToCard'| trans }}</span>
  39.                                     <div class="input-group upsell-counter {% if not choosedUpsellQuantity %}d-none{% endif %}">
  40.                                         <div class="input-group-append decrement-btn">
  41.                                             <span role="button" class="input-group-text change-quantity" data-operation="-">-</span>
  42.                                         </div>
  43.                                         <span class="form-control text-center upsell-quantity" data-product-id="{{ upsell.id }}" data-value="{{ choosedUpsellQuantity }}" data-max-qty="{{ upsell.maxQuantity }}">{{ choosedUpsellQuantity }}</span>
  44.                                         <div class="input-group-append increment-btn">
  45.                                             <span role="button" class="input-group-text change-quantity {% if upsell.maxQuantity and upsell.maxQuantity <= choosedUpsellQuantity %} invisible {% endif %}" data-operation="+">+</span>
  46.                                         </div>
  47.                                     </div>
  48.                                 </div>
  50.                             </div>
  51.                         </div>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.         {% endif %}
  56.     {% endfor %}
  57.     <hr>
  59. {% endif %}