slider_modul.html

{# @var craft \craft\web\twig\variables\CraftVariable #}
{# @var entry \craft\elements\Entry #}
{#
  Description of what this file is for

  @package  neubau_com.neubau-eyewear.www
  @author David Hellmann — Fredmansky [[email protected]]

  o-sliderProductVariants
  ------------------------------------------------------------
#}

{# -- Set Defaults -- #}
{% set defaults = {
  cn: 'o-sliderProductVariants',
  modifiers: [],
  customClasses: [],
  data: {},
  js: null,
  variants: null,
  label: null,
  headline: null,
  url: null,
  dominantColor: null,
  dominantColorOverwrite: null,
} %}

{# -- Merge Default with Options -- #}
{% set opt = opt is defined ? defaults|merge(opt) : defaults %}

{# -- Modul -- #}
{% if opt.variants %}
  <div class="{{ opt.cn }}">

    {% set images = [] %}
    {% set colorDots = {} %}

    {% for item in opt.variants %}
      {% set images = images | merge([item.productImageThumb.one()]) %}
      {% set colorDots = colorDots | merge([
        { 'colorFirst': item.productColorCode, 'colorSecond': item.productColorCodeAccent }
      ]) %}
    {% endfor %}


    {# -- label -- #}
    {% include '_atoms/label/_template.html' with {
      opt: {
        modifiers: ['hint'],
        text: opt.label ?? null
      }
    } only %}

    <div class="{{ opt.cn ~ '__slider' }}
              {% for modifier in opt.modifiers %}
                {{ modifier | length ? '  ' ~ opt.cn ~ '--' ~ modifier }}
              {% endfor %}
              {% for customClass in opt.customClasses %}
                {{ customClass | length ? '  ' ~ customClass }}
              {% endfor %}  {{ opt.js ? opt.cn|replace({ 'o-' : 'js-' }) : '' }}"
      {% for key, value in opt.data %}
        data-{{ key }}="{{ value }}"
      {% endfor %} itemscope itemtype="http://schema.org/ImageGallery" role="presentation">


      {% for image in images %}
        <div class="{{ opt.cn ~ '__slide' }}" itemscope itemtype="http://schema.org/ImageObject">
          <div class="{{ opt.cn ~ '__slideInner' }}">
            {% if opt.url %}
            <a href="{{ opt.url }}">
              {% endif %}

              {% include '_molecules/figure/_template.html' with {
                opt: {
                  image: image ?? null,
                  maxWidth: 800,
                  dominantColor: opt.dominantColor,
                  dominantColorOverwrite: opt.dominantColorOverwrite,
                }
              } only %}
              {% if opt.url %}
            </a>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>

    {% if colorDots | length or opt.headline ?? null %}
      <div class="{{ opt.cn ~ '__content' }}">
        {% if opt.url %}
        <a href="{{ opt.url }}">
          {% endif %}

          {# -- headline -- #}
          {% if opt.headline %}
            {% include '_atoms/headline/_template.html' with {
              opt: {
                modifiers: ['title', 'h6'],
                text: opt.headline
              }
            } only %}
          {% endif %}
          {% if opt.url %}
        </a>
        {% endif %}

        {# -- plainText -- #}
        {% if colorDots | length %}
          {% set colorSufix = colorDots | length > 1 ? 'colors' | t : 'color' | t %}
          {% include '_atoms/plainText/_template.html' with {
            opt: {
              modifiers: ['colors'],
              text: colorDots | length ~ ' ' ~ colorSufix
            }
          } only %}
        {% endif %}

        {# -- Color Dots -- #}
        {% if colorDots ?? null %}
          {# -- colorDots -- #}
          {% include '_molecules/colorDots/_template.html' with {
            opt: {
              js: true,
              modifiers: ['productOverview'],
              colorDots: colorDots
            }
          } only %}
        {% endif %}
      </div>
    {% endif %}
  </div>
{% endif %}