templates/eshopBase.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="{{ app.request.locale }}">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         {% set seoTitle = '' %}
  6.         {% if seoData.seoTitle is defined and seoData.seoTitle != '' %}
  7.             {% set seoTitle = seoData.seoTitle %}
  8.         {% endif %}
  9.         <title>{{ seoTitle }}</title>
  10.         {% set seoDescription = '' %}
  11.         {% if seoData.seoDescription is defined and seoData.seoDescription != '' %}
  12.             {% set seoDescription = seoData.seoDescription %}
  13.         {% endif %}
  14.         <meta name="description" content="{{ seoDescription }}">
  15.         <meta name="viewport" content="width=device-width, initial-scale=1">
  16.         <script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
  17.         <script src="{{ asset('assets/vendor/jquery.cycle.all.js') }}"></script>
  18.         <script language="JavaScript" src="{{ asset('assets/js/am.js') }}"></script>
  19.         <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  20.         <!-- <script type='text/javascript' src='/assets/x3dom/x3dom.js'> </script>-->
  21.         
  22.         <!-- <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script> -->
  23.         
  24.         <link href='https://fonts.googleapis.com/css?family=Almendra' rel='stylesheet'>
  26. {#        <?php $view['slots']->output('head', '') ?>#}
  29.         {% if eshop.eshopCss is defined and eshop.eshopCss != '' %}
  30.             {% set css = asset('css/' ~ eshop.eshopCss) %}
  31.         {% else %}
  32.             {% set css = asset('css/demo_standard.css') %}
  33.         {% endif %}
  35.         {% set flagImage = asset('images/flag_round_' ~ app.session.get('lang').langKey ~ '.png') %}
  37.         <link rel="stylesheet" href="{{ css }}" />
  39.     <script>
  40.         //resize x3d scene
  41.     $(document).ready(function() {
  42.       var $win = $(window);
  43.       var $discountHeight = 96;
  44.       $('#button_fullscreen').click(function() {
  45.         $('#x3d').animate({
  46.             height: ($win.height() - $discountHeight),
  47.             width: $win.width()
  48.         }, 500);
  49.         $('#x3d_section').animate({
  50.             height: ($win.height() - $discountHeight),
  51.             width: $win.width()
  52.         }, 500);
  53.         $('#x3dom-x3d_section-canvas').animate({
  54.             height: ($win.height() - $discountHeight),
  55.             width: '100%'
  56.         }, 500);     
  57.         $("#x3d_section").attr("height",($win.height() - $discountHeight));
  58.       });
  59.       
  60.       $('#button_defaultscreen').click(function() {
  61.         $('#x3d').animate({
  62.             height: "323px",
  63.             width: '100%'
  64.         }, 500);
  65.         $('#x3d_section').animate({
  66.           height: "323px",
  67.           width: '100%'
  68.         }, 500);      
  69.         $('#x3dom-x3d_section-canvas').animate({
  70.           height: "323px",
  71.           width: '100%'
  72.         }, 500);        
  73.         $("#x3d_section").attr("height","323px");  
  74.       });
  75.           
  76.       $('#button_product_detail_close').click(function() {
  77.         $('#x3d_product_detail').animate({
  78.           width: 0
  79.         }, 500);
  80.       });
  81.       $('#button_product_detail_close2').click(function() {
  82.         $('#x3d_product_detail').animate({
  83.           width: 0
  84.         }, 500);
  85.       });        
  87.       $('#x3d_button_addcart').click(function() {
  88.         $('#x3d_info_message').animate({
  89.           height: 35
  90.         }, 500);
  91.       });        
  93.       $('#x3d_info_message_close').click(function() {
  94.         $('#x3d_info_message_text').text('');   
  95.         $('#button_info_message_close').hide();
  96.         $('#infoMessageTable').hide();  
  97.         $('#infoMessageWrapper').hide();         
  98.         $('#x3d_info_message').animate({
  99.           height: 0
  100.         }, 500);  
  101.       });  
  104.       $('#x3d_quick_basket_close').click(function() {     
  105.         $('#x3d_quick_basket').animate({
  106.           height: 0
  107.         }, 500);
  108.       });       
  110.       $('#basketPanel').mouseover(function() {
  111.         $('#x3d_quick_basket').animate({
  112.           height: 150
  113.         }, 500);
  114.         $('#quickBasketTable').show();  
  115.         $('#x3d_quick_basket_close').show();
  116.         var full_url = document.URL; 
  117.         //var shopId = full_url.substring(full_url.lastIndexOf('/') + 1);
  118.         getQuickBasket({{ eshop.eshopId }});
  119.       });
  121.       $('#x3d_quick_basket').mouseleave(function() {
  122.         $('#x3d_quick_basket').animate({
  123.           height: 0
  124.         }, 500);
  125.         $('#quickBasketTable').hide();  
  126.       });    
  128.       $('#button_item_detail_close').click(function() {
  129.         $('#x3d_item_detail').animate({
  130.           width: 0
  131.         }, 500);
  132.       });
  133.       $('#button_item_detail_close2').click(function() {
  134.         $('#x3d_item_detail').animate({
  135.           width: 0
  136.         }, 500);
  137.       });     
  140.       $("#image_view_full").click( function() {
  141.           var modal = document.getElementById("myModal");
  143.           // Get the image and insert it inside the modal - use its "alt" text as a caption
  144.           var img = document.getElementById("image_view_full");
  145.           var modalImg = document.getElementById("img_modal");
  146.           var captionText = document.getElementById("caption");
  148.           //modal.show();
  150.           modal.style.display = "block";
  151.           modalImg.src = this.src;
  152.           captionText.innerHTML = this.alt;
  154.           // Get the <span> element that closes the modal
  155.           var span = document.getElementById("img_modal_close");
  157.           // When the user clicks on <span> (x), close the modal
  158.           span.onclick = function() { 
  159.             modal.style.display = "none";
  160.           }
  161.       });
  162.       
  163.       $(".galleryItemImage").click( function() {
  164.           var modal = document.getElementById("myModal");
  166.           // Get the image and insert it inside the modal - use its "alt" text as a caption
  167.           var img = document.getElementById("image_view_full");
  168.           var modalImg = document.getElementById("img_modal");
  169.           var captionText = document.getElementById("caption");
  171.           //modal.show();
  173.           modal.style.display = "block";
  174.           modalImg.src = this.src;
  175.           captionText.innerHTML = this.alt;
  177.           // Get the <span> element that closes the modal
  178.           var span = document.getElementById("img_modal_close");
  180.           // When the user clicks on <span> (x), close the modal
  181.           span.onclick = function() { 
  182.             modal.style.display = "none";
  183.           }
  184.       });
  188.     });
  191.     $(document).keydown(function(event) { 
  192.       if (event.keyCode == 27) { 
  194.         var modal = document.getElementById("myModal");
  196.         modal.style.display = "none";
  197.       }
  198.     })
  200.     function getQuickBasket(eshopId) 
  201.     {
  202.       //alert('getQuickBasket 23: ' + eshopId);
  203.       
  204.       var xmlhttp = new XMLHttpRequest();
  205.       //var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId;
  206.       
  207.       if (window.location.toString().indexOf('app_dev.php') !== -1) {
  208.         var url = '/app_dev.php/api/eshop/' + eshopId + '/getbasket';
  209.       } else {
  210.         var url = '/api/eshop/' + eshopId + '/getbasket';
  211.       }
  213.       //alert('getProductDetail url: ' + url);
  214.       console.log('getQuickBasket 01: ', url);
  215.       
  216.       var productName = '';
  217.       xmlhttp.open('GET', url);
  218.       xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  220.       //alert('getProductDetail 25: ' + eshopId);
  222.       xmlhttp.onprogress = function () {
  223.         console.log('LOADING: ', xmlhttp.status);
  224.       };
  226.       xmlhttp.onload = function () {
  227.         console.log('DONE: ', xmlhttp.status);
  228.       };        
  230.       //alert('QQW-118 xmlhttp.status: ' + xmlhttp.status);
  232.       console.log('QQW-118 getQuickBasket 02 status: ', xmlhttp.status);
  234.       xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
  235.           //alert('getQuickBasketDetail 108 :: eshopId: ' + eshopId);
  237.           console.log('QQW-119 getQuickBasket 03 eshopId: ', eshopId);
  239.           if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  240.               alert('response 117: ' +xmlhttp.responseText);
  241.               var responseData = JSON.parse(xmlhttp.responseText);
  242.               basketItems = responseData.basketItems;
  243.               console.log('responseText: ', xmlhttp.responseText);
  244.               //productInfo = productData.product;
  245.               //productName = productInfo.productName;
  246.               //alert('window.location: ' + window.location + " :: url: " + url);
  248.               $('#x3d_quick_basket_text').html("");
  250.               for (let index = 0; index < basketItems.length; ++index) {
  251.                   const element = basketItems[index];
  253.                   console.log('element: ', element);
  255.                   $('#x3d_quick_basket_text').append('<div class="quickBasketRow">'
  256.                                                     +'<span class="quickBasketName">'+element.title+'</span>'
  257.                                                     +'<span class="quickBasketUnits">'+element.units+'</span>'
  258.                                                     +'<span class="quickBasketPrice">'+element.price+'</span>'
  259.                                                     +'</div>');
  261.                 }
  263.               //$('#x3d_quick_basket_text').text('basket content ...');
  265.           }
  266.       }
  268.       //alert('getProductDetail 27: ' + eshopId);
  270.     }          
  272.     </script>
  274.     </head>
  275.     <body>
  276.         {% for message in app.flashes('notice') %}
  277.             <div class="flash-notice">
  278.                 <div class='notice'>{{ message|raw }}</div>
  279.             </div>
  280.         {% endfor %}
  281.         {% for message in app.flashes('error') %}
  282.             <div class="flash-error">
  283.                 <div class='error'>{{ message|raw }}</div>
  284.             </div>
  285.         {% endfor %}
  287.         <!-- result info message -->
  288.         <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">
  290.             <div style="width: 100%; border-bottom: 3px solid Green; display: none;" id="infoMessageWrapper">
  292.               <table border='0' id='infoMessageTable' class='infoMessageTable' align="center" cellpadding='0' cellspacing='0' style="display: none;">
  293.                 <tr>
  294.                   <td valign='top'>
  295.                   </td>
  296.                   <td valign='top'> 
  297.                       <div id="x3d_info_message_text" style="font-weight: bold; font-size: 16px; margin-top: 7px; margin-left:5px"></div>
  298.                   </td>
  299.                   <td valign='top'> 
  300.                       <div id="x3d_info_message_cart_link" style="font-weight: normal; font-size: 16px; margin-top: 4px; margin-left:5px">
  301.                         <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>
  302.                       </div>
  303.                   </td>                 
  304.                   <td valign='top'> 
  305.                       <div style="margin-top:2px; text-align: left; float: left;" id="x3d_info_message_close">
  306.                       <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>
  307.                       </div>  
  308.                   </td>                       
  309.                 </tr>
  310.               </table>    
  311.             </div>
  312.         </div>  
  314.       <!-- The Modal -->
  315.       <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);">
  316.         <span id="img_modal_close" style="position: absolute; top: 35px; right: 45vw; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s;">&times;</span>
  317.         <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;">
  318.         <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>
  319.       </div>
  320.     
  321.         <div class="content">
  322.             {% block content %}{% endblock %}
  323.       </div>
  325.           <!-- quick basket  -->
  326.         <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">
  328.           <table border='0' id='quickBasketTable' class='quickBasketTable' align="center" cellpadding='0' cellspacing='0' style="display: none">
  329.            
  330.             <tr>
  331.               <td valign='top'>
  332.                 <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>
  333.               </td>
  334.             </tr>                       
  335.             <tr>
  336.               <td valign='top'>
  337.                 <div id="x3d_quick_basket_text" style="font-weight: normal; font-size: 16px; margin-top: 7px; margin-left:5px"></div>
  338.               </td> 
  339.             </tr> 
  340.             <tr>          
  341.               <td valign='top'>
  342.                 <div style="margin-top:1px; display: inline-block; text-align: left; float: left;" id="x3d_quick_basket_open">
  343.                 <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>
  344.                 </div>                 
  345.                 <div style="margin-top:1px;text-align: left; display: inline-block; float: left; " id="x3d_quick_basket_close">
  346.                 <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>
  347.                 </div>  
  348.               </td>             
  349.             </tr>
  350.           </table>    
  351.         
  352.           </div>                        
  353.                 
  354.     </body>
  355. </html>