custom/plugins/HuebertAddOrderAttributes/src/Resources/views/storefront/page/product-detail/buy-widget-form.html.twig line 1

Open in your IDE?
  1. {% sw_extends "@Storefront/storefront/page/product-detail/buy-widget-form.html.twig" %}
  2. {% block page_product_detail_buy_form_inner_csrf %}
  3.     {{ parent() }}
  4.     {% if page.product.available %}
  5.         {% set attributesData = null %}
  6.         {% if page.product.attributesFromProduct %}
  7.             {% set attributesData = page.product.attributesFromProduct %}
  8.         {% elseif page.product.attributesFromCategories %}
  9.             {% set attributesData = page.product.attributesFromCategories %}
  10.         {% elseif page.product.attributesFromProductStream %}
  11.             {% set attributesData = page.product.attributesFromProductStream %}
  12.         {% endif %}
  14.         {% if page.product.dependenciesAttributes %}
  15.                 {% sw_include '@HuebertAccessoriesDirectly/storefront/page/product-detail/attribute-dependecies.html.twig' %}
  16.             {% endif %}
  19.         {% if attributesData %}
  20.             {% block huebert_upload_modal_container %}
  21.                 {% sw_include '@Storefront/storefront/page/product-detail/modal/upload.html.twig' %}
  22.             {% endblock %}
  23.             <div class="row">
  24.                 <div class="col-12 attributes-container" data-frontend-calculations="true" data-snippets='{
  25.                     "totalSnippet": "{{ "huebert.detail.totalCalculated"|trans }}",
  26.                     "currency": "{{ context.currency.symbol }}"
  27.                                    }'>
  28.                     <input type="hidden" class="language-attribute" value="{{ page.header.activeLanguage.name }}">
  29.                     {% for attribute in attributesData %}
  30.                         {% set last = loop.last %}
  32.                         {% set separatedQuantity = page.separatedQuantity %}
  33.                         {% if separatedQuantity %}
  34.                             {% set inputName = "lineItems" %}
  35.                         {% else %}
  36.                             {% set inputName = "attributes" %}
  37.                         {% endif %}
  38.                         <div class="row {% if attribute.translated.infotext and attribute.infotype == "textbelow" %}info-text-bottom-active{% endif %}">
  39.                             <div class="{% if attribute.type is same as('textarea') %}col-md-12 {% else %}col-md-6{% endif%} col-12">
  40.                                 {% if attribute.type is same as('dropdown') %}
  41.                                     {% if page.enabledPrices %}
  42.                                         {# WITH PRICES #}
  43.                                         {% if attribute.translated.optionsNameValue.options %}
  44.                                             <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  45.                                                 {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  46.                                                     <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  47.                                                         <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  48.                                                     </dfn>
  49.                                                 {% endif %}
  50.                                             </label>
  51.                                             <select id="{{ attribute.id }}"
  52.                                                     class="custom-select {% if last %}mb-4{% else %}mb-3{% endif %} dropdownValue onValueChange"
  54.                                                 {% if separatedQuantity %}
  55.                                                     name="lineItems[{{ page.product.id }}][attributes_with_prices][{{ attribute.translated.name }}]"
  56.                                                 {% else %}
  57.                                                     name="attributes[{{ page.product.id }}][{{ attribute.id }}][attributes_with_prices][{{ attribute.translated.name }}]"
  58.                                                 {% endif %}
  60.                                                 {% if attribute.required %}required="required"{% endif %}>
  61.                                                 <option disabled="disabled" selected="selected" value="">
  62.                                                     {{ "huebert.detail.dropdownHint"|trans }}
  63.                                                 </option>
  64.                                                 {% for option in attribute.translated.optionsNameValue.options %}
  65.                                                     <option value="{{ option.name }}--{{ option.value }}">
  66.                                                         {{ option.name }}
  67.                                                     </option>
  68.                                                 {% endfor %}
  69.                                             </select>
  70.                                         {% endif %}
  71.                                     {% else %}
  72.                                         {% if attribute.options %}
  73.                                             <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  74.                                                 {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  75.                                                     <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  76.                                                         <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  77.                                                     </dfn>
  78.                                                 {% endif %}
  79.                                             </label>
  80.                                             <select id="{{ attribute.id }}"
  81.                                                     class="custom-select {% if last %}mb-4{% else %}mb-3{% endif %}"
  82.                                                     name="attributes[{{ page.product.id }}][{{ attribute.id }}]"
  83.                                                     {% if attribute.required %}required="required"{% endif %}>
  84.                                                 <option disabled="disabled" selected="selected" value="">
  85.                                                     {{ "huebert.detail.dropdownHint"|trans }}
  86.                                                 </option>
  87.                                                 {% for option in attribute.options|split(',')  %}
  88.                                                     <option value="{{ option }}">
  89.                                                         {{ option }}
  90.                                                     </option>
  91.                                                 {% endfor %}
  92.                                             </select>
  93.                                         {% endif %}
  94.                                     {% endif %}
  95.                                 {% elseif attribute.type is same as('single-select') %}
  96.                                     {% if page.enabledPrices %}
  97.                                         {# WITH PRICES #}
  98.                                         {% if attribute.translated.optionsNameValue.options %}
  99.                                             <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  100.                                                 {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  101.                                                     <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  102.                                                         <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  103.                                                     </dfn>
  104.                                                 {% endif %}
  105.                                             </label>
  106.                                             {% for option in attribute.translated.optionsNameValue.options  %}
  107.                                                 <div class="custom-control custom-radio {% if loop.last %}mb-3{% else %}mb-1{% endif %}">
  108.                                                     <input type="radio"
  109.                                                            class="custom-control-input singleValue onValueChange"
  110.                                                            id="{{ attribute.id }}_{{ loop.index }}"
  112.                                                         {% if separatedQuantity %}
  113.                                                             name="lineItems[{{ page.product.id }}][attributes_with_prices][{{ attribute.translated.name }}]"
  114.                                                         {% else %}
  115.                                                             name="attributes[{{ page.product.id }}][{{ attribute.id }}][attributes_with_prices][{{ attribute.translated.name }}]"
  116.                                                         {% endif %}
  118.                                                            value="{{ option.name }}--{{ option.value }}"
  119.                                                         {% if attribute.required %}required="required"{% endif %}>
  120.                                                     <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label">
  121.                                                         {{ option.name }}
  122.                                                     </label>
  123.                                                 </div>
  124.                                             {% endfor %}
  125.                                         {% endif %}
  126.                                     {% else %}
  127.                                         {% if attribute.options %}
  128.                                             <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  129.                                                 {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  130.                                                     <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  131.                                                         <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  132.                                                     </dfn>
  133.                                                 {% endif %}
  134.                                             </label>
  135.                                             {% for option in attribute.options|split(',')  %}
  136.                                                 <div class="custom-control custom-radio {% if loop.last %}mb-3{% else %}mb-1{% endif %}">
  137.                                                     <input type="radio"
  138.                                                            class="custom-control-input"
  139.                                                            id="{{ attribute.id }}_{{ loop.index }}"
  140.                                                            name="attributes[{{ page.product.id }}][{{ attribute.id }}]"
  141.                                                            value="{{ option }}"
  142.                                                            {% if attribute.required %}required="required"{% endif %}>
  143.                                                     <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label">
  144.                                                         {{ option }}
  145.                                                     </label>
  146.                                                 </div>
  147.                                             {% endfor %}
  148.                                         {% endif %}
  149.                                     {% endif %}
  150.                                 {% elseif attribute.type is same as('multi-select') %}
  151.                                     {% if page.enabledPrices %}
  152.                                         {# WITH PRICES #}
  153.                                         {% if attribute.translated.optionsNameValue.options %}
  154.                                             <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  155.                                                 {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  156.                                                     <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  157.                                                         <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  158.                                                     </dfn>
  159.                                                 {% endif %}
  160.                                             </label>
  161.                                             {% for option in attribute.translated.optionsNameValue.options  %}
  162.                                                 <div class="custom-control custom-checkbox {% if loop.last %}mb-3{% else %}mb-1{% endif %}">
  163.                                                     <input type="checkbox"
  164.                                                            class="custom-control-input multiValue onValueChange"
  165.                                                            id="{{ attribute.id }}_{{ loop.index }}"
  167.                                                         {% if separatedQuantity %}
  168.                                                             name="lineItems[{{ page.product.id }}][attributes_with_prices][{{ attribute.translated.name }}][{{ option.name }}]"
  169.                                                         {% else %}
  170.                                                             name="attributes[{{ page.product.id }}][{{ attribute.id }}][attributes_with_prices][{{ attribute.translated.name }}][{{ option.name }}]"
  171.                                                         {% endif %}
  173.                                                            value="{{ option.value }}"
  174.                                                         {% if attribute.required %}required="required"{% endif %}>
  175.                                                     <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label">
  176.                                                         {{ option.name }}
  177.                                                     </label>
  178.                                                 </div>
  179.                                             {% endfor %}
  180.                                         {% endif %}
  181.                                     {% else %}
  182.                                         {% if attribute.options %}
  183.                                             <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  184.                                                 {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  185.                                                     <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  186.                                                         <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  187.                                                     </dfn>
  188.                                                 {% endif %}
  189.                                             </label>
  190.                                             {% for option in attribute.options|split(',')  %}
  191.                                                 <div class="custom-control custom-checkbox {% if loop.last %}mb-3{% else %}mb-1{% endif %}">
  192.                                                     <input type="checkbox"
  193.                                                            class="custom-control-input"
  194.                                                            id="{{ attribute.id }}_{{ loop.index }}"
  195.                                                            name="attributes[{{ page.product.id }}][{{ attribute.id }}][]"
  196.                                                            value="{{ option }}"
  197.                                                            {% if attribute.required %}required="required"{% endif %}>
  198.                                                     <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label">
  199.                                                         {{ option }}
  200.                                                     </label>
  201.                                                 </div>
  202.                                             {% endfor %}
  203.                                         {% endif %}
  204.                                     {% endif %}
  205.                                 {% elseif attribute.type is same as('media') %}
  206.                                     <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  207.                                         {% if attribute.infotext and attribute.infotype == "help" %}
  208.                                             <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  209.                                                 <span role="tooltip">{{ attribute.infotext | raw }}</span>
  210.                                             </dfn>
  211.                                         {% endif %}
  212.                                     </label>
  213.                                     <template data-media-upload-plugin data-uplaodUrl="{{ seoUrl('huebert.add.order.attributes.media.upload') }}"></template>
  214.                                     <div style="margin-bottom: 20px;width:300px;">
  215.                                         <input type="file"
  216.                                                id="huebert-add-media-upload_{{ loop.index }}"
  217.                                                class="huebert-add-media-upload_{{ loop.index }} media"
  218.                                                name="huebert-add-media-upload_{{ loop.index }}"
  219.                                                accept="{{ attribute.fileTypes }}"
  220.                                                size = "{{ attribute.mediaMaxSize }}"
  221.                                                {% if attribute.required %}required="required"{% endif %}/>
  222.                                         {% if page.previewImage %}
  223.                                             <img  style="display: none;" width="{{ page.imageWidth }}px" class="uploadedImage" src="#" alt="Uploaded image" />
  224.                                             <img style="display: none; margin:7px" width="50px" id="pdf-png" src="/bundles/huebertaddorderattributes/static/PDF_icon.png" alt="Uploaded pdf" >
  225.                                             <span style="display: none; margin:7px" id="file-png" class="icon icon-xl">{% sw_icon 'file' %}</span>
  226.                                         {% endif %}
  227.                                         <span class="huebert-upload-error_{{ loop.index }}" style="display: none; color:red;">
  228.                                         {{ "huebert.detail.uploadImageErr"|trans }}
  229.                                     </span>
  230.                                         <span class="huebert-upload-error_maxsize" style="display: none; color:#7f3535;">
  231.                                         {{ "huebert.detail.uploadImageErrMaxSize"|trans }} {{ attribute.mediaMaxSize  }} kB
  232.                                         </span>
  234.                                         <span class="huebert-upload-error-type_{{ loop.index }}" style="display: none; color:red;">
  235.                                      {{ "huebert.detail.uploadImageErrorType"|trans }} {{ attribute.fileTypes  }}
  236.                                         </span>
  237.                                     </div>
  238.                                     <input type="hidden" name="_csrf_token_hueber_media_upload"
  239.                                            id="_csrf_token_huebert_media_upload"
  240.                                            value="{{ sw_csrf('huebert.add.order.attributes.media.upload', {"mode":"token"}) }}">
  241.                                     <input type="hidden"
  242.                                            name="attributes[{{ page.product.id }}][{{ attribute.id }}]"
  243.                                            value=""
  244.                                            class="huebert-add-media-upload_mediaId_{{ loop.index }}"
  245.                                            id="{{ attribute.id }}_{{ loop.index }}"/>
  246.                                     <input type="hidden"
  247.                                            name="attributes[{{ page.product.id }}][{{ attribute.id }}][media]"
  248.                                            value=""
  249.                                            class="huebert-add-media-upload_media_id_{{ loop.index }}"
  250.                                            id="{{ attribute.id }}_{{ loop.index }}"/>
  251.                                 {% elseif attribute.type is same as('textarea') %}
  252.                                     <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  253.                                         {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  254.                                             <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  255.                                                 <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  256.                                             </dfn>
  257.                                         {% endif %}
  258.                                     </label>
  259.                                     <textarea class="form-control mb-3 hue-textarea" id="{{ attribute.id }}" name="attributes[{{ page.product.id }}][{{ attribute.id }}]"
  260.                                         rows="5" placeholder="{{ attribute.translated.placeholder }}"
  261.                                         {% if attribute.textareaMaxLength and attribute.textareaMaxLength > 0 %} maxlength="{{ attribute.textareaMaxLength }}" data-maxlength="{{ attribute.textareaMaxLength }}"{% endif %}></textarea>
  262.                                         <p id="message-remaining-letters"></p>
  263.                                 {% else %}
  264.                                     <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}
  265.                                         {% if (attribute.infotext or attribute.translated.infotext)  and attribute.infotype == "help" %}
  266.                                             <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %}
  267.                                                 <span role="tooltip">{{ attribute.translated.infotext| raw }}</span>
  268.                                             </dfn>
  269.                                         {% endif %}
  270.                                     </label>
  271.                                     <input
  272.                                         id="{{ attribute.id }}"
  273.                                         type="{{ attribute.type }}"
  274.                                         {% if attribute.type == "number" %}step=".01"{% endif %}
  275.                                         placeholder="{{ attribute.translated.placeholder }}"
  276.                                         aria-label="Custom input for {{ attribute.translated.name }}"
  277.                                         value=""
  278.                                         name="attributes[{{ page.product.id }}][{{ attribute.id }}]"
  279.                                         class="form-control {% if last %}mb-4{% else %}mb-3{% endif %}  {% if attribute.type == "text" %} text-validation {{ attribute.maxInputCharacters }}{% endif %}"
  280.                                         {% if attribute.validationpattern %}pattern="{{  attribute.validationpattern }}"{% endif %}
  281.                                         {% if attribute.required %}required="required"{% endif %}
  282.                                     >
  283.                                 {% endif %}
  284.                             </div>
  285.                             {% if attribute.translated.infotext and attribute.infotype == "text" %}
  287.                                 <div class="col-6 attribute-infotext">{% sw_icon 'info' style {'size':'xs'} %} {{ attribute.translated.infotext| raw }}</div>
  288.                             {% endif %}
  289.                         </div>
  290.                         {% if attribute.translated.infotext and attribute.infotype == "textbelow" %}
  291.                             <div class="attribute-infotext">{% sw_icon 'info' style {'size':'xs'} %} {{ attribute.translated.infotext | raw }}</div>
  292.                         {% endif %}
  293.                     {% endfor %}
  294.                 </div>
  295.             </div>
  296.         {% endif %}
  297.     {% endif %}
  298. {% endblock %}