templates/frontend/product/_dropdown.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'store' %}
  4. <!-- START OF DROPDOWNS SECTION -->
  5. <product-params inline-template v-cloak :initialitems="{{ versions }}">
  6.     <div>
  8.         {% set c = 0 %}
  9.         {% for key, parameterValue in parameterValues %}
  10.             {% set c = c + 1 %} {# ugly but works #}
  11.             {% if key == 8 %} {# wersja - bez obrazków #}
  13.                 <!-- START OF 1. DROPDOWN -->
  14.                 <div class="dropdown is-fullwidth dropdown1"
  15.                      :class="dropdown1Classes"
  16.                      :data-selected-item="items1[ selectedItem1 ].id">
  18.                     <div class="dropdown-trigger"
  19.                          @click="toggleDropdown1">
  21.                         <div class="has-text-left no-images-inside dropdown-button no-image cool-shadow cut-text"
  22.                              aria-haspopup="true"
  23.                              aria-controls="dropdown-menu1">
  24.                             <span>{{ 'version'|trans }}:</span>
  25.                             <span class="has-text-weight-bold"><% items1[ selectedItem1 ].name %></span>
  26.                             <span><% items1[ selectedItem1 ].surcharge %></span>
  27.                             <span class="icon is-small">
  28.                                 <i class="fas fa-angle-down" aria-hidden="true"></i>
  29.                             </span>
  30.                         </div>
  32.                     </div>
  33.                     <div class="dropdown-menu"
  34.                          id="dropdown-menu1"
  35.                          role="menu"
  36.                          @mouseleave="toggleDropdown1">
  37.                         <div class="dropdown-content">
  39.                             <div :class="[ 'dropdown-item', ( selectedItem1 == index ) ? 'is-selected' : '' ]"
  40.                                  v-for="( item, index ) in items1"
  41.                                  :key="item.name"
  42.                                  @click.prevent="selectItem1( index, item )">
  44.                                 <div class="subtitle is-7">
  45.                                     <div class="divider"></div>
  46.                                     <span class="has-text-weight-bold"><% item.name %></span>
  47.                                     <span><% item.surcharge %></span>
  48.                                     <div>
  49.                                         <% item.description %>
  50.                                     </div>
  51.                                 </div>
  53.                                 <hr class="dropdown-divider">
  54.                             </div>
  56.                         </div>
  57.                     </div>
  59.                 </div>
  60.                 <!-- END OF 1. DROPDOWN -->
  61.             {% else %}
  62.                 {% set visibleElement = '' %}
  63.                 {% if c == 2 %}
  64.                     {% set visibleElement = 'secondVisible' %}
  65.                 {% endif %}
  66.                 {% if c == 3 %}
  67.                     {% set visibleElement = 'thirdVisible' %}
  68.                 {% endif %}
  69.                 {% if c == 4 %}
  70.                     {% set visibleElement = 'fourthVisible' %}
  71.                 {% endif %}
  72.                 <!-- START OF 2. DROPDOWN -->
  73.                 <div class="dropdown is-fullwidth dropdown{{ c }}"
  74.                      :class="dropdown{{ c }}Classes"
  75.                      v-show="{{ visibleElement }}"
  76.                      :data-selected-item="items{{ c }}[ selectedItem{{ c }} ].id"
  77.                      :data-selected-img="items{{ c }}[ selectedItem{{ c }} ].images[ selectedImg{{ c }} ].id">
  79.                     <div class="dropdown-trigger" @click="toggleDropdown{{ c }}">
  80.                         <div class="has-text-left dropdown-button cool-shadow"
  81.                              aria-haspopup="true"
  82.                              aria-controls="dropdown-menu{{ c }}">
  84.                             <span>{{ parameterValue.parameter.name|trans }}:</span>
  85.                             <figure class="image">
  86.                                 <img class="select-image-display" v-if="showcheck{{ c }}==1"
  87.                                      :src="items{{ c }}[ selectedItem{{ c }} ].images[ selectedImg{{ c }} ].src"
  88.                                      :alt="items{{ c }}[ selectedItem{{ c }} ].images[ selectedImg{{ c }} ].desc">
  89.                             </figure>
  90.                             <span class="has-text-weight-bold" v-if="showcheck{{ c }}==1"><% items{{ c }}[ selectedItem{{ c }} ].images[ selectedImg{{ c }} ].desc %></span>
  91.                             <span class="has-text-weight-bold" v-if="showcheck{{ c }}==0">{{ 'choose'|trans }}</span>
  92.                             <span v-if="showcheck{{ c }}==1"><% items{{ c }}[ selectedItem{{ c }} ].surcharge %></span>
  93.                             <span class="icon is-small" v-if="showcheck{{ c }}==1">
  94.                                 <i class="fas fa-angle-down" aria-hidden="true"></i>
  95.                             </span>
  97.                         </div>
  98.                     </div>
  99.                     <div class="dropdown-menu"
  100.                          id="dropdown-menu{{ c }}"
  101.                          role="menu"
  102.                          @mouseleave="toggleDropdown{{ c }}">
  103.                         <div class="dropdown-content">
  105.                             <div :class="[ 'dropdown-item', ( selectedItem{{ c }} == itemIndex ) ? 'is-selected' : '' ]"
  106.                                  v-for="( item, itemIndex ) in items{{ c }}">
  108.                                 <span class="has-text-weight-bold"><% item.name %></span>
  109.                                 <span><% item.surcharge %></span>
  110.                                 <div><% item.description %></div>
  111.                                 <div class="divider{{ c }}"></div>
  112.                                 <div class="columns remove-first-element is-mobile is-multiline multiple-images">
  114.                                     <div class="column is-one-fifth"
  115.                                          v-for="( img, imgIndex ) in item.images"
  116.                                          :key="img.name"
  117.                                          @click="selectItem{{ c }}( itemIndex, imgIndex, img, item )">
  118.                                         <figure class="image" v-if="img.src">
  119.                                             <img :src="img.src" class="dropdown-img">
  120.                                             <figcaption class="has-text-centered is-size-7">
  121.                                                 <% img.desc %>
  122.                                             </figcaption>
  123.                                             <span class="dropdown-subitem-selected" v-if="selectedImg{{ c }} == imgIndex && selectedItem{{ c }} == itemIndex && showcheck{{ c }}==1">
  124.                                                 <i class="fa fa-check is-white"></i>
  125.                                             </span>
  126.                                         </figure>
  127.                                     </div>
  129.                                 </div>
  131.                                 <hr class="dropdown-divider">
  132.                             </div>
  134.                         </div>
  135.                     </div>
  137.                 </div>
  138.                 <!-- END OF {{ c }}. DROPDOWN -->
  139.             {% endif %}
  140.         {% endfor %}
  142.         {#
  143.         <!-- START OF 3. DROPDOWN -->
  144.         <div class="dropdown is-fullwidth"
  145.              :class="dropdown3Classes"
  146.              v-show="thirdVisible"
  147.              :data-selected-item="items3[ selectedItem3 ].id"
  148.              :data-selected-img="items3[ selectedItem3 ].images[ selectedImg3 ].id">
  150.             <div class="dropdown-trigger" @click="toggleDropdown3">
  151.                 <div class="has-text-left dropdown-button cool-shadow"
  152.                      aria-haspopup="true"
  153.                      aria-controls="dropdown-menu3">
  155.                     <span>Obszycie:</span>
  156.                     <figure class="image">
  157.                         <img class="select-image-display"
  158.                              :src="items3[ selectedItem3 ].images[ selectedImg3 ].src"
  159.                              :alt="items3[ selectedItem3 ].images[ selectedImg3 ].desc">
  160.                     </figure>
  161.                     <span class="has-text-weight-bold"><% items3[ selectedItem3 ].name %></span>
  162.                     <span><% items3[ selectedItem3 ].surcharge %></span>
  163.                     <span class="icon is-small">
  164.                                                 <i class="fas fa-angle-down" aria-hidden="true"></i>
  165.                                             </span>
  167.                 </div>
  168.             </div>
  169.             <div class="dropdown-menu"
  170.                  id="dropdown-menu3"
  171.                  role="menu"
  172.                  @mouseleave="toggleDropdown3">
  173.                 <div class="dropdown-content">
  175.                     <div :class="[ 'dropdown-item', ( selectedItem3 == itemIndex ) ? 'is-selected' : '' ]"
  176.                          v-for="( item, itemIndex ) in items3">
  178.                         <span class="has-text-weight-bold"><% item.name %></span>
  179.                         <span><% item.surcharge %></span>
  180.                         <div><% item.description %></div>
  181.                         <div class="divider3"></div>
  182.                         <div class="columns is-mobile is-multiline multiple-images">
  184.                             <div class="column is-one-fifth"
  185.                                  v-for="( img, imgIndex ) in item.images"
  186.                                  :key="img.name"
  187.                                  @click="selectItem3( itemIndex, imgIndex )">
  188.                                 <figure class="image">
  189.                                     <img :src="img.src" class="dropdown-img">
  190.                                     <figcaption class="has-text-centered is-size-7">
  191.                                         <% img.desc %>
  192.                                     </figcaption>
  193.                                     <span class="dropdown-subitem-selected" v-if="selectedImg3 == imgIndex && selectedItem3 == itemIndex">
  194.                                                                 <i class="fa fa-check is-white"></i>
  195.                                                             </span>
  196.                                 </figure>
  197.                             </div>
  199.                         </div>
  201.                         <hr class="dropdown-divider">
  202.                     </div>
  204.                 </div>
  205.             </div>
  207.         </div>
  208.         <!-- END OF 3. DROPDOWN -->
  210.         <!-- START OF 4. DROPDOWN -->
  211.         <div class="dropdown is-fullwidth"
  212.              :class="dropdown4Classes"
  213.              v-show="fourthVisible"
  214.              :data-selected-item="items4[ selectedItem4 ].id"
  215.              :data-selected-img="items4[ selectedItem4 ].images[ selectedImg4 ].id">
  217.             <div class="dropdown-trigger" @click="toggleDropdown4">
  218.                 <div class="has-text-left dropdown-button cool-shadow"
  219.                      aria-haspopup="true"
  220.                      aria-controls="dropdown-menu4">
  222.                     <span>Obszycie:</span>
  223.                     <figure class="image">
  224.                         <img class="select-image-display"
  225.                              :src="items4[ selectedItem4 ].images[ selectedImg4 ].src"
  226.                              :alt="items4[ selectedItem4 ].images[ selectedImg4 ].desc">
  227.                     </figure>
  228.                     <span class="has-text-weight-bold"><% items4[ selectedItem4 ].name %></span>
  229.                     <span><% items4[ selectedItem4 ].surcharge %></span>
  230.                     <span class="icon is-small">
  231.                                                 <i class="fas fa-angle-down" aria-hidden="true"></i>
  232.                                             </span>
  234.                 </div>
  235.             </div>
  236.             <div class="dropdown-menu"
  237.                  id="dropdown-menu4"
  238.                  role="menu"
  239.                  @mouseleave="toggleDropdown4">
  240.                 <div class="dropdown-content">
  242.                     <div :class="[ 'dropdown-item', ( selectedItem4 == itemIndex ) ? 'is-selected' : '' ]"
  243.                          v-for="( item, itemIndex ) in items4">
  245.                         <span class="has-text-weight-bold"><% item.name %></span>
  246.                         <span><% item.surcharge %></span>
  247.                         <div><% item.description %></div>
  248.                         <div class="divider4"></div>
  249.                         <div class="columns is-mobile is-multiline multiple-images">
  251.                             <div class="column is-one-fifth"
  252.                                  v-for="( img, imgIndex ) in item.images"
  253.                                  :key="img.name"
  254.                                  @click="selectItem4( itemIndex, imgIndex )">
  255.                                 <figure class="image">
  256.                                     <img :src="img.src" class="dropdown-img">
  257.                                     <figcaption class="has-text-centered is-size-7">
  258.                                         <% img.desc %>
  259.                                     </figcaption>
  260.                                     <span class="dropdown-subitem-selected" v-if="selectedImg4 == imgIndex && selectedItem4 == itemIndex">
  261.                                                                 <i class="fa fa-check is-white"></i>
  262.                                                             </span>
  263.                                 </figure>
  264.                             </div>
  266.                         </div>
  268.                         <hr class="dropdown-divider">
  269.                     </div>
  271.                 </div>
  272.             </div>
  274.         </div>
  275.         <!-- END OF 4. DROPDOWN -->
  276.         #}
  277.     </div>
  278. </product-params>
  283. {#
  284. {% set c = 0 %}
  285. {% for key, parameterValue in parameterValues %}
  286.     {% set c = c + 1 %}
  287.     {% if key == 8 %}
  288.         <product-simple-dropdown :element="{{ c }}" inline-template v-cloak :items="{{ versions }}">
  289.             <div class="dropdown is-fullwidth" :data-selected-item="items[ selectedItem ].id" :class="dropdownClasses" @mouseover="setShowMenu">
  290.                 <div class="dropdown-trigger" @click="toggleDropdown">
  291.                     <div class="has-text-left no-images-inside dropdown-button no-image cool-shadow" aria-haspopup="true" aria-controls="dropdown-menu2">
  292.                         <span>{{ parameterValue.parameter.name }}:</span>
  293.                         <span class="has-text-weight-bold"><% items[ selectedItem ].name %></span>
  294.                         <span class="icon is-small">
  295.                             <i class="fas fa-angle-down" aria-hidden="true"></i>
  296.                         </span>
  297.                     </div>
  298.                 </div>
  299.                 <div v-if="showmenu == 1" class="dropdown-menu" id="dropdown-menu2" role="menu" @mouseleave="toggleDropdown">
  300.                     <div class="dropdown-content">
  302.                         <div :class="[ 'dropdown-item', ( selectedItem == index ) ? 'is-selected' : '' ]"
  303.                              v-for="( item, index ) in items"
  304.                              :key="item.name"
  305.                              @click="selectItem( index, item )">
  307.                             <div class="subtitle is-7 version-select">
  308.                                 <span style="display: none" class="chosen_param_select"><% item.id %></span>
  309.                                 <div class="divider"></div>
  310.                                 <span class="has-text-weight-bold"><% item.name %></span>
  311.                                 <div>
  312.                                     <% item.description %>
  313.                                 </div>
  314.                             </div>
  316.                             <hr class="dropdown-divider">
  317.                         </div>
  319.                     </div>
  320.                 </div>
  321.             </div>
  322.         </product-simple-dropdown>
  323.         <!-- END OF MODEL DROPDOWN -->
  324.     {% else %}
  325.         <div class="parameter_container" data-counter="{{ c }}" id="next_param_{{ c }}" style="{% if c > 1 %}display: none{% endif %}">
  326.             <!-- START OF SEAT TRIM DROPDOWN -->
  327.             <product-complex-dropdown inline-template v-cloak :element="{{ c }}"
  328.           :items="[
  329.                     {
  330.                         id         : 0,
  331.                         name       : '{{ 'choose'|trans }}',
  332.                         surcharge  : '',
  333.                         description: '',
  334.                         images     : [
  335.                             {
  336.                                 id  : 0,
  337.                                 src : '',
  338.                                 desc: '',
  339.                             },
  340.                         ]
  341.                     }
  342.                 ]">
  343.                 <div @mouseover="setShowMenu" class="dropdown is-fullwidth" :class="dropdownClasses" :data-selected-item="items[ selectedItem ].id" :data-selected-img="items[ selectedItem ].images[ selectedImg ].id">
  344.                     <div class="dropdown-trigger" @click="toggleDropdown">
  345.                         <div class="has-text-left dropdown-button cool-shadow" aria-haspopup="true" aria-controls="dropdown-menu2">
  346.                             <span>{{ parameterValue.parameter.name }}: </span>
  347.                             <figure class="image" v-if="showcheck==1">
  348.                                 <img v-if="showcheck==1" {% if parameterValue.parameter.id == 75 %} style="margin-left:62px;" {% endif %} class="toHide_{{ c }} select-image-display" :src="items[ selectedItem ].images[ selectedImg ].src" :alt="items[ selectedItem ].images[ selectedImg ].desc">
  349.                             </figure>
  350.                             <span v-if="showcheck==0" style="margin-left:-50px;" class="has-text-weight-bold">{{ 'choose_version'|trans }}</span>
  351.                             <span v-if="showcheck==1" id="reset-param-value" class="toHide_{{ c }} has-text-weight-bold reset-param-value"><% items[ selectedItem ].images[ selectedImg ].desc %></span>
  353.                             <span v-if="showcheck==1" class="toHide_{{ c }}">&nbsp;</span>
  355.                             <span class="icon is-small">
  356.                                 <i class="fas fa-angle-down" aria-hidden="true"></i>
  357.                             </span>
  358.                         </div>
  359.                     </div>
  360.                     <div v-if="showmenu == 1" class="dropdown-menu" id="dropdown-menu2" role="menu" @mouseleave="toggleDropdown">
  361.                         <div class="dropdown-content">
  363.                             <div :class="[ 'dropdown-item', ( selectedItem == itemIndex ) ? 'is-selected' : '' ]" :showcheck="0"
  364.                                  v-for="( item, itemIndex ) in items">
  366.                                 <span class="has-text-weight-bold"><% item.name %></span>
  367.                                 <span><% item.surcharge %></span>
  368.                                 <div><% item.description %></div>
  369.                                 <div class="divider2"></div>
  370.                                 <div class="columns is-mobile is-multiline multiple-images">
  372.                                     <div class="column is-one-fifth"
  373.                                          v-for="( img, imgIndex ) in item.images"
  374.                                          :key="img.name"
  375.                                          @click="selectItem( itemIndex, img, imgIndex, item )">
  376.                                         <figure class="image">
  377.                                             <img :src="img.src" class="dropdown-img">
  378.                                             <figcaption class="has-text-centered is-size-7">
  379.                                                 <% img.desc %>
  380.                                             </figcaption>
  381.                                             <span class="dropdown-subitem-selected" v-if="selectedImg == imgIndex && selectedItem == itemIndex && showcheck==1">
  382.                                                 <i class="fa fa-check is-white"></i>
  383.                                             </span>
  384.                                         </figure>
  385.                                     </div>
  387.                                 </div>
  389.                                 <hr class="dropdown-divider">
  390.                             </div>
  392.                         </div>
  393.                     </div>
  394.                 </div>
  395.             </product-complex-dropdown>
  396.         </div>
  397.     {% endif %}
  398. {% endfor %}
  399. #}