Current Path : /home/sudancam/.trash/catalog.1/view/template/product/ |
Current File : /home/sudancam/.trash/catalog.1/view/template/product/product.twig |
{{ header }} <div id="product-info" class="container"> <ul class="breadcrumb"> {% for breadcrumb in breadcrumbs %} <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li> {% endfor %} </ul> <div class="row">{{ column_left }} <div id="content" class="col"> {{ content_top }} <div class="row mb-3"> <div class="col-sm"> {% if thumb or images %} <div class="image magnific-popup"> {% if thumb %} <a href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" class="img-thumbnail mb-3"/></a> {% endif %} {% if images %} <div> {% for image in images %} <a href="{{ image.popup }}" title="{{ heading_title }}"><img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" class="img-thumbnail"/></a> {% endfor %} </div> {% endif %} </div> {% endif %} </div> <div class="col-sm"> <h1>{{ heading_title }}</h1> <ul class="list-unstyled"> {% if manufacturer %} <li>{{ text_manufacturer }} <a href="{{ manufacturers }}">{{ manufacturer }}</a></li> {% endif %} <li>{{ text_model }} {{ model }}</li> {% if reward %} <li>{{ text_reward }} {{ reward }}</li> {% endif %} <li>{{ text_stock }} {{ stock }}</li> </ul> {% if price %} <ul class="list-unstyled"> {% if not special %} <li> <h2><span class="price-new">{{ price }}</span></h2> </li> {% else %} <li><span class="price-old">{{ price }}</span></li> <li><h2><span class="price-new">{{ special }}</span></h2></li> {% endif %} {% if tax %} <li>{{ text_tax }} {{ tax }}</li> {% endif %} {% if points %} <li>{{ text_points }} {{ points }}</li> {% endif %} {% if discounts %} <li> <hr> </li> {% for discount in discounts %} <li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li> {% endfor %} {% endif %} </ul> {% endif %} <form method="post" data-oc-toggle="ajax"> <div class="btn-group"> <button type="submit" formaction="{{ add_to_wishlist }}" data-bs-toggle="tooltip" class="btn btn-light" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product_id }}');"><i class="fas fa-heart"></i></button> <button type="submit" formaction="{{ add_to_compare }}" data-bs-toggle="tooltip" class="btn btn-light" title="{{ button_compare }}" onclick="compare.add('{{ product_id }}');"><i class="fas fa-exchange-alt"></i></button> </div> <input type="hidden" name="product_id" value="{{ product_id }}"/> </form> <br/> <div id="product"> <form id="form-product"> {% if options %} <hr> <h3>{{ text_option }}</h3> <div> {% for option in options %} {% if option.type == 'select' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <select name="option[{{ option.product_option_id }}]" id="input-option-{{ option.product_option_id }}" class="form-select"> <option value="">{{ text_select }}</option> {% for option_value in option.product_option_value %} <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }} {% if option_value.price %} ({{ option_value.price_prefix }}{{ option_value.price }}) {% endif %}</option> {% endfor %} </select> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'radio' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label class="form-label">{{ option.name }}</label> <div id="input-option-{{ option.product_option_id }}"> {% for option_value in option.product_option_value %} <div class="form-check"> <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">{% if option_value.image %}<img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %}{{ option_value.price_prefix }} {{ option_value.price }}{% endif %}" class="img-thumbnail"/>{% endif %} {{ option_value.name }} {% if option_value.price %} ({{ option_value.price_prefix }}{{ option_value.price }}) {% endif %} </label> </div> {% endfor %} </div> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'checkbox' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label class="form-label">{{ option.name }}</label> <div id="input-option-{{ option.product_option_id }}"> {% for option_value in option.product_option_value %} <div class="form-check"> <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label"> {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %}{{ option_value.price_prefix }} {{ option_value.price }}{% endif %}" class="img-thumbnail"/>{% endif %} {{ option_value.name }} {% if option_value.price %} ({{ option_value.price_prefix }}{{ option_value.price }}) {% endif %}</label> </div> {% endfor %} </div> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'text' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control"/> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'textarea' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'file' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label for="button-upload-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <div> <button type="button" id="button-upload-{{ option.product_option_id }}" data-oc-toggle="upload" data-oc-size-max="{{ config_file_max_size }}" data-oc-size-error="{{ error_upload_size }}" data-oc-url="{{ upload }}" data-oc-target="#input-option-{{ option.product_option_id }}" class="btn btn-light btn-block"><i class="fas fa-upload"></i> {{ button_upload }}</button> <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option-{{ option.product_option_id }}"/> </div> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'date' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <div class="input-group"> <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control date"/> <div class="input-group-text"><i class="fas fa-calendar"></i></div> </div> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'datetime' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <div class="input-group"> <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control datetime"/> <div class="input-group-text"><i class="fas fa-calendar"></i></div> </div> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% if option.type == 'time' %} <div class="mb-3{% if option.required %} required{% endif %}"> <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <div class="input-group"> <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control time"/> <div class="input-group-text"><i class="fas fa-calendar"></i></div> </div> <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div> </div> {% endif %} {% endfor %} {% endif %} {% if subscription_plans %} <hr/> <h3>{{ text_subscription }}</h3> <div class="mb-3 required"> <select name="subscription_plan_id" id="input-subscription" class="form-select"> <option value="">{{ text_select }}</option> {% for subscription_plan in subscription_plans %} <option value="{{ subscription_plan.subscription_plan_id }}">{{ subscription_plan.name }}</option> {% endfor %} </select> {% for subscription_plan in subscription_plans %} <div id="subscription-description-{{ subscription_plan.subscription_plan_id }}" class="form-text subscription d-none">{{ subscription_plan.description }}</div> {% endfor %} <div id="error-subscription" class="invalid-feedback"></div> </div> {% endif %} <div class="mb-3"> <label for="input-quantity" class="form-label">{{ entry_qty }}</label> <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control"/> <input type="hidden" name="product_id" value="{{ product_id }}" id="input-product-id"/> <div id="error-quantity" class="form-text"></div> <br/> <button type="submit" id="button-cart" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button> </div> {% if minimum > 1 %} <div class="alert alert-info"><i class="fas fa-info-circle"></i> {{ text_minimum }}</div> {% endif %} </div> {% if review_status %} <div class="rating"> <p>{% for i in 1..5 %}{% if rating < i %}<span class="fas fa-stack"><i class="far fa-star fa-stack-1x"></i></span>{% else %}<span class="fas fa-stack"><i class="fas fa-star fa-stack-1x"></i><i class="far fa-star fa-stack-1x"></i></span>{% endif %}{% endfor %} <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ reviews }}</a> / <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ text_write }}</a></p> </div> {% endif %} </form> </div> </div> <ul class="nav nav-tabs"> <li class="nav-item"><a href="#tab-description" id="description-tab" class="nav-link active" data-bs-toggle="tab">{{ tab_description }}</a></li> {% if attribute_groups %} <li class="nav-item"><a href="#tab-specification" id="specification-tab" class="nav-link" data-bs-toggle="tab">{{ tab_attribute }}</a></li> {% endif %} {% if review_status %} <li class="nav-item"><a href="#tab-review" id="review-tab" class="nav-link" data-bs-toggle="tab">{{ tab_review }}</a></li> {% endif %} </ul> <div class="tab-content"> <div id="tab-description" class="tab-pane fade show active mb-4" role="tabpanel" aria-labelledby="description-tab">{{ description }}</div> {% if attribute_groups %} <div id="tab-specification" class="tab-pane fade" role="tabpanel" aria-labelledby="specification-tab"> <div class="table-responsive"> <table class="table table-bordered"> {% for attribute_group in attribute_groups %} <thead> <tr> <td colspan="2"><strong>{{ attribute_group.name }}</strong></td> </tr> </thead> <tbody> {% for attribute in attribute_group.attribute %} <tr> <td>{{ attribute.name }}</td> <td>{{ attribute.text }}</td> </tr> {% endfor %} </tbody> {% endfor %} </table> </div> </div> {% endif %} {% if review_status %} <div id="tab-review" class="tab-pane fade"> <form id="form-review"> <div id="review"></div> <h2>{{ text_write }}</h2> {% if review_guest %} <div class="mb-3 required"> <label for="input-name" class="form-label">{{ entry_name }}</label> <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control"/> <div id="error-name" class="invalid-feedback"></div> </div> <div class="mb-3 required"> <label for="input-review" class="form-label">{{ entry_review }}</label> <textarea name="text" rows="5" id="input-text" class="form-control"></textarea> <div id="error-text" class="invalid-feedback"></div> <div class="invalid-feedback">{{ text_note }}</div> </div> <div class="row mb-3 required"> <label class="form-label">{{ entry_rating }}</label> <div id="input-rating"> {{ entry_bad }} <input type="radio" name="rating" value="1" class="form-check-input"/> <input type="radio" name="rating" value="2" class="form-check-input"/> <input type="radio" name="rating" value="3" class="form-check-input"/> <input type="radio" name="rating" value="4" class="form-check-input"/> <input type="radio" name="rating" value="5" class="form-check-input"/> {{ entry_good }} </div> <div id="error-rating" class="invalid-feedback"></div> </div> {{ captcha }} <div class="d-inline-block pt-2 pd-2 w-100"> <div class="float-end"> <button type="button" id="button-review" class="btn btn-primary">{{ button_continue }}</button> </div> </div> {% else %} {{ text_login }} {% endif %} </form> </div> {% endif %}</div> </div> {% if products %} <h3>{{ text_related }}</h3> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4"> {% for product in products %} <div class="col">{{ product }}</div> {% endfor %} </div> {% endif %} {% if tags %} <p>{{ text_tags }} {% for i in 0..tags|length %} {% if i < (tags|length - 1) %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a>, {% else %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a> {% endif %} {% endfor %} </p> {% endif %} {{ content_bottom }} </div> {{ column_right }} </div> </div> <script type="text/javascript"><!-- $('#input-subscription').on('change', function (e) { var element = this; $('.subscription').addClass('d-none'); $('#subscription-description-' + $(element).val()).removeClass('d-none'); }); $('#form-product').on('submit', function (e) { e.preventDefault(); $.ajax({ url: 'index.php?route=checkout/cart|add&language={{ language }}', type: 'post', data: $('#form-product').serialize(), dataType: 'json', contentType: 'application/x-www-form-urlencoded', cache: false, processData: false, beforeSend: function () { $('#button-cart').prop('disabled', true).addClass('loading'); }, complete: function () { $('#button-cart').prop('disabled', false).removeClass('loading'); }, success: function (json) { $('#form-product').find('.is-invalid').removeClass('is-invalid'); $('#form-product').find('.invalid-feedback').removeClass('d-block'); if (json['error']) { for (key in json['error']) { $('#input-' + key.replaceAll('_', '-')).addClass('is-invalid').find('.form-control, .form-select, .form-check-input, .form-check-label').addClass('is-invalid'); $('#error-' + key.replaceAll('_', '-')).html(json['error'][key]).addClass('d-block'); } } if (json['success']) { $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>'); $('#header-cart').load('index.php?route=common/cart|info'); } }, error: function (xhr, ajaxOptions, thrownError) { console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }); $('#review').on('click', '.pagination a', function (e) { e.preventDefault(); $('#review').fadeOut('slow'); $('#review').load(this.href); $('#review').fadeIn('slow'); }); $('#review').load('index.php?route=product/review|review&product_id={{ product_id }}'); $('#button-review').on('click', function () { $.ajax({ url: 'index.php?route=product/review|write&product_id={{ product_id }}', type: 'post', dataType: 'json', data: $('#form-review').serialize(), beforeSend: function () { $('#button-review').prop('disabled', true).addClass('loading'); }, complete: function () { $('#button-review').prop('disabled', false).removeClass('loading'); }, success: function (json) { $('.alert-dismissible').remove(); if (json['error']) { for (key in json['error']) { $('#input-' + key.replaceAll('_', '-')).addClass('is-invalid').find('.form-control, .form-select, .form-check-input, .form-check-label').addClass('is-invalid'); $('#error-' + key.replaceAll('_', '-')).html(json['error'][key]).addClass('d-block'); } } if (json['success']) { $('#form-review').after('<div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>'); $('#input-name').val(''); $('#input-text').val(''); $('input[name=\'rating\']:checked').prop('checked', false); } } }); }); $(document).ready(function () { $('.magnific-popup').magnificPopup({ type: 'image', delegate: 'a', gallery: { enabled: true } }); $('.date').daterangepicker({ singleDatePicker: true, autoApply: true, locale: { format: 'YYYY-MM-DD' } }); $('.time').daterangepicker({ singleDatePicker: true, datePicker: false, autoApply: true, timePicker: true, timePicker24Hour: true, locale: { format: 'HH:mm' } }).on('show.daterangepicker', function (ev, picker) { picker.container.find('.calendar-table').hide(); }); $('.datetime').daterangepicker({ singleDatePicker: true, autoApply: true, timePicker: true, timePicker24Hour: true, locale: { format: 'YYYY-MM-DD HH:mm' } }); }); //--></script> {{ footer }}