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

Open in your IDE?
  1. {%- set class_name = [
  2.   "i-product-variant",
  3.   "d-flex flex-column justify-content-center",
  4.   "px-1 u-posr w-100",
  5.   props.extra_class|default(false) ? props.extra_class : null,
  6. ]|join(' ')|trim -%}
  8. {%- set attrs = [
  9.   'class="' ~ class_name ~ '"',
  10. ] -%}
  12. {% if props.id %}
  13.   {%- set attrs = attrs|merge(['id="' ~ props.id ~ '"']) -%}
  14. {% endif %}
  16. {%- set attrs = attrs|join(' ')|trim -%}
  18. {% set open_btn = {
  19.   title: "Otevřít variant"|trans,
  20.   tag: "button",
  21.   type: "button",
  22.   size: "sm",
  23.   icon_only: true,
  24.   icon: {
  25.     src: "@Images/svg/chevron-down.svg",
  26.     size: "lg"
  27.   },
  28.   extra_class: "--js-open-variant"
  29. } %}
  31. <div {{ attrs|raw }}>
  33.   {% if props.header %}
  34.     <ul class="i-product-variant__header d-grid align-items-center gap-1 flex-grow-1 u-cursor-pointer">
  35.       {% for item in props.header %}
  36.         {% if item %}
  37.           <li class="i-product-variant__header-item u-fz-sm u-fw-600 u-color-primary p-1">{{ item|raw|escape }}</li>
  38.         {% else %}
  39.           <li class="i-product-variant__header-item u-fz-sm u-fw-600 u-color-primary p-1">{{ "-" }}</li>
  40.         {% endif %}
  41.       {% endfor %}
  43.       {% include "@Components/button/button.twig" with {props: open_btn} %}
  44.     </ul>
  45.   {% endif %}
  47.   <div class="i-product-variant__body d-grid u-bg-white">
  48.     <div class="i-product-variant__body-inner overflow-hidden">
  50.       <div class="i-product-variant__content d-flex flex-column gap-5">
  51.         {% include "@Components/items/product-variant-item/product-variant-item--raw.twig" with {props: props} %}
  52.       </div>
  54.     </div>
  55.   </div>
  56. </div>