<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% set seoTitle = '' %}
{% if seoData.seoTitle is defined and seoData.seoTitle != '' %}
{% set seoTitle = seoData.seoTitle %}
{% endif %}
<title>{{ seoTitle }}</title>
{% set seoDescription = '' %}
{% if seoData.seoDescription is defined and seoData.seoDescription != '' %}
{% set seoDescription = seoData.seoDescription %}
{% endif %}
<meta name="description" content="{{ seoDescription }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jquery.cycle.all.js') }}"></script>
<script language="JavaScript" src="{{ asset('assets/js/am.js') }}"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- <script type='text/javascript' src='/assets/x3dom/x3dom.js'> </script>-->
<!-- <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script> -->
<link href='https://fonts.googleapis.com/css?family=Almendra' rel='stylesheet'>
{# <?php $view['slots']->output('head', '') ?>#}
{% if eshop.eshopCss is defined and eshop.eshopCss != '' %}
{% set css = asset('css/' ~ eshop.eshopCss) %}
{% else %}
{% set css = asset('css/demo_standard.css') %}
{% endif %}
{% set flagImage = asset('images/flag_round_' ~ app.session.get('lang').langKey ~ '.png') %}
<link rel="stylesheet" href="{{ css }}" />
<script>
//resize x3d scene
$(document).ready(function() {
var $win = $(window);
var $discountHeight = 96;
$('#button_fullscreen').click(function() {
$('#x3d').animate({
height: ($win.height() - $discountHeight),
width: $win.width()
}, 500);
$('#x3d_section').animate({
height: ($win.height() - $discountHeight),
width: $win.width()
}, 500);
$('#x3dom-x3d_section-canvas').animate({
height: ($win.height() - $discountHeight),
width: '100%'
}, 500);
$("#x3d_section").attr("height",($win.height() - $discountHeight));
});
$('#button_defaultscreen').click(function() {
$('#x3d').animate({
height: "323px",
width: '100%'
}, 500);
$('#x3d_section').animate({
height: "323px",
width: '100%'
}, 500);
$('#x3dom-x3d_section-canvas').animate({
height: "323px",
width: '100%'
}, 500);
$("#x3d_section").attr("height","323px");
});
$('#button_product_detail_close').click(function() {
$('#x3d_product_detail').animate({
width: 0
}, 500);
});
$('#button_product_detail_close2').click(function() {
$('#x3d_product_detail').animate({
width: 0
}, 500);
});
$('#x3d_button_addcart').click(function() {
$('#x3d_info_message').animate({
height: 35
}, 500);
});
$('#x3d_info_message_close').click(function() {
$('#x3d_info_message_text').text('');
$('#button_info_message_close').hide();
$('#infoMessageTable').hide();
$('#infoMessageWrapper').hide();
$('#x3d_info_message').animate({
height: 0
}, 500);
});
$('#x3d_quick_basket_close').click(function() {
$('#x3d_quick_basket').animate({
height: 0
}, 500);
});
$('#basketPanel').mouseover(function() {
$('#x3d_quick_basket').animate({
height: 150
}, 500);
$('#quickBasketTable').show();
$('#x3d_quick_basket_close').show();
var full_url = document.URL;
//var shopId = full_url.substring(full_url.lastIndexOf('/') + 1);
getQuickBasket({{ eshop.eshopId }});
});
$('#x3d_quick_basket').mouseleave(function() {
$('#x3d_quick_basket').animate({
height: 0
}, 500);
$('#quickBasketTable').hide();
});
$('#button_item_detail_close').click(function() {
$('#x3d_item_detail').animate({
width: 0
}, 500);
});
$('#button_item_detail_close2').click(function() {
$('#x3d_item_detail').animate({
width: 0
}, 500);
});
$("#image_view_full").click( function() {
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("image_view_full");
var modalImg = document.getElementById("img_modal");
var captionText = document.getElementById("caption");
//modal.show();
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
// Get the <span> element that closes the modal
var span = document.getElementById("img_modal_close");
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
});
$(".galleryItemImage").click( function() {
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("image_view_full");
var modalImg = document.getElementById("img_modal");
var captionText = document.getElementById("caption");
//modal.show();
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
// Get the <span> element that closes the modal
var span = document.getElementById("img_modal_close");
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
});
});
$(document).keydown(function(event) {
if (event.keyCode == 27) {
var modal = document.getElementById("myModal");
modal.style.display = "none";
}
})
function getQuickBasket(eshopId)
{
//alert('getQuickBasket 23: ' + eshopId);
var xmlhttp = new XMLHttpRequest();
//var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId;
if (window.location.toString().indexOf('app_dev.php') !== -1) {
var url = '/app_dev.php/api/eshop/' + eshopId + '/getbasket';
} else {
var url = '/api/eshop/' + eshopId + '/getbasket';
}
//alert('getProductDetail url: ' + url);
console.log('getQuickBasket 01: ', url);
var productName = '';
xmlhttp.open('GET', url);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
//alert('getProductDetail 25: ' + eshopId);
xmlhttp.onprogress = function () {
console.log('LOADING: ', xmlhttp.status);
};
xmlhttp.onload = function () {
console.log('DONE: ', xmlhttp.status);
};
//alert('QQW-118 xmlhttp.status: ' + xmlhttp.status);
console.log('QQW-118 getQuickBasket 02 status: ', xmlhttp.status);
xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
//alert('getQuickBasketDetail 108 :: eshopId: ' + eshopId);
console.log('QQW-119 getQuickBasket 03 eshopId: ', eshopId);
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert('response 117: ' +xmlhttp.responseText);
var responseData = JSON.parse(xmlhttp.responseText);
basketItems = responseData.basketItems;
console.log('responseText: ', xmlhttp.responseText);
//productInfo = productData.product;
//productName = productInfo.productName;
//alert('window.location: ' + window.location + " :: url: " + url);
$('#x3d_quick_basket_text').html("");
for (let index = 0; index < basketItems.length; ++index) {
const element = basketItems[index];
console.log('element: ', element);
$('#x3d_quick_basket_text').append('<div class="quickBasketRow">'
+'<span class="quickBasketName">'+element.title+'</span>'
+'<span class="quickBasketUnits">'+element.units+'</span>'
+'<span class="quickBasketPrice">'+element.price+'</span>'
+'</div>');
}
//$('#x3d_quick_basket_text').text('basket content ...');
}
}
//alert('getProductDetail 27: ' + eshopId);
}
</script>
</head>
<body>
{% for message in app.flashes('notice') %}
<div class="flash-notice">
<div class='notice'>{{ message|raw }}</div>
</div>
{% endfor %}
{% for message in app.flashes('error') %}
<div class="flash-error">
<div class='error'>{{ message|raw }}</div>
</div>
{% endfor %}
<!-- result info message -->
<div style="position: fixed; top: 0em; width: 100%; height: 0px; display:block; border-bottom: 1px solid #EFEFEF; background-color: Gray; opacity: 0.95; text-align:center; font-family: helvetica, sans-serif; font-weight: bold; font-size: 10px; color: #FFF; padding-top:0px; z-index: 177; " id="x3d_info_message">
<div style="width: 100%; border-bottom: 3px solid Green; display: none;" id="infoMessageWrapper">
<table border='0' id='infoMessageTable' class='infoMessageTable' align="center" cellpadding='0' cellspacing='0' style="display: none;">
<tr>
<td valign='top'>
</td>
<td valign='top'>
<div id="x3d_info_message_text" style="font-weight: bold; font-size: 16px; margin-top: 7px; margin-left:5px"></div>
</td>
<td valign='top'>
<div id="x3d_info_message_cart_link" style="font-weight: normal; font-size: 16px; margin-top: 4px; margin-left:5px">
<button id="button_info_message_cart_button" style="font-family: helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: Gray; border: 1px solid #111; color: white;margin-left:12px; background-size: 25px 25px; height: 27px; width: 127px; margin-top: 2px; display: block" title="Go to Basket" VALUE="x" onclick="window.location.href='/eshop/{{ eshop.eshopId }}/basket';">{{ 'eshop.go_to_basket'|trans }}</button>
</div>
</td>
<td valign='top'>
<div style="margin-top:2px; text-align: left; float: left;" id="x3d_info_message_close">
<button id="button_info_message_close" style="font-family: helvetica, sans-serif; font-size: 12px; font-weight: bold; background-color: Gray; border: 1px solid #111; color: white ;margin-left:12px; background-size: 25px 25px; height: 27px; width: 27px; margin-top: 2px; display: none" title="close" VALUE="x">x</button>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- The Modal -->
<div id="myModal" style="display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.8);">
<span id="img_modal_close" style="position: absolute; top: 35px; right: 45vw; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s;">×</span>
<img id="img_modal" style="margin: auto; display: block; width: 80%; max-width: 700px; animation-name: zoom; animation-duration: 0.6s;-webkit-animation-name: zoom; -webkit-animation-duration: 0.6s;transition: 0.5s;">
<div id="caption" style="margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; animation-name: zoom; animation-duration: 0.6s;-webkit-animation-name: zoom; -webkit-animation-duration: 0.6s;transition: 0.5s;"></div>
</div>
<div class="content">
{% block content %}{% endblock %}
</div>
<!-- quick basket -->
<div style="position: absolute; top: 0px; width: 50%; height: 0px; display:block; background-color: Gray; opacity: 0.95; text-align:center; font-family: helvetica, sans-serif; font-weight: bold; font-size: 10px; color: #FFF; padding-top:0px; z-index: 1; margin-left: auto; margin-right: auto;" class="x3d_quick_basket" id="x3d_quick_basket">
<table border='0' id='quickBasketTable' class='quickBasketTable' align="center" cellpadding='0' cellspacing='0' style="display: none">
<tr>
<td valign='top'>
<div id="x3d_quick_basket_title" style="font-weight: normal; font-size: 16px; margin-top: 7px; margin-left:5px"><h4>{{ 'eshop.basket_quick'|trans }}</h4></div>
</td>
</tr>
<tr>
<td valign='top'>
<div id="x3d_quick_basket_text" style="font-weight: normal; font-size: 16px; margin-top: 7px; margin-left:5px"></div>
</td>
</tr>
<tr>
<td valign='top'>
<div style="margin-top:1px; display: inline-block; text-align: left; float: left;" id="x3d_quick_basket_open">
<button id="button_quick_basket_open" style="font-family: helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: Gray; border: 1px solid #111; color: white; margin-left:12px; background-size: 25px 25px; height: 27px; width: 150px; margin-top: 2px" title="Go to Basket" value="Go to Basket" onclick="window.location.href='/eshop/{{ eshop.eshopId }}/basket';">{{ 'eshop.go_to_basket'|trans }}</button>
</div>
<div style="margin-top:1px;text-align: left; display: inline-block; float: left; " id="x3d_quick_basket_close">
<button id="button_quick_basket_close" style="font-family: helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: Gray; border: 1px solid #111; color: white; margin-left:12px; background-size: 25px 25px; height: 27px; width: 27px; margin-top: 2px" title="close quick basket panel" value="x">x</button>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>