templates/default/components/organisms/variant-selection/variant-selection.html.twig line 1

Open in your IDE?
  2. {% set variantNotAvailable = variant.salesStatus is defined and
  3. variant.salesStatus == constant('App\\Constant\\SalesStatus::SALE_STATUS_TEMPORARY_NOT_AVAILABLE') %}
  5. {% if product.variants | length > 1 or variant.variantSelections|default([])|length > 1 %}
  6. <div class="variant-selection" >
  7. {% block buyBoxVariants %}
  8. {% if isPunchout %}
  9. {% if product.variants | length > 1 %}
  10. {% set currentVariantSku = variant.sku %}
  12. {% embed 'components/atoms/select/select.html.twig'
  13. with {
  14. 'class': 'js-auto-route js-page-loader-change',
  15. 'id': 'punchoutVariantSelection',
  16. 'name': 'punchoutVariantSelection',
  17. 'options': product.variants,
  18. } %}
  19. {% block options %}
  20. {% for variant in product.variants %}
  22. {% if variant.salesStatus == "saleable" and variant.attributes.price is not empty and variant.attributes.price != 0 %}
  23. <option
  24. value="{{ variant.links.webshop }}"
  25. {% if variant.sku == currentVariantSku %}
  26. selected="selected"
  27. {% endif %}
  28. >
  29. {{ variant.variantSelections| first }}
  30. </option>
  31. {% endif %}
  32. {% endfor %}
  33. {% endblock %}
  34. {% endembed %}
  35. {% endif %}
  36. {% else %}
  37. {% if variant.variantSelections|default %}
  38. {% for variantSelection in variant.variantSelections %}
  39. {% if variantSelection.type is defined and variantSelection.type == 'tile' %}
  40. <div class="variant-selection__color">
  41. <p class="variant-selection__color-text">
  42. {{ variantSelection.label|default('product_select_color'|trans) }}: {{ (variantSelection.options|filter(o => o.selected == true)|first).name }}
  43. </p>
  44. <div class="variant-selection__variant variant-selection__variant--color">
  45. {% set sortedOptions = variantSelection.options|sort((a, b) => a.name <=> b.name) %}
  46. {% for key, option in sortedOptions %}
  47. {% include 'components/atoms/color-input/color-input.html.twig' with {
  48. 'selected': option.selected,
  49. 'name': option.name,
  50. 'href': option.value,
  51. 'hex': ('variant_selection_color_' ~ option.key)|trans
  52. } %}
  53. {% endfor %}
  54. </div>
  55. </div>
  56. {% endif %}
  58. {% if variantSelection.type is defined and variantSelection.type == 'select' %}
  59. <div class="variant-selection__variant">
  60. <div class="form-row form-row--floating">
  61. {% embed 'components/atoms/select/select.html.twig'
  62. with {
  63. 'class': 'js-auto-route js-page-loader-change',
  64. 'id': variantSelection.name|default,
  65. 'name': variantSelection.name|default,
  66. 'options': variantSelection.options,
  67. } %}
  68. {% block options %}
  69. {% for option in variantSelection.options %}
  70. <option
  71. value="{{ option.value }}"
  72. {% if option.selected %}selected{% endif %}
  73. {% if not option.saleable or not option.sameAttributeSet %}
  74. class="gray"
  75. {% if not option.saleable %}
  76. title="{{ 'buy_box_variant_not_available'|trans }}"
  77. {% else %}
  78. title="{{ 'buy_box_variant_not_same_attribute_set'|trans }}"
  79. {% endif %}
  80. {% endif %}
  81. >
  82. {{ option.name }}
  83. </option>
  84. {% endfor %}
  85. {% endblock %}
  86. {% endembed %}
  87. <label for="{{ variantSelection.name }}" class="form-row__label" data-content="{{ variantSelection.label|default|prepare_for_css_content_attribute }}">
  88. <span class="form-row__hidden-visually">{{ variantSelection.label|default }}</span>
  89. </label>
  90. </div>
  92. </div>
  93. {% endif %}
  94. {% endfor %}
  95. {% endif %}
  96. {% endif %}
  97. {% endblock %}
  99. {% block buyBoxOptions %}
  100. {% if product.productOptions|default %}
  101. {% include 'components/atoms/button/button.html.twig' with {
  102. 'type': 'button',
  103. 'class': 'button--select js-offside',
  104. 'content': 'buy_box_select_option'|trans,
  105. 'attributes': {
  106. 'data-offside-component': 'productOptions',
  107. 'data-offside-sliding-side': 'right'
  108. }
  109. } %}
  110. {% embed 'components/organisms/offside/offside.html.twig' with {
  111. 'id': 'productOptions',
  112. 'header': 'buy_box_select_option'|trans
  113. } %}
  114. {% block content %}
  115. {% block offcanvasContent %}
  116. {% for productOption in product.productOptions %}
  117. <p>{{ productOption.name }}</p>
  118. {% endfor %}
  119. {% endblock %}
  120. {% endblock %}
  121. {% endembed %}
  122. {% endif %}
  123. {% endblock %}
  124. </div>
  125. {% endif %}