Symfony Profiler

{% extends 'AtechNetCoreBundle/base.html.twig' %}
{% import "AtechNetCoreBundle/macros.html.twig" as macros %}
{% import "AtechNetCoreBundle/input-macros.html.twig" as inputMacros %}
{% block headScript %}
{% if app.environment == 'prod' and app.request.locale == 'sk' %}

<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com"/>
<script type='text/javascript' id='vwoCode'>
window._vwo_code || (function () {
var account_id = 839743,
version = 2.0,
settings_tolerance = 2000,
hide_element = 'body',
hide_element_style = 'opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important',
/* DO NOT EDIT BELOW THIS LINE */
f = false, w = window, d = document, v = d.querySelector('#vwoCode'),
cK = '_vwo_' + account_id + '_settings', cc = {};
try {
var c = JSON.parse(localStorage.getItem('_vwo_' + account_id + '_config'));
cc = c && typeof c === 'object' ? c : {}
} catch (e) {
}
var stT = cc.stT === 'session' ? w.sessionStorage : w.localStorage;
code = {
use_existing_jquery: function () {
return typeof use_existing_jquery !== 'undefined' ? use_existing_jquery : undefined
}, library_tolerance: function () {
return typeof library_tolerance !== 'undefined' ? library_tolerance : undefined
}, settings_tolerance: function () {
return cc.sT || settings_tolerance
}, hide_element_style: function () {
return '{' + (cc.hES || hide_element_style) + '}'
}, hide_element: function () {
return typeof cc.hE === 'string' ? cc.hE : hide_element
}, getVersion: function () {
return version
}, finish: function () {
if (!f) {
f = true;
var e = d.getElementById('_vis_opt_path_hides');
if (e) e.parentNode.removeChild(e)
}
}, finished: function () {
return f
}, load: function (e) {
var t = this.getSettings(), n = d.createElement('script'), i = this;
if (t) {
n.textContent = t;
d.getElementsByTagName('head')[0].appendChild(n);
if (!w.VWO || VWO.caE) {
stT.removeItem(cK);
i.load(e)
}
} else {
n.fetchPriority = 'high';
n.src = e;
n.type = 'text/javascript';
n.onerror = function () {
_vwo_code.finish()
};
d.getElementsByTagName('head')[0].appendChild(n)
}
}, getSettings: function () {
try {
var e = stT.getItem(cK);
if (!e) {
return
}
e = JSON.parse(e);
if (Date.now() > e.e) {
stT.removeItem(cK);
return
}
return e.s
} catch (e) {
return
}
}, init: function () {
if (d.URL.indexOf('__vwo_disable__') > -1) return;
var e = this.settings_tolerance();
w._vwo_settings_timer = setTimeout(function () {
_vwo_code.finish();
stT.removeItem(cK)
}, e);
var t = d.currentScript, n = d.createElement('style'), i = this.hide_element(),
r = t && !t.async && i ? i + this.hide_element_style() : '',
c = d.getElementsByTagName('head')[0];
n.setAttribute('id', '_vis_opt_path_hides');
v && n.setAttribute('nonce', v.nonce);
n.setAttribute('type', 'text/css');
if (n.styleSheet) n.styleSheet.cssText = r; else n.appendChild(d.createTextNode(r));
c.appendChild(n);
this.load('https://dev.visualwebsiteoptimizer.com/j.php?a=' + account_id + '&u=' + encodeURIComponent(d.URL) + '&vn=' + version)
}
};
w._vwo_code = code;
code.init();
})();
</script>

{% endif %}
{% endblock %}
{% block dataLayer %}
{% if app.environment == 'prod' %}
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ecommerce: null});
dataLayer.push({
event: 'view_item',
ecommerce: {
currency: '{{ currency_ISO }}',
value: '{{ ( special ? special : price ) }}',
items: [{
item_id: '{{ model }}',
item_name: '{{ title|replace({ '/' : '-' }) }}',
discount: '{{ ( special ? ( price - special ) : 0 ) }}',
index: 0,
item_brand: '{{ brand }}',
item_category: '{{ type }}',
price: '{{ price }}',
quantity: 1
}]
}
});
</script>
{% endif %}
{% endblock %}
{% block content %}
{% set customerTypeId = app.session.get('customerTypeId') %}
{% set basePrice = app.session.get('basePrice') %}
{% set domainId = app.session.get('domainId') %}
{% set withVatTxt = 'with VAT' | trans %}
{% set isBazarProduct = qualityStatusId == const('Product::QualityStatus_Bazaar') %}
{% set warrantyYear = isBazarProduct ? 1 : warrantyYear %}
{% set defaultLocale = app.request.session.get('defaultLocale') %}
<div class="main-content">
<div class="container mobile-full">
<div class="product-page">
<ul class="breadcrumb">
<li class="arrow">
{% set previousLink = breadcrumbs|length - 2 %}
<a href="{{ breadcrumbs[previousLink].href }}"><i class="fas fa-arrow-left"></i></a>
</li>
{% for breadcrumb in breadcrumbs %}
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
{% endfor %}
</ul>
<div class="product-images">
{% for message in app.flashes('successReview') %}
<div class="alert alert-success" role="alert">{{ message }}</div>
{% endfor %}
{% set currentDate = "now"|date('YmdHi') %}
<div class="product-page-pic{% if not orderable %} not-orderable{% endif %}">
<div id="productThumbs" class="product-thumbs slider-pro mt-2 mt-md-0 mb-md-3">
<div class="sp-slides">
{% for image in images %}
<div class="sp-slide text-center" data-popup="{{ image.popup }}">
<img loading="lazy" decoding="async" src="{{ image.thumb }}"
alt="{{ h1_title }} #{{ loop.index }}" width="540" height="405"/>
</div>
{% endfor %}
</div>
<div class="sp-thumbnails{% if images|length > 4 %} more-than-4-img{% endif %}"
style="margin-top: 398px">
{% if images|length > 4 %}
{% for index in 0..3 %}
{% set image = images[index] %}
<img loading="lazy" decoding="async" class="sp-thumbnail"
src="{{ image.additional }}" alt="{{ h1_title }} thumb #{{ index }}"/>
{% endfor %}
{% set moreImagesCount = images|length - 4 %}
<span id="more-images-count" style="display: none;">+{{ moreImagesCount }}</span>
{% else %}
{% for image in images %}
<img decoding="async" class="sp-thumbnail" src="{{ image.additional }}"
alt="{{ h1_title }} thumb #{{ loop.index }}"/>
{% endfor %}
{% endif %}
</div>
</div>
{% if labels %}
{% set localQuality = quality|lower %}
{% set qualityLevel = 0 %}
{% if localQuality == 'bronze' %}
{% set localQuality = 'C' %}
{% set qualityLevel = 1 %}
{% elseif localQuality == 'silver' %}
{% set localQuality = 'B' %}
{% set qualityLevel = 2 %}
{% elseif localQuality == 'gold' %}
{% set localQuality = 'A' %}
{% set qualityLevel = 3 %}
{% endif %}
<div class="product-list-label">
{% if qualityLevel != 0 %}
<div class="badge-item quality">
<div class="quality-text">
<span class="quality-name">{{ ('grades.'~localQuality)|trans }}</span>
<span class="quality-info-text">{{ 'condition'|trans }}</span>
<span class="quality-meter">
{% for i in 1..3 %}
<span class="quality-element {{ qualityLevel >= i ? 'active' : '' }}"></span>
{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="badge-item quality">
<div class="quality-text">
<span class="quality-name">{{ ('grades.'~localQuality)|trans }}</span>
<span class="quality-info-text">{{ 'condition'|trans }}</span>
</div>
</div>
{% endif %}
{%- if (
customerTypeId == 1 and
labelOs and
typeId in [
const('ProductType::PRODUCT_TYPE_ID_NOTEBOOK'),
const('ProductType::PRODUCT_TYPE_ID_PC'),
const('ProductType::PRODUCT_TYPE_ID_PC_SET'),
const('ProductType::PRODUCT_TYPE_ID_ALL_IN_ONE'),
const('ProductType::PRODUCT_TYPE_ID_SMARTPHONE'),
const('ProductType::PRODUCT_TYPE_ID_TABLET')
] and
'windows' in labelOs.title|lower
) -%}
<div class="badge-item operation-system">
<svg class="os-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d="M0 2.4L6.5 1.5V7.5H0V2.4Z"/>
<path fill="#ffffff" d="M7.3 1.4L16 0V7.5H7.3V1.4Z"/>
<path fill="#ffffff" d="M0 8.5H6.5V14.5L0 13.6V8.5Z"/>
<path fill="#ffffff" d="M7.3 8.5H16V16L7.3 14.6V8.5Z"/>
</svg>
<span class="os-text">
{% set localLabel = 11 in labelOs.title ? 'Windows 11' : 'Windows 10' %}
<span class="os-name">{{ localLabel }}</span>
<span class="os-included">{{ 'productListBadgeRow.os.include'|trans }}</span>
</span>
</div>
{% endif %}
{% if warrantyYear < 1 %}
{% set warrantyMonths = (warrantyYear * 12)|round %}
{% set warrantyText = warrantyMonths ~ ' ' ~ (warrantyMonths > 1 ? 'productListBadgeRow.warranty.months'|trans : 'productListBadgeRow.warranty.month'|trans) %}
{% else %}
{% set warrantyText = warrantyYear ~ ' ' ~ (warrantyYear > 1 ? 'productListBadgeRow.warranty.years'|trans : 'productListBadgeRow.warranty.year'|trans) %}
{% endif %}
<div class="badge-item warranty">
<span class="warranty-text">
<span class="warranty-years">{{ warrantyText }}</span>
<span class="warranty-label">{{ 'productListBadgeRow.warranty.label'|trans }}</span>
</span>
</div>
</div>
{% endif %}
<div class="product-list-icons justify-content-start gap-2">
{% if special %}
<span class="discount-icon"><div>%</div></span>
{% endif %}
{% if isBestseller %}
<img loading="lazy" decoding="async" src="{{ asset('theme/images/icon/bestseller.png') }}" alt="{{ 'Bestseller'|trans }}" width="35" height="35" />
{% endif %}
</div>
</div>
<small class="illustration">{{ 'Product images are illustrations' | trans }}</small>
</div>
<div class="product-details mt-3 mt-md-0">
<h1 data-bs-toggle="popover" data-bs-original-title="{{ 'Product title popover title'|trans }}:"
data-bs-content="{{ 'Product title popover body'|trans }}" data-bs-placement="bottom">
{{- h1_title|raw -}}
</h1>
<div class="details-top" {% if typeId in [52, 60, 116, 68, 41, 90] %} style="margin-bottom: 0 !important;" {% endif %}>
<div class="d-flex align-items-center justify-content-start flex-row flex-wrap my-2">
<div class="number-availability">
<div class="header-top-small-info d-sm-block d-md-inline-block">
{% if orderable and active == 1 %}
{% if available > 10 %}
<span class="in-stock text-success"><span
class="dot"></span>{{ '10+ in stock' | trans }}</span>
{% elseif available >= 5 %}
<span class="in-stock text-success"><span
class="dot"></span>{{ '5-10 in stock' | trans }}</span>
{% elseif available > 1 %}
<span class="in-stock text-success"><span
class="dot"></span>{{ '2-4 in stock'|trans }}</span>
{% elseif available == 1 %}
<span class="in-stock text-danger"><span
class="dot"></span>{{ 'Only one left'|trans }}!</span>
{% elseif orderWaitingDays is defined and orderWaitingDays > 0 %}
<span class="in-stock text-grey"><span
class="dot"></span>{{ 'On order within %d working days' |trans |format(orderWaitingDays) }}</span>
{% else %}
<span class="in-stock text-grey"><span
class="dot"></span>{{ 'Out of stock'|trans }}</span>
{% endif %}
{% else %}
<span class="in-stock text-grey"><span
class="dot"></span>{{ 'Out of stock'|trans }}</span>
{% endif %}
</div>
</div>
<div class="review-stars review-stars-product-header d-inline-block product-detail-reviews">
{% include('AtechNetCoreBundle/Widgets/TrustIndex/ProductShowAllReviews.html.twig') %}
</div>
</div>
{% set description = description|replace({
'Gold': ('grades.A')|trans,
'Silver': ('grades.B')|trans,
'Bronze': ('grades.C')|trans,
}) %}
<div class="row">
<p class="product-short-description mb-2 mb-md-0 col-md-12">{{ description }},
<a id="jump-show-more-info" href="#">{{ 'Full specification'|trans }}</a></p>
</div>
</div>
{% if typeId in [52, 60, 116, 68, 41, 90] %}
<p class="product-configuration-box-title mt-1">
{{ ('package_contains.' ~ typeId)|trans }}
</p>
{% endif %}
{% set optionsNoVatTxt = '' %}
{% if basePrice == 'net' %}
{% set optionsNoVatTxt = ' ' ~ 'without VAT' | trans %}
{% endif %}
{% if primaryOptions and orderable and domainId != 7 %}
<div class="product-configuration-box">
<p class="product-configuration-box-title">{{ 'Windows and software' | trans }}:</p>
{% for option in primaryOptions %}
{% set configOptions = option.options %}
<div class="row product-configuration-row">
<div class="col-12{{ option.id == 22 ? ' flex-center' : '' }}">
<select name="option[{{ option.id }}]"
{% if option.id == 21 %}id="operation-system-select"
{% else %}id=""{% endif %}
class="selectpicker" data-live-search="false"
data-option="{{ option.id }}"
{% if customerTypeId == 1 %}{% if option.id != 21 %}title="{{ option.title }}"{% endif %}{% else %}{% if option.id != 21 %}title="{{ option.title }}"{% endif %}{% endif %}>
{% if option.id == 21 and customerTypeId == 2 %}
<option value="0" data-price="0" data-special="0"
{% if customerTypeId == 2 %}selected{% endif %}
data-content="{{ 'Without operating system (only for advanced users)' | trans }} <span class='option-price'>+ 0 {{ currency }}</span>">
{{ 'Without operating system (only for advanced users)' | trans }} +
0 {{ currency }}
</option>
{% endif %}
{% for value in configOptions %}
{% if option.id == 21 %}
{% set optionTitle = value.title ~ ' + ' ~ 'installation' | trans %}
{% else %}
{% set optionTitle = value.title %}
{% endif %}
{% if basePrice == 'net' %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.discount |price(currency, precision) ~ optionsNoVatTxt %}
{% else %}
{% set optionPrice = '+ ' ~ value.price |price(currency, precision) ~ optionsNoVatTxt %}
{% endif %}
{% else %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.vatDiscounted |price(currency, precision) %}
{% else %}
{% set optionPrice = '+ ' ~ value.vatPrice |price(currency, precision) %}
{% endif %}
{% endif %}
<option value="{{ value.id }}"
data-price="{{ value.vatPrice }}"
data-net-price="{{ value.price }}"
data-special="{{ value.discounted and value.vatDiscounted > 0 ? value.vatDiscounted : 0 }}"
data-net-special="{{ value.discounted and value.discount > 0 ? value.discount : 0 }}"
{% if customerTypeId == 2 %}
data-suggested-price="{{ customerTypeId == 2 and value.vatSuggestedPrice > 0 ? value.vatSuggestedPrice : 0 }}"
data-suggested-net-price="{{ customerTypeId == 2 and value.suggestedPrice > 0 ? value.suggestedPrice : 0 }}"
{% endif %}
data-content="{# antivirus-option => id is 23 #} {% if option.id in [23, 24] %}{#<div class='icon-container me-3'>{% if value.image is defined %}<img decoding='async' src='{{ value.image }}'>{% elseif value.productId == 0 %}<i class='far fa-ban mt-auto mb-auto fa-2x'></i>{% endif %}</div> #}<span class='ms-0 me-auto'>{{ optionTitle }}</span><span class='option-price'>{{ optionPrice }}</span>{% else %}{{ optionTitle }}<span class='option-price'>{{ optionPrice }}</span>{% endif %}"
{% if value.id == 3508 %}selected{% endif %}>
{{ optionTitle }} {{ optionPrice }}
</option>
{% endfor %}
{% if option.id == 21 and customerTypeId == 1 %}
<option value="0" data-price="0" data-special="0"
data-content="{{ 'Without operating system (only for advanced users)' | trans }} <span class='option-price'>+ 0 {{ currency }}</span>">
{{ 'Without operating system (only for advanced users)' | trans }} +
0 {{ currency }}
</option>
{% endif %}
{% if option.id != 21 %}
<option value="0" data-dont-want="1" data-price="0" data-special="0"
data-content="{% if option.id == 23 %}{# <div class='icon-container me-3'><i class='far fa-ban mt-auto mb-auto fa-2x'></i></div> #}<span class='ms-0 me-auto'>{{ 'Dont need' | trans }}</span><span class='option-price'>+ 0 {{ currency }}</span>{% else %}{{ 'Dont need' | trans }} <span class='option-price'>+ 0 {{ currency }}</span>{% endif %}">{{ 'Dont need' | trans }}
+ 0 {{ currency }}</option>
{% endif %}
</select>
{%- if option.id == 22 -%}
<button type="button" class="service-pack-open-link"
title="{{ 'More info'|trans }}" data-bs-toggle="modal"
data-bs-target="#modal-service-pack-info"><i
class="fas fa-info-circle"></i></button>
{%- endif -%}
{% if option.id == 21 %}
<div class="operation-system-message success {% if customerTypeId == 2 %}d-none{% endif %}"
id="operation-system-message-success">
<i class="fas fa-check"></i>
<span>{{ 'Turn it on and use immediately!' | trans }}</span>
</div>
<div class="operation-system-message danger d-none"
id="operation-system-message-danger">
<i class="fas fa-exclamation-triangle"></i>
<span>{{ 'The OS is a must for everyday use!' | trans }}<br/>{{ 'Choose this option only if u know how to install one!' | trans }}</span>
</div>
<div class="operation-system-message warning d-none"
id="linux-message-danger">
<i class="fas fa-exclamation-triangle"></i>
<span>{{ 'Linux warning message' | trans | raw }}</span>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if secondaryOptions and orderable and domainId != 7 %}
<div class="product-configuration-box">
{% if typeId == const('ProductType::PRODUCT_TYPE_ID_MONITOR') %}
<p class="product-configuration-box-title mt-4">
{# {{ 'The package includes the power cable and the CABLE_TYPE.' | trans({'CABLE_TYPE': secondaryOptions[0].options|first['title']}) }} #}
{{ 'Monitor cable info text'|trans }}
</p>
<p class="product-configuration-box-title mt-4">
{{ 'Choose an accessory monitor' | trans }}:
</p>
{% else %}
<p class="product-configuration-box-title mt-4">
{{ 'Choose an accessory' | trans }}:
</p>
{% endif %}
{% for option in secondaryOptions|slice(0, 3) %}
{% if option.id == 401 %}<div class="battery-option-wrapper">{% endif %}
<div class="row product-configuration-row">
<div class="col-12{% if option.id == 320 %} d-flex align-items-center{% endif %} {% if option.id in [47, 184, 401] %} flex-center {% endif %}">
{% if option.id == 320 %}
{% set skinColorSelectorIsDefined = true %}
<div style="position: relative; flex: 1;">
<button id="colorSelector"
class="w-100 fw-normal d-flex justify-content-start align-items-center form-select px-3 collapsed rounded-2"
data-bs-toggle="collapse" data-bs-target="#colorSelect"
aria-expanded="false" aria-controls="colorSelect">
<img decoding="async" src="{{ asset('theme/images/cfg-skin.svg') }}"
width="25" height="25" alt="{{ 'Color select'|trans }}">
<span class="selected-title">{{- 'Color select'|trans -}}</span>
<span class="selected-price"></span>
</button>
<div class="collapse" id="colorSelect">
<div class="card card-body border-top-0 rounded-bottom px-4 py-3 pt-2 color-select-wrapper">
<div class="selected-color py-2 pb-3">
<strong class="color-title">{{ 'Select color'|trans }}</strong>
<strong class="color-price"
style="white-space: nowrap;"></strong>
</div>
<div class="color-palettes">
{% for colorItem in option.options %}
{% if colorItem.id not in [4035,4047,4051,4054,4552] %}
<div class="color-palette-item">
{% set colorPrice = customerTypeId == 2 ? colorItem.price : colorItem.vatPrice %}
<input type="radio" name="selectedColor"
class="me-3 d-none"
value="{{ colorItem.id }}"
data-price="{{ colorPrice|price(currency, precision) }}"
data-color-name="{{ colorItem.title | trans }}">
<img decoding="async" src="{{ colorItem.image }}"
alt="{{ colorItem.title | trans }}">
</div>
{% endif %}
{% endfor %}
<div class="color-palette-item"
style="display: flex; background-color: #e5e5e5;">
<input type="radio" name="selectedColor" class="me-3 d-none"
value="0"
data-price="{{ 0|price(currency, precision) }}"
data-color-name="{{ 'Dont need'|trans }}">
<i class="far fa-ban m-auto fa-2x"
style="color: #b7b7b7;"></i>
</div>
</div>
<div class="confirm-selected-color mt-5 mb-2">
<button data-bs-toggle="collapse" data-bs-target="#colorSelect"
aria-controls="colorSelect" class="btn btn-primary w-75"
disabled>
{{- 'Select'|trans -}}
</button>
</div>
</div>
<select name="option[{{ option.id }}]"
id="{% if option.id == 123 %}cable-select{% endif %}"
class="selectpicker select-option-icon select-option-icon-{{ option.id }} d-none"
data-live-search="false" data-option="{{ option.id }}"
{% if option.id != 123 %}title="{{ option.title }}"{% endif %}>
{% for value in option.options %}
{% set optionTitle = value.title %}
{% if basePrice == 'net' %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.discount |price(currency, precision) ~ optionsNoVatTxt %}
{% else %}
{% set optionPrice = '+ ' ~ value.price |price(currency, precision) ~ optionsNoVatTxt %}
{% endif %}
{% else %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.vatDiscounted |price(currency, precision) %}
{% else %}
{% set optionPrice = '+ ' ~ value.vatPrice |price(currency, precision) %}
{% endif %}
{% endif %}
<option value="{{ value.id }}"
data-price="{{ value.vatPrice }}"
data-net-price="{{ value.price }}"
data-special="{{ value.discounted and value.vatDiscounted > 0 ? value.vatDiscounted : 0 }}"
data-net-special="{{ value.discounted and value.discount > 0 ? value.discount : 0 }}"
{% if customerTypeId == 2 %}
data-suggested-price="{{ customerTypeId == 2 and value.vatSuggestedPrice > 0 ? value.vatSuggestedPrice : 0 }}"
data-suggested-net-price="{{ customerTypeId == 2 and value.suggestedPrice > 0 ? value.suggestedPrice : 0 }}"
{% endif %}
data-content="{# <div class='icon-container me-3'>{% if value.image is defined %}<img decoding='async' src='{{ value.image }}'>{% elseif value.productId == 0 %}<i class='far fa-ban mt-auto mb-auto fa-2x'></i>{% endif %}</div> #}<span class='ms-0 me-auto'>{{ optionTitle }}</span><span class='option-price'>{{ optionPrice }}</span>"
{% if option.id == 123 and customerTypeId == 1 and loop.index == 1 %}selected{% endif %} >
{{ optionTitle }} {{ optionPrice }}
</option>
{% endfor %}
{# note itt lehet a selectben visszakapcsolni a kepeket #}
<option value="0" data-dont-want="1" data-price="0" data-special="0"
data-content="{# <div class='icon-container me-3'><i class='far fa-ban mt-auto mb-auto fa-2x'></i></div> #}<span class='ms-0 me-auto'>{{ 'Dont need' | trans }}</span><span class='option-price'>+ 0 {{ currency }}</span>">{{ 'Dont need' | trans }}
+ 0 {{ currency }}</option>
</select>
</div>
</div>
{# <button type="button" class="service-pack-open-link" title="{{ 'More info'|trans }}" data-bs-toggle="modal" data-bs-target="#modal-skin-info"><i class="fas fa-info-circle"></i></button> #}
{% else %}
<select name="option[{{ option.id }}]"
id="{% if option.id == 123 %}cable-select{% endif %}"
class="selectpicker select-option-icon select-option-icon-{{ option.id }} "
data-live-search="false" data-option="{{ option.id }}"
{% if option.id != 123 %} title="{{ option.title }}" {% endif %}>
{% if product_type_id == const('ProductType::PRODUCT_TYPE_ID_MONITOR') %}
<option value="0" data-dont-want="1" data-price="0" data-special="0"
selected="selected"
data-content="{# <div class='icon-container me-3'><i class='far fa-ban mt-auto mb-auto fa-2x'></i></div> #}<span class='ms-0 me-auto'>{{ 'Dont need' | trans }}</span><span class='option-price'>+ 0 {{ currency }}</span>">
{{ 'Dont need' | trans }} + 0 {{ currency }}
</option>
{% endif %}
{% for value in option.options %}
{% set optionTitle = value.title %}
{% if basePrice == 'net' %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.discount |price(currency, precision) ~ optionsNoVatTxt %}
{% set optionOriginalPrice = '+ ' ~ value.price |price(currency, precision) ~ optionsNoVatTxt %}
{% else %}
{% set optionPrice = '+ ' ~ value.price |price(currency, precision) ~ optionsNoVatTxt %}
{% endif %}
{% else %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.vatDiscounted |price(currency, precision) %}
{% set optionOriginalPrice = '+ ' ~ value.vatPrice |price(currency, precision) %}
{% else %}
{% set optionPrice = '+ ' ~ value.vatPrice |price(currency, precision) %}
{% endif %}
{% endif %}
<option value="{{ value.id }}"
data-price="{{ value.vatPrice }}"
data-net-price="{{ value.price }}"
data-special="{{ value.discounted and value.vatDiscounted > 0 ? value.vatDiscounted : 0 }}"
data-net-special="{{ value.discounted and value.discount > 0 ? value.discount : 0 }}"
data-free="{{ value.discounted and option.id == 184 ? 1 : 0 }}"
{% if customerTypeId == 2 %}
data-suggested-price="{{ customerTypeId == 2 and value.vatSuggestedPrice > 0 ? value.vatSuggestedPrice : 0 }}"
data-suggested-net-price="{{ customerTypeId == 2 and value.suggestedPrice > 0 ? value.suggestedPrice : 0 }}"
{% endif %}
{# note itt lehet a selectben visszakapcsolni a kepeket #}
data-content="{# <div class='icon-container me-3'> #}
{% if value.image is defined %}
{# <img decoding='async' src='{{ value.image }}'> #}
{% elseif value.productId == 0 %}
{# <i class='far fa-ban mt-auto mb-auto fa-2x'></i> #}
{% endif %} {# </div> #}<span class='ms-0 me-auto'>{{ optionTitle }}</span>{% if value.discounted %} <span class='option-original-price'>{{ optionOriginalPrice }}</span> <span class='option-price'>{{ optionPrice }}</span>{% else %} <span class='option-price'>{{ optionPrice }}</span> {% endif %}"
{% if option.id == 123 and customerTypeId == 1 and loop.index == 1 %}selected{% endif %} >
{{ optionTitle }} {{ optionPrice }}
</option>
{% endfor %}
{% if product_type_id != const('ProductType::PRODUCT_TYPE_ID_MONITOR') %}
<option value="0" data-dont-want="1" data-price="0" data-special="0"
data-content="{# <div class='icon-container me-3'><i class='far fa-ban mt-auto mb-auto fa-2x'></i></div> #}<span class='ms-0 me-auto'>{{ 'Dont need' | trans }}</span><span class='option-price'>+ 0 {{ currency }}</span>">
{{ 'Dont need' | trans }} + 0 {{ currency }}
</option>
{% endif %}
</select>
{% if option.id == 47 %}
<button type="button" class="service-pack-open-link"
title="{{ 'More info'|trans }}" data-bs-toggle="modal"
data-bs-target="#modal-ssd-change-info"><i
class="fas fa-info-circle"></i></button>
{% elseif option.id == 184 %}
<button type="button" class="service-pack-open-link"
title="{{ 'More info'|trans }}" data-bs-toggle="modal"
data-bs-target="#modal-keyboard-reprint-info"><i
class="fas fa-info-circle"></i></button>
{% elseif option.id == 401 %}
<button type="button" class="service-pack-open-link"
title="{{ 'More info'|trans }}" data-bs-toggle="modal"
data-bs-target="#modal-new-battery-info"><i
class="fas fa-info-circle"></i></button>
{% endif %}
{% endif %}
</div>
</div>
{% if option.id == 401 %}
<div>
<div class="battery-message success ">
<i class="fas fa-check"></i>
<span>{{ 'newBatteryInfo.highlight'|trans }}</span>
</div>
</div>
</div>{% endif %}
{% endfor %}
{% if warranties is defined %}
{% set option = warranties['attribute'] %}
<div class="row product-configuration-row">
<div class="col-12">
<select name="option[{{ option.id }}]" id=""
class="selectpicker select-option-icon select-option-icon-{{ option.id }}"
data-live-search="false" data-option="{{ option.id }}"
title="{{ option.title|trans }}">
{% for warranty in warranties['data'] %}
{% set optionTitle = warranty['title'] %}
{% set currentDate = "now"|date("Y-m-d") %}
{% set startDate = "2025-11-29" %}
{% set endDate = "2025-12-22" %}
{% set discounted = currentDate > startDate and currentDate < endDate %}
{% if basePrice == 'net' %}
{% if discounted %}
{% set optionPrice = '+ ' ~ warranty['discount'] | price(currency, precision) ~ optionsNoVatTxt %}
{% set optionOriginalPrice = warranty['price'] | price(currency, precision) ~ optionsNoVatTxt %}
{% else %}
{% set optionPrice = '+ ' ~ warranty['price'] | price(currency, precision) ~ optionsNoVatTxt %}
{% endif %}
{% else %}
{% if discounted %}
{% set optionPrice = '+ ' ~ warranty['vatDiscounted'] |price(currency, precision) %}
{% set optionOriginalPrice = warranty['vatPrice'] | price(currency, precision) ~ optionsNoVatTxt %}
{% else %}
{% set optionPrice = '+ ' ~ warranty['vatPrice'] | price(currency, precision) %}
{% endif %}
{% endif %}
<option value="{{ warranty['id'] }}"
data-price="{{ warranty['vatPrice'] }}"
data-net-price="{{ warranty['price'] }}"
data-special="{{ warranty['vatDiscounted'] }}"
data-net-special="{{ warranty['discount'] }}"
data-content="{# <div class='icon-container me-3'>{% if warranty['image'] is defined %}<img decoding='async' src='{{ warranty['image'] }}'>{% elseif value.productId == 0 %}<i class='far fa-ban mt-auto mb-auto fa-2x'></i>{% endif %}</div> #}<span class='ms-0 me-auto'>{{ optionTitle|trans }}</span>{% if discounted %} <span class='option-original-price'>{{ optionOriginalPrice }}</span> <span class='option-price'>{{ optionPrice }}</span>{% else %} <span class='option-price'>{{ optionPrice }}</span> {% endif %}">
{{ optionTitle }} {{ optionPrice }}
</option>
{% endfor %}
<option value="0" data-dont-want="1" data-price="0" data-special="0"
selected="selected"
data-content="{# <div class='icon-container me-3'><i class='far fa-ban mt-auto mb-auto fa-2x'></i></div> #}<span class='ms-0 me-auto'>{{ 'Dont need' | trans }}</span><span class='option-price'>+ 0 {{ currency }}</span>">
{{ 'Dont need' | trans }} + 0 {{ currency }}
</option>
</select>
</div>
</div>
{% endif %}
{% if secondaryOptions|length > 3 %}
<div class="collapse collapse-content more-collapse-content" id="moreOptions">
{% for option in secondaryOptions|slice(3, options|length) %}
<div class="row product-configuration-row">
<div class="col-12">
<select name="option[{{ option.id }}]" id=""
class="selectpicker select-option-icon select-option-icon-{{ option.id }}"
data-live-search="false" data-option="{{ option.id }}"
title="{{ option.title|trans }}">
{% for value in option.options %}
{% set optionTitle = value.title %}
{% if basePrice == 'net' %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.discount |price(currency, precision) ~ optionsNoVatTxt %}
{% set optionOriginalPrice = '+ ' ~ value.price |price(currency, precision) ~ optionsNoVatTxt %}
{% else %}
{% set optionPrice = '+ ' ~ value.price |price(currency, precision) ~ optionsNoVatTxt %}
{% endif %}
{% else %}
{% if value.discounted %}
{% set optionPrice = '+ ' ~ value.vatDiscounted |price(currency, precision) %}
{% set optionOriginalPrice = '+ ' ~ value.vatPrice |price(currency, precision) %}
{% else %}
{% set optionPrice = '+ ' ~ value.vatPrice |price(currency, precision) %}
{% endif %}
{% endif %}
<option value="{{ value.id }}"
data-price="{{ value.vatPrice }}"
data-net-price="{{ value.price }}"
data-special="{{ value.discounted and value.vatDiscounted > 0 ? value.vatDiscounted : 0 }}"
data-net-special="{{ value.discounted and value.discount > 0 ? value.discount : 0 }}"
{% if customerTypeId == 2 %}
data-suggested-price="{{ customerTypeId == 2 and value.vatSuggestedPrice > 0 ? value.vatSuggestedPrice : 0 }}"
data-suggested-net-price="{{ customerTypeId == 2 and value.suggestedPrice > 0 ? value.suggestedPrice : 0 }}"
{% endif %}
data-content="{# <div class='icon-container me-3'>{% if value.image is defined %}<img decoding='async' src='{{ value.image }}'>{% elseif value.productId == 0 %}<i class='far fa-ban mt-auto mb-auto fa-2x'></i>{% endif %}</div> #}<span class='ms-0 me-auto'>{{ optionTitle|trans }}</span>{% if value.discounted %} <span class='option-original-price'>{{ optionOriginalPrice }}</span> <span class='option-price'>{{ optionPrice }}</span>{% else %} <span class='option-price'>{{ optionPrice }}</span> {% endif %}">
{{ optionTitle|trans }} {{ optionPrice }}
</option>
{% endfor %}
<option value="247" data-dont-want="1" data-price="0" data-special="0"
data-content="<span class='ms-0 me-auto'>{{ 'Dont need' | trans }}</span><span class='option-price'>+ 0 {{ currency }}</span>">{{ 'Dont need' | trans }}
+ 0 {{ currency }}</option>
</select>
</div>
</div>{# <div class='icon-container me-3'><i class='far fa-ban mt-auto mb-auto fa-2x'></i></div> #}
{% endfor %}
</div>
</div>
<div>
<a class="more-collapse" data-bs-toggle="collapse" href="#moreOptions" role="button"
aria-expanded="false" aria-controls="moreOptions">
{{ 'Other accessories' | trans }}...
</a>
</div>
{% else %}
</div>
{% endif %}
{% endif %}
{% if not orderable %}
<div class="ready-box with-windows collapse show">
<div class="row">
<div class="col-sm-12">
<div>
{{- 'Product is not orderable at the moment!'|trans -}}
</div>
</div>
</div>
</div>
{% endif %}
{% if orderable %}
<div class="price-row">
<div class="row">
<div class="col-12">
{% if basePrice == 'net' %}
<div class="product-price {{ coupon is defined and coupon.code != "MACLICK" ? 'coupon-is-active' : '' }} mb-1 wholesale-style"
data-price="{{ priceWoVAT }}" data-gross-price="{{ price }}"
data-special="{{ isDiscounted ? rawDiscountPriceWoVAT : 0 }}"
data-gross-special="{{ isDiscounted ? special : 0 }}"
data-suggested-price="{{ suggestedPrice }}"
data-suggested-gross-price="{{ suggestedVatPrice }}">
<span class="w-100 mb-2">{{ 'Net price'|trans }}:</span>
{% if special %}
<div class="special-price me-2">
<span class="price-value">{{- rawDiscountPriceWoVAT |price(currency, precision) -}}</span>
</div>
<div class="old-price mt-auto">
<span>{{- priceWoVAT |price(currency, precision) -}}</span>
</div>
<i class="fas fa-info-circle ms-1" data-bs-toggle="tooltip"
data-bs-title="{{ 'Product price tooltip info'|trans }}"></i>
<span class="price-savings special my-1">
<b>{{- 'Savings' | trans }}: {{ ( priceWoVAT - rawDiscountPriceWoVAT ) |price(currency, precision) }}</b>
</span>
{% else %}
<div class="standard-price w-100">
<span>{{ priceWoVAT |price(currency, precision) }}</span>
</div>
{% endif %}
{% set priceToShow = special ? special : price %}
<div class="prices-include-vat">
{{- 'Price with VAT' | trans }}
: {{ priceToShow |price(currency, precision) -}}
</div>
</div>
{% elseif customerTypeId == 2 %}
<div class="product-price {{ coupon is defined and coupon.code != "MACLICK" ? 'coupon-is-active' : '' }} wholesale-style mb-1"
data-price="{{ price }}" data-special="{{ special }}"
data-suggested-price="{{ suggestedPrice }}"
data-suggested-gross-price="{{ suggestedVatPrice }}">
{% if special %}
<span class="w-100 mb-2">{{ 'Price with VAT'|trans }}:</span>
<span class="old-price mt-auto width-100">{{ price|price(currency, precision) }}</span>
<span class="special-price me-2 width-100">{{ special|price(currency, precision) }}</span>
<i class="fas fa-info-circle ms-2" data-bs-toggle="tooltip"
data-bs-title="{{ 'Product price tooltip info'|trans }}"></i>
<span class="price-savings"><b>{{ 'Savings' | trans }}: {{ (price - special) |price(currency, precision) }}</b></span>
<span class="without-vat">{{ 'without VAT' | trans }}: {{ rawDiscountPriceWoVAT |price(currency, precision) }}</span>
{% else %}
<span class="w-100 mb-2">{{ 'Price with VAT'|trans }}:</span>
<div class="standard-price mt-auto w-100">
<span>{{ price|price(currency, precision) }}</span>
</div>
<span class="without-vat ms-1">
{{ 'without VAT' | trans }}: {{ priceWoVAT |price(currency, precision) }}
</span>
{% endif %}
</div>
{% else %}
<div class="product-price mb-1 {{ coupon is defined and coupon.code != "MACLICK" ? 'coupon-is-active' : '' }}"
data-price="{{ price }}" data-special="{{ special }}">
{% if special %}
<span class="special-price me-2">{{ special|price(currency, precision) }}</span>
<span class="old-price mt-auto">{{ price|price(currency, precision) }}</span>
<i class="fas fa-info-circle ms-2" data-bs-toggle="tooltip"
data-bs-title="{{ 'Product price tooltip info'|trans }}"></i>
<span class="price-savings mt-1"><b>{{ 'Savings' | trans }}: {{ (price - special) |price(currency, precision) }}</b>{% if basePrice == 'gross' %} ({{ 'Total price (with VAT)' | trans }}){% endif %}</span>
{% else %}
<span id="grossPrice"> {{ price|price(currency, precision) }} </span>
<span class="price-savings mt-1 {{ coupon is defined and coupon.code != "MACLICK" ? 'coupon-is-active' : '' }}">
{{- 'Total price (with VAT)' | trans -}}
</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% else %}
<div class="price-row">
<div class="row">
<div class="col-12">
<div class="total-price mb-1">{{ 'Last known price' | trans }}:</div>
<div class="product-price mb-1 {{ coupon is defined and coupon.code != "MACLICK" ? 'coupon-is-active' : '' }}"
data-price="{{ price }}" data-special="{{ special }}">
{% if basePrice == 'gross' %}
{% if special %}
<span class="special-price me-2">{{ special|price(currency, precision) }}</span>
<span class="old-price mt-auto">{{ price|price(currency, precision) }}</span>
<i class="fas fa-info-circle ms-2" data-bs-toggle="tooltip"
data-bs-title="{{ 'Product price tooltip info'|trans }}"></i>
<span class="price-savings mt-1"><b>{{ 'Savings' | trans }}: {{ (price - special)|price(currency, precision) }}</b> ({{ 'Total price (with VAT)' | trans }})</span>
{% else %}
{{ price|price(currency, precision) }}
{% endif %}
{% else %}
{% if special %}
<span class="special-price me-2">{{ rawDiscountPriceWoVAT|price(currency, precision) }}</span>
<span class="old-price mt-auto">{{ priceWoVAT|price(currency, precision) }}</span>
<i class="fas fa-info-circle ms-2" data-bs-toggle="tooltip"
data-bs-title="{{ 'Product price tooltip info'|trans }}"></i>
<span class="price-savings mt-1"><b>{{ 'Savings' | trans }}: {{ (priceWoVAT - rawDiscountPriceWoVAT)|price(currency, precision) }}</b></span>
{% else %}
{{ priceWoVAT|price(currency, precision) }}
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% if customerTypeId == 2 and suggestedPrice > 0 %}
<div class="suggested-price-row">
<div class="suggested-price-cell d-flex flex-column align-items-left justify-content-center">
<span><b>{{ 'Suggested selling price' | trans }}:</b></span>
<span>
{{- suggestedPrice|price(currency, precision) }} ({{ 'without VAT' | trans | lower }}) / {{ suggestedVatPrice|price(currency, precision) }} ({{ 'Price with VAT' | trans | lower }})
</span>
</div>
<div class="text-sm-left text-md-center suggested-price-cell suggested-price-profit">
<span>{{ 'Your profit' | trans }}:</span>
<strong>{{ profitPercentage }}%</strong>
</div>
</div>
{% endif %}
{% if orderable %}
<div class="no-os-warning d-none" id="no-os-warning"><i
class="fas fa-info-circle"></i> {{ 'Choose an operation system' | trans }}</div>
<div class="row product-cart-row mb-1">
<div class="col-12 d-flex flex-column">
{% if coupon is defined and coupon.showCouponBadgeOnWebsite %}
{% if coupon.code == "MACLICK" %}
<div class="coupon-list product-show" style="justify-content: space-around">
<span style="font-weight: 600">
{{ 'MACLICK coupon text'|trans|raw }}
</span>
<span class="copy-svg" id="copy-svg"
onclick="copyToClickBoard('{{ coupon.code }}')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"
style="stroke: currentColor; stroke-width: 1;">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
</svg>
</span>
</div>
{% else %}
<div class="coupon-list product-show">
<span>
{{ 'Coupon display'|trans({'discount': coupon.discount, 'code': coupon.code}) }}
</span>
<span>
{{ coupon.priceWithCoupon|price(currency, precision) }}
</span>
</div>
{% endif %}
{% endif %}
{%- if hasStockItemAlbum -%}
<button
type="button"
data-bs-target="#stockItemSelectModal"
data-bs-toggle="modal"
class="btn btn-primary btn-product w-100 rounded-pill m-auto text-nowrap"
>
<span>
{{- 'Select product' | trans }}
</span><i class="fas fa-camera" style="font-size: 22px;"></i>
</button>
{%- else -%}
<button
id="button-cart"
class="btn btn-primary btn-product btn-add-to-cart m-auto"
data-loading-text="{{ 'Loading' | trans }}"
>
<span>
{{- 'Add to cart' | trans -}}
</span><i class="fas fa-shopping-cart" style="font-size: 17px;"></i>
</button>
{%- endif -%}
</div>
</div>
<input type="hidden" name="product_id" value="{{ product_id }}"/>
{% endif %}
<div class="product-benefit-list py-3 p-md-3">
{% if showNorton is defined and showNorton %}
<div class="product-benefit-item mb-3">
<img decoding="async" src="{{ asset('theme/images/icon/nortonLogo.svg') }}"
alt="{{ 'NortonProductShowText'|trans }}" class="me-2 me-mb-3">
<p class="mb-0">{{- 'NortonProductShowText'|trans -}}</p>
<a type="button" title="{{ 'More info'|trans }}" href="{{ nortonUrl }}">
 <i class="fas fa-info-circle"></i>
</a>
</div>
{% endif %}
{%- if orderable and customerTypeId == 1 -%}
<div class="product-benefit-item mb-3">
<img decoding="async" src="{{ asset('theme/images/icon/clock.svg') }}"
alt="{{ estimated_deliver_date|raw }}" class="me-2 me-mb-3">
<p class="mb-0">
{{- estimated_deliver_date|raw -}}
{%- if typeId != const('ProductType::PRODUCT_TYPE_ID_INTERACTIVE_BOARD') -%}
<button
data-bs-target="#shippingListModal"
data-bs-toggle="modal"
class="delivery-info-modal"
>
{{- 'Delivery link for modal'|trans -}}...
</button>
{%- endif -%}
</p>
</div>
{%- endif -%}
<div class="product-benefit-item mb-3">
{%- set currentDate = "now"|date('Ymd') -%}
{%- set freePacketaShipping = freePacketaShipping is defined and freePacketaShipping == true -%}
{%- set deliveryInfo = freeShipping
? '<b>'~'Product delivery info free'|trans~'</b>'
: freePacketaShipping
? 'Product delivery info free packeta'|trans
: 'Product delivery info'|trans({"title": shippingTitle, "price": shippingCost | price('', precision)}) | replace({',00':''}) -%}
<img decoding="async" src="{{ asset('theme/images/icon/truck.svg') }}" alt="{{ deliveryInfo }}"
class="me-2 me-mb-3">
<p class="mb-0">{{- deliveryInfo|raw -}}</p>
</div>
{% if app.session.get('domainId') != const('Domain::DOMAIN_ID_WS_EU') %}
<div class="product-benefit-item mb-3">
<img decoding="async" src="{{ asset('theme/images/icon/checkmark.svg') }}"
alt="{{ 'Warranty advantage text' | trans({'year': warrantyYear}) | replace({'<b>': '', '</b>': ''}) }}"
class="me-2 me-mb-3">
{% if typeId != 110 %}
<p class="mb-0">{{ 'Warranty advantage text' | trans({'year': warrantyYear})|raw }}</p>
{% else %}
<p class="mb-0">{{ '6 months warranty' | trans|raw }}</p>
{% endif %}
</div>
{% endif %}
<div class="product-benefit-item mb-3">
{# Pénzvisszafizetési garancia switchDate-ig #}
{% set currentDate = "now"|date("Y-m-d") %}
{% set startDate = "2025-12-14" %}
{% set endDate = "2025-12-21" %}
<img decoding="async" src="{{ asset('theme/images/icon/calendar.svg') }}"
alt="{{ 'Payback advantage text' | trans({'day': priceWarrantyDay}) | replace({'<b>': '', '</b>': ''}) }}"
class="me-2 me-mb-3">
{% if currentDate > startDate and currentDate < endDate %}
<p class="mb-0"
style="color: #B91F1C">{{ 'Payback advantage text jan' | trans | replace({'<br>': ''}) | raw }}</p>
{% else %}
<p class="mb-0">{{ 'Payback advantage text' | trans({'day': priceWarrantyDay}) | replace({'<br>': ''}) |raw }}</p>
{% endif %}
</div>
<div class="product-benefit-item mb-2 me-mb-3">
<img decoding="async" src="{{ asset('theme/images/icon/benefit-recycle.svg') }}"
alt="{{ 'Stabil advantage text' | trans }}" class="me-2 me-mb-3">
<p class="mb-0">{{ 'Stabil advantage text'|trans|raw }}</p>
</div>
</div>
<div class="other-features mb-4">
{% if isPriceMonitorActivated %}
<button type="button" class="btn d-none d-sm-block active" data-bs-toggle="modal"
data-bs-target="#modal-price-monitor" title="{{ 'Price monitor activated' |trans }}">
<i class="fas fa-tag mx-2"></i>
<span>{{ 'Price monitor' |trans }}</span>
</button>
{% else %}
<button type="button" class="btn d-sm-block" data-bs-toggle="modal"
data-bs-target="#modal-price-monitor">
<i class="fas fa-tag mx-2"></i>
<span>{{ 'Price monitor' |trans }}</span>
</button>
{% endif %}
{% if typeId in [
const('ProductType::PRODUCT_TYPE_ID_NOTEBOOK'),
const('ProductType::PRODUCT_TYPE_ID_PC'),
const('ProductType::PRODUCT_TYPE_ID_MONITOR')
] %}
{% if app.session.has('productCompare') and product_id in app.session.get('productCompare') %}
<button type="button" class="btn d-none d-sm-block active" id="button-compare"
title="{{ 'Compare' |trans }}" data-product="{{ product_id }}">
<i class="fas fa-balance-scale mx-2"></i>
<span>{{ 'Compare' |trans }}</span>
</button>
{% else %}
<button type="button" class="btn d-sm-block" id="button-compare"
title="{{ 'Compare' |trans }}" data-product="{{ product_id }}">
<i class="fas fa-balance-scale mx-2"></i>
<span>{{ 'Compare' |trans }}</span>
</button>
{% endif %}
{% endif %}
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"description": "{{ description }}",
"brand": "{{ brand }}",
"sku": "{{ model }}",
"name": "{{ title|replace({'/': '-'}) }}",
"image": "{% if images|length > 0 %}{{ images|first.thumb }}{% endif %}",
"offers": {
"@type": "Offer",
"availability": "{% if available > 0 %}http://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}",
"shippingDetails": {
"deliveryTime": {
"@type": "ShippingDeliveryTime",
"handlingTime": {
"@type": "QuantitativeValue",
"minValue": 0,
"maxValue": 2,
"unitCode": "DAY"
},
"transitTime": {
"@type": "QuantitativeValue",
"minValue": 1,
"maxValue": 2,
"unitCode": "DAY"
}
},
"shippingRate": {
"@type": "MonetaryAmount",
"value": {{ minShippingPrice }},
{% if defaultLocale != 'en' -%}
"maxValue": {{ maxShippingPrice }},
{% endif -%}
"currency": "{{ currencyForShippingRate }}"
},
"shippingDestination": {
"@type": "DefinedRegion",
"addressCountry": "{{ addressCountry }}"
}
},
"price": "{% if special %}{{ special }}{% else %}{{ price }}{% endif %}",
"priceCurrency": "{% if currency == 'Ft' %}HUF{% else %}EUR{% endif %}",
"url": "{{ app.request.uri }}"
}
}
</script>
</div>
<div class="product-help-box">
<div class="row mb-md-4">
{% if (milpayInfo is defined and milpayInfo is not empty) or showKlarna %}
{% if app.session.get('domainId') == 1 %}
{% if app.session.get('languageId') == 1 %}
{% set local = 'sk-SK' %}
{% elseif app.session.get('languageId') == 2 %}
{% set local = 'sk-SK' %}
{% elseif app.session.get('languageId') == 4 %}
{% set local = 'en-SK' %}
{% endif %}
{% elseif app.session.get('domainId') == 3 %}
{% if app.session.get('languageId') == 2 %}
{% set local = 'hu-HU' %}
{% elseif app.session.get('languageId') == 4 %}
{% set local = 'en-HU' %}
{% endif %}
{% elseif app.session.get('domainId') == 9 %}
{% if app.session.get('languageId') == 1 %}
{% set local = 'cs-CZ' %}
{% elseif app.session.get('languageId') == 3 %}
{% set local = 'cs-CZ' %}
{% elseif app.session.get('languageId') == 4 %}
{% set local = 'en-CZ' %}
{% endif %}
{% elseif app.session.get('domainId') == 11 %}
{% if app.session.get('languageId') == 1 %}
{% set local = 'sk-SK' %}
{% elseif app.session.get('languageId') == 2 %}
{% set local = 'en-SK' %}
{% elseif app.session.get('languageId') == 3 %}
{% set local = 'cs-CZ' %}
{% elseif app.session.get('languageId') == 4 %}
{% set local = 'en-SK' %}
{% endif %}
{% endif %}
<div class="alert alert-info p-3 mt-3 mb-md-1 instacash-info" role="alert">
<strong class="mb-1">{{ "paymentInInstalments.label"|trans }}</strong>
<div class="instacash-klarna-info-buttons">
{% if showKlarna %}
{% if app.environment == 'dev' %}
{% set klarna_client_identifier = klarna_test.client_identifier %}
{% else %}
{% if app.session.get('domainId') == const('Domain::DOMAIN_ID_RT_HU') %}
{% set klarna_client_identifier = klarna_hu.client_identifier %}
{% elseif app.session.get('domainId') == const('Domain::DOMAIN_ID_RT_SK') %}
{% set klarna_client_identifier = klarna_sk.client_identifier %}
{% elseif app.session.get('domainId') == const('Domain::DOMAIN_ID_RT_CZ') %}
{% set klarna_client_identifier = klarna_cz.client_identifier %}
{% elseif app.session.get('domainId') == const('Domain::DOMAIN_ID_RT_EU') %}
{% set klarna_client_identifier = klarna_eu.client_identifier %}
{% endif %}
{% endif %}
<script
async
data-environment="{{ app.environment == 'dev' ? 'playground' : 'production' }}"
src="https://js.klarna.com/web-sdk/v1/klarna.js"
data-client-id="{{ klarna_client_identifier }}">
</script>
<div>
<klarna-placement
data-key="credit-promotion-badge"
data-locale="{{ local }}"
data-purchase-amount="{{ (special == null ? price : special) * 100 }}"
id="klarna-placement-product-page"
></klarna-placement>
</div>
{% endif %}
{% if milpayInfo is defined and milpayInfo is not empty %}
{% set priceRange = (milpayInfo.minAmount|price('', precision))~"- "~(milpayInfo.maxAmount|price('', precision)) %}
<div class="instacash-holder">
<img src="{{ asset('theme/images/icon/milpay_logo_product_show.png') }}"
alt="milpay">
<p>
{{ "milpay.info"|trans({
"firstPayment": milpayInfo.firstPayment,
"currency": currency
})| raw }}
<a data-bs-target="#milpayMoreInfo" data-bs-toggle="modal"></a>
</p>
</div>
<div class="modal fade" id="milpayMoreInfo" tabindex="-1"
aria-labelledby="shippingListLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"
id="shippingListLabel">{{ 'Milpay prescore modal heading' | trans }}</h3>
<button type="button" class="btn-close custome-close-modal"
data-bs-dismiss="modal"
aria-label="{{ 'Close' |trans }}"><i
class="fal fa-times"></i>
</button>
</div>
<div class="modal-body p-4">
<h6 class="mb-3">{{ 'Chosen product'|trans }}</h6>
<div class="instacash-product-details d-flex flex-row flex-nowrap mb-4">
<div class="main-image">
{% if images|length > 0 %}
<img decoding="async"
src="{{ (images|first).additional }}"
alt="{{- h1_title -}}" width="120" height="90">
{% endif %}
</div>
<div class="main-info ms-3 d-flex flex-column justify-content-center align-items-start">
<span class="instacash-product-title fw-bold mb-1">{{- h1_title|raw -}}</span>
<span class="instacash-product-price">
{%- set priceToShow = special ? special : price -%}
{{- priceToShow|price(currency, precision) -}}
</span>
</div>
</div>
<div class="payment-details px-1">
<h6 class="mb-3">{{ 'Deferred payment details'|trans }}</h6>
<div class="payment-type-radios mb-4">
{% for periodItem in 0..3 %}
<div class="form-check p-2 d-flex align-items-center justify-content-start">
<img src="{{ asset('theme/images/icon/circle_loading_' ~ loop.index ~ '.svg') }}"
alt="Circle icon" width="30" height="30">
<label class="form-check-label ms-2"
for="exampleRadios1">
<strong>
{% if loop.first %}
{{- milpayInfo.firstPayment }} {{ currency }}
{% else %}
{{- milpayInfo.laterPayments }} {{ currency }}
{% endif %}
</strong>
<small>
{% if loop.first %}
{{ 'Instacash now payable'|trans }}
{% else %}
{{ "now"|date|date_modify("+" ~ periodItem ~ " month")|date("M")|trans }} {{ "now"|date('d.') }}
{% endif %}
</small>
</label>
</div>
{% endfor %}
</div>
<div class="d-flex w-100 flex-column instacash-description">
<ul>
<li>{{ "milpay.description.2"|trans }}</li>
<li>{{ "milpay.description.3"|trans }}</li>
<li>{{ "milpay.description.4"|trans }}</li>
<li>
{{ "milpay.description.5"|trans({
"range": priceRange,
"currency": currency
}) }}
</li>
<li>{{ "milpay.description.6"|trans }}</li>
<li>{{ "milpay.description.7"|trans }}</li>
<li>{{ "milpay.description.9"|trans }}</li>
{% if domainId == 1 %}
{% set link = 'https://www.furbify.sk/furbify-splatkova-platba' %}
{% elseif domainId == 3 %}
{% set link = 'https://www.furbify.hu/furbify-reszletfizetes' %}
{% elseif domainId == 9 %}
{% set link = 'https://www.furbify.cz/platba-na-splatky' %}
{% else %}
{% set link = 'https://www.furbify.sk/furbify-splatkova-platba' %}
{% endif %}
<li>{{ "milpay.description.8"|trans({'link': link}) | raw }}</li>
</ul>
</div>
<div class="d-flex w-100 flex-row justify-content-between">
<span>{{ 'APR'|trans }}</span>
<span>0 %</span>
</div>
<div class="d-flex w-100 flex-row justify-content-between">
<span>{{ 'Service fee'|trans }}</span>
<span>0 {{ currency }}</span>
</div>
<div class="d-flex w-100 flex-row justify-content-between">
<span><b>{{ 'Total amount'|trans }}</b></span>
<span><b>{{ priceToShow|price(currency, precision) }}</b></span>
</div>
<div class="d-flex w-100 flex-row justify-content-end mt-2">
<a href="{{ milpayInfo.prescoreLink }}"
target="_blank"
class="btn instacash-modal-button">{{ 'Start prescore'|trans }}</a>
</div>
<div class="d-flex w-100 flex-row justify-content-end mt-2 text-danger"
style="font-size: 12px">
{{ "milpay.warning" |trans }}
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="text-center other-info mt-2">
<a href="{% if domainId == 1 %}https://www.furbify.sk/furbify-splatkova-platba{% elseif (domainId == 9) %}https://www.furbify.cz/platba-na-splatky{% else %}https://www.furbify.hu/furbify-reszletfizetes{% endif %}"
target="_blank">{{ 'More informations'|trans }}</a>
</div>
</div>
</div>
{% endif %}
<div class="product-detail-help-box">
<div class="product-detail-help-box-head">
<div class="help-box-image" {% if app.session.get('domainId') == const('Domain::DOMAIN_ID_WS_EU') %} style="width: 0; height: 0; overflow: hidden;" {% endif %}>
{% if salesManager.photoFilename != '' %}
<img decoding="async"
src="{{ asset('theme/images/' ~ salesManager.photoFilename) }}"
alt="{{ salesManager.name }}" width="90" height="90">
{%- if "now"|date('w') in [1,2,3,4,5] and "now"|date('H') >= 8 and "now"|date('H') <= 16 -%}
<span class="user-status-active"></span>
{%- endif -%}
{% endif %}
</div>
<div class="help-box-right-side">
<div class="product-help-text">
<p>{{- 'If you have any questions about the product or you would like to order on phone, feel free to contact us!'|trans({'phoneNumber': salesManager.phoneNumber})|raw -}}</p>
</div>
{% if domainId in [7] %}
<strong>+421 (0) 220 512 060</strong>
{% elseif domainId in [11] %}
<strong>webshop@furbify.eu</strong>
{% else %}
<button
class="btn mt-2 help-box-callback"
id="product-detail-request-callback"
data-bs-toggle="modal" data-bs-target="#modal-callback"
>
<strong>{{ 'Request call back'|trans }}</strong>
</button>
{% endif %}
</div>
</div>
<div class="modal fade" id="modal-callback" tabindex="-1" data-bs-backdrop="static"
aria-labelledby="modalCallbackLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"
id="modalCallbackLabel">{{ 'Request call back'|trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="{{ 'Close' |trans }}"><i class="fal fa-times"></i></button>
</div>
<div class="modal-body">
<p>{{ 'Send us your phone number and we will call you back' | trans }}.</p>
<div class="product-callback-request-holder d-flex justify-content-center mt-2">
{{ macros.printCallbackRequest(product_id, loggedInCustomer) }}
</div>
</div>
</div>
</div>
</div>
</div>
{%- if
customerTypeId == 2 and
product_type_id in [
const('ProductType::PRODUCT_TYPE_ID_MONITOR'),
const('ProductType::PRODUCT_TYPE_ID_NOTEBOOK'),
const('ProductType::PRODUCT_TYPE_ID_PC'),
const('ProductType::PRODUCT_TYPE_ID_PC_SET'),
const('ProductType::PRODUCT_TYPE_ID_ALL_IN_ONE'),
const('ProductType::PRODUCT_TYPE_ID_SMARTPHONE')
] -%}
<div class="col-md-12 text-center mt-3">
<form action="{{ path('product_partner_label_download', {id: product_id}) }}" method="POST"
id="print-label-form" target="_blank">
<input type="number" name="print-label-price" required="required" min="0" step="1"
class="print-label-price" value="{{ suggestedVatPrice }}"> {{ currency }}
<button class="print-label" id="print-label"><i
class="fas fa-print"></i> {{ 'Print label' | trans }}</button>
</form>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="grey-background py-md-5">
<section class="container variant-list mobile-min-content-carousel">
<h2 class="mb-4">{{ 'variations'|trans }}:</h2>
<div id="variants-carousel" class="variant-list-wrapper owl-carousel">
{%- for i in 1..3 -%}
<a href="#" class="product-list-minimal-item empty">
<div class="min-image">
<img src="#" width="278" height="210">
<div class="quality-label label"></div>
</div>
<div class="min-details">
<h5></h5>
<span class="attribute-list"></span>
<div class="prices">
<span class="price"></span>
<strong class="price-for-discount"></strong>
</div>
</div>
</a>
{%- endfor -%}
</div>
</section>
</div>
<div class="container mobile-full">
{% set haveProductModelDescription = productModelDescription is defined %}
<ul class="nav nav-tabs product-info-holder" id="myTab" role="tablist">
{% if haveProductModelDescription %}
<li class="nav-item product-info-nav-item" role="presentation">
<button class="nav-link active" id="product-model-description-tab" data-bs-toggle="tab"
data-bs-target="#product-model-description" type="button" role="tab"
aria-controls="product-model-description" aria-selected="true">
{{ "Description" | trans }}
</button>
</li>
{% endif %}
<li class="nav-item product-info-nav-item" role="presentation">
<button class="nav-link {% if haveProductModelDescription == false %} active {% endif %}"
id="full-specification-tab" data-bs-toggle="tab" data-bs-target="#full-specification"
type="button" role="tab" aria-controls="full-specification" aria-selected="false">
{{ 'Full specification' | trans }}
</button>
</li>
<li class="nav-item product-info-nav-item" role="presentation">
<button class="nav-link" id="shipping-and-pay-tab" data-bs-toggle="tab"
data-bs-target="#shipping-and-pay" type="button" role="tab" aria-controls="shipping-and-pay"
aria-selected="false">
{{ 'Shipping & pay' | trans }}
</button>
</li>

{# <li class="nav-item product-info-nav-item" role="presentation">
<button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button"
role="tab" aria-controls="reviews" aria-selected="false">
{{ 'Reviews' | trans }} ({{ reviewCount }})
</button>
</li>#}
</ul>
<div class="tab-content" id="productInfoTab">
{% if haveProductModelDescription %}
<div class="tab-pane fade show active" id="product-model-description" role="tabpanel"
aria-labelledby="product-model-description-tab" style="margin-bottom: 30px">
{% if haveProductModelDescription %}
{{ productModelDescription | raw }}
{% endif %}
</div>
{% endif %}
<div class="tab-pane fade {% if haveProductModelDescription == false %} show active {% endif %}"
id="full-specification" role="tabpanel" aria-labelledby="full-specification-tab">
<div class="accordion my-2 my-md-4">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
{{ 'Full specification' | trans }}
</h2>
<div id="specificationCollapse" class="accordion-collapse collapse show"
aria-labelledby="headingOne">
<div class="accordion-body">
{% if 'Chromebook' in labels %}
<div class="alert alert-info py-2 mt-0 mb-3 border-0" role="alert">
{{- 'Chromebook OS alert'|trans|raw -}}
</div>
{% endif %}
<div class="">
<table class="table table-top-borderless">
<tbody>
{% for item in specificationList|slice(0, 10) %}
<tr>
<td width="30%">{{ item.title|trans }}</td>
<td>{{ item.content|raw }}</td>
</tr>
{% endfor %}
</tbody>
<tbody class="hidden-specification d-none">
{% for item in specificationList|slice(10, specificationList|length) %}
<tr>
<td width="30%">{{ item.title|trans }}</td>
<td style="text-align: justify; text-justify: inter-word;">{{ item.content|raw }}</td>
</tr>
{% endfor %}
</tbody>
<tbody>
<tr style="background-color: unset;">
<td colspan="2">
<button class="show-full-spec mt-2"
data-text-more="{{ 'Show full specification'|trans }}"
data-text-less="{{ 'Read less'|trans }}">
<span>{{ 'Show full specification'|trans }}</span>
<div class="arrow-icon"></div>
</button>
</td>
</tr>
</tbody>
</table>
{% if containerParts is not empty %}
{% for part in containerParts %}
<h3 class="pt-4">{{ part.title }}</h3>
<table class="table table-top-borderless">
{% for attribute in part.attributes %}
<tr>
<td width="30%">{{ attribute.title }}:</td>
<td>
{% if attribute.options %}
{% for option in attribute.options %}
<span class="fw-bold">{{ ( option.multiplier > 0 ? option.multiplier ~ ' x ' : '' ) ~ option.title }}</span>
<br>
{% endfor %}
{% endif %}
</td>
</tr>
{% endfor %}
</table>
{% endfor %}
{% endif %}
{% if additionalDetail != '' %}
<table class="col-sm-12">
<tr>
<td>
{{ additionalDetail | raw }}
</td>
</tr>
</table>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="shipping-and-pay" role="tabpanel" aria-labelledby="shipping-and-pay-tab">
<div class="accordion my-2 my-md-4">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
{{ 'Shipping & pay' | trans }}
</h2>
<div id="shippingPaymentCollapse" class="accordion-collapse collapse show"
aria-labelledby="headingTwo">
<div class="accordion-body">
{% set currentDate = "now"|date('Ymd') %}
<h3 class="mb-3">{{ 'Shipping type list'|trans }}:</h3>
<div class="w-100 mb-5">
{% for method in shippingMethods %}
<div class="d-flex shipping-payment-flex">
<div class="method-title">
{{- method.title -}}
</div>
<div class="method-info d-flex">
{% if method.price %}
{% if typeId in [
const('ProductType::PRODUCT_TYPE_ID_MONITOR'),
const('ProductType::PRODUCT_TYPE_ID_NOTEBOOK'),
const('ProductType::PRODUCT_TYPE_ID_PC'),
const('ProductType::PRODUCT_TYPE_ID_PC_SET'),
const('ProductType::PRODUCT_TYPE_ID_ALL_IN_ONE'),
const('ProductType::PRODUCT_TYPE_ID_TABLET'),
const('ProductType::PRODUCT_TYPE_ID_SMARTPHONE')
] and defaultLocale != 'en' and currentDate >= 20241123 and currentDate <= 20241130 %}
{% set shippingPrice = 'Free'|trans %}
{% else %}
{% set shippingPrice = method.price | price(currency, precision) %}
{% endif %}
<span>{{- shippingPrice -}}{% if method.type == const('DomainShippingType::SHIPPING_TYPE_MPL_ID') %} + {{ 'Package fee'|trans|lower }} 10000 Ft{% endif %}</span>
{%- if method.deliveryDays != 0 -%}
<span class="d-none d-md-block">
({{ 'shipping working days' | trans({'days': method.deliveryDays}) }})
</span>
{%- endif -%}
{% endif %}
</div>
</div>
{% endfor %}
</div>
<h3 class="mb-3">{{ 'Payment type list'|trans }}:</h3>
<div class="w-100 mb-5">
{% for method in paymentMethods %}
<div class="d-flex shipping-payment-flex">
<div class="method-title">
<span>{{- method.title -}}</span>
{%- if method.plusInfo -%}
<span class="d-none d-md-block">({{ method.plusInfo }})</span>
{%- endif -%}
</div>
<div class="method-info d-flex method-label-price{% if (method.price == 0) %} free{% endif %}">
{%- if method.price > 0 -%}
{{- method.price | price(currency, precision) }}
{%- else -%}
{{- 'Free'|trans -}}
{%- endif -%}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>

{#<div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
<div class="accordion my-2 my-md-4">
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
{{ 'Reviews' | trans }} ({{ reviewCount }})
</h2>
<div id="reviewCollapse" aria-labelledby="headingThree">
<div class="accordion-body">
{% if reviewCount == 0 %}
<div class="alert alert-warning" role="alert">
{{ 'There are no reviews for this product' | trans }}
</div>
{% endif %}
<div class="row">
<div class="col-md-12 text-start mt-sm-5 mt-md-2 mb-5">
{% if reviewCount == 0 %}
{% if reviewsRedirectLink %}
<a class="redirect"
href="{{ reviewLinkWithFilter }}">{{ 'All <strong>{quality}</strong> quality {category} review...' | trans({'quality': quality, 'category': type}) | raw }}</a>
{% endif %}
<h3 class="d-block">{{ 'Did you buy this product?' | trans }}</h3>
{% else %}
<p class="review-stars-display mb-0">{{ reviewStars|number_format(1, '.', '') }}</p>
<div class="review-stars pt-0">
{% for star in 1..5 %}
<i class="review-star{% if reviewStars >= star %} review-star-full{% endif %}{% if reviewStars < star and reviewStars == (star - 0.5) %} review-star-half-full{% endif %}"></i>
{% endfor %}
</div>
<p>{{ 'From {review_count} reviews in total.' | trans({'review_count':reviewCount}) }}</p>
{% endif %}
{% if reviewForm %}
<a href="#write" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="write" class="btn btn-primary"
style="color: white; text-decoration: none">{{ 'I want to review' | trans }}</a>
{% else %}
<p class="mb-4">{{ 'Share your experiences with others' | trans }}, <a
href="{{ path('customer_login') }}"
class="">{{ 'Submit a review' | trans }}</a></p>
{% endif %}
</div>
</div>
<div class="row collaps" id="write">
<div class="col testimonial-form-col">
<div class="testimonial-form pb-sm-0">
{% if reviewForm %}
{{ form_start(reviewForm, { 'attr': { 'enctype': 'multipart/form-data' }}) }}
<h3>{{ 'Send a review' | trans }}:</h3>
<div class="row mb-3">
{{- inputMacros.inputGroup(reviewForm.name, { 'cols': 'col-12' }) -}}
</div>
<div class="row mb-3">
{{- inputMacros.inputGroup(reviewForm.text, { 'cols': 'col-12' }) -}}
</div>
<div class="row">
<div class="col-sm-6">
<label class="form-label">{{ 'Rating' | trans }}</label>
<div class="d-flex flex-wrap mb-3 rating">
<div class="stars">
<i class="fas fa-star" data-star="1"></i>
<i class="fas fa-star" data-star="2"></i>
<i class="fas fa-star" data-star="3"></i>
<i class="fas fa-star" data-star="4"></i>
<i class="fas fa-star" data-star="5"></i>
</div>
<div id="description-for-clicked-star"
style="display: flex; margin-left: 15px; align-items: center;">
<span style="font-size: 13px; line-height: 1.4;"></span>
</div>
{%- if form_errors(reviewForm.stars) -%}
<div class="error-text m-0 w-100 flex-1"
style="padding-top: 12px;">{{ form_errors(reviewForm.stars) }}</div>
{%- endif -%}
</div>
</div>
</div>
<div class="row pb-5">
<div class="col-sm-12">
<label class="form-label">{{ 'Upload photos' | trans }}</label>
<br>
<input type="file" class="form-control" name="reviewImages[]"
id="reviewImages" accept="image/png,image/jpeg,image/jpg"
multiple="multiple"/>
<small>({{ '.jpg or .png file format' | trans }})</small>
</div>
</div>
<div class="buttons buttons-review pt-2">
<button type="submit"
class="btn btn-primary">{{ 'Send' | trans }}</button>
</div>
{{ form_widget(reviewForm.stars, { 'attr': { 'class': 'd-none' }}) }}
{{ form_end(reviewForm) }}
{% endif %}
</div>
</div>
</div>
<div id="review" class="row testimonial-list">
{% if reviewCount > 0 %}
<h3 class="d-block mt-3 mb-4 w-100 text-center">{{ 'Reviews for {product_family_name} product family from our customers' | trans({'product_family_name':title}) }}
:</h3>
{% endif %}
{% for review in reviews %}
<div class="col-12 mb-3">
<div class="testimonial clearfix mt-0">
<div class="testimonial-stars w-100 mb-md-3">
{% for star in 1..5 %}
<i class="fas fa-star{% if review.stars >= star %} yellow{% endif %}"></i>
{% endfor %}
<p class="ms-2"><strong>{{ review.stars }} / 5</strong></p>
</div>
<p class="d-block">{% if review.message != '' %}„{{ review.message }}” - {% endif %}
<strong>{{ review.name }}</strong></p>
<p class="testimonial-source-product m-0">
<small>{{ 'Purchased product' | trans }}
:<br><strong>{{ review.product_name }}</strong>
- {{ review.product_config }} {% if review.reviewDate is defined %}
<span class="mt-2 d-block">{{ 'Review date' | trans }}
: {{ review.reviewDate }}</span>{% endif %}</small></p>
{% if review.reviewImages is defined %}
<div class="row review-images">
{% for reviewImage in review.reviewImages %}
<div class="col-md-6">
<span>
<img decoding="async" src="{{ reviewImage.thumb }}"
alt="{{ title }} {{ 'review' | trans }} {{ review.name }} #{{ loop.index }}">
</span>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>#}
</div>
</div>
{% if similarProducts %}
<div class="grey-background py-md-5">
<section class="container mobile-min-content-carousel">
<h2 class="mb-4">{{ 'Similar products' | trans }}</h2>
<div class="owl-carousel" id="similar-products-carousel">
{{ macros.printProductListMinimal(similarProducts, currency, precision) }}
</div>
</section>
</div>
{% endif %}
{%- if defaultLocale in ['sk','hu'] and
product_type_id in [
const('ProductType::PRODUCT_TYPE_ID_MONITOR'),
const('ProductType::PRODUCT_TYPE_ID_NOTEBOOK'),
const('ProductType::PRODUCT_TYPE_ID_PC'),
const('ProductType::PRODUCT_TYPE_ID_PC_SET'),
const('ProductType::PRODUCT_TYPE_ID_ALL_IN_ONE')
] and
quality != 'New' -%}
<div class="container mobile-full">
<div class="product-furbishing-description">
{% set productDetailFooterTranslationKey = ('product.detail.footer.' ~ product_type_id) | trans({'year':warrantyYear}) | raw | split("</p>", 2) %}
<div>{{- productDetailFooterTranslationKey[0]|raw -}}</div>
<div class="collapse" id="category-extra-description">
<div>
{{- productDetailFooterTranslationKey[1]|raw -}}
</div>
</div>
<a
id="category-extra-description-toggle"
href="#category-extra-description"
role="button"
aria-expanded="false"
aria-controls="category-extra-description"
data-bs-toggle="collapse"
data-bs-target="#category-extra-description"
data-txt-read-more="{{ 'Read more'|trans }}"
data-txt-read-less="{{ 'Read less'|trans }}"
>
{{- 'Read more'|trans -}}
</a>
</div>
</div>
{% endif %}
{% if lastCacheUpdate is defined and showAdminLoginPanel %}
<input type="hidden" id="input-last-cache-update" value="{{ lastCacheUpdate |date('d.m.Y H:i') }}">
{% endif %}
{{ include(template_from_string(contentBottom)) }}
</div>
{% if orderable %}
<div class="modal fade" id="modal-price-monitor" tabindex="-1" data-bs-backdrop="static"
aria-labelledby="modalPriceMonitorLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalPriceMonitorLabel">{{ 'Price monitor' |trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="{{ 'Close' |trans }}"><i class="fal fa-times"></i></button>
</div>
<div class="modal-body">
<div class="success d-none pt-3">
<p class="text-center">
<img decoding="async" src="/theme/images/price-monitor-success-icon.svg" width="78"
height="78" alt="{{ 'Price monitor activated' |trans }}">
</p>
<p class="text-center mb-4">{{ 'Price monitor activated' |trans }}</p>
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">{{ 'Back to shopping' |trans }}</button>
</div>
<div class="form">
<div class="mb-3">
<label class="form-label"
for="price-monitor-value">{{ 'Notify me when the product price is lower than' |trans }}
:</label>
<div class="input-group">
{% if special %}
{% set currentPrice = special %}
{% else %}
{% set currentPrice = price %}
{% endif %}
<input type="text" class="form-control" id="price-monitor-value" min="1"
max="{{ currentPrice }}" value=""
aria-describedby="price-monitor-value-addon">
<input type="hidden" id="price-monitor-current-price" value="{{ currentPrice }}">
<button class="input-group-text">
<span id="price-monitor-value-addon">{{ currency }} ({{ 'with VAT' |trans }})</span>
</button>
</div>
<small>{{ 'Current price'|trans }}:
<strong>{{ currentPrice | price(currency, precision) }}</strong></small>
</div>
<div class="mb-3">
<label class="form-label" for="price-monitor-name">{{ 'Firstname' |trans }}:</label>
<input type="text" class="form-control" id="price-monitor-name"
value="{{ ( isLoggedIn and customer.firstName is defined ? customer.firstName : '' ) }}">
</div>
<div class="mb-3">
<label class="form-label" for="price-monitor-email">{{ 'Email' |trans }}:</label>
<input type="email" class="form-control" id="price-monitor-email"
value="{{ ( isLoggedIn and customer.email is defined ? customer.email : '' ) }}">
<div class="text-warning mt-1 d-none"></div>
</div>
<button id="button-add-price-monitor"
class="btn btn-primary">{{ 'Set price monitoring' |trans }}</button>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if cetelem_calculator %}
<div class="modal fade" id="cetelemModal" tabindex="-1" aria-labelledby="cetelemLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="cetelemLabel">{{ 'Cetelem loan' | trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="{{ 'Close' |trans }}"><i class="fal fa-times"></i></button>
</div>
<div class="modal-body p-4">
<p>{{ 'cetelem calculator description' | trans({'cetelem_desc_page_link' : cetelem_desc_page_link}) | raw }}</p>
<div id="cetelem-calc-container" data-country="{{ cetelem_calculator_country }}"><i
class="far fa-cog fa-spin"></i></div> {# Loaded dynamically with ajax if needed #}
</div>
</div>
</div>
</div>
{% endif %}
{% if quatro_calculator %}
<div class="modal fade" id="quatroModal" tabindex="-1" aria-labelledby="quatroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="quatroLabel">{{ 'Quatro loan' | trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="{{ 'Close' |trans }}"><i class="fal fa-times"></i></button>
</div>
<div class="modal-body p-0">
<div id="quatro-calc-container" class="d-flex"></div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="modal fade" id="shippingListModal" tabindex="-1" aria-labelledby="shippingListLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="shippingListLabel">{{ 'Delivery prices' | trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close' |trans }}"><i
class="fal fa-times"></i></button>
</div>
<div class="modal-body px-0 py-4">
{% set currentDate = "now"|date('Ymd') %}
{% for method in shippingMethods %}
<div class="method-row" data-restriction="{{ method.restriction | json_encode() }}"
data-title="{{ method.title }}" data-type="{{ method.type }}"
data-price="{{ method.price > 0 ? method.price | price(currency, precision) : 'false' }}">
<label for="shipping-method-{{ method.id }}">
<div class="method-label-pic">
{% if method.icon %}
<img decoding="async" src="{{ asset('theme/images/' ~ method.icon) }}" alt=""
width="42" height="42"/>
{% endif %}
</div>
<div class="method-label-text">
<span><strong>{{ method.title }}</strong>
{% if method.price %}
{% if typeId in [
const('ProductType::PRODUCT_TYPE_ID_NOTEBOOK'),
]
and method.type == const('DomainShippingType::SHIPPING_TYPE_PACKETA_PICKUP_POINT_ID')
and currentDate >= 20250519
and currentDate <= 20250630 %}
{% set shippingPrice = 'Free'|trans %}
{% else %}
{% set shippingPrice = method.price | price(currency, precision) %}
{% endif %}
<br/>
<small>{{ shippingPrice }}{% if method.type == const('DomainShippingType::SHIPPING_TYPE_MPL_ID') %} + {{ 'Package fee'|trans|lower }} {{ MPL_PACKAGE_FEE }} Ft{% endif %}</small>
{% endif %}
{% if method.type == 8 %}
<div id="packeta-point-address">{% if packetaPickupPointTitle is defined and packetaPickupPointTitle != '' %}{{ packetaPickupPointTitle }}{% endif %}</div>
{% endif %}
</span>
</div>
<span class="method-delivery-date">
{% if method.deliveryDays != 0 %}
{{ 'shipping working days' | trans({'days': method.deliveryDays}) }}
{% endif %}
</span>
</label>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="modal fade modal-service-pack-info" id="modal-service-pack-info" tabindex="-1"
aria-labelledby="modalPriceMonitorLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="servicePackTitle">{{ 'Software pack' | trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close' |trans }}"><i
class="fal fa-times"></i></button>
</div>
<div class="modal-body">
<p>{{ 'Service pack description' | trans | raw }}</p>
<h6><strong>{{ 'Service pack list header' | trans }}:</strong></h6>
<ul>
<li>{{ 'Picture browser' | trans }}</li>
<li>{{ 'Media players' | trans }}</li>
<li>{{ 'CD-DVD drive' | trans }}</li>
<li>{{ 'Music player' | trans }}</li>
<li>{{ 'File zippers' | trans }}</li>
<li>{{ 'File managers' | trans }}</li>
<li>{{ 'Open office' | trans }}</li>
<li>{{ 'Web browsers' | trans }}</li>
</ul>
<small>({{ 'Service pack bottom info' | trans }})</small>
</div>
</div>
</div>
</div>
<div class="add-to-cart-always-visible pt-2">
<div class="row mb-1 mr-0">
<div class="container col-12 col-md-10 margin-auto">
<div class="row p-2 px-4 vertical-center">
<div class="col-8 col-md-6 col-lg-8 p-0 m-0">
<div class="row p-0 m-0">
<div class="col-12 col-md-12 p-0 m-0 ">
<strong class="footer-item-title">
{{- title|raw -}}
</strong>
</div>
<div class="col-12 col-md-none vertical-center p-0 m-0">
<strong id="grossPriceFooter" class="d-inline d-md-none text-left mb-0">
{% if basePrice == 'net' %}
{% if special %}
{{- rawDiscountPriceWoVAT |price(currency, precision) -}}
{% else %}
{{ priceWoVAT |price(currency, precision) }}
{% endif %}
{% elseif customerTypeId == 2 %}
{% if special %}
{{ special|price(currency, precision) }}
{% else %}
{{ price|price(currency, precision) }}
{% endif %}
{% else %}
{% if special %}
{{ special|price(currency, precision) }}
{% else %}
{{ price|price(currency, precision) }}
{% endif %}
{% endif %}
</strong>
</div>
</div>
</div>
<div class="col-4 col-md-6 col-lg-4 vertical-center flex-end">
<strong id="grossPriceFooter2" class="d-none d-md-inline mx-2 mb-0">
{% if basePrice == 'net' %}
{% if special %}
{{- rawDiscountPriceWoVAT |price(currency, precision) -}}
{% else %}
{{ priceWoVAT |price(currency, precision) }}
{% endif %}
{% elseif customerTypeId == 2 %}
{% if special %}
{{ special|price(currency, precision) }}
{% else %}
{{ price|price(currency, precision) }}
{% endif %}
{% else %}
{% if special %}
{{ special|price(currency, precision) }}
{% else %}
{{ price|price(currency, precision) }}
{% endif %}
{% endif %}
</strong>
{%- if hasStockItemAlbum -%}
<button
type="button"
data-bs-target="#stockItemSelectModal"
data-bs-toggle="modal"
class="btn btn-primary btn-product w-100 rounded-pill m-auto text-nowrap"
>
<span>
{{- 'Select product' | trans }}
</span><i class="fas fa-camera" style="font-size: 22px;"></i>
</button>
{%- else -%}
<button
id="button-cart-footer"
class="btn btn-primary btn-product btn-add-to-cart m-auto footer-cart-button mx-0 "
data-loading-text="{{ 'Loading' | trans }}"
>
<span>
{{- 'Add to cart' | trans -}}
</span>
<i class="fas fa-shopping-cart footer-cart-button"></i>
</button>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-ssd-change-info" tabindex="-1" aria-labelledby="modalSsdChangeInfo"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="ssdChangeInfo"> {{ 'ssdChangeInfo.label' | trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close' |trans }}"><i
class="fal fa-times"></i></button>
</div>
<div class="modal-body">
<h6>{{ 'ssdChangeInfo.info'|trans|raw }}</h6>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-keyboard-reprint-info" tabindex="-1" aria-labelledby="modalKeyboardReprintInfo"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="keyboardReprintInfo"> {{ 'keyboardReprintInfo.label' | trans }}</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close' |trans }}"><i
class="fal fa-times"></i></button>
</div>
<div class="modal-body">
<h6>{{ 'keyboardReprintInfo.info'|trans|raw }}</h6>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-new-battery-info" tabindex="-1" aria-labelledby="modalNewBatteryInfo"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalNewBatteryInfo">
{{ 'newBatteryInfo.label' | trans }}
</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close' |trans }}"><i
class="fal fa-times"></i></button>
</div>
<div class="modal-body">
<div class="d-flex gap-2 align-items-start p-3 rounded-3" style="background: #fff8e1; border-left: 4px solid #f59e0b;">
<i class="fal fa-clock mt-1" style="color: #f59e0b; flex-shrink: 0;"></i>
<p class="mb-0 small">{{ 'newBatteryInfo.info'|trans|raw }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-bazaar-warning" tabindex="-1" aria-labelledby="modalBazaarWarning" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalBazaarWarning"><i class="far fa-exclamation-triangle mt-1 me-1"></i> {{ 'modal.bazaar.title' | trans }}</h3>
</div>
<div class="modal-body">
<p>{{ 'modal.bazaar.info' |trans }}</p>
<strong>{{ 'modal.bazaar.shortcomings' |trans }}:</strong>
<ul>
<li>{{ 'modal.bazaar.caseA' |trans }}</li>
<li>{{ 'modal.bazaar.caseB' |trans }}</li>
<li>{{ 'modal.bazaar.caseC' |trans }}</li>
</ul>
<p>{{ 'modal.bazaar.before' |trans }}</p>
<div class="alert alert-warning p-3 rounded-3">
<label for="product-bazaar-agree">
<input type="checkbox" id="product-bazaar-agree">
<span>{{ 'modal.bazaar.agree'|trans }}</span>
</label>
</div>
</div>
<div class="modal-footer">
<button id="button-cancel-bazaar" class="btn btn-link">{{ 'modal.bazaar.cancel' |trans }}</button>
<button id="button-confirm-bazaar" class="btn btn-primary" disabled>{{ 'modal.bazaar.submit' |trans }}</button>
</div>
</div>
</div>
</div>
{% if hasStockItemAlbum %}
{% include 'AtechNetCoreBundle/Common/modal.html.twig' with { 'type': 'stock-item-select', 'productType': type } %}
{% endif %}
{% endblock %}
{% block title %}{{ heading_title }} | {{ parent() }}{% endblock %}
{% block bodyClass %}{% if isBazaar %}is-bazaar{% endif %}{% endblock %}
{% block meta %}
{% set domainTLD = app.request.session.get('defaultLocale') %}
{% if domainTLD == 'en' %}
{% set domainTLD = 'eu' %}
{% endif %}
<meta name="description" content="{{ seoDescription }}"/>
<meta property="og:url" content="{{ app.request.uri }}"/>
<meta property="og:type" content="product"/>
<meta property="og:locale" content="{{ app.request.locale |ogLocale }}"/>
<meta property="og:title" content="{{ heading_title }}"/>
<meta property="og:description" content="{{ seoDescription }}"/>
<meta property="og:image"
content="{% if images|length > 0 %}{{ images|first.thumb }}{% else %}https://www.furbify.{{ domainTLD }}/theme/images/furbify-share-image.png{% endif %}"/>
{% endblock %}
{% block schema %}
{{ parent() }}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{% for breadcrumb in breadcrumbs %}
{
"@type": "ListItem",
"position": {{ loop.index }},
"name": "{{ breadcrumb.text|e('js') }}",
"item": "{{ breadcrumb.href }}"
}{% if not loop.last %}{% endif %}
{% endfor %}
]
}
</script>
{% endblock %}
{% block header %}
{{ include(template_from_string(header)) }}
{% endblock %}
{% block footer %}
{{ include(template_from_string(footer)) }}
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="{{ asset('theme/owl-carousel/assets/owl.carousel.min.css') }}">
{{ parent() }}
<link rel="stylesheet" href="{{ asset('theme/magnific/magnific-popup.min.css') }}">
<link rel="stylesheet" href="{{ asset('theme/css/slider-pro.min.css')|appendAssetCache }}">
{% if hasStockItemAlbum %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
{% endif %}
{% if (milpayInfo is defined and milpayInfo is not empty) and showKlarna %}
<style>
#klarna-placement-product-page::part(osm-badge-container) {
width: 80%;
}
</style>
{% endif %}
<style>
.add-to-cart-always-visible {
z-index: 10000000;
position: fixed;
bottom: -160px;
background-color: #fdfdfd;
width: 100%;
-webkit-box-shadow: 0px -5px 13px 3px rgba(0, 0, 0, 0.27);
box-shadow: 0px -5px 13px 3px rgba(0, 0, 0, 0.27);
transition: bottom 0.4s ease-in-out, opacity 0.3s ease-in-out;
}
.add-to-cart-always-visible.visible {
{% if app.environment == 'dev' %} bottom: 36px;
{% else %} bottom: 0;
{% endif %} opacity: 1;
}
.text-right {
text-align: right;
}
.vertical-center {
display: flex;
align-items: center;
flex-direction: row;
}
.flex-end {
justify-content: flex-end;
}
.footer-cart-button, .footer-cart-button > span {
font-size: 0.8rem !important;
padding: 0.3rem;
width: auto !important;
}
.margin-auto {
margin-left: auto;
margin-right: auto;
}
.footer-cart-button > i {
margin-left: 0 !important;
}
.footer-item-title {
font-size: 0.9rem;
}
.text-left {
text-align: left;
}
</style>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('theme/magnific/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ asset('theme/js/jquery.sliderPro.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript"
src="{{ asset('theme/owl-carousel/owl.carousel.min.js'|appendAssetCache) }}"></script>
{% if showAdminLoginPanel %}
<script src="{{ asset('theme/js/admin-login-panel.js') }}"></script>
{% endif %}
{% if cetelem_calculator %}
<script src="{{ asset('theme/js/cetelem.min.js') }}"></script>
{% endif %}
{% set basePrice = app.session.get('basePrice') %}
<script type="text/javascript">
const modalConfirm = () => {
return new Promise( (resolve) => {
const element = document.getElementById('modal-bazaar-warning');
const modal = new bootstrap.Modal(element, { backdrop: 'static' });
const buttonConfirm = document.getElementById('button-confirm-bazaar');
const buttonCancel = document.getElementById('button-cancel-bazaar');
const checkbox = document.getElementById('product-bazaar-agree');
let handled = false;
const reset = () => {
buttonConfirm.removeEventListener('click', handleConfirming);
buttonCancel.removeEventListener('click', handleCanceling);
checkbox.removeEventListener('click', handleAgreeing);
element.removeEventListener('hidden.bs.modal', handleHidding);
};
const handleAgreeing = () => {
buttonConfirm.disabled = !checkbox.checked;
};
const handleConfirming = () => {
handled = true;
reset();
modal.hide();
resolve(true);
};
const handleCanceling = () => {
handled = true;
reset();
modal.hide();
resolve(false);
};
const handleHidding = () => {
reset();
if ( !handled ) {
resolve(false);
}
}
buttonConfirm.addEventListener('click', handleConfirming);
buttonCancel.addEventListener('click', handleCanceling);
checkbox.addEventListener('click', handleAgreeing);
element.addEventListener('hidden.bs.modal', handleHidding);
modal.show();
});
};
$(document).ready(function () {
const $buttonCart = $('#button-cart');
const $stickyAddToCart = $('.add-to-cart-always-visible');
if ($buttonCart.length && $stickyAddToCart.length) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Button visible → hide sticky (slide down)
$stickyAddToCart.removeClass('visible');
} else {
// Button not visible → show sticky (slide up)
$stickyAddToCart.addClass('visible');
}
});
}, {threshold: 0});
observer.observe($buttonCart[0]);
}
});
{% if cetelem_calculator %}
var cetelemSkInitUrl = '{{ path('init_cetelem_sk') }}';
var cetelemSkRecalculateUrl = '{{ path('recalculate_cetelem_sk') }}';
{% endif %}
if ($(window).width() <= 767) {
$('#productThumbs .sp-thumbnails').addClass('d-none');
}
$(window).resize(function () {
if ($(window).width() <= 767) {
$('#productThumbs .sp-thumbnails').addClass('d-none');
} else {
$('#productThumbs .sp-thumbnails').removeClass('d-none');
}
});
$('#productThumbs').sliderPro({
arrows: true,
loop: false,
buttons: false,
autoplay: false,
width: 540,
height: 400,
thumbnailsPosition: 'bottom',
thumbnailTouchSwipe: false,
centerSelectedSlide: false,
init: function (e) {
$('.sp-thumbnails').css('margin-top', 0);
$('#productThumbs .sp-slides').magnificPopup({
delegate: '.sp-slide',
type: 'image',
gallery: {
enabled: true
},
callbacks: {
elementParse: function (item) {
item.src = $(item.el).data('popup');
}
}
});
if ($('#more-images-count').length) {
$('#more-images-count').appendTo($('.sp-thumbnail-container:last-child'));
$('#more-images-count').css('display', 'block');
}
},
{% if images|length > 4 %}
gotoSlide: function (event) {
if (event.index != 3) {
return;
}
$('.sp-slide.sp-selected').click();
},
{% endif %}
breakpoints: {
767: {
arrows: false,
buttons: true,
thumbnailsPosition: 'none',
thumbnailWidth: 0,
thumbnailHeight: 0
},
992: {
width: 990
}
}
});
var selectedStockItems = [];
$('#button-cart, #button-cart-footer, #orderSelectedStockItems').on('click', async function () {
$('#no-os-warning').addClass('d-none');
selectedStockItems = document.querySelectorAll('#stockListCollapse input[type="checkbox"]:checked');
// Check if
if ($('#operation-system-select').val() == "") {
$('#no-os-warning').removeClass('d-none');
$('.btn.dropdown-toggle.form-control[data-id="operation-system-select"]').addClass('select-red-bg');
scrollToElementWithId("operation-system-select");
return false;
}
if ( '{{ isBazaar }}' === '1' ) {
const isConfirmed = await modalConfirm();
if ( !isConfirmed ) {
return false;
}
}
let postData = $('.product-details input[type=\'hidden\'], .product-page select');
let formDataToPost = new FormData();
for (var key in postData) {
if (!isNaN(key)) {
formDataToPost.append(postData[key].name, postData[key].value);
}
}
selectedStockItems.forEach(element => {
formDataToPost.append(element.name, element.value);
});
$.ajax({
url: '{{ path("cart_add") }}',
type: 'post',
data: formDataToPost,
processData: false,
contentType: false,
enctype: 'multipart/form-data',
dataType: 'json',
beforeSend: function () {
$('#button-cart').button('loading');
$('#button-cart-footer').button('loading');
$('#cart').find('.dropdown-toggle').prop('disabled', true);
},
success: function (json) {
if (json['error']) {
$('#notification').html(json['error']).modal('show');
}
if (json['success']) {
$.ajax({
url: '{{ path("cart_widget") }}',
type: 'get',
dataType: 'html',
success: function (html) {
$('#cart').replaceWith(html);
setTimeout(function () {
$('#dropdownCartButton').trigger('click');
}, 500);
}
});
$('#button-cart, #button-cart-footer').text('{{ 'Item was added to the card'|trans }}')
{% if app.environment == 'prod' %}
const price = json.success.data.value.price;
const special = json.success.data.value.special;
const quantity = json.success.data.quantity;
const code = json.success.data.code;
const brand = json.success.data.brand;
const name = json.success.data.name;
const brandAndName = (brand && brand !== '' ? brand + ' ' : '') + name.replace(/\//g, '-');
const productType = json.success.data.productType;
const discount = special === 0 ? 0 : price - special;
window.dataLayer = window.dataLayer || [];
dataLayer.push({ecommerce: null});
dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: '{{ currency_ISO }}',
value: (price - discount) * quantity,
items: [{
item_id: code,
item_name: brandAndName,
discount: discount,
index: 0,
item_brand: brand,
item_category: productType,
price: price,
quantity: quantity
}]
}
});
{% endif %}
gtag('event', 'add_to_cart', {
"items": [{
"id": "{{ product_id }}",
"name": "{{ brand ~ ' ' ~ title | trim }}",
"brand": "{{ brand }}",
"category": "{{ type }}",
"quantity": {{ available }},
"price": {{ special ? special : price }} }]
});
}
setTimeout(function () {
$('#button-cart').button('reset');
$('#button-cart-footer').button('reset')
}, 2000);
$('#cart').find('.dropdown-toggle').prop('disabled', false);
}
});
});
$('#scroll-to-review-form').click(function () {
scrollToElementWithId('write');
});
$('.button-cart').on('click', function () {
var recommendedProductId = 'recommended-product-id-' + $(this).data('product-id');
$.ajax({
url: '{{ path("cart_add") }}',
type: 'post',
data: $('#' + recommendedProductId),
dataType: 'json',
beforeSend: function () {
$('#cart').find('.dropdown-toggle').prop('disabled', true);
},
success: function (json) {
if (json['error']) {
$('#notification').html(json['error']).modal('show');
}
if (json['success']) {
$('#notification').html(json['success']).modal('show');
$.ajax({
url: '{{ path("cart_widget") }}',
type: 'get',
dataType: 'html',
success: function (html) {
$('#cart').replaceWith(html);
}
});
gtag('event', 'add_to_cart', {
"items": [{
"id": "{{ product_id }}",
"name": "{{ brand ~ ' ' ~ title | trim }}",
"brand": "{{ brand }}",
"category": "{{ type }}",
"quantity": {{ available }},
"price": {{ special ? special : price }} }]
});
}
$(this).button('reset');
$('#cart').find('.dropdown-toggle').prop('disabled', false);
}
});
});
var formatPrice = function (amount, decimals = {{ precision }}, dec_point = ',', thousands_sep = ' ', currency = ' {{ currency }}') {
return (
amount
.toFixed(decimals)
.replace('.', dec_point)
.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + thousands_sep) + currency
)
}
$("option:selected").removeAttr("selected");
$('select[name^="option"]').on('change', function () {
reCalculateProductPrice();
if ($(this).children("option:selected").attr('data-dont-want') == 1) {
$(this).children("option:selected").prop("selected", false);
}
if ($(this).attr('name') == 'option[21]' && $(this).children("option:selected").val() == 247) {
$('.ready-box.with-windows').hide();
$('.ready-box.without-windows').show();
$('select[name="option[22]"]').val(237).attr('disabled', 'disabled'); // Reset software package select to "No"
} else {
$('.ready-box.with-windows').show();
$('.ready-box.without-windows').hide();
$('select[name="option[22]"]').removeAttr('disabled');
}
$('.operation-system-message').addClass('d-none');
if ($(this).attr('name') == 'option[21]' && ["425", "426", "2128", "3508"].includes($(this).children("option:selected").val())) {
$('#operation-system-message-success').removeClass('d-none');
$('.btn.dropdown-toggle[data-id="operation-system-select"]').removeClass('select-red-bg');
$('#no-os-warning').addClass('d-none');
} else if ($(this).attr('name') == 'option[21]' && $(this).children("option:selected").val() == 6368) {
$('#linux-message-danger').removeClass('d-none');
$('#no-os-warning').addClass('d-none');
$('.btn.dropdown-toggle[data-id="operation-system-select"]').removeClass('select-red-bg');
} else if ($(this).attr('name') == 'option[21]') {
$('#operation-system-message-danger').removeClass('d-none');
$('#no-os-warning').addClass('d-none');
$('.btn.dropdown-toggle[data-id="operation-system-select"]').removeClass('select-red-bg');
}
});
$('.btn-cetelem-calc').click(function () {
if ($('#cetelem-calc-container').attr('data-country') == 'sk') {
{% if special %}
initCetelemSK(parseFloat($('.special-price').html().trim().replace(' €', '').replace(' ', '').replace(',', '.')));
{% else %}
initCetelemSK(parseFloat($('.product-price').html().trim().replace(' €', '').replace(' ', '').replace(',', '.')));
{% endif %}
} else {
{% if special %}
var price = parseFloat($('.product-price').attr('data-special').trim().replace(' €', '').replace(' ', '').replace(',', '.'));
{% else %}
var price = parseFloat($('.product-price').attr('data-price').trim().replace(' €', '').replace(' ', '').replace(',', '.'));
{% endif %}
initCetelemHU(
'cetelem-calc-container',
price,
'{{ cetelem_hu_shop_id }}',
'{{ cetelem_hu_url }}',
'{{ cetelem_hu_barem_code }}',
'{{ cetelem_hu_price_minimum }}'
);
}
});
{% if quatro_calculator %}
$('.btn-quatro-calc').click(function (e) {
{% if special %}
var price = parseFloat($('.product-price').attr('data-special').trim().replace(' €', '').replace(' ', '').replace(',', '.'));
{% else %}
var price = parseFloat($('.product-price').attr('data-price').trim().replace(' €', '').replace(' ', '').replace(',', '.'));
{% endif %}
initQuatroSK(price);
});
function initQuatroSK(price) {
if (document.getElementById('quatro-calc-container').innerHTML != '') {
return;
}
document.getElementById('quatro-calc-container').innerHTML = `<iframe src="https://quatro.vub.sk/kalkulacka/I594?cenaTovaru=${price}" title="Quatro loan" style="width: 100%; height: 750px; padding-top: 20px; background-color: #f5f5f5;"></iframe>`
}
{% endif %}
var witoutVatTrans = '{{ "without VAT" | trans }}';
function reCalculateProductPrice() {
{% if customerTypeId == 2 and basePrice == 'net' %}
var netPrice = parseFloat($('.product-price').data('price'));
var netSpecial = parseFloat($('.product-price').data('special'));
var grossPrice = parseFloat($('.product-price').data('gross-price'));
var grossSpecial = parseFloat($('.product-price').data('gross-special'));
var suggestedNetPrice = parseFloat($('.product-price').data('suggested-price'));
var suggestedGrossPrice = parseFloat($('.product-price').data('suggested-gross-price'));
{% elseif customerTypeId == 2 %}
var grossPrice = parseFloat($('.product-price').data('price'));
var grossSpecial = parseFloat($('.product-price').data('special'));
var suggestedNetPrice = parseFloat($('.product-price').data('suggested-price'));
var suggestedGrossPrice = parseFloat($('.product-price').data('suggested-gross-price'));
{% else %}
var grossPrice = parseFloat($('.product-price').data('price'));
var grossSpecial = parseFloat($('.product-price').data('special'));
{% endif %}
$('select[name^="option"]').each(function () {
var option = $(this).find('option[value="' + $(this).val() + '"]');
if (!isNaN($(option).data('price')) && $(option).is(':selected')) {
{% if customerTypeId == 2 and basePrice == 'net' %}
if (!isNaN($(option).data('net-price'))) {
if (option.data('free') === 1) {
} else if (parseFloat(option.data('net-special')) > 0) {
// Special Net Price
netPrice += parseFloat(option.data('net-special'));
netSpecial += parseFloat(option.data('net-special'));
// Special Gross Price
grossPrice += parseFloat(option.data('special'));
grossSpecial += parseFloat(option.data('special'));
} else {
// Net Price
netPrice += parseFloat(option.data('net-price'));
netSpecial += parseFloat(option.data('net-price'));
// Gross Price
grossPrice += parseFloat(option.data('price'));
grossSpecial += parseFloat(option.data('price'));
}
// Suggested Price
suggestedNetPrice += parseFloat(option.data('suggested-net-price'));
suggestedGrossPrice += parseFloat(option.data('suggested-price'));
}
{% elseif customerTypeId == 2 %}
if (!isNaN($(option).data('net-price'))) {
// Gross Price
if (option.data('free') === 1) {
} else if (parseFloat(option.data('special')) > 0) {
grossPrice += parseFloat(option.data('special'));
grossSpecial += parseFloat(option.data('special'));
} else {
grossPrice += parseFloat(option.data('price'));
grossSpecial += parseFloat(option.data('price'));
}
// Suggested Price
suggestedNetPrice += parseFloat(option.data('suggested-net-price'));
suggestedGrossPrice += parseFloat(option.data('suggested-price'));
}
{% else %}
// Gross Price
if (option.data('free') === 1) {
} else if (parseFloat(option.attr('data-special')) > 0) {
grossPrice += parseFloat(option.attr('data-special'));
grossSpecial += parseFloat(option.attr('data-special'));
} else {
grossPrice += parseFloat(option.attr('data-price'));
grossSpecial += parseFloat(option.attr('data-price'));
}
{% endif %}
{% if special %}
{% if customerTypeId == 2 and basePrice == 'net' %}
$('#grossPriceFooter').html(formatPrice(netSpecial, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter2').html(formatPrice(netSpecial, {{ precision }}, '{{ currency }}'));
$('.product-price .special-price span.price-value').html(formatPrice(netSpecial, {{ precision }}, '{{ currency }}'));
$('.product-price .old-price > span').html(formatPrice(netPrice, {{ precision }}, '{{ currency }}'));
$('.product-price .price-savings').html(`<b>{{ 'Savings' | trans }}: ${formatPrice((netPrice - netSpecial))}</b> {{ 'without VAT' | trans }}`);
$('.product-price .prices-include-vat').html(`${formatPrice(grossSpecial, {{ precision }}, '{{ currency }}')} {{ 'with VAT' | trans }}`);
$('.suggested-price-row .suggested-price-cell.d-flex').html(
`<span><b>{{ 'Suggested selling price' | trans }}:</b></span>
<span>${formatPrice(suggestedNetPrice, {{ precision }}, '{{ currency }}')} ({{ 'without VAT' | trans }}) / ${formatPrice(suggestedGrossPrice, {{ precision }}, '{{ currency }}')} ({{ 'Price with VAT' | trans | lower }})</span>`
);
$('.suggested-price-row .suggested-price-cell.suggested-price-profit').html(
`<span>{{ 'Your profit' | trans }}</span>
<strong>${(Math.round((1 - (grossSpecial / suggestedGrossPrice)) * 100).toFixed(0))}%</strong>`
);
$('.print-label-price').val(suggestedGrossPrice);
{% elseif customerTypeId == 2 %}
$('.product-price .special-price').html(formatPrice(grossSpecial, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter').html(formatPrice(grossSpecial, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter2').html(formatPrice(grossSpecial, {{ precision }}, '{{ currency }}'));
$('.product-price .old-price').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
$('.product-price .price-savings').html(`<b>{{ 'Savings' | trans }}: ${formatPrice((grossPrice - grossSpecial), {{ precision }}, '{{ currency }}')}</b>`);
$('.suggested-price-row .suggested-price-cell').html(
`<span><b>{{ 'Suggested selling price' | trans }}</b></span>
<span>${formatPrice(suggestedNetPrice, {{ precision }}, '{{ currency }}')} ({{ 'without VAT' | trans }}) / ${formatPrice(suggestedGrossPrice, {{ precision }}, '{{ currency }}')} {{ 'with VAT' | trans }}</span>`
);
$('.suggested-price-row .suggested-price-cell.suggested-price-profit').html(
`<span>{{ 'Your profit' | trans }}</span>
<strong>${(Math.round((1 - (grossSpecial / suggestedGrossPrice)) * 100).toFixed(0))}%</strong>`
);
$('.print-label-price').val(suggestedGrossPrice);
{% else %}
$('.product-price .special-price').html(formatPrice(grossSpecial, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter').html(formatPrice(grossSpecial, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter2').html(formatPrice(grossSpecial, {{ precision }}, '{{ currency }}'));
$('.product-price .old-price').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
$('.product-price .price-savings').html(`<b>{{ 'Savings' | trans }}: ${formatPrice(grossPrice - grossSpecial, {{ precision }}, '{{ currency }}')}</b>`);
{% endif %}
{% else %}
{% if customerTypeId == 2 and basePrice == 'net' %}
$('.product-price .standard-price span').html(formatPrice(netPrice, {{ precision }}, '{{ currency }}'));
$('.product-price .prices-include-vat').html(`${formatPrice(grossPrice, {{ precision }}, '{{ currency }}')} {{ 'with VAT' | trans }}`);
$('#grossPriceFooter').html(formatPrice(netPrice, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter2').html(formatPrice(netPrice, {{ precision }}, '{{ currency }}'));
$('.suggested-price-row .suggested-price-cell').html(
`<span><b>{{ 'Suggested selling price' | trans }}</b></span>
<span>${formatPrice(suggestedNetPrice, {{ precision }}, '{{ currency }}')} ({{ 'without VAT' | trans }}) / ${formatPrice(suggestedGrossPrice, {{ precision }}, '{{ currency }}')} ({{ 'Price with VAT' | trans | lower }})</span>`
);
$('.suggested-price-row .suggested-price-cell.suggested-price-profit').html(
`<span>{{ 'Your profit' | trans }}</span>
<strong>${(Math.round((1 - (grossPrice / suggestedGrossPrice)) * 100).toFixed(0))}%</strong>`
);
$('.print-label-price').val(suggestedGrossPrice);
{% elseif customerTypeId == 2 %}
$('.product-price .standard-price span').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter2').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
$('.suggested-price-row .suggested-price-cell').html(
`<span><b>{{ 'Suggested selling price' | trans }}</b></span>
<span>${formatPrice(suggestedNetPrice, {{ precision }}, '{{ currency }}')} ({{ 'without VAT' | trans }}) / ${formatPrice(suggestedGrossPrice, {{ precision }}, '{{ currency }}')} ({{ 'Price with VAT' | trans | lower }})</span>`
);
$('.suggested-price-row .suggested-price-cell.suggested-price-profit').html(
`<span>{{ 'Your profit' | trans }}</span>
<span>${(Math.round((1 - (grossPrice / suggestedGrossPrice)) * 100).toFixed(0))}%</span>`
);
$('.print-label-price').val(suggestedGrossPrice);
{% else %}
$('#grossPrice').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
$('#grossPriceFooter2').html(formatPrice(grossPrice, {{ precision }}, '{{ currency }}'));
{% endif %}
{% endif %}
}
});
}
$(document).ready(function () {
$('.selectpicker').selectpicker('render');
setTimeout(function () {
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
if (isSelected) {
if (e.currentTarget) {
if (parseInt($(e.currentTarget).val()) >= 0) {
$(e.currentTarget).parent().find('button .filter-option-inner-inner').addClass('selected');
} else {
$(e.currentTarget).parent().find('button .filter-option-inner-inner').removeClass('selected');
}
}
}
});
if ($('#cable-select')) {
$('#cable-select').parent().find('button .filter-option-inner-inner').addClass('selected');
}
$('.selectpicker').on('loaded.bs.select', function (e) {
if (e.currentTarget) {
if (parseInt($(e.currentTarget).val()) >= 0) {
$(e.currentTarget).parent().find('button .filter-option-inner-inner').addClass('selected');
} else {
$(e.currentTarget).parent().find('button .filter-option-inner-inner').removeClass('selected');
}
}
});
}, 100)
{% if partnerLoginRedirect %}
window.location.href = '{{ partnerLoginRedirectRoute }}';
{% endif %}
$("#recommended-products-carousel").owlCarousel({
items: 4,
loop: false,
startPosition: 0,
nav: true,
dots: false,
mouseDrag: false,
navText: [
'<i class="fas fa-chevron-left"></i>',
'<i class="fas fa-chevron-right"></i>'
],
responsive: {
990: {
items: 6,
nav: true,
stagePadding: 0
},
768: {
mouseDrag: true
},
576: {
items: 2,
nav: false,
dots: true,
stagePadding: 0,
mouseDrag: true
},
0: {
items: 2,
nav: false,
dots: false,
stagePadding: 0,
mouseDrag: true
}
}
});
$("#similar-products-carousel").owlCarousel({
items: 1,
loop: false,
startPosition: 0,
nav: false,
dots: true,
mouseDrag: true,
margin: 10,
stagePadding: 5,
responsive: {
992: {
items: 3,
dots: false,
nav: false,
mouseDrag: true,
stagePadding: 0,
margin: 20
},
670: {
stagePadding: 40
},
380: {
stagePadding: 20
},
0: {
stagePadding: 12
}
}
});
getProductVariants();
}).delegate('#ctlm-recalculate', 'click', function () {
reCalcCetelemSK();
})
function getProductVariants() {
$.ajax({
method: 'GET',
url: '{{ path("product_variants") }}',
data: {productId: "{{ product_id }}"},
success: function (response) {
if (response.length > 0) {
$("#variants-carousel").owlCarousel({
items: 1,
loop: false,
startPosition: 0,
nav: false,
dots: true,
mouseDrag: true,
margin: 10,
stagePadding: 5,
responsive: {
992: {
items: 3,
dots: false,
nav: false,
mouseDrag: true,
stagePadding: 0,
margin: 20
},
670: {
stagePadding: 40
},
380: {
stagePadding: 20
},
0: {
stagePadding: 12
}
},
onInitialize: fillVariantsSection(response)
});
} else {
$('section.variant-list').parent().hide();
}
}
});
}
function fillVariantsSection(response) {
var currency = '{{ currency }}',
precision = '{{ precision }}',
variantCount = response.length
;
for (let i = 0; i < variantCount; i++) {
const variantItem = response[i];
let emptyVariantItem = $('.product-list-minimal-item.empty')[0];
$('h5', emptyVariantItem).html(variantItem.title);
$('img', emptyVariantItem).attr('src', variantItem.image).attr('alt', variantItem.title);
const grades = {
gold: () => { return [GRADE_TRANSLATIONS.A, 3] },
silver: () => { return [GRADE_TRANSLATIONS.B, 2] },
bronze: () => { return [GRADE_TRANSLATIONS.C, 1] },
new: () => { return [GRADE_TRANSLATIONS.New, 0] },
bazaar: () => { return [GRADE_TRANSLATIONS.Bazaar, 0] }
}
let qualityLevel = 0
if (['gold','silver','bronze'].includes(variantItem.quality.toLowerCase())) {
[variantItem.quality, qualityLevel] = grades[variantItem.quality.toLowerCase()]?.();
}
$('.quality-label.label', emptyVariantItem).addClass('badge-item quality').removeClass('quality-label label');
if (qualityLevel !== 0) {
let qualityHtml = `<div class="quality-text">`;
qualityHtml += `<span class="quality-name">${variantItem.quality}</span>
<span class="quality-info-text">${GRADE_TRANSLATIONS.condition}</span>
<span class="quality-meter">`
for (let i = 0; i < 3; i++) {
qualityHtml += `<span class="quality-element ${qualityLevel > i ? 'active' : ''}"></span>`
}
qualityHtml += `</span></div>`;
$('.badge-item.quality', emptyVariantItem).html(qualityHtml);
}
else {
let qualityHtml = `<div class="quality-text">`;
qualityHtml += `<span class="quality-name">${variantItem.quality}</span>
<span class="quality-info-text">${GRADE_TRANSLATIONS.condition}</span>`;
qualityHtml += `</span>`;
$('.badge-item.quality', emptyVariantItem).html(qualityHtml);
}
var descriptionHtml = "";
for (let index = 0; index < variantItem.description.length; index++) {
const configItem = variantItem.description[index];
descriptionHtml += configItem + ", " + (variantItem.description.length - 1 == index ? variantItem.quality : '');
}
$('span.attribute-list', emptyVariantItem).html(descriptionHtml);
let price = ((variantItem.price).toFixed(precision) + ' ' + currency).replace('.', ',');
$('span.price', emptyVariantItem).text(price.replace(/\B(?=(\d{3})+(?!\d))/g, ' '));
if (variantItem.isDiscounted) {
$('span.price', emptyVariantItem).addClass('new-price');
let oldPriceForDiscount = ((variantItem.oldPriceForDiscount).toFixed(precision) + ' ' + currency).replace('.', ',');
$('strong.price-for-discount', emptyVariantItem).text(oldPriceForDiscount.replace(/\B(?=(\d{3})+(?!\d))/g, ' '));
} else {
$('strong.price-for-discount', emptyVariantItem).remove();
}
$(emptyVariantItem).attr('href', variantItem.link);
$(emptyVariantItem).removeClass('empty');
}
$('.product-list-minimal-item.empty').remove();
$("#variants-carousel").trigger('refresh.owl.carousel');
}
var starDescriptions = [
"{{ '1. star description'|trans }}",
"{{ '2. star description'|trans }}",
"{{ '3. star description'|trans }}",
"{{ '4. star description'|trans }}",
"{{ '5. star description'|trans }}"
];
$('.testimonial-form .stars > i').on('click', function () {
$('.testimonial-form .stars > i').removeClass('yellow');
$('.testimonial-form .stars > i').removeClass('clicked');
var star = $(this).attr('data-star');
document.querySelector('#description-for-clicked-star span').textContent = starDescriptions[star - 1];
$('.testimonial-form .stars > i').each(function () {
var stars = $(this).attr('data-star');
if (star >= stars) {
$(this).addClass('yellow');
$(this).addClass('clicked');
$('#review_stars').val(star);
}
});
});
$('.testimonial-form .stars > i').hover(function () {
$('.testimonial-form .stars > i').removeClass('yellow');
var star = $(this).attr('data-star');
$('.testimonial-form .stars > i').each(function () {
var stars = $(this).attr('data-star');
if (star >= stars) {
$(this).addClass('yellow');
}
});
}).mouseleave(function () {
$('.testimonial-form .stars > i').removeClass('yellow');
$('.testimonial-form .stars > i.clicked').addClass('yellow');
});
$('#review').on('click', '.pagination-ul a', function (e) {
e.preventDefault();
$('#review').fadeOut('slow');
$('#review').load(this.href);
$('#review').fadeIn('slow');
return false;
});
function scrollToNavigationItem(hrefValue) {
$('html, body').animate({
scrollTop: $(`a[href="${hrefValue}"`).offset().top - 50
}, 1000);
return false;
}
$('.more-collapse-content').on('shown.bs.collapse', function (ev) {
$('.more-collapse[href="#' + $(this).attr('id') + '"]').html('{{ 'Close' | trans }}');
});
$('.more-collapse-content').on('hidden.bs.collapse', function (ev) {
$('.more-collapse[href="#' + $(this).attr('id') + '"]').html('{{ 'Other accessories' | trans }}');
});
if ($(window).width() < 992) {
$('.custom-select-line div').each(function () {
if ($(this).html() == 'Operating system:' || $(this).html() == 'Operációs rendszer:' || $(this).html() == 'Operačný systém:') {
$(this).html('OS:');
}
});
}
$('#quality-more-info').click(function () {
if ($('#desc-box').length > 0) {
scrollToElementWithId('desc-box');
return false;
}
});
$('.product-configuration-box select').change(function () {
let option = $(this).find('option:selected');
let id = $(option).val();
if (id != '') {
let name = $(option).attr('data-content').replace(/<span[^>]*>([^<]+)<\/span>/g, '$1');
let price = $(option).attr('data-price');
let discountPrice = $(option).attr('data-special');
if (discountPrice != 0) {
price = discountPrice;
}
let baseCurrency = '{{ currency }}';
let currency = '';
switch (baseCurrency) {
case '€':
currency = 'EUR';
break;
case 'Ft':
currency = 'HUF';
break;
case 'Kč':
currency = 'CZK';
break;
default:
currency = 'EUR';
}
{% if app.environment == 'prod' %}
gtag('event', 'add_to_cart', {
currency: currency,
items: [{
id: id,
name: name,
category: "Accessory",
list_name: "Configurator",
price: price,
quantity: 1
}],
value: price
});
{% endif %}
}
});
{% if orderable %}
$('#button-add-price-monitor').on('click', function () {
$.ajax({
url: '{{ path("product_price_monitor") }}',
type: 'post',
data: {
'productId': $('.product-page').find('input[name="product_id"]').val(),
'email': $('#price-monitor-email').val(),
'name': $('#price-monitor-name').val(),
'price': $('#price-monitor-value').val(),
'sourcePrice': $('#price-monitor-current-price').val()
},
dataType: 'json',
beforeSend: function () {
$('#button-add-price-monitor').button('loading');
},
success: function (json) {
$('#modal-price-monitor').find('.alert').remove();
if (json['error']) {
$('#modal-price-monitor').find('.modal-body').prepend('<div class="alert alert-danger" role="alert">' + json['error'] + '</div>');
}
if (json['success']) {
$('#modal-price-monitor .success').removeClass('d-none');
$('#modal-price-monitor .form').addClass('d-none');
$('.button-price-monitor').addClass('active');
}
$('#button-add-price-monitor').button('reset');
}
});
});
let priceMonitorEmail = document.getElementById('price-monitor-email');
if (priceMonitorEmail != null) {
let priceMonitorEmailWarning = priceMonitorEmail.parentElement.querySelector('.text-warning');
if (priceMonitorEmailWarning != null) {
priceMonitorEmail.addEventListener('keyup', () => {
priceMonitorEmailWarning.classList.add('d-none');
if (priceMonitorEmail.value.indexOf('@') > 0 && priceMonitorEmail.value.indexOf('.') > 0) {
let email = priceMonitorEmail.value.split('@');
let name = email.shift();
let domain = email.pop().toLowerCase();
let suggest = wordSuggest(domain, {{ priceMonitorEmailDictionary |raw }});
if (suggest != '') {
priceMonitorEmailWarning.innerHTML = '{{ 'Did you mean' |trans }}: <a href="#" class="link-warning" data-email="' + name + '@' + suggest + '">' + name + '@' + suggest + '</a>?';
priceMonitorEmailWarning.classList.remove('d-none');
let priceMonitorEmailLink = priceMonitorEmailWarning.querySelector('.link-warning');
if (priceMonitorEmailLink != null) {
priceMonitorEmailLink.addEventListener('click', (e) => {
e.preventDefault();
priceMonitorEmail.value = priceMonitorEmailLink.dataset.email.trim();
return false;
});
}
}
}
});
}
}
{% else %}
/*$('#button-add-stock-monitor').on('click', function() {
$.ajax({
url: '{{ path("product_stock_monitor") }}',
type: 'post',
data: {
'productId': $('input[name="product_id"]').val(),
'email': $('#stock-monitor-email').val(),
'name': $('#stock-monitor-name').val()
},
dataType: 'json',
beforeSend: function() {
$('#button-add-stock-monitor').button('loading');
},
success: function(json) {
$('#modal-stock-monitor').find('.alert').remove();
if ( json['error'] ) {
$('#modal-stock-monitor').find('.modal-body').prepend(`<div class="alert alert-danger" role="alert">${json['error']}</div>`);
}
if ( json['success'] ) {
$('#modal-stock-monitor .success').removeClass('d-none');
$('#modal-stock-monitor .form').addClass('d-none');
$('.button-stock-monitor').addClass('active');
}
$('#button-add-price-monitor').button('reset');
}
});
});*/
{% endif %}
{% if showAdminLoginPanel %}
var additionalDataForAdminLoginPanel = {
idForPage: "{{ product_id }}",
module: "product",
ajaxUrl: "{{ path('product_admin_login_data_ajax') }}",
{% if app.environment == 'prod' %}
domain: "https://www.atechcomp.eu/centralis/web",
smallerPadding: true
{% else %}
domain: "http://centralis"
{% endif %}
};
startAdminLoginPanel(additionalDataForAdminLoginPanel);
{% endif %}
var popover = new bootstrap.Popover(document.querySelector('.product-details > h1'), {
trigger: 'focus',
html: true
});
document.addEventListener('mousedown', () => {
if (document.querySelector('.popover.fade.show')) {
popover.dispose();
}
});
document.querySelector('.product-details > h1').addEventListener('mouseup', (e) => {
if (window.getSelection().toString().length > 3) {
if (!document.querySelector('.popover.fade')) {
popover = new bootstrap.Popover(document.querySelector('.product-details > h1'), {
trigger: 'focus',
html: true
});
}
popover.show();
}
});
let productDetailRequestCallback = document.getElementById('product-detail-request-callback');
if (productDetailRequestCallback) {
productDetailRequestCallback.addEventListener('click', (buttonElement) => {
gtag('event', 'click', {'event_category': 'Click', 'event_label': 'product-detail-request-callback'});
});
}
{% if milpayInfo is defined and milpayInfo is not empty and false %}
document.querySelector('.instacash-info-buttons a').addEventListener('click', (buttonElement) => {
gtag('event', 'click', {
'event_category': 'Click',
'event_label': 'product-detail-milpay-prescore-launched'
});
});
document.querySelector('.instacash-info-buttons button').addEventListener('click', (buttonElement) => {
gtag('event', 'click', {'event_category': 'Click', 'event_label': 'product-detail-milpay-prescore-modal'});
});
document.querySelector('.other-info > a').addEventListener('click', (buttonElement) => {
gtag('event', 'click', {'event_category': 'Click', 'event_label': 'product-detail-milpay-more-info-page'});
});
{% endif %}
document.querySelector('button.show-full-spec').addEventListener('click', () => {
let hiddenInfo = document.querySelector('.hidden-specification'),
showMoreButton = document.querySelector('button.show-full-spec')
;
console.log(this)
hiddenInfo.classList.toggle('d-none');
document.querySelector('button.show-full-spec > span').innerHTML = hiddenInfo.classList.contains('d-none') ? showMoreButton.dataset.textMore : showMoreButton.dataset.textLess;
document.querySelector('button.show-full-spec .arrow-icon').style.transform = hiddenInfo.classList.contains('d-none') ? 'rotate(90deg)' : 'rotate(-90deg)';
});
{% if orderable and skinColorSelectorIsDefined %}
if (document.getElementById('colorSelector')) {
const selectColorText = document.getElementById('colorSelector').textContent.trim();
const colorSelectorImageSrc = document.querySelector('#colorSelector img').src;
function updateCollapserText() {
let selectedColor = document.querySelector('.color-palette-item input:checked');
if (selectedColor.value) {
document.querySelector('#colorSelect .color-title').innerHTML = selectedColor.dataset.colorName;
document.querySelector('#colorSelect .color-price').innerHTML = `+ ${selectedColor.dataset.price}`;
document.querySelector('.confirm-selected-color button').disabled = false;
} else {
document.querySelector('#colorSelect .color-title').innerHTML = selectColorText;
document.querySelector('#colorSelect .color-price').innerHTML = '';
}
}
$('.color-palette-item').on('click', (ev, el) => {
let paletteItem = ev.currentTarget;
$('.color-palette-item').each((k, element) => {
element.classList.remove('checked');
});
paletteItem.querySelector('input').checked = true;
paletteItem.classList.add('checked');
updateCollapserText();
});
$('.confirm-selected-color button').on('click', (ev, el) => {
let selectedColor = {
'title': document.querySelector('#colorSelect .color-title').innerText,
'price': document.querySelector('#colorSelect .color-price').innerText
},
selectedColorValue = document.querySelector('.color-palette-item.checked input').value,
selectedColorTitle = selectedColorValue > 0 ? `${selectColorText}: ${selectedColor.title}` : selectColorText,
selectedColorPrice = selectedColorValue > 0 ? selectedColor.price : ''
;
document.querySelector('#colorSelector .selected-title').innerHTML = selectedColorTitle;
document.querySelector('#colorSelector .selected-price').innerHTML = selectedColorPrice;
let selectedImageSrc = selectedColorValue > 0 ? document.querySelector('.color-palette-item.checked img').src : colorSelectorImageSrc;
document.querySelector('#colorSelector img').src = selectedImageSrc;
document.querySelector('select[name="option[320]"]').value = selectedColorValue;
let changeEvent = new Event('change');
document.querySelector('select[name="option[320]"]').dispatchEvent(changeEvent);
});
}
{% endif %}
$('#jump-top-reviews').click(() => $('#reviews-tab').trigger("click"));
$('#jump-show-more-info').on('click', () => {
$('html, body').animate({
scrollTop: $('#full-specification-tab').offset().top - 100
}, 50);
$('#full-specification-tab').click();
});
async function copyToClickBoard(textToCopy) {
try {
await navigator.clipboard.writeText(textToCopy);
document.querySelector('#copy-svg').innerHTML =
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16" style="stroke: currentColor; stroke-width: 1;">
<path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5.5 0 0 0 5 1.5v1A1.5.5 0 0 0 6.5 4h3A1.5.5 0 0 0 11 2.5v-1A1.5.5 0 0 0 9.5 0z"/>
</svg>`
setTimeout(() => {
document.querySelector('#copy-svg').innerHTML =
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16" style="stroke: currentColor; stroke-width: 1;">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5.5 0 0 0 5 1.5v1A1.5.5 0 0 0 6.5 4h3A1.5.5 0 0 0 11 2.5v-1A1.5.5 0 0 0 9.5 0z"/>
</svg>`
}, 2000);
} catch (err) {
console.error('Error copying to clipboard', err);
}
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#product-model-description img').each(function (index) {
$(this).attr('alt', "{{ seoDescription }} image_" + (index + 1));
})
})
</script>
{# klaviyo #}
{% if app.user
or (app.session.get('checkout') is defined and app.session.get('checkout').email is defined)
or app.session.get('customerEmailForKlaviyo') is defined %}
{% set customerEmail = app.user
? app.user.email
: (app.session.get('checkout').email is defined
? app.session.get('checkout').email
: app.session.get('customerEmailForKlaviyo')
) %}
<script type="text/javascript">
function addToCartCallback() {
let item = {
'Product_id': '{{ product_id }}',
'Code': '{{ model }}',
'Product_name': '{{ productName }}',
'Product_category': '{{ type }}',
'Product_category_id': {{ typeId }},
'Brand': '{{ brand }}',
'Price': '{{ special ? special : price }}',
'Quality': '{{ quality }}',
'Currency': convertCurrency('{{ currency }}'),
'Image_url': '{{ (images|first).popup }}',
'URL': "{{ app.session.get('cartBackToProductsLink') }}",
}
klaviyo.track('Added to Cart', item);
}
$('#button-cart, #button-cart-footer').on('click', function (e) {
e.preventDefault();
klaviyo.identify({
'email': '{{ customerEmail }}'
}, addToCartCallback);
})
</script>
{% endif %}
{% endblock %}

templates/AtechNetCoreBundle/Product/product.html.twig line 1