custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/page/product-detail/configurator/select.html.twig line 1

Open in your IDE?
  1. {% set dropdown = type === 'dropdown' %}
  2. {% set radio = type === 'radio' %}
  3. {% set getParameter = app.request.query.get('size') %}
  4. {% set buttonText = "tapBar.selectSizeLabel"|trans %}
  5. {% if getParameter %}
  6.     {% set buttonText = getParameter %}
  7. {% endif %}
  8. {% if options is null %}
  9.     {% set options = page.product.children %}
  10. {% endif %}
  12. {% block custom_select_container %}
  13.     <section class="custom-select-container relative"
  14.              x-data="{show: false, value: null}"
  15.             {% if shopTheLook %} data-custom-variation-switch="false" {% else %}data-custom-variation-switch="true" {% endif %}>
  16.         {% if label %}
  17.             {% block custom_select_label %}
  18.                 <div class="custom-select-label-container flex items-center mb-2">
  19.                     <div class="flex items-center">
  20.                         <label class="custom-select-label font-medium text-grey-600" for="{{ group.id }}">
  21.                             {{ "tapBar.sizeLabel"|trans }}
  22.                         </label>
  23.                         <span x-text="value" class="font-accent font-bold  text-sm ml-2 w-12"></span>
  24.                     </div>
  25. {#                    {% if sizeGuide %}#}
  26. {#                        <a class="nav-link block ml-4 underline text-xs uppercase font-accent opacity-50 product-detail-tab-navigation-link"#}
  27. {#                           id="size-guide-tab" data-toggle="tab" data-offcanvas-tabs="true" href="#size-guide-tab-pane"#}
  28. {#                           role="tab"#}
  29. {#                           aria-controls="size-guide-tab-pane" aria-selected="true">#}
  30. {#                            {{ "tapBar.sizeGuideLabel"|trans }}#}
  31. {#                        </a>#}
  32. {#                    {% endif %}#}
  33.                 </div>
  34.             {% endblock %}
  35.         {% endif %}
  36.         {% block custom_select_size_advise %}
  37.             {% if tapBar !== true %}
  38.                 {% for properties in page.product.properties.elements %}
  39.                     {% if properties.groupId == 'b511785c24a84c68b73e2a5b4846e479' %}
  40.                         <div class="size-advice mt-3">
  41.                             <i>{{ properties.name }}</i>
  42.                         </div>
  43.                     {% endif %}
  44.                 {% endfor %}
  45.             {% endif %}
  46.         {% endblock %}
  47.         {% if dropdown %}
  48.             {% block custom_select_button %}
  49.                 <button class="custom-select-button capitalize custom-select transition {% if product %}bg-white text-grey-600 border-grey-300{% endif %} {% if tapBar %}{% endif %} {% if shopTheLook %} pr-12 w-full lg:w-full {% endif %}"
  50.                         type="button"
  51.                         data-error-classes="border border-red-500 italic text-red-500"
  52.                         @click="show = !show; $el.classList.remove('border', 'border-red-500', 'italic', 'text-red-500')"
  53.                         :class="show ? 'active' : ''">
  54.                 <span x-text="value == null ? '{{ buttonText }}' : value"
  55.                       class="{% if shopTheLook %}shop-the-look-select-placeholder-text capitalize{% else %}custom-select-placeholder-text{% endif %}">
  56.                     {% block custom_select_button_text %}
  57.                         {{ buttonText }}
  58.                     {% endblock %}
  59.                 </span>
  60.                 </button>
  61.             {% endblock %}
  62.         {% endif %}
  63.         {% block custom_select_options %}
  64.             <div {% if dropdown %}x-show="show"{% endif %}
  65.                  @click.outside="show = false"
  66.                  id="{{ group.id }}"
  67.                  class="custom-select-options {% if radio %}flex flex-wrap gap-2{% endif %}{% if dropdown %}absolute left-0 right-0 bg-white shadow-md py-1 z-10 max-h-80 overflow-y-scroll bg-grey-200 {% if position == 'top' %}bottom-100{% else %}top-100{% endif %}{% endif %}">
  69.                 {% for key, option in options %}
  70.                     {% set name = option.options.elements|first.name %}
  71.                     {% set outOfStock = option.stock <= 0 %}
  72.                     {% set selected = false %}
  73.                     {% if getParameter == name %}
  74.                         {% set selected = true %}
  75.                     {% elseif option.id in page.product.optionIds %}
  76.                         {% set selected = true %}
  77.                     {% endif %}
  78.                     {% if outOfStock %}
  79.                         {% continue %}
  80.                     {% endif %}
  81.                     {% block custom_select_option %}
  82.                         <div class="custom-select-option">
  83.                             <input type="radio"
  84.                                    class="{% if shopTheLook %}shop-the-look-select-option-radio{% else %}custom-select-option-radio{% endif %} hidden peer"
  85.                                    value="{{ key }}"
  86.                                    id="{{ name }}_{{ product.id }}"
  87.                                    data-friendlyname="{{ name }}"
  88.                                    @change="value = $el.dataset.friendlyname"
  89.                                    {% if selected %}checked="checked"{% endif %}
  90.                                     {% if outOfStock %}disabled{% endif %}
  91.                                    name="custom_select">
  92.                             <label for="{{ name }}_{{ product.id }}"
  93.                                    @click="show = false"
  94.                                    title="{% if outOfStock %}{{ "tapBar.soldOutLabel"|trans }}{% else %}{{ name }}{% endif %}"
  95.                                    class="custom-select-option-label transition font-accent font-bold relative {% if not outOfStock %}cursor-pointer {% endif %}
  96.                                     {% if radio %}flex items-center justify-center w-12 h-12 bg-grey-50 border border-transparent rounded-sm peer-checked:border-grey-900{% if not outOfStock %} hover:border-grey-900{% endif %}{% endif %}
  97.                                     {% if dropdown %}block py-2 px-3 hover:bg-grey-200 peer-checked:bg-grey-200 {% endif %}
  98.                                     {% if selected %}bg-grey-200{% endif %}
  99.                                     {% if outOfStock %}text-grey-500 cursor-default {% if radio %}bg-red-100{% endif %}{% endif %}
  100.                                     ">
  101.                                 {{ name }}
  102.                                 {% if outOfStock %}
  103.                                     {% if dropdown %}
  104.                                         <span class="out-of-stock-label"> - {{ "tapBar.soldOutLabel"|trans }}</span>
  105.                                     {% elseif radio %}
  106.                                         <span class="out-of-stock-icon w-full h-px bg-grey-700 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45"></span>
  107.                                     {% endif %}
  108.                                 {% endif %}
  109.                             </label>
  110.                         </div>
  111.                     {% endblock %}
  112.                 {% endfor %}
  113.             </div>
  114.         {% endblock %}
  115.         <span class="absolute text-red-500 text-xs italic{% if dropdown %} bottom-100{% elseif radio %} top-100 mt-1{% endif %}"
  116.               data-error-message="Selecteer een maat" style="display: none"
  117.               aria-hidden="true"></span>
  118.     </section>
  119. {% endblock %}