templates/twig-extension/render_product_card.html.twig line 1

Open in your IDE?
  1. {% set _basket_storage = app.session.get('mldev-cart-storage', []) %}
  2. {% set _basket_amount = _basket_storage[product_item.id]|default(0) %}
  4. {% set product_id =  product_item.id %}
  5. {% set product_name =  product_item.name|default(product_item.product.name) %}
  7. {% set product_url = path('mldev-front-product-show', { 'id': product_item.id }) %}
  9. {% set product_price = product_item.price|number_format(0, '', ' ')  %}
  10. {% set product_price_old = product_item.priceOld|number_format(0, '', ' ')  %}
  11. {% set product_price_unit = '₽' %}
  13. {% set product_volume = product_item.volume %}
  14. {% set product_volume_unit = product_item.volumeUnit %}
  16. {% if product_item.defaultImage %}
  17.     {% set image = asset(product_item.defaultImage.uri) %}
  18. {% elseif product_item.getAvailableImages()|length %}
  19.     {% set image = asset(product_item.defaultImage.uri) %}
  20. {% else %}
  21.     {% set image = asset('img/no_image.jpg') %}
  22. {% endif %}
  24. {% set product_info = {
  25.     id: product_id,
  26.     img: image,
  27.     imgAlt: product_name,
  28.     title: product_name,
  29.     cost: product_price,
  30.     costUnit: product_price_unit,
  31.     discount: product_price_old,
  32.     volume: product_volume,
  33.     volumeUnit: product_volume_unit,
  34.     link: product_url
  35. } %}
  37. <div data-product-id="{{ product_id }}" data-product-info="{{ product_info|json_encode }}" class="product-item">
  38.     <div class="product-item__header">
  39.         <button class="product-item__fav btn-control btn-control-fav" data-favorite type="button">
  40.             <span class="btn-control__icon">
  41.                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  42.                     <path d="M11.4769 20.0849C10.673 19.0023 9.62237 17.787 8.59332 16.9473C8.25868 16.6742 7.8048 16.0156 7.56804 15.6399C7.29524 15.207 6.62317 14.4126 6.15828 14.2018C5.63801 13.966 5.14534 12.9968 4.87668 12.5096C4.54878 11.9149 3.99567 11.4029 3.58796 10.8681C2.99986 10.0968 2.31606 9.43 2.12836 8.37693C1.95576 7.40857 1.8957 6.57773 2.34908 5.70416C2.83386 4.77007 3.53159 4.40876 4.42812 3.97557C5.91505 3.25709 8.66497 2.88765 10.1953 3.7141C10.5313 3.89555 10.859 4.15402 11.1565 4.39682C11.3678 4.56928 11.7155 5.24141 11.9326 5.30469C12.115 5.35786 12.6796 4.72702 12.9508 4.66555C13.3374 4.57791 13.7216 4.3088 14.1042 4.13535C16.0454 3.25525 19.7732 2.06428 21.4022 4.20072C21.9168 4.87563 21.986 6.29744 21.986 7.11317C21.986 8.26121 22.0956 9.42618 21.7012 10.5123C21.4479 11.21 20.9329 12.0078 20.4196 12.5314C19.1496 13.8269 17.7324 14.9821 16.4467 16.2645C15.213 17.495 13.6926 18.412 12.374 19.5329C11.8811 19.9519 11.2545 20.7212 10.708 21" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
  43.                 </svg>
  44.             </span>
  45.         </button>
  47.         {% if product_item.isNew %}
  48.             <div class="product-item__new">
  49.                 <img src="/img/icons/new.svg" alt="">
  50.             </div>
  51.         {% endif %}
  53.         {% if product_item.isSale %}
  54.             <div class="product-item__sale">
  55.                 <img src="/img/icons/sale.svg" alt="">
  56.             </div>
  57.         {% endif %}
  59.         <a class="product-item__img" href="{{ product_url }}">
  60.             <img src="{{ image }}" alt="{{ product_name }}" />
  61.         </a>
  62.     </div>
  64.     {% if options.single_display_variant %}
  65.         <div class="product-item__meta">
  66.     {% endif %}
  68.         <div class="product-item__body">
  69.             {% if options.single_display_variant %}
  70.                 <div class="product-item__badges">
  71.                     {% if product_item.isNew %}
  72.                         <div class="product-item__new">
  73.                             <img src="/img/icons/new.svg" alt="">
  74.                         </div>
  75.                     {% endif %}
  77.                     {% if product_item.isSale %}
  78.                         <div class="product-item__sale">
  79.                             <img src="/img/icons/sale.svg" alt="">
  80.                         </div>
  81.                     {% endif %}
  82.                 </div>
  83.             {% endif %}
  85.             <a class="product-item__title" href="{{ product_url }}">
  86.                 {{ product_name }}
  87.             </a>
  88.             {% if options.single_display_variant %}
  89.                 <div class="product-item__description">
  90.                     {{ product_item.product.extraFields['short-descr-in-single-display-variant']|default|raw }}
  91.                 </div>
  92.             {% endif %}
  93.             <div class="product-item__volume">
  94.                 <span class="product-item__volume-num"> {{ product_volume }} </span>
  95.                 <span class="product-item__volume-unit"> {{ product_volume_unit }}  </span>
  96.             </div>
  97.         </div>
  98.         <div class="product-item__footer {{ _basket_amount ? 'active-counter' }}" data-counter>
  99.             <div class="product-item__price">
  100.                 <div class="product-item__cost">
  101.                     <span class="product-item__cost-num{% if product_item.priceOld > 0 %} product-item__cost-num-with-old{% endif %}"> {{ product_item.price|number_format(0, '', ' ') }} </span>
  102.                     <span class="product-item__cost-unit"> {{ product_price_unit }} </span>
  103.                 </div>
  105.                 {% if product_item.priceOld > 0 %}
  106.                     <div class="product-item__discount"> {{ product_item.priceOld|number_format(0, '', ' ') }} </div>
  107.                 {% endif %}
  108.             </div>
  110.             {% if product_item.amount > 0 %}
  111.                 <div class="product-item__control">
  112.                     <button class="product-counter__control btn-control product-add" data-action-add="" type="button">
  113.                       <span class="product-add__text"></span>
  114.                       <span class="btn-control__icon">
  115.                         <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  116.                             <circle cx="24" cy="27" r="18" fill="white"/>
  117.                             <path d="M15.3888 19.7004C15.3888 21.3353 15.4427 22.9589 15.2376 24.5789C15.0708 25.8966 14.9496 27.8908 15.2916 29.1663C15.4992 29.9405 14.9044 34 15.8749 34C18.7199 34 21.5243 33.5972 24.3971 33.5972C26.7877 33.5972 29.1784 33.5972 31.5691 33.5972C32.3228 33.5972 33.1619 33.8411 33.859 33.7986C34.2818 33.7728 33.6245 32.6506 33.5673 32.4335C33.1272 30.7618 33.011 28.9669 32.8004 27.253C32.5499 25.2139 32.2298 23.2175 32.3036 21.155C32.3126 20.9033 32.8197 19.2088 32.3792 19.1074C31.3583 18.8724 30.0174 19.0962 28.9768 19.0962C26.7834 19.0962 24.5806 19.0349 22.388 19.0962C20.8135 19.1403 19.1158 19.2836 17.5383 19.4879C16.6589 19.6017 15.8415 19.4099 15 19.7004" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
  118.                             <path d="M20.5 22C20.5 20.921 20 20.0845 20 18.9412C20 18.0196 20 17.098 20 16.1765C20 14.2428 21.5057 13 23.1944 13C24.1502 13 26.1476 15.9948 26.25 16.9706C26.3114 17.5558 26.6701 20.7665 27 20.9412" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
  119.                         </svg>
  120.                       </span>
  121.                     </button>
  122.                     <div class="product-counter-wrapper">
  123.                         <a href="/cart" class="product-add product-add-active">
  124.                             <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  125.                                 <path d="M16.7427 27.9628C17.972 29.192 19.2731 30.3269 20.4921 31.5459C21.2793 32.3331 21.923 32.2847 22.9762 32.2847C23.3345 32.2847 23.6991 32.3045 24.0567 32.2847C24.4177 32.2646 24.5715 31.694 24.7309 31.4351C25.525 30.1446 26.0593 28.7234 26.8826 27.4272C28.032 25.6174 29.4019 23.903 30.3641 21.9786C30.664 21.3788 30.8534 20.7023 31.2414 20.1501C31.697 19.5018 32.5343 17.363 32.5343 18.1554" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
  126.                             </svg>
  127.                         </a>
  128.                         <div class="product-counter">
  129.                             <button class="product-counter__control btn-control btn-control-minus-small" data-decrease-amount type="button">
  130.                                 <span class="btn-control__icon">
  131.                                     <svg class="icon icon-minus-small">
  132.                                         <use xlink:href="/img/sprite.svg#icon-minus-small"></use>
  133.                                     </svg>
  134.                                 </span>
  135.                             </button>
  136.                             <div class="product-counter__info">
  137.                                 <span class="product-counter__num" data-amount="{{ _basket_amount }}">{{ _basket_amount }}</span>
  138.                                 <span class="product-counter__unit">шт</span>
  139.                             </div>
  140.                             <button class="product-counter__control btn-control btn-control-plus-small" data-increase-amount type="button">
  141.                                 <span class="btn-control__icon">
  142.                                     <svg class="icon icon-plus-small">
  143.                                         <use xlink:href="/img/sprite.svg#icon-plus-small"></use>
  144.                                     </svg>
  145.                                 </span>
  146.                             </button>
  147.                         </div>
  148.                     </div>
  149.                 </div>
  150.             {% else %}
  151.                 <div class="product-out-of-stock">скоро в продаже</div>
  152.             {% endif %}
  153.         </div>
  155.     {% if options.single_display_variant %}
  156.         </div>
  157.     {% endif %}
  158. </div>