{{ header }}
<div id="product" class="container">
<ul class="breadcrumb mobile {{ menu_expanded ? 'col-md-offset-3 col-lg-offset-3 col-xxl-offset-4' }}">
{% for key, breadcrumb in breadcrumbs %}
{% if key + 1 < breadcrumbs|length %}
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
{% else %}
{% if not hide_last_breadcrumb or (hide_last_breadcrumb and key == 1) %}<li>{{ breadcrumb.text }}</li>{% endif %}
{% endif %}
{% endfor %}
</ul>
<div class="row">
{# column_left #}
{% if column_left and column_right %}
{% set class = 'col-sm-4 col-md-6 col-lg-6 col-xxl-12' %}
{% elseif column_left or column_right %}
{% set class = 'col-sm-8 col-md-9 col-lg-9 col-xxl-16' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
{% set class = 'col-sm-12' %}
<div id="content" class="{{ class }}">
{{ content_top }}
<div class="heading-h1"><h1>{{ heading_title }}</h1></div>
<div class="row">
<div class="product-page {{ product_banners and product_banner_position == 1 ? 'col-sm-12 col-md-12 col-lg-10' : 'col-xs-12' }}">
<div class="row">
<div class="product-page__image col-sm-6">
{% if thumb or images %}
{% if thumb %}
<div class="product-page__image-main uni-item">
{% include 'unishop2/template/extension/module/uni_stickers.twig' %}
<div class="product-page__image-main-carousel">
<a class="product-page__image-main-a" href="{{ popup }}" title="{{ heading_title }}">
<img src="{{ thumb }}" alt="{{ heading_title }}" class="img-responsive" width="{{ thumb_width }}" height="{{ thumb_height }}" />
</a>
{% if images %}
{% for image in images %}
<a class="product-page__image-main-a" href="{{ image.popup }}" title="{{ heading_title }}">
<img src="{{ image.small }}" alt="{{ heading_title }}" width="{{ thumb_width }}" height="{{ thumb_height }}" loading="lazy" class="img-responsive" />
</a>
{% endfor %}
{% endif %}
</div>
{% if not wishlist_btn_disabled %}
<button type="button" title="{{ button_wishlist }}" onclick="wishlist.add({{ product_id }});" class="product-page__wishlist-btn wishlist"><i class="fa fa-heart"></i></button>
{% endif %}
{% if not compare_btn_disabled %}
<button type="button" title="{{ button_compare }}" onclick="compare.add({{ product_id }});" class="product-page__compare-btn compare"><i class="fas fa-align-right"></i></button>
{% endif %}
</div>
{% endif %}
{% if images %}
<div class="product-page__image-addit owl-carousel">
<img src="{{ small }}" alt="{{ heading_title }}" class="product-page__image-addit-img selected img-responsive" data-thumb="{{ thumb }}" data-full="{{ popup }}" width="{{ additional_width }}" height="{{ additional_height }}" />
{% if images %}
{% for image in images %}
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ image.thumb }}" alt="{{ heading_title }}" class="product-page__image-addit-img img-responsive owl-lazy" data-thumb="{{ image.small }}" data-full="{{ image.popup }}" width="{{ additional_width }}" height="{{ additional_height }}" />
{% endfor %}
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
<div class="col-sm-6 product-block">
<div class="product-data">
{% if show_model %}
<div class="product-data__item model"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_model }}</span></div> {{ model }}</div>
{% endif %}
{% if sku %}
<div class="product-data__item sku"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_sku }}:</span></div> {{ sku }}</div>
{% endif %}
{% if show_manuf and manufacturer %}
<div class="product-data__item manufacturer"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_manufacturer }}</span></div><a href="{{ manufacturers }}">{{ manufacturer }}</a></div>
{% endif %}
{% if location %}
<div class="product-data__item location"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_location }}:</span></div> {{ location }}</div>
{% endif %}
{% if reward and show_reward == 1 or show_reward == 3 %}
<div class="product-data__item reward"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_reward }}</span></div> {{ reward }}</div>
{% endif %}
{% if points and show_reward == 2 or show_reward == 3 %}
<div class="product-data__item points"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_points }}</span></div> {{ points }}</div>
{% endif %}
{% if upc %}
<div class="product-data__item upc"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_upc }}:</span></div> {{ upc }}</div>
{% endif %}
{# {% if ean %}
<div class="product-data__item ean"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_ean }}:</span></div> {{ ean }}</div>
{% endif %} #}
{% if jan %}
<div class="product-data__item jan"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_jan }}:</span></div> {{ jan }}</div>
{% endif %}
{% if isbn %}
<div class="product-data__item isbn"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_isbn }}:</span></div> {{ isbn }}</div>
{% endif %}
{% if mpn %}
<div class="product-data__item mpn"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_mpn }}:</span></div> {{ mpn }}</div>
{% endif %}
{% if not product.quantity_indicator %}
<div class="product-data__item stock"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_stock }}</span></div> {{ stock }}</div>
{% endif %}
{% if show_length == 1 %}
{% if length %}<div class="product-data__item length"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_length }}</span></div> {{ length }}</div>{% endif %}
{% if weight %}<div class="product-data__item weight"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_weight }}</span></div> {{ weight }}</div>{% endif %}
{% endif %}
</div>
{% if product.quantity_indicator %}
<hr />
{% include 'unishop2/template/extension/module/uni_quantity_indicator.twig' %}
{% endif %}
{% if product.show_timer %}
<hr />
<div class="product-page__timer">
<div class="product-page__timer-heading">{{ text_special_timer }}</div>
</div>
{% endif %}
{% if price %}
<hr />
<div class="product-page__price price" data-price="{{ price_value }}" data-special="{{ special_value }}" data-discount="{{ discounts_value }}">
{% if special %}
<span class="price-old">{{ price }}</span><span class="price-new">{{ special }}</span>
{% else %}
{{ price }}
{% endif %}
</div>
{% if discounts %}
<!-- <h5 class="heading"><span>{{ text_new_discount }}</span></h5> -->
<div class="product-page__discount">
{% for discount in discounts %}
<div class="product-page__discount-item">{{ discount.quantity }} {{ text_discount }} - {{ discount.price }}</div>
{% endfor %}
</div>
{% endif %}
{% if tax %}<div class="price-tax">{{ text_tax }} {{ tax }}</div>{% endif %}
{% endif %}
{% if options %}
<hr />
<div class="product-page__option option row">
{% for option in options %}
{% if option.type == 'select' %}
<div class="{{ option.required ? 'required' }} option__group col-xs-12 col-md-6">
<label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}:</label>
<select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="option__select form-control">
<option value="">{{ text_select }}</option>
{% for option_value in option.product_option_value %}
<option value="{{ option_value.product_option_value_id }}" data-prefix="{{ option_value.price_prefix }}" data-price="{{ option_value.price_value }}">
{{ option_value.name }} {{ option_value.price ? '(' ~ option_value.price_prefix ~ '' ~ option_value.price ~ ')' }}
</option>
{% endfor %}
</select>
</div>
{% endif %}
{% if option.type == 'radio' %}
<div class="{{ option.required ? 'required' }} option__group col-xs-12">
<label class="option__group-name">{{ option.required ? '*' }} {{ option.name }}:</label>
<div id="input-option{{ option.product_option_id }}">
{% for option_value in option.product_option_value %}
<label class="option__item">
<input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" data-prefix="{{ option_value.price_prefix }}" data-price="{{ option_value.price_value }}" class="hidden" />
{% if option_value.image %}
<img src="{{ option_value.image }}" alt="{{ option_value.name }} {{ option_value.price ? option_value.price_prefix ~ '' ~ option_value.price }}" data-type="product" data-thumb="{{ option_value.small }}" data-full="{{ option_value.full }}" class="option__img" />
{% else %}
<span class="option__name" {{ option_value.price ? 'data-toggle="tooltip" title="'~option_value.price_prefix~' '~option_value.price~'"' }}>{{ option_value.name }}</span>
{% endif %}
</label>
{% endfor %}
</div>
</div>
{% endif %}
{% if option.type == 'checkbox' %}
<div class="{{ option.required ? 'required' }} option__group col-xs-12">
<label class="option__group-name">{{ option.required ? '*' }} {{ option.name }}:</label>
<div id="input-option{{ option.product_option_id }}">
{% for option_value in option.product_option_value %}
<label class="option__item">
<input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" data-prefix="{{ option_value.price_prefix }}" data-price="{{ option_value.price_value }}" class="hidden" />
{% if option_value.image %}
<img src="{{ option_value.image }}" alt="{{ option_value.name }} {{ option_value.price ? option_value.price_prefix ~ '' ~ option_value.price }}" data-type="product" data-thumb="{{ option_value.small }}" data-full="{{ option_value.full }}" class="option__img" />
{% else %}
<!-- <span class="option__name">{{ option_value.name }} {{ option_value.price ? '(' ~ option_value.price_prefix ~ '' ~ option_value.price ~ ')' }}</span> -->
<span class="option__name" {{ option_value.price ? 'data-toggle="tooltip" title="'~option_value.price_prefix~' '~option_value.price~'"' }}>{{ option_value.name }}</span>
{% endif %}
</label>
{% endfor %}
</div>
</div>
{% endif %}
{% if option.type == 'text' %}
<div class="form-group {{ option.required ? 'required' }} col-xs-12">
<label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ 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>
{% endif %}
{% if option.type == 'textarea' %}
<div class="form-group {{ option.required ? 'required' }} col-xs-12">
<label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ 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>
{% endif %}
{% if option.type == 'file' %}
<div class="form-group {{ option.required ? 'required' }} col-xs-12">
<label class="option__group-name">{{ option.required ? '*' }} {{ option.name }}</label>
<button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
<input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
</div>
{% endif %}
{% if option.type == 'date' %}
<div class="form-group {{ option.required ? 'required' }} col-xs-12">
<label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
<div class="input-group date">
<input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" data-locale="{{ datepicker }}" id="input-option{{ option.product_option_id }}" class="form-control" />
<span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span>
</div>
</div>
{% endif %}
{% if option.type == 'datetime' %}
<div class="form-group {{ option.required ? 'required' }} col-xs-12">
<label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
<div class="input-group datetime">
<input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" data-locale="{{ datepicker }}" id="input-option{{ option.product_option_id }}" class="form-control" />
<span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
</div>
</div>
{% endif %}
{% if option.type == 'time' %}
<div class="form-group {{ option.required ? 'required' }} col-xs-12">
<label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
<div class="input-group time">
<input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
<span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if price %}
<hr style="margin-top:0" />
<div class="product-page__cart">
<input type="hidden" name="product_id" value="{{ product_id }}" />
<div class="qty-switch">
<input type="text" name="quantity" value="{{ minimum }}" data-minimum="{{ minimum }}" id="input-quantity" class="qty-switch__input form-control" />
<div>
<i class="qty-switch__btn fa fa-plus btn-default"></i>
<i class="qty-switch__btn fa fa-minus btn-default"></i>
</div>
</div>
<button type="button" class="product-page__add-to-cart add_to_cart btn btn-lg {{ cart_btn_class }}" data-pid="{{ product_id }}" id="button-cart"><i class="{{ cart_btn_icon }}"></i><span>{{ cart_btn_text }}</span></button>
<button type="button" class="product-page__quick-order quick-order btn btn-lg {{ quick_order is empty ? 'hidden' }}" data-toggle="tooltip" title="{{ quick_order_title }}" onclick="quick_order('{{ product_id }}');"><i class="{{ quick_order_icon }}"></i>{% if show_quick_order_text_product %}<span class="hidden-xs hidden-sm">{{ quick_order_title }}</span>{% endif %}</button>
</div>
{% if minimum > 1 %}<div class="product-page__minimum"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>{% endif %}
<hr style="margin-bottom:15px" />
{% endif %}
{% if recurrings %}
<hr>
<h3>{{ text_payment_recurring }}</h3>
<div class="form-group required">
<select name="recurring_id" class="form-control">
<option value="">{{ text_select }}</option>
{% for recurring in recurrings %}
<option value="{{ recurring.recurring_id }}">{{ recurring.name }}</option>
{% endfor %}
</select>
<div class="help-block" id="recurring-description"></div>
</div>
{% endif %}
{% if show_attr and attribute_groups %}
<div class="product-data">
{% for key, attribute_group in attribute_groups %}
{% if key < show_attr_group %}
{% for key, attribute in attribute_group.attribute %}
{% if key < show_attr_item %}
<div class="product-data__item">
<div class="product-data__item-div"><span class="product-data__item-span">{{ attribute.name }}</span></div>
<div class="product-data__item-div">{{ attribute.text }}</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
<a class="product-page__more-attr" onclick="$('a[href=\'#tab-specification\']').click(); scroll_to('#tab-specification'); return false;">{{ text_all_attributes }}</a>
<hr />
{% endif %}
{% if review_status %}
<div class="product-page__rating rating">
{% for i in 1..5 %}
<i class="{{ rating < i ? 'far' : 'fa' }} fa-star"></i>
{% endfor %}
<a onclick="$('a[href=\'#tab-review\']').click(); scroll_to('#tab-review'); return false;" class="product-page__rating-a">{{ reviews }}</a>
<hr />
</div>
{% endif %}
{% if socialbutton %}
<div class="product-page__share">
<div id="goodshare" data-socials="{% for i, social in socialbutton %}{{ social }}{{ i + 1 < socialbutton|length ? ',' }}{% endfor %}"></div>
</div>
{% endif %}
{% if product_banners and product_banner_position == 2 %}
{% include 'unishop2/template/extension/module/uni_product_banner.twig' %}
{% endif %}
</div>
</div>
</div>
{% if product_banners and product_banner_position == 1 %}
<div class="col-sm-12 col-md-12 col-lg-2">
{% include 'unishop2/template/extension/module/uni_product_banner.twig' %}
</div>
{% endif %}
</div>
{% if product_banners and product_banner_position == 3 %}
{% include 'unishop2/template/extension/module/uni_product_banner.twig' %}
{% endif %}
{% if manufacturer_descr and manufacturer_position %}
<div class="product-manuf">
{% if manufacturer_descr.image %}
<div class="product-manuf__image">
<img src="{{ manufacturer_descr.image }}" alt="{{ manufacturer_descr.name }}" class="img-responsive"/>
</div>
{% endif %}
<h4 class="product-manuf__name">{{ manufacturer_descr.name }}</h4>
{{ manufacturer_descr.description }}... <a href="{{ manufacturer_descr.href }}" title="" >{{ text_manufacturer_more }}</a>
</div>
<div class="clearfix"></div>
{% endif %}
<script>
let img_array = [],
elemA = '.product-page__image-main-a',
elemImg = '.product-page__image-main-a img',
elemAddit = '.product-page__image-addit',
elemAdditImg = '.product-page__image-addit-img',
elemMain = '.product-page__image-main-carousel',
options_img;
function productPageCarousel() {
if($(elemAddit).length) {
$(elemMain).addClass('owl-carousel').owlCarousel({
items:1,
dots:false,
//lazyLoad:true,
mouseDrag:false,
onDragged: function (event) {
$(elemAddit).trigger('to.owl.carousel', [parseFloat(event.item.index)]);
imgDataReplace(event.item.index);
}
});
$(elemAddit).owlCarousel({
responsive:{0:{items:4}, 1050:{items:6 }},
responsiveBaseElement:$(this),
dots:false,
lazyLoad:true,
lazyLoadEager:1,
mouseDrag:false,
loop:false,
nav:true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
onRefreshed: function(event) {
//if($('.product-page__option .option__img').length) {
if (typeof(getPoipProduct) === 'function') {
let html = '';
setTimeout(function() {
$(elemAdditImg).each(function() {
html += '<a class="product-page__image-main-a" href="'+$(this).data('full')+'" title="'+$(this).attr('alt')+'">';
html += '<img src="'+$(this).data('thumb')+'" alt="'+$(this).attr('alt')+'" class="img-responsive">';
html += '</a>';
});
$(elemMain).trigger('replace.owl.carousel', html).trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0, 250]);
}, 200);
}
}
});
$('html body').on('click mouseover', elemAdditImg, function() {
$(elemMain).trigger('to.owl.carousel', [parseFloat($(this).parent().index()), 250]);
imgDataReplace($(this).parent().index())
});
}
}
productPageCarousel();
let observer = new MutationObserver(function(e) {
productPageCarousel();
});
observer.observe($('.product-page__image')[0], {childList:true});
function imgDataReplace(indx) {
let el = $(elemAddit).find('.owl-item:eq('+indx+') img');
$(elemAdditImg).addClass('selected').not(el).removeClass('selected');
options_img = false;
if(indx == 0) {
$(elemA).first().attr('href', el.data('full'));
$(elemImg).first().attr('src', el.data('thumb'));
}
}
$(function() {
$('html body').on('click', elemA, function(e) {
e.preventDefault();
let img_indx = 0,
img_array = [];
if($(elemAdditImg+'.selected').length) {
img_indx = parseFloat($(elemAdditImg+'.selected').parent().index());
}
if(!options_img) {
$(elemAdditImg).each(function() {
img_array.push({src:$(this).data('full'), type:'image', title:$(this).attr('alt')});
});
}
if(img_array.length == 0) {
img_array.push({src:$(elemA).attr('href'), type:'image', title:$(elemImg).attr('alt')});
}
$.magnificPopup.open({
items:img_array,
gallery:{
enabled:true,
},
removalDelay:{{ uni_popup_img_effect_in != 'animated disabled' ? 800 : 0 }},
callbacks:{
open:function() {
var $this = this;
$this.content.addClass('{{ uni_popup_img_effect_in }}');
$('html body').addClass('magnific-open');
setTimeout(function() {
$this.content.removeClass('{{ uni_popup_img_effect_in }}');
}, 850);
$this.goTo(img_indx);
},
beforeClose:function() {
this.content.addClass('{{ uni_popup_img_effect_out }}');
$('html body').removeClass('magnific-open');
}
},
});
});
{% if change_opt_img_p %}
$('.product-page input[type="radio"] + .option__img').on('click', function() {
$(elemA).first().attr('href', $(this).data('full'));
$(elemImg).first().attr('src', $(this).data('thumb'));
options_img = true;
$(elemAdditImg).removeClass('selected');
$(elemMain).trigger('to.owl.carousel', [0, 250]);
});
{% endif %}
});
</script>
<div class="hidden-xs hidden-sm" style="height:20px"></div>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-description" data-toggle="tab"><i class="fas fa-file-alt" aria-hidden="true"></i>{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab-specification" data-toggle="tab"><i class="fa fa-list-alt" aria-hidden="true"></i>{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab-review" class="tab-review" data-toggle="tab"><i class="fas fa-comments" aria-hidden="true"></i>{{ tab_review }} {{ review_total ? '<span class="uni-badge">'~review_total~'</span>' }}</a></li>
{% endif %}
{% if uni_product_tabs %}
{% for tab in uni_product_tabs %}
<li><a href="#tab-{{ tab.id }}" class="tab-{{ tab.id }}" data-toggle="tab"><i class="{{ tab.icon }}"></i>{{ tab.title }} <span class="uni-badge hidden"></span></a></li>
{% endfor %}
{% endif %}
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-description">{{ description }}</div>
{% if attribute_groups %}
<div class="tab-pane" id="tab-specification">
{% for attribute_group in attribute_groups %}
<h4 class="heading"><span>{{ attribute_group.name }}</span></h4>
<div class="product-data">
{% for attribute in attribute_group.attribute %}
<div class="product-data__item">
<div class="product-data__item-div"><span class="product-data__item-span">{{ attribute.name }}</span></div>
<div class="product-data__item-div">{{ attribute.text }}</div>
</div>
{% endfor %}
</div>
{% endfor %}
{% if show_length == 2 %}
<h4 class="heading"><span>{{ entry_length_weigth }}</span></h4>
<div class="product-data">
{% if length %}
<div class="product-data__item length"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_length }}</span></div> {{ length }}</div>
{% endif %}
{% if weight %}
<div class="product-data__item weight"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_weight }}</span></div> {{ weight }}</div>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% if review_status %}
<div class="tab-pane" id="tab-review">
<div class="review-info">
<div class="review-info__total">{{ text_review_total }}</div>
<div class="review-info__score hidden-xs">{{ text_review_score }}</div>
<div class="review-info__rating rating hidden-xs">
{% for i in 1..5 %}
<i class="{{ rating < i ? 'far' : 'fa' }} fa-star"></i>
{% endfor %}
</div>
<button class="btn btn-sm btn-primary" onclick="$('.review-form-wrapper').collapse('toggle');">{{ text_write }}</button>
</div>
<div class="review-form-wrapper collapse">
<form class="review-form form-horizontal uni-form" id="form-review">
{% if review_guest %}
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
<div class="col-sm-10">
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
{% if show_plus_minus_review %}
<div class="form-group {{ plus_minus_review_required ? 'required' }}">
<label class="col-sm-2 control-label" for="input-review-plus">{{ entry_plus }}</label>
<div class="col-sm-10">
<textarea name="plus" rows="5" id="input-review-plus" class="form-control"></textarea>
</div>
</div>
<div class="form-group {{ plus_minus_review_required ? 'required' }}">
<label class="col-sm-2 control-label" for="input-review-minus">{{ entry_minus }}</label>
<div class="col-sm-10">
<textarea name="minus" rows="5" id="input-review-minus" class="form-control"></textarea>
</div>
</div>
{% else %}
<input type="hidden" name="plus" value="" />
<input type="hidden" name="minus" value="" />
{% endif %}
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-review">{{ entry_review }}</label>
<div class="col-sm-10">
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block"><small>{{ text_note }}</small></div>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label">{{ entry_rating }}</label>
<div class="col-sm-10">
<input type="radio" name="rating" value="1" class="review-form__input" />
<input type="radio" name="rating" value="2" class="review-form__input" />
<input type="radio" name="rating" value="3" class="review-form__input" />
<input type="radio" name="rating" value="4" class="review-form__input" />
<input type="radio" name="rating" value="5" class="review-form__input" />
<div class="review-form__stars rating">
<i class="review-form__star far fa-star"></i>
<i class="review-form__star far fa-star"></i>
<i class="review-form__star far fa-star"></i>
<i class="review-form__star far fa-star"></i>
<i class="review-form__star far fa-star"></i>
</div>
</div>
</div>
{{ captcha }}
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<div class="col-sm-10">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="review-form__btn btn btn-lg btn-primary">{{ add_new_review }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
<div id="review">{{ uni_reviews }}</div>
</div>
{% endif %}
{% if uni_product_tabs %}
{% for tab in uni_product_tabs %}
<div class="tab-pane" id="tab-{{ tab.id }}">{{ tab.description }}</div>
{% endfor %}
{% endif %}
</div>
<div class="clearfix" style="margin:0 0 30px"></div>
{% if tags %}
<div class="product-tag">
<i class="fa fa-tags"></i>
{% for i, tag in tags %}
<a class="product-tag__item uni-href" data-href="{{ tag.href }}" title="{{ tag.tag }}">{{ tag.tag }}</a>
{% endfor %}
</div>
{% endif %}
{% if manufacturer_descr and not manufacturer_position %}
<div class="product-manuf">
{% if manufacturer_descr.image %}
<div class="product-manuf__image">
<img src="{{ manufacturer_descr.image }}" alt="{{ manufacturer_descr.name }}" class="img-responsive"/>
</div>
{% endif %}
<h4 class="product-manuf__name">{{ manufacturer_descr.name }}</h4>
{{ manufacturer_descr.description }}... <a href="{{ manufacturer_descr.href }}" title="" >{{ text_manufacturer_more }}</a>
</div>
<div class="clearfix"></div>
{% endif %}
{% if products %}
<div class="heading"><span>{{ text_related }}</span></div>
<div class="uni-module product-related">
<div class="uni-module__wrapper">
{% for product in products %}
<div class="product-thumb uni-item">
<div class="product-thumb__image" {{ product.special_date_end ? 'data-special-end="'~product.special_date_end~'"' }}>
{% include 'unishop2/template/extension/module/uni_stickers.twig' %}
<a href="{{ product.href }}" title="{{ product.name }}">
<img src="{{ product.thumb }}" {{ product.additional_image ? 'data-additional="'~product.additional_image~'"' }} loading="lazy" alt="{{ product.name }}" width="{{ img_width }}" height="{{ img_height }}" class="img-responsive" />
</a>
</div>
<div class="product-thumb__caption">
<a class="product-thumb__name" href="{{ product.href }}">{{ product.name }}</a>
{% if product.show_description %}
<div class="product-thumb__description description">{{ product.description }}</div>
{% endif %}
{% include 'unishop2/template/extension/module/uni_attributes.twig' %}
{% include 'unishop2/template/extension/module/uni_options.twig' %}
{% include 'unishop2/template/extension/module/uni_quantity_indicator.twig' %}
{% if product.rating >= 0 and show_rating %}
<div class="product-thumb__rating rating">
{% for i in 1..5 %}
<i class="{{ product.rating < i ? 'far fa-star' : 'fa fa-star' }}"></i>
{% endfor %}
{% if product.num_reviews > 0 %}<a class="product-thumb__rating-a uni-badge uni-href" data-href="{{ product.href }}#tab-review">{{ product.num_reviews }}</a>{% endif %}
</div>
{% endif %}
{% if product.price %}
<div class="product-thumb__price price" data-price="{{ product.price_value }}" data-special="{{ product.special_value }}" data-discount="{{ product.discounts }}">
{% if not product.special %}
{{ product.price }}
{% else %}
<span class="price-old">{{ product.price }}</span> <span class="price-new">{{ product.special }}</span>
{% endif %}
</div>
{% if product.tax %}
<div class="price-tax">{{ text_tax }} {{ product.tax }}</div>
{% endif %}
{% endif %}
<div class="product-thumb__cart cart {{ product.cart_btn_class }}">
{% if product.show_quantity %}
<div class="qty-switch">
<input type="text" name="quantity" value="{{ product.minimum }}" data-minimum="{{ product.minimum }}" class="qty-switch__input form-control" />
<div>
<i class="qty-switch__btn fa fa-plus btn-default"></i>
<i class="qty-switch__btn fa fa-minus btn-default"></i>
</div>
</div>
{% endif %}
<button type="button" class="product-thumb__add-to-cart add_to_cart btn {{ product.cart_btn_class }}" title="{{ product.cart_btn_text }}" data-pid="{{ product.product_id }}" onclick="cart.add({{ product.product_id }}, this)"><i class="{{ product.cart_btn_icon }}"></i><span class="hidden-sm hidden-md">{{ product.cart_btn_text }}</span></button>
<button type="button" class="product-thumb__quick-order quick-order btn {{ product.quick_order is empty ? 'hidden' }}" data-toggle="tooltip" title="{{ quick_order_title }}" onclick="quick_order('{{ product.product_id }}');"><i class="{{ quick_order_icon }}"></i>{% if show_quick_order_text %}<span class="hidden-xs hidden-sm">{{ quick_order_title }}</span>{% endif %}</button>
<button type="button" class="product-thumb__wishlist wishlist {{ wishlist_btn_disabled ? 'hidden' }}" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
<button type="button" class="product-thumb__compare compare {{ compare_btn_disabled ? 'hidden' }}" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fas fa-align-right"></i></button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
$('.product-related').uniModules({
type:'{{ type_view is defined ? type_view : 'carousel' }}',
autoheight:['product-thumb__name', 'product-thumb__description', 'product-thumb__option'],
loop: {{ products|length > 4 ? 'true' : 'false' }}
});
{% if show_timer %}
$('.product-related .image').each(function() {
var date = $(this).data('special-end');
if(date) {
$(this).uniTimer({
date :''+date+'',
texts :['{{ text_special_day }}','{{ text_special_hour }}','{{ text_special_min }}','{{ text_special_sec }}'],
hideText :false,
hideIsNull:false
});
}
});
{% endif %}
</script>
<div style="height:10px;clear:both"></div>
{% endif %}
{{ auto_related }}
{{ content_bottom }}
</div>
{# column_right #}
</div>
</div>
<script>
{% if product.show_timer %}
$('.product-page__timer').uniTimer({
date :'{{ product.show_timer }}',
texts :['{{ text_special_day }}','{{ text_special_hour }}','{{ text_special_min }}','{{ text_special_sec }}']
});
{% endif %}
</script>
{% if socialbutton %}
<script defer async src="catalog/view/javascript/goodshare/goodshare.min.js"></script>
<link href="catalog/view/javascript/goodshare/goodshare.css" rel="stylesheet" media="screen" />
{% endif %}
<script>
dataLayer.push({
'ecommerce':{
'currencyCode':'{{ microdata.code }}',
'detail':{
'products':[{
'id': {{ product_id }},
'name': "{{ microdata.name }}",
'brand': "{{ microdata.manufacturer }}",
'category': "{{ microdata.category }}",
'variant': '',
'price': {{ microdata.price }}
}]
}
}
});
if (typeof(gtag) === 'function') {
gtag('event', 'view_item', {
"items": [{
'id': {{ product_id }},
'name': "{{ microdata.name }}",
'brand': "{{ microdata.manufacturer }}",
'category': "{{ microdata.category }}",
'variant': '',
'price': {{ microdata.price }}
}]
});
}
$('html body').on('click', '#button-cart:not(.disabled)', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('.product-page input[type=\'text\'], .product-page input[type=\'hidden\'], .product-page input[type=\'radio\']:checked, .product-page input[type=\'checkbox\']:checked, .product-page select, .product-page textarea'),
dataType: 'json',
success: function(json) {
$('.text-danger').remove();
$('.form-group').removeClass('has-error');
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
var elem = $('.option #input-option' + i.replace('_', '-')), elem2 = (elem.parent().hasClass('input-group')) ? elem.parent() : elem;
elem2.after('<div class="text-danger">'+json['error']['option'][i]+'</div>');
$('.option .text-danger').delay(5000).fadeOut();
}
uniFlyAlert('danger', json['error']['option']);
}
if (json['error']['recurring']) {
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
}
$('.text-danger').parent().addClass('has-error');
}
if (json['success']) {
if(!uniJsVars.cart_popup_disable) {
uniModalWindow('modal-cart', '', '', json['success']);
}
if(uniJsVars.cart_popup_autohide) {
setTimeout(function() {
$('#modal-cart').modal('hide');
}, uniJsVars.cart_popup_autohide_time * 1000);
}
$.get('index.php?route=common/cart/info', function(data) {
$('.header-cart__dropdown').html($(data).find('.header-cart__dropdown').html());
$('.header-cart__total-items').html($(data).find('.header-cart__total-items').text());
});
dataLayer.push({
'ecommerce':{
'currencyCode':'{{ microdata.code }}',
'add':{
'products':[json['products']]
}
}
});
if (typeof(gtag) === "function") {
gtag('event', 'add_to_cart', {"items": [json['products']]});
}
if(uniJsVars.cart_btn.metric_id && uniJsVars.cart_btn.metric_target) {
if (typeof(ym) === "function") {
ym(uniJsVars.cart_btn.metric_id, 'reachGoal', uniJsVars.cart_btn.metric_target);
} else {
new Function('yaCounter'+uniJsVars.cart_btn.metric_id+'.reachGoal(\''+uniJsVars.cart_btn.metric_target+'\')')();
}
}
if(uniJsVars.cart_btn.analytic_category && uniJsVars.cart_btn.analytic_action) {
if (typeof(gtag) === "function") {
gtag('event', uniJsVars.cart_btn.analytic_action, {'event_category': uniJsVars.cart_btn.analytic_category});
} else if (typeof(ga) === "function") {
ga('send', 'event', uniJsVars.cart_btn.analytic_category, uniJsVars.cart_btn.analytic_action);
}
}
}
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
$('button[id^=\'button-upload\']').on('click', function() {
var node = this;
$('#form-upload').remove();
$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display:none;"><input type="file" name="file" /></form>');
$('#form-upload input[name=\'file\']').trigger('click');
if (typeof timer != 'undefined') {
clearInterval(timer);
}
timer = setInterval(function() {
if ($('#form-upload input[name=\'file\']').val() != '') {
clearInterval(timer);
$.ajax({
url: 'index.php?route=tool/upload',
type: 'post',
dataType: 'json',
data: new FormData($('#form-upload')[0]),
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$(node).button('loading');
},
complete: function() {
$(node).button('reset');
},
success: function(json) {
$('.text-danger').remove();
if (json['error']) {
$(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
}
if (json['success']) {
alert(json['success']);
$(node).parent().find('input').attr('value', json['code']);
}
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
}, 500);
});
$('.tab-review').on('click mouseover', function() {
$('#review').load('index.php?route=product/product/review&product_id={{ product_id }}');
});
$('#review').on('click', '.pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('#review').fadeOut(function() {
scroll_to('#tab-review');
$(this).load(url, function() {
$('#review').fadeIn();
if(!$('.review-pagination .active').next().find('a').length) {
$('.show-more-review').hide();
} else {
$('.show-more-review').show();
}
});
});
});
$('#review').on('click', '.show-more-review', function() {
var url = $('.review-pagination .active').next().find('a').attr('href'),
show_more_btn = $(this),
show_more_btn_i = show_more_btn.find('i');
if(typeof(url) == 'undefined' || url == '') return;
$.ajax({
url: url,
type: 'get',
dataType: 'html',
beforeSend: function() {
show_more_btn_i.addClass('spin');
},
success: function(data) {
var $data = $(data);
$data.find('.review-list__item').hide();
$('.review-list').append($data.find('.review-list').html());
$('.review-pagination .pagination').html($data.find('.pagination').html());
if(!$('.review-pagination .active').next().find('a').length) {
show_more_btn.hide();
}
show_more_btn_i.removeClass('spin');
$('.review-list__item').fadeIn();
}
});
});
$('#button-review').on('click', function() {
$.ajax({
url: 'index.php?route=product/product/write&product_id={{ product_id }}',
type: 'post',
dataType: 'json',
data: $('#form-review').serialize(),
beforeSend: function() {
$('#button-review').button('loading');
},
complete: function() {
$('#button-review').button('reset');
},
success: function(json) {
if (json['error']) {
uniFlyAlert('danger', json['error']);
}
if (json['success']) {
$('#form-review').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> '+json['success']+' <button type="button" class="close" data-dismiss="alert">×</button></div>');
$('#form-review input, #form-review textarea').val('');
$('.review_star input').attr('checked', false).prop('checked', false);
$('#form-review').slideToggle();
scroll_to('.alert.alert-success');
}
}
});
});
$('.review-form__input').on('mouseenter', function () {
$('.review-form__star:lt('+$(this).val()+')').removeClass('far').addClass('fa');
$(this).on('mouseleave', function() {
$('.review-form__star').removeClass('fa').addClass('far');
$('.review-form__input').each(function() {
if($(this).prop('checked')) {
$('.review-form__star:lt('+$(this).val()+')').removeClass('far').addClass('fa');
}
});
});
});
$('.review-form__input').on('click', function(){
$('.review-form__star:not(:lt('+$(this).val()+'))').removeClass('fa').addClass('far');
});
if($('#tab-question').length) {
//$('.tab-question').on('click mouseover', function() {
$('#tab-question').load('index.php?route=extension/module/uni_request/requests&p_id={{ product_id }}');
//});
$('#tab-question').on('click', '.pagination a', function(e) {
e.preventDefault();
$('#tab-question #question-list').fadeOut().load(this.href +' #question-list > *').fadeIn();
});
}
{% if recurrings %}
$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
$.ajax({
url: 'index.php?route=product/product/getRecurringDescription',
type: 'post',
data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
dataType: 'json',
beforeSend: function() {
$('#recurring-description').html('');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['success']) {
$('#recurring-description').html(json['success']);
}
}
});
});
{% endif %}
var hash = window.location.hash;
if (hash) {
$('.nav-tabs a').each(function() {
if (hash == $(this).attr('href')) {
$($(this)).trigger('click');
uniScrollTo(hash);
}
});
var hashpart = hash.split('#'), vals = hashpart[1].split('-'), elem = $('.product-page .option');
for (i=0; i < vals.length; i++) {
elem.find('select option[value="'+vals[i]+'"]').attr('selected', true).trigger('select');
elem.find('input[type="radio"][value="'+vals[i]+'"]').attr('checked', true).prop('checked', true).change();
elem.find('input[type="checkbox"][value="'+vals[i]+'"]').attr('checked', true).prop('checked', true);
}
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{% for i, breadcrumb in breadcrumbs %}
{
"@type": "ListItem",
"position": {{ i+1 }},
"name": "{{ i == 0 ? shop_name : breadcrumb.text|replace({'"':'', '"':''}) }}",
"item": "{{ breadcrumb.href }}"
{{ i + 1 < breadcrumbs|length ? '},' : '}' }}
{% endfor %}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "{{ microdata.name }}",
"category": "{{ microdata.category }}",
"image": ["{{ popup }}"{% for i, image in images %}{{ i+1 <= images|length ? ',' }} "{{ image.popup }}"{% endfor %}],
"brand": "{{ microdata.manufacturer }}",
"manufacturer": "{{ microdata.manufacturer }}",
"model": "{{ microdata.model }}",
"sku": "{{ microdata.sku }}",
"mpn": "{{ microdata.mpn }}",
"description": "{{ microdata.description }}",
"offers": {
"@type": "Offer",
"availability": "https://schema.org/{{ quantity > 0 ? 'InStock' : 'OutOfStock' }}",
"price": "{{ microdata.price }}",
{{ microdata.price_date_end ? '"priceValidUntil": "'~microdata.price_date_end~'",'}}
"priceCurrency": "{{ microdata.code }}",
"url": "{{ microdata.url }}"
}
{% if microdata.review_status and microdata.reviews_num > 0 %},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "{{ microdata.rating }}",
"reviewCount": "{{ microdata.reviews_num }}"
}
{% endif %}
{% if microdata.reviews %},
"review": [
{% for i, review in microdata.reviews %}
{
"@type": "Review",
"author": "{{ review.author }}",
"datePublished": "{{ review.date_added }}",
"description": "{{ review.text }}",
"reviewRating": {
"@type": "Rating",
"ratingValue": "{{ review.rating }}",
"bestRating": "5"
}
{{ i+1 < microdata.reviews|length ? '},' : '}' }}
{% endfor %}
]
{% endif %}
}
</script>
{% set break = false %}
{% for option in options if not break %}
{% if option.type == 'date' or option.type == 'time' or option.type == 'datetime' %}
<script src="catalog/view/javascript/jquery/datetimepicker/moment/moment.min.js"></script>
<script src="catalog/view/javascript/jquery/datetimepicker/moment/moment-with-locales.min.js"></script>
<script src="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<link href="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" rel="preload" as="style" />
<link href="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" />
<script>
$('.date').datetimepicker({
pickTime: false
});
$('.datetime').datetimepicker({
pickDate: true,
pickTime: true
});
$('.time').datetimepicker({
pickDate: false
});
</script>
{% set break = true %}
{% endif %}
{% endfor %}
{{ footer }}
ну лучше то может и быть. однако стоимость + регистрация в смс сервисах и оплата всего этого. для минимума или середнячка это лишнее.
Все работает. Спасибо огромное тебе автор.
