templates/frontend/category/category.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% trans_default_domain 'store' %}
  3. {% form_theme form 'form/front.html.twig' %}
  5. {% block title %}
  6.     {{ category.metaTitle }}
  7.     {% if app.request.attributes.get('av24h') %}
  8.         {{ 'products_in_24h_delivery'|trans({}, 'store', locale) }}
  9.     {% endif %}
  10.     {% if (app.request.query.get('page') == 1 or app.request.query.get('page') == null) %}
  11.     {% else %}
  12.         - {{ 'page'|trans }} {{ app.request.get('page') }}
  13.     {% endif %}
  14. {% endblock %}
  16. {% block meta_desc_key %}
  17.     {% if category.metaDescription is defined %}
  18.         <meta name="description" content="{{ category.metaDescription|raw }}">
  19.     {% else %}
  20.         <meta name="description" content="Centrum Krzeseł, Sprawdź krzesła i fotele do biura i domu. Niskie ceny, gwarancja oraz dostawa 24h. Kup teraz!">
  21.     {% endif %}
  23.     {% if category.metaKeywords is defined %}
  24.         <meta name="keywords" content="{{ category.metaKeywords|raw }}">
  25.     {% else %}
  26.         <meta name="keywords" content="krzesła, fotele, hokery, meble, sklep internetowy, zakupy, centrum krzeseł">
  27.     {% endif %}
  28.     {% if app.request.locale == 'pl' %}
  29.         {# veltis tag #}
  30.         {#
  31.         <script async src='https://app.veltis.io/uploads/veltis.js'></script><script>window.veltisData = window.veltisData || []; function veltisTag() { veltisData.push(arguments); } veltisTag('js', new Date()); veltisTag('config', '1aadaf84c154d3e3'); </script>
  32.         #}
  33.     {% endif %}
  34. {% endblock %}
  36. {% block facebook %}
  37.     {% if category.imageName %}
  38.         <meta property="og:image" content="{{ language.storeUrl }}/images/category/{{ category.imageName }}"/>
  39.     {% endif %}
  40.     {% autoescape %}
  41.         <meta property="og:title" content="{{ category.name }}"/>
  42.     {% endautoescape %}
  43.     <meta property="og:url" content="{{ language.storeUrl }}{{ path('category', {'slug':category.slug, 'id':category.id}) }}"/>
  44.     <meta property="og:type" content="product.group"/>
  46.     {% if category.metaDescription is defined %}
  47.         <meta property="og:description" content="{{ category.metaDescription|raw }}">
  48.     {% else %}
  49.         <meta property="og:description" content="{{ category.metaTitle|raw }}">
  50.     {% endif %}
  52.     {% if app.request.get('slug') is defined and app.request.get('page') is defined %}
  53.         {#
  54.         {{ linkrel|raw }}
  55.         #}
  56.     {% endif %}
  58.     {% if app.request.locale == 'pl' %}
  59.         {% if category.getCanonical %}
  60.             <link rel="canonical" href="{{ category.getCanonical }}" />
  61.         {% else %}
  63.             {% if app.request.get('search') %}
  64.                 <link rel="canonical" href="https://www.centrumkrzesel.pl{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  65.             {% elseif app.request.attributes.get('av24h') %}
  66.                 <link rel="canonical" href="https://www.centrumkrzesel.pl{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  67.             {% elseif app.request.get('page') == 1 %}
  68.                 <link rel="canonical" href="https://www.centrumkrzesel.pl{{ path('category', {'slug':category.slug, 'id':category.id}) }}" />
  69.             {% elseif app.request.get('page') >= 2 %}
  70.             {% endif %}
  71.         {% endif %}
  72.     {% endif %}
  74.     {% if app.request.locale == 'cz' %}
  75.         {% if category.getCanonical %}
  76.             <link rel="canonical" href="{{ category.getCanonical }}" />
  77.         {% else %}
  79.             {% if app.request.get('search') %}
  80.                 <link rel="canonical" href="https://www.ezidle.cz{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  81.             {% elseif app.request.attributes.get('av24h') %}
  82.                 <link rel="canonical" href="https://www.ezidle.cz{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  83.             {% elseif app.request.get('page') == 1 %}
  84.                 <link rel="canonical" href="https://www.ezidle.cz{{ path('category', {'slug':category.slug, 'id':category.id}) }}" />
  85.             {% elseif app.request.get('page') >= 2 %}
  86.             {% endif %}
  87.         {% endif %}
  88.     {% endif %}
  90.     {% if app.request.locale == 'sk' %}
  91.         {% if category.getCanonical %}
  92.             <link rel="canonical" href="{{ category.getCanonical }}" />
  93.         {% else %}
  95.             {% if app.request.get('search') %}
  96.                 <link rel="canonical" href="https://www.stolicky24.sk{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  97.             {% elseif app.request.attributes.get('av24h') %}
  98.                 <link rel="canonical" href="https://www.stolicky24.sk{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  99.             {% elseif app.request.get('page') == 1 %}
  100.                 <link rel="canonical" href="https://www.stolicky24.sk{{ path('category', {'slug':category.slug, 'id':category.id}) }}" />
  101.             {% elseif app.request.get('page') >= 2 %}
  102.             {% endif %}
  103.         {% endif %}
  104.     {% endif %}
  106.     {% if app.request.locale == 'ro' %}
  107.         {% if category.getCanonical %}
  108.             <link rel="canonical" href="{{ category.getCanonical }}" />
  109.         {% else %}
  111.             {% if app.request.get('search') %}
  112.                 <link rel="canonical" href="https://www.mobila24.ro{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  113.             {% elseif app.request.attributes.get('av24h') %}
  114.                 <link rel="canonical" href="https://www.mobila24.ro{{ path('category', {'id':category.id, 'slug':category.slug}) }}" />
  115.             {% elseif app.request.get('page') == 1 %}
  116.                 <link rel="canonical" href="https://www.mobila24.ro{{ path('category', {'slug':category.slug, 'id':category.id}) }}" />
  117.             {% elseif app.request.get('page') >= 2 %}
  118.             {% endif %}
  119.         {% endif %}
  120.     {% endif %}
  122. {% endblock %}
  124. {% block css %}
  125.     {{ parent() }}
  126.     <style>
  128.         /* Kolory w bocznym menu rozwijanym dzialaja, ale problem jest w tym ze input typu checkbox nie ma backgrounda i trzeba z osobna dodawac kazdy background image z kazdym kolorem/tkanina. Checkbox dodaje sie sam. Jezeli tkanina jest jasna, checkbox musi byc czarny*/
  129.         #kolory  label.kolor-czerowny:before {
  130.             background: url(/images/red-bg.png)center center no-repeat;
  131.         }
  132.         #kolory input[type=checkbox]:checked + label.kolor-czerowny:before {
  133.             background:url(/images/check.png)center center no-repeat, url(/images/red-bg.png)center center no-repeat;
  134.         }
  136.         #kolory  label.kolor-zielony:before {
  137.             background: url(/images/zielony-bg.png)center center no-repeat;
  138.         }
  139.         #kolory input[type=checkbox]:checked + label.kolor-zielony:before {
  140.             background:url(/images/check-czarny.png)center center no-repeat, url(/images/zielony-bg.png)center center no-repeat;
  141.         }
  143.         @media (max-width: 1022px) {
  144.             label.checkbox {
  145.                 margin-bottom: 8px!important;
  146.             }
  147.         }
  149.         @media (min-width: 900px) {
  150.             #search_functions, #search_execution {
  151.                 max-height: 470px;
  152.                 overflow-y: auto;
  153.                 overflow-x: hidden;
  154.             }
  155.             .image img {
  156.                 width:auto;
  157.                 margin-left: auto;
  158.                 margin-right: auto;
  159.             }
  160.         }
  162.         @media (max-width: 500px) {
  163.             .with-description {
  164.                 height:auto!important;
  165.             }
  166.         }
  168.         .cat-desc-excerpt {
  169.             overflow: hidden;
  170.             text-overflow: ellipsis;
  171.             height: 110px;
  172.         }
  174.         #cat-desc-excerpt h2 {
  175.             font-size:initial!important;
  176.             font-weight: bold;
  177.         }
  178.         #cat-desc-excerpt h1 {
  179.             font-size:initial!important;
  180.         }
  181.         #cat-desc-excerpt h3 {
  182.             font-size:initial!important;
  183.         }
  184.         #cat-desc-excerpt a {
  185.             color:#ef1b2b!important;
  186.         }
  187.         #cat-desc-excerpt ul {
  188.             list-style: initial!important;
  189.         }
  190.         #cat-desc-excerpt li {
  191.             list-style: initial!important;
  192.             margin-left:30px;
  193.         }
  195.         #search_color .checkbox {
  196.             display: block;
  197.             position: relative;
  198.             padding-left: 35px;
  199.             margin-bottom: 12px;
  200.             cursor: pointer;
  201.             -webkit-user-select: none;
  202.             -moz-user-select: none;
  203.             -ms-user-select: none;
  204.             user-select: none;
  205.         }
  207.         /* Hide the browser's default checkbox */
  208.         #search_color .checkbox input {
  209.             position: absolute;
  210.             opacity: 0;
  211.             cursor: pointer;
  212.             height: 0;
  213.             width: 0;
  214.         }
  216.         /* Create a custom checkbox */
  217.         #search_color .checkmark {
  218.             position: absolute;
  219.             top: 0;
  220.             left: 0;
  221.             height: 22px;
  222.             width: 22px;
  223.             background-color: #ebebeb;
  224.         }
  226.         /* Create the checkmark/indicator (hidden when not checked) */
  227.         #search_color .checkmark:after {
  228.             content: "";
  229.             position: absolute;
  230.             display: none;
  231.         }
  233.         /* Show the checkmark when checked */
  234.         #search_color .checkbox input:checked ~ .checkmark:after {
  235.             display: block;
  236.         }
  238.         /* Style the checkmark/indicator */
  239.         #search_color .checkbox .checkmark:after {
  240.             left: 9px;
  241.             top: 5px;
  242.             width: 5px;
  243.             height: 10px;
  244.             border: solid white;
  245.             border-width: 0 3px 3px 0;
  246.             -webkit-transform: rotate(45deg);
  247.             -ms-transform: rotate(45deg);
  248.             transform: rotate(45deg);
  249.         }
  251.         /* MOBILE COLORS */
  254.         #search_colorMobile .checkbox {
  255.             display: block;
  256.             position: relative;
  257.             padding-left: 35px;
  258.             margin-bottom: 12px;
  259.             cursor: pointer;
  260.             -webkit-user-select: none;
  261.             -moz-user-select: none;
  262.             -ms-user-select: none;
  263.             user-select: none;
  264.         }
  266.         /* Hide the browser's default checkbox */
  267.         #search_colorMobile .checkbox input {
  268.             position: absolute;
  269.             opacity: 0;
  270.             cursor: pointer;
  271.             height: 0;
  272.             width: 0;
  273.         }
  275.         /* Create a custom checkbox */
  276.         #search_colorMobile .checkmark {
  277.             position: absolute;
  278.             top: 0;
  279.             left: 0;
  280.             height: 22px;
  281.             width: 22px;
  282.             background-color: #ebebeb;
  283.         }
  285.         /* Create the checkmark/indicator (hidden when not checked) */
  286.         #search_colorMobile .checkmark:after {
  287.             content: "";
  288.             position: absolute;
  289.             display: none;
  290.         }
  292.         /* Show the checkmark when checked */
  293.         #search_colorMobile .checkbox input:checked ~ .checkmark:after {
  294.             display: block;
  295.         }
  297.         /* Style the checkmark/indicator */
  298.         #search_colorMobile .checkbox .checkmark:after {
  299.             left: 9px;
  300.             top: 5px;
  301.             width: 5px;
  302.             height: 10px;
  303.             border: solid white;
  304.             border-width: 0 3px 3px 0;
  305.             -webkit-transform: rotate(45deg);
  306.             -ms-transform: rotate(45deg);
  307.             transform: rotate(45deg);
  308.         }
  311.     </style>
  312.     <style>
  313.         #search_availability .checkbox {
  314.             float:left;
  315.         }
  316.     </style>
  317. {% endblock %}
  318. {% block javascripts %}
  319.     {{ parent() }}
  320.     <script>
  321.         $(document).ready(function () {
  322.             $('#search_sorting').on("change", function() {
  323.                 $('#submitButton').trigger("click");
  324.             });
  325.             $('.wiecej-pomieszczen').trigger("click");
  327.             {% if app.request.attributes.get('av24h') %}
  328.                 $('#search_availability_5').on("click", function() {
  329.                     if (!$(this).is(":selected")) {
  330.                         var url = $('#current_url').val();
  331.                         window.location.href = url;
  332.                         return;
  333.                     } else {
  334.                         var url = $('#current_url_24h').val();
  335.                         window.location.href = url;
  336.                         return;
  337.                     }
  338.                 });
  339.             {% else %}
  340.                 $('#search_availability_5').on("click", function() {
  341.                     if (!$(this).is(":selected")) {
  342.                         var url = $('#current_url_24h').val();
  343.                         window.location.href = url;
  344.                         return;
  345.                     } else {
  346.                         var url = $('#current_url').val();
  347.                         window.location.href = url;
  348.                         return;
  349.                     }
  350.                 });
  351.             {% endif %}
  353.             {% if app.request.attributes.get('av24h') %}
  354.                 $('#search_availability_5').prop("checked", true);
  355.             {% else %}
  357.             {% endif %}
  359.             $('.productsPerPage').on("change", function() {
  360.                 var productsPerPage = $(this).val();
  361.                 var url = $('#change_products_per_page_url').val();
  362.                 $.ajax({
  363.                     type: "POST",
  364.                     url: url,
  365.                     data: {'productsPerPage':productsPerPage},
  366.                     success: function (data) {
  367.                         window.location.reload();
  368.                     }
  369.                 });
  370.             });
  372.             $('#search_color label input').each(function() {
  373.                 var color = $(this).attr('color');
  374.                 $(this).parent().css("padding-top", "2px");
  375.                 if (color === '#ffffff' || color === '#FFFFFF') {
  376.                     $(this).next('span').css("border", '1px solid black');
  377.                 } else {
  378.                     $(this).next('span').css("background-color", color);
  379.                 }
  380.             });
  382.             $(document).on('click','.is-mobile',function(){
  383.                 $('#search_colorMobile label input').each(function() {
  384.                     var color = $(this).attr('color');
  385.                     $(this).parent().css("padding-top", "2px");
  386.                     if (color === '#ffffff' || color === '#FFFFFF') {
  387.                         $(this).next('span').css("border", '1px solid black');
  388.                     } else {
  389.                         $(this).next('span').css("background-color", color);
  390.                     }
  391.                 });
  392.             });
  393.         });
  394.     </script>
  395. {% endblock %}
  397. {% block content %}
  398.     <input type="hidden" id="current_url" value="{{ path('category', {'id':category.id, 'slug':category.slug}) }}"/>
  399.     <input type="hidden" id="current_url_24h" value="{{ path('category', {'id':category.id, 'av24h':'24h', 'slug':category.slug}) }}"/>
  400.     <input type="hidden" id="change_products_per_page_url" value="{{ path('change_products_per_page') }}"/>
  402.     <!-- START OF CATEGORY NAME SECTION -->
  403.     <section class="section topSection">
  404.         <div class="container">
  405.             <div class="columns is-multiline">
  407.                 <div class="column is-full">
  408.                     <h1 style="display: inline-block" class="is-size-2">
  409.                         {%  if category.getCustomH1 %}
  410.                             {{ category.getCustomH1 }}
  411.                         {% else %}
  412.                             {{ category.name }}
  413.                         {% endif %}
  414.                         {% if app.request.attributes.get('av24h') %}
  416.                                 {{ 'sending_in_24h'|trans }}
  417.                             </span>
  418.                         {% endif %}
  419.                     </h1>
  420.                     <span style="display: inline-block; color:#d0d0d0!important;" class="is-size-2">({{ products.getTotalItemCount() }})</span>
  421.                 </div>
  423.                 <!-- START OF BREADCRUMBS -->
  424.                 <div class="no-top-padding column is-full" style="margin-top:-10px;">
  425.                     <nav class="breadcrumb has-arrow-separator is-hidden-mobile" aria-label="breadcrumb">
  426.                         <ul vocab="https://schema.org/" typeof="BreadcrumbList">
  427.                             <li property="itemListElement" typeof="ListItem">
  428.                                 <a id="0" property="item" typeof="WebPage" href="{{ path('homepage') }}"><span property="name">{{ language.shopName }}</span></a>
  429.                                 <meta property="position" content="1">
  430.                             </li>
  431.                             {% set c = 1 %}
  432.                             {% if category.parent is defined and category.parent %}
  433.                                 {% set c = c + 1 %}
  434.                                 <li property="itemListElement" typeof="ListItem" style="margin-top:-2px;">
  435.                                     <a id="{{ category.id }}" property="item" typeof="WebPage"  href="{{ path('category', {'id':category.parent.id, 'slug':category.parent.slug}) }}">
  436.                                         <span property="name">{{ category.parent.name }}</span>
  437.                                         {% if app.request.attributes.get('av24h') %}
  438.                                             {{ 'sending_in_24h'|trans }}
  439.                                         {% endif %}
  440.                                     </a>
  441.                                     <meta property="position" content="{{ c }}">
  442.                                 </li>
  443.                             {% endif %}
  444.                             <li property="itemListElement" typeof="ListItem" style="margin-top:-2px;">
  445.                                 <a id="{{ category.id }}" property="item" typeof="WebPage"><span property="name">{{ category.name }}</span>
  446.                                     {% if app.request.attributes.get('av24h') %}
  447.                                         {{ 'sending_in_24h'|trans }}
  448.                                     {% endif %}
  449.                                 </a>
  450.                                 <meta property="position" content="{{ c+1 }}">
  451.                             </li>
  452.                         </ul>
  453.                     </nav>
  454.                 </div>
  455.                 <!-- END OF BREADCRUMBS -->
  457.             </div>
  458.         </div>
  459.     </section>
  460.     <!-- END OF CATEGORY NAME SECTION -->
  462.     <!-- START OF MAIN SECTION -->
  463.     {{ form_start(form, {'attr': {'method':'get', 'role':'form', 'novalidate': 'novalidate'}}) }}
  464.     <section class="section remove-padding-top">
  465.         <div class="container">
  466.             <div class="columns">
  468.                 {% include 'frontend/category/_leftSidebar.html.twig' %}
  470.                 {% set criteoIds = [] %}
  472.                 <div class="columns is-multiline is-mobile lista-produktow" v-match-heights="{ el: [ '.with-description' ] }">
  474.                     {% if products.getTotalItemCount == 0 %}
  475.                         <div style="text-align: center; width:100%; padding:40px;">
  476.                             <i class="fa fa-search-minus" style="font-size:40px; font-weight: bold; padding:20px;"></i>
  477.                             <br/>
  478.                             {{ 'no_results_category'|trans }}
  479.                         </div>
  480.                     {% else %}
  481.                         {% for productData in products %}
  482.                             {% set product = productData[0] %}
  483.                             {% set criteoIds = criteoIds|merge([product.id]) %}
  484.                             {% include 'frontend/components/smallProduct.html.twig' with {'isOneThird':1, 'product':product, 'productData':productData} %}
  485.                         {% endfor %}
  486.                     {% endif %}
  487.                 </div>
  489.             </div>
  490.                 <!-- END OF PRODUCT LIST -->
  491.         </div>
  492.         <div class="level-right">
  493.             <div class="level-item">
  494.                 {{ knp_pagination_render(products) }}
  495.             </div>
  496.         </div>
  497.     </section>
  498.     {{ form_end(form) }}
  499.     <!-- END OF MAIN SECTION -->
  501.     {% include 'frontend/category/_lastViewed.html.twig' %}
  503.     {% if category.getDescription and (app.request.query.get('page') == 1 or app.request.query.get('page') == null) %}
  504.         <div class="section">
  505.             <div class="container">
  507.                 <div id="js_cat-desc-content">
  508.                     <div id="cat-desc-excerpt" class="cat-desc-excerpt ellipsis" style="font-size: 13px;">
  509.                         {{ category.getDescription|strongReplacer|raw }}
  510.                     </div>
  511.                     <a class="dotted-link read-more" style="margin-top:10px; float:right;" data-target="js_cat-desc-content" role="button">{{ 'read_more'|trans }}...</a>
  512.                 </div>
  515.             </div>
  516.         </div>
  517.     {% endif %}
  519.     {% set criteoCount = 0 %}
  521.     {% if app.request.locale == 'pl' %}
  523.         <script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
  524.         <script type="text/javascript">
  525.             window.criteo_q = window.criteo_q || [];
  526.             var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
  527.             window.criteo_q.push(
  528.                 { event: "setAccount", account: 36267 },
  529.                 { event: "setSiteType", type: deviceType },
  530.                 { event: "setEmail", email: "{% if app.user.email is defined %} {{ app.user.email }} {% endif %}" },
  531.                 { event: "viewList", item:[ {% for item in criteoIds|slice(0,3) %}{% set criteoCount = criteoCount + 1 %}{% if criteoCount != 3 %} "{{ item }}", {% else %} "{{ item }}"{% endif %} {% endfor %} ]}
  532.             );
  533.         </script>
  535.     {% endif %}
  537. {% endblock %}