templates/frontend/furnitureType/furnitureType.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.     {{ furnitureType.metaTitle }}
  7.     {% if app.request.attributes.get('customFilter') == '24h' %}
  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 furnitureType.metaDescription is defined %}
  18.         <meta name="description" content="{{ furnitureType.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 furnitureType.metaKeywords is defined %}
  24.         <meta name="keywords" content="{{ furnitureType.metaKeywords|raw }}">
  25.     {% else %}
  26.         <meta name="keywords" content="krzesła, fotele, hokery, meble, sklep internetowy, zakupy, centrum krzeseł">
  27.     {% endif %}
  29.     {% if app.request.locale == 'pl' %}
  30.         {# veltis tag #}
  31.         {#
  32.         <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>
  33.         #}
  34.     {% endif %}
  35. {% endblock %}
  37. {% block facebook %}
  38.     {% if furnitureType.imageName %}
  39.         <meta property="og:image" content="{{ language.storeUrl }}/images/category/{{ furnitureType.imageName }}"/>
  40.     {% endif %}
  41.     {% autoescape %}
  42.         <meta property="og:title" content="{{ furnitureType.name }}"/>
  43.     {% endautoescape %}
  44.     <meta property="og:url" content="{{ language.storeUrl }}{{ path('furnitureType', {'slug':furnitureType.slug, 'furnitureTypeId':furnitureType.id}) }}"/>
  46.     {% if furnitureType.metaDescription is defined %}
  47.         <meta property="og:description" content="{{ furnitureType.metaDescription|raw }}">
  48.     {% else %}
  49.         <meta property="og:description" content="{{ furnitureType.metaTitle|raw }}">
  50.     {% endif %}
  52.     <meta property="og:type" content="product.group"/>
  54.     {% if furnitureType.getCanonical %}
  55.         <link rel="canonical" href="{{ furnitureType.getCanonical }}" />
  56.     {% else %}
  58.         {% if app.request.get('search') %}
  59.             {% if app.request.locale == 'pl' %}
  60.                 <link rel="canonical" href="https://www.centrumkrzesel.pl{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  61.             {% endif %}
  62.             {% if app.request.locale == 'cz' %}
  63.                 <link rel="canonical" href="https://www.ezidle.cz{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  64.             {% endif %}
  65.             {% if app.request.locale == 'sk' %}
  66.                 <link rel="canonical" href="https://www.stolicky24.sk{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  67.             {% endif %}
  68.             {% if app.request.locale == 'ro' %}
  69.                 <link rel="canonical" href="https://www.mobila24.ro{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  70.             {% endif %}
  71.         {% elseif app.request.attributes.get('customFilter') == '24h' %}
  72.             {% if app.request.locale == 'pl' %}
  73.                 <link rel="canonical" href="https://www.centrumkrzesel.pl{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  74.             {% endif %}
  75.             {% if app.request.locale == 'cz' %}
  76.                 <link rel="canonical" href="https://www.ezidle.cz{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  77.             {% endif %}
  78.             {% if app.request.locale == 'sk' %}
  79.                 <link rel="canonical" href="https://www.stolicky24.sk{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  80.             {% endif %}
  81.             {% if app.request.locale == 'ro' %}
  82.                 <link rel="canonical" href="https://www.mobila24.ro{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}" />
  83.             {% endif %}
  84.         {% endif %}
  85.     {% endif %}
  87. {% endblock %}
  89. {% block css %}
  90.     {{ parent() }}
  91.     <style>
  93.         /* 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*/
  94.         #kolory  label.kolor-czerowny:before {
  95.             background: url(/images/red-bg.png)center center no-repeat;
  96.         }
  97.         #kolory input[type=checkbox]:checked + label.kolor-czerowny:before {
  98.             background:url(/images/check.png)center center no-repeat, url(/images/red-bg.png)center center no-repeat;
  99.         }
  101.         #kolory  label.kolor-zielony:before {
  102.             background: url(/images/zielony-bg.png)center center no-repeat;
  103.         }
  104.         #kolory input[type=checkbox]:checked + label.kolor-zielony:before {
  105.             background:url(/images/check-czarny.png)center center no-repeat, url(/images/zielony-bg.png)center center no-repeat;
  106.         }
  108.         @media (min-width: 900px) {
  109.             #search_functions, #search_execution {
  110.                 height: 470px;
  111.                 overflow-y: auto;
  112.                 overflow-x: hidden;
  113.             }
  114.             .image img {
  115.                 width:auto;
  116.                 margin-left: auto;
  117.                 margin-right: auto;
  118.             }
  119.         }
  121.         #search_color .checkbox {
  122.             display: block;
  123.             position: relative;
  124.             padding-left: 35px;
  125.             margin-bottom: 12px;
  126.             cursor: pointer;
  127.             -webkit-user-select: none;
  128.             -moz-user-select: none;
  129.             -ms-user-select: none;
  130.             user-select: none;
  131.         }
  133.         /* Hide the browser's default checkbox */
  134.         #search_color .checkbox input {
  135.             position: absolute;
  136.             opacity: 0;
  137.             cursor: pointer;
  138.             height: 0;
  139.             width: 0;
  140.         }
  142.         /* Create a custom checkbox */
  143.         #search_color .checkmark {
  144.             position: absolute;
  145.             top: 0;
  146.             left: 0;
  147.             height: 22px;
  148.             width: 22px;
  149.             background-color: #ebebeb;
  150.         }
  152.         /* Create the checkmark/indicator (hidden when not checked) */
  153.         #search_color .checkmark:after {
  154.             content: "";
  155.             position: absolute;
  156.             display: none;
  157.         }
  159.         /* Show the checkmark when checked */
  160.         #search_color .checkbox input:checked ~ .checkmark:after {
  161.             display: block;
  162.         }
  164.         /* Style the checkmark/indicator */
  165.         #search_color .checkbox .checkmark:after {
  166.             left: 9px;
  167.             top: 5px;
  168.             width: 5px;
  169.             height: 10px;
  170.             border: solid white;
  171.             border-width: 0 3px 3px 0;
  172.             -webkit-transform: rotate(45deg);
  173.             -ms-transform: rotate(45deg);
  174.             transform: rotate(45deg);
  175.         }
  177.         /* MOBILE COLORS */
  180.         #search_colorMobile .checkbox {
  181.             display: block;
  182.             position: relative;
  183.             padding-left: 35px;
  184.             margin-bottom: 12px;
  185.             cursor: pointer;
  186.             -webkit-user-select: none;
  187.             -moz-user-select: none;
  188.             -ms-user-select: none;
  189.             user-select: none;
  190.         }
  192.         /* Hide the browser's default checkbox */
  193.         #search_colorMobile .checkbox input {
  194.             position: absolute;
  195.             opacity: 0;
  196.             cursor: pointer;
  197.             height: 0;
  198.             width: 0;
  199.         }
  201.         /* Create a custom checkbox */
  202.         #search_colorMobile .checkmark {
  203.             position: absolute;
  204.             top: 0;
  205.             left: 0;
  206.             height: 22px;
  207.             width: 22px;
  208.             background-color: #ebebeb;
  209.         }
  211.         /* Create the checkmark/indicator (hidden when not checked) */
  212.         #search_colorMobile .checkmark:after {
  213.             content: "";
  214.             position: absolute;
  215.             display: none;
  216.         }
  218.         /* Show the checkmark when checked */
  219.         #search_colorMobile .checkbox input:checked ~ .checkmark:after {
  220.             display: block;
  221.         }
  223.         /* Style the checkmark/indicator */
  224.         #search_colorMobile .checkbox .checkmark:after {
  225.             left: 9px;
  226.             top: 5px;
  227.             width: 5px;
  228.             height: 10px;
  229.             border: solid white;
  230.             border-width: 0 3px 3px 0;
  231.             -webkit-transform: rotate(45deg);
  232.             -ms-transform: rotate(45deg);
  233.             transform: rotate(45deg);
  234.         }
  236.     </style>
  237. {% endblock %}
  238. {% block javascripts %}
  239.     {{ parent() }}
  240.     <script>
  241.         $(document).ready(function () {
  242.             $('#search_sorting').on("change", function() {
  243.                 $('#submitButton').trigger("click");
  244.             });
  246.             $('.more-furniture-types').trigger("click");
  248.             if ($("#search_ergonomy > label").length <= 0) {
  249.                 $(".ergonomyElement").each(function() {
  250.                     $(this).hide();
  251.                 });
  252.             }
  254.             if ($("#search_functions > label").length <= 0) {
  255.                 $(".functionsElement").each(function() {
  256.                     $(this).hide();
  257.                 });
  258.             }
  260.             if ($("#search_execution > label").length <= 0) {
  261.                 $(".executionElement").each(function() {
  262.                     $(this).hide();
  263.                 });
  264.             }
  266.             {% if app.request.attributes.get('customFilter') == '24h' %}
  267.                 $('#search_availability_5').on("click", function() {
  268.                     if (!$(this).is(":selected")) {
  269.                         var url = $('#current_url').val();
  270.                         window.location.href = url;
  271.                         return;
  272.                     } else {
  273.                         var url = $('#current_url_24h').val();
  274.                         window.location.href = url;
  275.                         return;
  276.                     }
  277.                 });
  278.             {% else %}
  279.                 $('#search_availability_5').on("click", function() {
  280.                     if (!$(this).is(":selected")) {
  281.                         var url = $('#current_url_24h').val();
  282.                         window.location.href = url;
  283.                         return;
  284.                     } else {
  285.                         var url = $('#current_url').val();
  286.                         window.location.href = url;
  287.                         return;
  288.                     }
  289.                 });
  290.             {% endif %}
  292.             {% if app.request.attributes.get('customFilter') == '24h' %}
  293.                 $('#search_availability_5').prop("checked", true);
  294.             {% else %}
  296.             {% endif %}
  298.             $('.productsPerPage').on("change", function() {
  299.                 var productsPerPage = $(this).val();
  300.                 var url = $('#change_products_per_page_url').val();
  301.                 $.ajax({
  302.                     type: "POST",
  303.                     url: url,
  304.                     data: {'productsPerPage':productsPerPage},
  305.                     success: function (data) {
  306.                         window.location.reload();
  307.                     }
  308.                 });
  309.             });
  311.             $('#search_color label input').each(function() {
  312.                 var color = $(this).attr('color');
  313.                 $(this).parent().css("padding-top", "2px");
  314.                 if (color === '#ffffff' || color === '#FFFFFF') {
  315.                     $(this).next('span').css("border", '1px solid black');
  316.                 } else {
  317.                     $(this).next('span').css("background-color", color);
  318.                 }
  319.             });
  321.             $(document).on('click','.is-mobile',function(){
  322.                 $('#search_colorMobile label input').each(function() {
  323.                     var color = $(this).attr('color');
  324.                     $(this).parent().css("padding-top", "2px");
  325.                     if (color === '#ffffff' || color === '#FFFFFF') {
  326.                         $(this).next('span').css("border", '1px solid black');
  327.                     } else {
  328.                         $(this).next('span').css("background-color", color);
  329.                     }
  330.                 });
  331.             });
  332.         });
  333.     </script>
  334. {% endblock %}
  336. {% block content %}
  338.     <input type="hidden" id="current_url" value="{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}"/>
  339.     <input type="hidden" id="current_url_24h" value="{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'customFilter':'24h', 'slug':furnitureType.slug}) }}"/>
  340.     <input type="hidden" id="change_products_per_page_url" value="{{ path('change_products_per_page') }}"/>
  342.     <!-- START OF CATEGORY NAME SECTION -->
  343.     <section class="section">
  344.         <div class="container" style="margin-top:-30px;">
  345.             <div class="columns is-multiline">
  347.                 <div class="column is-full">
  348.                     <h1 class="is-size-2 ">{{ furnitureType.name }} <span class="has-text-grey-light is-size-2">({{ products.getTotalItemCount() }})</span></h1>
  349.                 </div>
  351.                 <!-- START OF BREADCRUMBS -->
  352.                 <div class="no-top-padding column is-full">
  353.                     <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumb">
  354.                         <ul vocab="https://schema.org/" typeof="BreadcrumbList">
  355.                             <li property="itemListElement" typeof="ListItem">
  356.                                 <a property="item" typeof="WebPage" href="{{ path('homepage') }}">{{ language.shopName }}</a>
  357.                                 <meta property="position" content="1">
  358.                             </li>
  359.                             <li class="is-active" property="itemListElement" typeof="ListItem">
  360.                                 <a property="item" typeof="WebPage">{{ furnitureType.name }}</a>
  361.                                 <meta property="position" content="2">
  362.                             </li>
  363.                         </ul>
  364.                     </nav>
  365.                 </div>
  366.                 <!-- END OF BREADCRUMBS -->
  368.             </div>
  369.         </div>
  370.     </section>
  371.     <!-- END OF CATEGORY NAME SECTION -->
  373.     <!-- START OF MAIN SECTION -->
  374.     {{ form_start(form, {'attr': {'method':'get', 'role':'form', 'novalidate': 'novalidate'}}) }}
  375.     <section class="section remove-padding-top">
  376.         <div class="container">
  377.             <div class="columns" style="margin-top:-30px;">
  379.                 {% include 'frontend/category/_leftSidebar.html.twig' %}
  381.                 <div class="columns is-multiline lista-produktow" v-match-heights="{ el: [ '.with-description' ] }">
  382.                     {% if products.getTotalItemCount == 0 %}
  383.                         <div style="text-align: center; width:100%; padding:40px;">
  384.                             <i class="fa fa-search-minus" style="font-size:40px; font-weight: bold; padding:20px;"></i>
  385.                             <br/>
  386.                             {{ 'no_results_category'|trans }}
  387.                         </div>
  388.                     {% else %}
  389.                         {% for productData in products %}
  390.                             {% set product = productData[0] %}
  391.                             {% include 'frontend/components/smallProduct.html.twig' with {'isOneThird':1, 'product':product, 'productData':productData} %}
  392.                         {% endfor %}
  393.                     {% endif %}
  394.                 </div>
  396.             </div>
  397.             <!-- END OF PRODUCT LIST -->
  398.         </div>
  399.         <div class="level-right">
  400.             <div class="level-item">
  401.                 {{ knp_pagination_render(products) }}
  402.             </div>
  403.         </div>
  404.     </section>
  405.     {{ form_end(form) }}
  406.     <!-- END OF MAIN SECTION -->
  408.     {% include 'frontend/category/_lastViewed.html.twig' %}
  410.     {% if furnitureType.getDescription and (app.request.query.get('page') == 1 or app.request.query.get('page') == null) %}
  411.         <div class="section">
  412.             <div class="container">
  414.                 <div id="js_cat-desc-content">
  415.                     <div class="cat-desc-excerpt ellipsis">
  416.                         {{ furnitureType.getDescription|raw }}
  417.                     </div>
  418.                     <a class="dotted-link read-more" style="margin-top:10px; float:right;" data-target="js_cat-desc-content" role="button">{{ 'read_more'|trans }}...</a>
  419.                 </div>
  422.             </div>
  423.         </div>
  424.     {% endif %}
  426. {% endblock %}