stack/src/components/items/product-item/product-item.twig line 1

Open in your IDE?
  1. {%- set class_name = [
  2.   "i-product",
  3.   "d-flex flex-column gap-2 p-2 u-posr h-100 u-bg-white",
  4.   props.extra_class|default(false) ? props.extra_class : null,
  5. ]|join(' ')|trim -%}
  7. {%- set attrs = [
  8.   'class="' ~ class_name ~ '"',
  9. ] -%}
  11. {% if props.id %}
  12.   {%- set attrs = attrs|merge(['id="' ~ props.id ~ '"']) -%}
  13. {% endif %}
  15. {%- set attrs = attrs|join(' ')|trim -%}
  17. {% set detail_button = {
  18.   title: "Detail produktu"|trans,
  19.   url: props.url,
  20.   onclick: props.onclick,
  21.   tag: 'button',
  22.   icon: {
  23.     src: "@Images/svg/chevron-right.svg",
  24.     size: "lg"
  25.   },
  26.   full_width: true
  27. } %}
  29. {% set img_props = {
  30.   is_placeholder: true,
  31.   ratio: "1-1",
  32.   objectfit: "contain",
  33.   width: 296,
  34.   height: 296,
  35.   alt: props.img.alt|default(props.title|default(""))|escape,
  36. } %}
  38. <article {{ attrs|raw }}>
  39.   <figure class="i-product__image d-block u-posr">
  40.     <a style="cursor:pointer;" onclick="{{ props.onclick }}" class="i-product__image-link d-flex align-items-center" title="{{ props.title }}">
  41.       {% if props.img %}
  42.         {% include "@Components/img/img.twig" with {props: props.img|merge(img_props)|merge({
  43.           extra_class: "i-product__image"
  44.         })} %}
  46.       {% else %}
  47.         {% include "@Components/img/img.twig" with {props: img_props|merge({
  48.           src: base_path ~ "images/content/placeholder.png",
  49.           extra_class: "i-product__image-placeholder"
  50.         })} %}
  51.       {% endif %}
  52.     </a>
  54.     {% if props.tag %}
  55.       {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  56.         title: props.tag.title,
  57.         size: "sm-base",
  58.         variant: "product",
  59.         extra_class: "i-product__tag u-posa u-z-index-3"
  60.       }} %}
  61.     {% endif %}
  62.   </figure>
  64.   <div class="i-product__wrap d-flex flex-column gap-4">
  65.     <div class="i-product__header d-flex flex-column gap-1 px-1">
  66.       <h5 class="i-product__title u-fz-lg u-fw-500">
  67.         {% include "@Components/link/link.twig" with {props: {
  68.           color: "primary-to-conversion",
  69.           title: props.title,
  70.           onclick: props.onclick,
  71.           extra_class: "i-product__link u-clamp",
  72.         }} %}
  73.       </h5>
  75.       {% if props.family %}
  76.         <div class="i-product__family d-flex flex-wrap gap-1 u-color-primary-500 u-fz-sm u-fw-600">
  77.           <div class="u-color-primary-300 u-fw-400">{{ "Rodina:"|trans }}</div>
  78.           {{ props.family }}
  79.         </div>
  80.       {% endif %}
  81.     </div>
  83.     <div class="i-product__content d-flex flex-column gap-2 u-posr">
  84.       {% if props.code %}
  85.         <div class="i-product__code d-flex flex-wrap gap-1 u-color-primary-500 u-fz-sm u-fw-600 px-1">
  86.           <div class="u-color-primary-300 u-fw-400 me-3">{{ "Kód:"|trans }}</div>
  87.           {{ props.code }}
  88.         </div>
  89.       {% endif %}
  91.       {% if props.specs %}
  92.         <div class="i-product__specs d-flex flex-wrap px-1">
  93.           {% for item in props.specs %}
  94.             {% include "@Components/items/tooltip-item/tooltip-item.twig" with {props: item.tooltip|merge({
  95.               extra_class: "i-product__tooltip"
  96.             })} %}
  97.           {% endfor %}
  98.         </div>
  99.       {% endif %}
  100.     </div>
  101.   </div>
  103.   <div class="i-product__detail-btn mt-auto w-100">
  104.     {% include "@Components/button/button.twig" with {props: detail_button} %}
  105.   </div>
  106. </article>