{% block page_product_detail_buy_form_inner_csrf %} <div data-frontend-calculations = "true" > {% if page.product.available %} {% set dependencies = null %} {% if page.product.categoryAttributes|length>0 %} {% set dependencies = page.product.categoryAttributes %} {% elseif page.product.dependenciesAttributes|length>0 %} {% set dependencies = page.product.dependenciesAttributes %} {% elseif page.product.productStreamDependencies|length > 0 %} {% set dependencies = page.product.productStreamDependencies %} {% endif %} {% if dependencies %} {% for dependency in dependencies %} {% if dependency.active %} <div class="custom-control custom-checkbox {% if loop.last %}mb-3{% else %}mb-1{% endif %}"> <input class="huebert-depedenency-chekbox" type="checkbox" id="huebert-depedenency-chekbox-{{ loop.index }}"> <label for="huebert-depedenency-chekbox-{{ loop.index }}">{{ dependency.name }}</label> {%if dependency.price %} <label class="depencency-price" for="huebert-depedenency-chekbox-{{ loop.index }}"> : <strong> {{ dependency.price | currency }} </strong></label> {%endif%} <input type="hidden" class="dependency-price" value="{{dependency.name}}--{{dependency.price}}"> <input type="hidden" class="dependency-price-send" name="dependencies[{{ page.product.id }}][{{ dependency.id }}]" value=""> </div> <div class="huebert-depedenency" style="display: none"> {% set attributesData = null %} {% if dependency.extensions.dependencies %} {% set attributesData = dependency.extensions.dependencies %}{# {{ dump(attributesData) }}#} {% endif %} {% if attributesData %} {% block huebert_upload_modal_container %} {% sw_include '@Storefront/storefront/page/product-detail/modal/upload.html.twig' %} {% endblock %} <div class="row"> <div class="col-12 attributes-container" data-frontend-calculations="true" data-snippets='{ "totalSnippet": "{{ "huebert.detail.totalCalculated"|trans }}", "currency": "{{ context.currency.symbol }}" }'> {% for attribute in attributesData %} {% set last = loop.last %} {% set separatedQuantity = page.separatedQuantity %} {% if separatedQuantity %} {% set inputName = "lineItems" %} {% else %} {% set inputName = "attributes" %} {% endif %} <div class="row {% if attribute.translated.infotext and attribute.infotype == "textbelow" %}info-text-bottom-active{% endif %}"> <div class="col-md-6 col-12"> {% if attribute.type is same as('dropdown') %} {% if page.enabledPrices %} {# WITH PRICES #} {% if attribute.translated.optionsNameValue.options %} <label class="form-label" for="{{ attribute.id }}"> {{ attribute.translated.name }} {% if attribute.translated.infotext and attribute.infotype == "help" %} <dfn class="hue-tooltip"> {% sw_icon 'help' style {'size':'xs'} %} <span role="tooltip">{{ attribute.translated.infotext| raw }}</span> </dfn> {% endif %} </label> <select id="{{ attribute.id }}" class="custom-select {% if last %}mb-4{% else %}mb-3{% endif %} dropdownValue onValueChange" {% if separatedQuantity %} name="lineItems[{{ page.product.id }}][attributes_with_prices][{{ attribute.translated.name }}]" {% else %} name="attributes[{{ page.product.id }}][{{ attribute.id }}][attributes_with_prices][{{ attribute.translated.name }}]" {% endif %} {% if attribute.required %}required="required"{% endif %}> <option disabled="disabled" selected="selected" value=""> {{ "huebert.detail.dropdownHint"|trans }} </option> {% for option in attribute.translated.optionsNameValue.options %} <option value="{{ option.name }}--{{ option.value }}"> {{ option.name }} </option> {% endfor %} </select> {% endif %} {% else %} {% if attribute.options %} <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}</label> <select id="{{ attribute.id }}" class="custom-select {% if last %}mb-4{% else %}mb-3{% endif %}" name="attributes[{{ page.product.id }}][{{ attribute.id }}]" {% if attribute.required %}required="required"{% endif %}> <option disabled="disabled" selected="selected" value=""> {{ "huebert.detail.dropdownHint"|trans }} </option> {% for option in attribute.options|split(',') %} <option value="{{ option }}"> {{ option }} </option> {% endfor %} </select> {% endif %} {% endif %} {% elseif attribute.type is same as('single-select') %} {% if page.enabledPrices %} {# WITH PRICES #} {% if attribute.translated.optionsNameValue.options %} <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}</label> {% for option in attribute.translated.optionsNameValue.options %} <div class="custom-control custom-radio {% if loop.last %}mb-3{% else %}mb-1{% endif %}"> <input type="radio" class="custom-control-input singleValue onValueChange" id="{{ attribute.id }}_{{ loop.index }}" {% if separatedQuantity %} name="lineItems[{{ page.product.id }}][attributes_with_prices][{{ attribute.translated.name }}]" {% else %} name="attributes[{{ page.product.id }}][{{ attribute.id }}][attributes_with_prices][{{ attribute.translated.name }}]" {% endif %} value="{{ option.name }}--{{ option.value }}" {% if attribute.required %}required="required"{% endif %}> <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label"> {{ option.name }} </label> </div> {% endfor %} {% endif %} {% else %} {% if attribute.options %} <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}</label> {% for option in attribute.options|split(',') %} <div class="custom-control custom-radio {% if loop.last %}mb-3{% else %}mb-1{% endif %}"> <input type="radio" class="custom-control-input" id="{{ attribute.id }}_{{ loop.index }}" name="attributes[{{ page.product.id }}][{{ attribute.id }}]" value="{{ option }}" {% if attribute.required %}required="required"{% endif %}> <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label"> {{ option }} </label> </div> {% endfor %} {% endif %} {% endif %} {% elseif attribute.type is same as('multi-select') %} {% if page.enabledPrices %} {# WITH PRICES #} {% if attribute.translated.optionsNameValue.options %} <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}</label> {% for option in attribute.translated.optionsNameValue.options %} <div class="custom-control custom-checkbox {% if loop.last %}mb-3{% else %}mb-1{% endif %}"> <input type="checkbox" class="custom-control-input multiValue onValueChange" id="{{ attribute.id }}_{{ loop.index }}" {% if separatedQuantity %} name="lineItems[{{ page.product.id }}][attributes_with_prices][{{ attribute.translated.name }}][{{ option.name }}]" {% else %} name="attributes[{{ page.product.id }}][{{ attribute.id }}][attributes_with_prices][{{ attribute.translated.name }}][{{ option.name }}]" {% endif %} value="{{ option.value }}" {% if attribute.required %}required="required"{% endif %}> <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label"> {{ option.name }} </label> </div> {% endfor %} {% endif %} {% else %} {% if attribute.options %} <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}</label> {% for option in attribute.options|split(',') %} <div class="custom-control custom-checkbox {% if loop.last %}mb-3{% else %}mb-1{% endif %}"> <input type="checkbox" class="custom-control-input" id="{{ attribute.id }}_{{ loop.index }}" name="attributes[{{ page.product.id }}][{{ attribute.id }}][]" value="{{ option }}" {% if attribute.required %}required="required"{% endif %}> <label for="{{ attribute.id }}_{{ loop.index }}" class="custom-control-label"> {{ option }} </label> </div> {% endfor %} {% endif %} {% endif %} {% elseif attribute.type is same as('media') %} <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}</label> <template data-media-upload-plugin data-uplaodUrl="{{ seoUrl('huebert.add.order.attributes.media.upload') }}"></template> <div style="margin-bottom: 20px;width:300px;"> <input type="file" id="huebert-add-media-upload_{{ loop.index }}" class="huebert-add-media-upload_{{ loop.index }} media" name="huebert-add-media-upload_{{ loop.index }}" accept="{{ attribute.fileTypes }}" size = "{{ attribute.mediaMaxSize }}" {% if attribute.required %}required="required"{% endif %}/> {% if page.previewImage %} <img style="display: none;" width="{{ page.imageWidth }}px" class="uploadedImage" src="#" alt="Uploaded image" /> <img style="display: none; margin:7px" width="50px" id="pdf-png" src="/bundles/huebertaddorderattributes/static/PDF_icon.png" alt="Uploaded pdf" > <span style="display: none; margin:7px" id="file-png" class="icon icon-xl">{% sw_icon 'file' %}</span> {% endif %} <span class="huebert-upload-error_{{ loop.index }}" style="display: none; color:red;"> {{ "huebert.detail.uploadImageErr"|trans }} </span> <span class="huebert-upload-error_maxsize" style="display: none; color:#7f3535;"> {{ "huebert.detail.uploadImageErrMaxSize"|trans }} {{ attribute.mediaMaxSize }} kB </span> <span class="huebert-upload-error-type_{{ loop.index }}" style="display: none; color:red;"> {{ "huebert.detail.uploadImageErrorType"|trans }} {{ attribute.fileTypes }} </span> </div> <input type="hidden" name="_csrf_token_hueber_media_upload" id="_csrf_token_huebert_media_upload" value="{{ sw_csrf('huebert.add.order.attributes.media.upload', {"mode":"token"}) }}"> <input type="hidden" name="attributes[{{ page.product.id }}][{{ attribute.id }}]" value="" class="huebert-add-media-upload_mediaId_{{ loop.index }}" id="{{ attribute.id }}_{{ loop.index }}"/> <input type="hidden" name="attributes[{{ page.product.id }}][{{ attribute.id }}][media]" value="" class="huebert-add-media-upload_media_id_{{ loop.index }}" id="{{ attribute.id }}_{{ loop.index }}"/> {% else %} <label class="form-label" for="{{ attribute.id }}">{{ attribute.translated.name }}</label> <input id="{{ attribute.id }}" type="{{ attribute.type }}" {% if attribute.type == "number" %}step=".01"{% endif %} placeholder="{{ attribute.translated.placeholder }}" aria-label="Custom input for {{ attribute.translated.name }}" value="" name="attributes[{{ page.product.id }}][{{ attribute.id }}]" class="form-control {% if last %}mb-4{% else %}mb-3{% endif %} {% if attribute.type == "text" %} text-validation {{ attribute.maxInputCharacters }}{% endif %}" {% if attribute.validationpattern %}pattern="{{ attribute.validationpattern }}"{% endif %} {% if attribute.required %}required="required"{% endif %} > {% endif %} </div> {% if attribute.translated.infotext and attribute.infotype == "text" %} <div class="col-6 attribute-infotext">{% sw_icon 'info' style {'size':'xs'} %} {{ attribute.translated.infotext | raw }}</div> {% endif %} </div> {% if attribute.translated.infotext and attribute.infotype == "textbelow" %} <div class="attribute-infotext">{% sw_icon 'info' style {'size':'xs'} %} {{ attribute.translated.infotext | raw }}</div> {% endif %} {% endfor %} </div> </div> {% endif %} </div> {% endif %} {% endfor %} {% endif %} {% endif %} </div>{% endblock %}