src/Trinity/WebshopBundle/Resources/views/front/product/configurable-options.html.twig line 1

Open in your IDE?
  1. {# Make the config options show up as checkmark buttons or dropdown #}
  2. {% set specType = WebshopSettings.getConfigurableSpecFrontendType %}
  4. {% if configSpecs is not empty %}
  5.     {# CONFIGURABLE #}
  6.     {% set simplified_specs = Product.getSimplifiedSpecValues %}
  7.     <form method="post" id="configurable-options">
  8.         <table>
  9.             {% for specid, specData in configSpecs %}
  10.                 {% if specs[specid] is defined and (specData|length > 1) %}
  12.                     {% set valueToId = configSpecsIds[specid] %}
  14.                     {% set simplified_details = [] %}
  15.                     {% if simplified_specs[specid] is defined %}
  16.                         {% set simplified_details = simplified_specs[specid] %}
  17.                     {% endif %}
  19.                     {% set option_index = loop.index %}
  21.                     <tr class="config-spec-row {{option_index == 1 ? 'active-step' : ''}}" data-specid="{{specid}}" id="config-spec-row-{{specid}}">
  22.                         <td>
  23.                             <div class="table-wrapper">
  24.                                 <table>
  25.                                     <tr>
  26.                                         <td>
  27.                                             {{specs[specid].label}}
  28.                                             {# [{{specid}}] #}
  29.                                         </td>
  30.                                         <td>
  31.                                             {% if specs[specid].type == 'color' %}
  32.                                                 {% if specType == 1 %}
  33.                                                     <div class="type-colors">
  34.                                                         <select class="configurable-option form-select" {{option_index > 1 ? 'disabled' : ''}} name="spec[{{specid}}]" data-specid="{{specid}}" onchange="changeConfigurable(this)">
  35.                                                             <option disabled selected value="">- {{ 'Selecteer een optie' | trans({}, 'webshop', app.request.locale) }} -</option>}
  36.                                                             {% for v,products in specData %}
  37.                                                                 {% set unavailable = (option_index > 1 or (specs_disabled[specid] is defined and v in specs_disabled[specid])) %}
  38.                                                                 {% set enabled = (v in simplified_details) %}
  39.                                                                 <option {{unavailable ? 'disabled' : ''}} data-svid="{{valueToId[v]}}" data-id="{{specid}}_{{v}}" {{enabled ? 'selected' : ''}} data-products="{{products[0]}}" value="{{v}}">
  40.                                                                     {{v}}
  41.                                                                 </option>
  42.                                                             {% endfor %}
  43.                                                         </select>
  44.                                                     </div>
  45.                                                 {% else %}
  46.                                                     <div class="type-colors">
  47.                                                         {% for v, products in specData %}
  48.                                                             {% set unavailable = ((option_index > 1) or (specs_disabled[specid] is defined and v in specs_disabled[specid])) %}
  49.                                                             {% set enabled = (v in simplified_details) %}
  50.                                                             {% if enabled or option_index == 1 %}
  51.                                                                 {% set unavailable = false %}
  52.                                                             {% endif %}
  53.                                                             <label class="{{enabled ? 'active' : ''}} {{unavailable ? 'not-available' : ''}}" data-id="{{specid}}_{{v}}" title="{{v}}">
  54.                                                                 <input data-svid="{{valueToId[v]}}" name="spec[{{specid}}]" style="display:none;" onclick="changeConfigurable(this)" {{enabled ? 'checked' : ''}} type="radio" data-products="{{products[0]}}" value="{{v}}"  data-bs-toggle="tooltip" title="{{v}}"/>
  55.                                                                 <span class="color-dot {{enabled ? 'active' : ''}}" style="{% if v == null %}background-image:url(/bundles/trinitywebshop/img/multi-color.png);background-position:center;background-size:cover;{% else %}background:{{configHex[v]}};{% endif %}"></span>
  56.                                                                 <span class="color-label">{{v}}</span>
  57.                                                             </label>
  58.                                                         {% endfor %}
  59.                                                     </div>
  60.                                                 {% endif %}
  61.                                             {% elseif specs[specid].code == 'size' %}
  62.                                                 {% if specType == 1 %}
  63.                                                     <select class="configurable-option form-select" {{option_index > 1 ? 'disabled' : ''}} name="spec[{{specid}}]" data-specid="{{specid}}" onchange="changeConfigurable(this)">
  64.                                                         <option disabled selected value="">- {{ 'Selecteer een optie' | trans({}, 'webshop', app.request.locale) }} -</option>}
  65.                                                         {% for v,products in specData %}
  66.                                                             {% set unavailable = (option_index > 1 or (specs_disabled[specid] is defined and v in specs_disabled[specid])) %}
  67.                                                             {% set enabled = (v in simplified_details) %}
  68.                                                             <option {{unavailable ? 'disabled' : ''}} data-svid="{{valueToId[v]}}" data-id="{{specid}}_{{v}}" {{enabled ? 'selected' : ''}} data-products="{{products[0]}}" value="{{v}}">
  69.                                                                 {{v}}
  70.                                                             </option>
  71.                                                         {% endfor %}
  72.                                                     </select>
  73.                                                 {% else %}
  74.                                                     {% for v, products in specData %}
  75.                                                         {% set unavailable = (option_index > 1 or (specs_disabled[specid] is defined and v in specs_disabled[specid])) %}
  76.                                                         {% set enabled = (v in simplified_details) %}
  77.                                                         {% if enabled %}
  78.                                                             {% set unavailable = false %}
  79.                                                         {% endif %}
  80.                                                         <label data-id="{{specid}}_{{v}}" class="square-select {{enabled ? 'active' : ''}} {{unavailable ? 'not-available' : ''}}">
  81.                                                             <input name="spec[{{specid}}]" style="display:none;" data-svid="{{valueToId[v]}}" {{enabled ? 'checked' : ''}} onclick="if(!$(this).closest('label').hasClass('disabled')){$(this).closest('td').find('.square-select').removeClass('active');$(this).parent().addClass('active');changeConfigurable(this)}" type="radio" data-products="{{products[0]}}" value="{{v}}"/>
  82.                                                             {{v}}
  83.                                                         </label>
  84.                                                     {% endfor %}
  85.                                                 {% endif %}
  86.                                             {% else %}
  87.                                                 {% if specData|length > 1 %}
  88.                                                     {% if specType == 1 %}
  89.                                                         <select class="configurable-option form-select" {{option_index > 1 ? 'disabled' : ''}} name="spec[{{specid}}]" data-specid="{{specid}}" onchange="changeConfigurable(this)">
  90.                                                             <option disabled selected value="">- {{ 'Selecteer een optie' | trans({}, 'webshop', app.request.locale) }} -</option>}
  91.                                                             {% for v,products in specData %}
  92.                                                                 {% set unavailable = (option_index > 1 or (specs_disabled[specid] is defined and v in specs_disabled[specid])) %}
  93.                                                                 {% set enabled = (v in simplified_details) %}
  94.                                                                 <option {{unavailable ? 'disabled' : ''}} data-svid="{{valueToId[v]}}" data-id="{{specid}}_{{v}}" {{enabled ? 'selected' : ''}} data-products="{{products[0]}}" value="{{v}}">
  95.                                                                     {{v}}
  96.                                                                 </option>
  97.                                                             {% endfor %}
  98.                                                         </select>
  99.                                                     {% else %}
  100.                                                         {% for v, products in specData %}
  101.                                                             {% set unavailable = (option_index > 1) %}
  102.                                                             {% set enabled = (v in simplified_details) %}
  103.                                                             {% if enabled %}
  104.                                                                 {% set unavailable = false %}
  105.                                                             {% endif %}
  106.                                                             <label data-id="{{specid}}_{{v}}" class="square-select {{enabled ? 'active' : ''}} {{unavailable ? 'not-available' : ''}}">
  107.                                                                 <input name="spec[{{specid}}]" style="display:none;" data-svid="{{valueToId[v]}}" {{enabled ? 'checked' : ''}} onclick="if(!$(this).closest('label').hasClass('disabled')){$(this).closest('td').find('.square-select').removeClass('active');$(this).parent().addClass('active');changeConfigurable(this)}" type="radio" data-products="{{products[0]}}" value="{{v}}"/>
  108.                                                                 {{v}}
  109.                                                             </label>
  110.                                                         {% endfor %}
  111.                                                     {% endif %}
  112.                                                 {% else %}
  113.                                                     {#{% for v, products in specData %}
  114.                                                         <span>{{v}}</span>
  115.                                                     {% endfor %}#}
  116.                                                 {% endif %}
  117.                                             {% endif %}
  118.                                         </td>
  119.                                     </tr>
  120.                                 </table>
  121.                             </div>
  122.                         </td>
  123.                     </tr>
  124.                 {% endif %}
  125.             {% endfor %}
  126.         </table>
  127.     </form>
  128. {% endif %}