templates/Frontend/product.html.twig line 1

Open in your IDE?
  1. <div class='row bg-img1 bg-background-color' style='margin-right:0px;margin-left:0px;'>
  2.     <div class='col-12'>
  3.         <section class="txt-center m-t-45 p-lr-15 p-tb-52 text_color_main">
  4.             <h2 class="ltext-105 txt-center">
  5.                 {{webSetting.mainTitle}}
  6.             </h2>
  7.             <p>{{webSetting.mainSubtitle}}</p>
  8.         </section>
  9.     </div>    
  10. </div>
  13. <section class="bg0 p-t-23">
  14.     <div class="container">    
  15.         <div class="flex-w flex-sb-m p-b-52">            
  16.             <div class="flex-w flex-l-m filter-tope-group m-tb-10">                
  17.                 <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 how-active1 filter_list" id='cat_btn_0' data-filterr="*" data-token='0' onclick='loadCategory(false,"",{{pager_limit}})'>
  18.                     Todos los productos
  19.                 </button>
  20.     
  21.                 {% for item in categories %}                    
  22.                     {% if item.category_count > 0 %}
  23.                         {% if item.subcategory_count > 0 %}
  24.                             <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 filter_list" id='cat_btn_{{item.category_id | md5}}' data-token='{{item.category_id | md5}}' onclick="$('.subcategories_For_{{item.category_id}}').toggle('fast')">
  25.                                 {{item.name}}
  26.                             </button>                            
  27.                             <span class='subcategories_For_{{item.category_id}}' style='display:none;'><i class='fa fa-chevron-right'></i>&nbsp;&nbsp;&nbsp;</span>
  28.                         {% else %}
  29.                             <button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 filter_list" id='cat_btn_{{item.category_id | md5}}' data-token='{{item.category_id | md5}}' onclick="loadCategory(1,'{{item.category_id | md5}}',{{pager_limit}})" data-filterr=".filter_{{item.category_id}}">
  30.                                 {{item.name}}
  31.                             </button>                        
  32.                         {% endif %}
  33.                         
  34.                         {% for subcategory in subcategories %}
  35.                             {% if subcategory.category.categoryId == item.category_id %}
  36.                             <button style='color:#ccc;display:none' onclick="loadCategory(2,'{{subcategory.subcategoryId | md5}}',{{pager_limit}})" class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 subcategories_For_{{item.category_id}}" data-filterr=".filter_s_{{subcategory.subcategoryId}}">
  37.                                 {{subcategory.name}}
  38.                             </button>                            
  39.                             {% endif %}
  40.                         {% endfor %}
  41.                     {% endif %}
  42.                 {% endfor %}
  43.             </div>
  44.     
  45.             {#
  46.             <div class="flex-w flex-c-m m-tb-10">
  47.                 <div class="flex-c-m stext-106 cl6 size-104 bor4 pointer hov-btn3 trans-04 m-r-8 m-tb-4 js-show-filter">
  48.                     <i class="icon-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-filter-list"></i>
  49.                     <i class="icon-close-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>
  50.                      Filtros
  51.                 </div>
  52.     
  53.                 <div class="flex-c-m stext-106 cl6 size-105 bor4 pointer hov-btn3 trans-04 m-tb-4 js-show-search">
  54.                     <i class="icon-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-search"></i>
  55.                     <i class="icon-close-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>
  56.                     Buscar
  57.                 </div>
  58.             </div>
  59.             #}
  60.             
  61.             {% if filter %}
  62.                 <!-- Search product: dis-none-->
  63.                 <div class="panel-search w-full p-t-10 p-b-15">
  64.                     <div class="bor8 dis-flex p-l-15">
  65.                         <button class="size-113 flex-c-m fs-16 cl2 hov-cl1 trans-04">
  66.                             <i class="zmdi zmdi-search"></i>
  67.                         </button>                        
  68.                         <form method='post' id='search_field_1' style='width:100%'>
  69.                             <input class="mtext-107 cl2 size-114 plh2 p-r-15" type="text" id="search-product-1" placeholder="Buscar">                        
  70.                         </form>                                
  71.                     </div>    
  72.                     <small id='search_field_loader_1'></small>
  73.                 </div>
  74.             {% endif %}
  75.     
  76.             <!-- Filter -->
  77.             {#<div class="dis-none panel-filter w-full p-t-10">
  78.                 <div class="wrap-filter flex-w bg6 w-full p-lr-40 p-t-27 p-lr-15-sm">
  79.                     <div class="filter-col1 p-r-15 p-b-27">
  80.                         <div class="mtext-102 cl2 p-b-15">
  81.                              Ordenar por
  82.                         </div>
  83.     
  84.                         <ul>
  85.                             <li class="p-b-6">
  86.                                 <a href="#" class="filter-link stext-106 trans-04">
  87.                                     Default
  88.                                 </a>
  89.                             </li>
  90.     
  91.                             <li class="p-b-6">
  92.                                 <a href="#" class="filter-link stext-106 trans-04">
  93.                                     Popularity
  94.                                 </a>
  95.                             </li>
  96.     
  97.                             <li class="p-b-6">
  98.                                 <a href="#" class="filter-link stext-106 trans-04">
  99.                                     Average rating
  100.                                 </a>
  101.                             </li>
  102.     
  103.                             <li class="p-b-6">
  104.                                 <a href="#" class="filter-link stext-106 trans-04 filter-link-active">
  105.                                     Newness
  106.                                 </a>
  107.                             </li>
  108.     
  109.                             <li class="p-b-6">
  110.                                 <a href="#" class="filter-link stext-106 trans-04">
  111.                                     Price: Low to High
  112.                                 </a>
  113.                             </li>
  114.     
  115.                             <li class="p-b-6">
  116.                                 <a href="#" class="filter-link stext-106 trans-04">
  117.                                     Price: High to Low
  118.                                 </a>
  119.                             </li>
  120.                         </ul>
  121.                     </div>
  122.     
  123.                     <div class="filter-col2 p-r-15 p-b-27">
  124.                         <div class="mtext-102 cl2 p-b-15">
  125.                             Precio
  126.                         </div>
  127.     
  128.                         <ul>
  129.                             <li class="p-b-6">
  130.                                 <a href="#" class="filter-link stext-106 trans-04 filter-link-active">
  131.                                     All
  132.                                 </a>
  133.                             </li>
  134.     
  135.                             <li class="p-b-6">
  136.                                 <a href="#" class="filter-link stext-106 trans-04">
  137.                                     $0.00 - $50.00
  138.                                 </a>
  139.                             </li>
  140.     
  141.                             <li class="p-b-6">
  142.                                 <a href="#" class="filter-link stext-106 trans-04">
  143.                                     $50.00 - $100.00
  144.                                 </a>
  145.                             </li>
  146.     
  147.                             <li class="p-b-6">
  148.                                 <a href="#" class="filter-link stext-106 trans-04">
  149.                                     $100.00 - $150.00
  150.                                 </a>
  151.                             </li>
  152.     
  153.                             <li class="p-b-6">
  154.                                 <a href="#" class="filter-link stext-106 trans-04">
  155.                                     $150.00 - $200.00
  156.                                 </a>
  157.                             </li>
  158.     
  159.                             <li class="p-b-6">
  160.                                 <a href="#" class="filter-link stext-106 trans-04">
  161.                                     $200.00+
  162.                                 </a>
  163.                             </li>
  164.                         </ul>
  165.                     </div>
  166.     
  167.                     <div class="filter-col3 p-r-15 p-b-27">
  168.                         <div class="mtext-102 cl2 p-b-15">
  169.                             Color
  170.                         </div>
  171.     
  172.                         <ul>
  173.                             <li class="p-b-6">
  174.                                 <span class="fs-15 lh-12 m-r-6" style="color: #222;">
  175.                                     <i class="zmdi zmdi-circle"></i>
  176.                                 </span>
  177.     
  178.                                 <a href="#" class="filter-link stext-106 trans-04">
  179.                                     Black
  180.                                 </a>
  181.                             </li>
  182.     
  183.                             <li class="p-b-6">
  184.                                 <span class="fs-15 lh-12 m-r-6" style="color: #4272d7;">
  185.                                     <i class="zmdi zmdi-circle"></i>
  186.                                 </span>
  187.     
  188.                                 <a href="#" class="filter-link stext-106 trans-04 filter-link-active">
  189.                                     Blue
  190.                                 </a>
  191.                             </li>
  192.     
  193.                             <li class="p-b-6">
  194.                                 <span class="fs-15 lh-12 m-r-6" style="color: #b3b3b3;">
  195.                                     <i class="zmdi zmdi-circle"></i>
  196.                                 </span>
  197.     
  198.                                 <a href="#" class="filter-link stext-106 trans-04">
  199.                                     Grey
  200.                                 </a>
  201.                             </li>
  202.     
  203.                             <li class="p-b-6">
  204.                                 <span class="fs-15 lh-12 m-r-6" style="color: #00ad5f;">
  205.                                     <i class="zmdi zmdi-circle"></i>
  206.                                 </span>
  207.     
  208.                                 <a href="#" class="filter-link stext-106 trans-04">
  209.                                     Green
  210.                                 </a>
  211.                             </li>
  212.     
  213.                             <li class="p-b-6">
  214.                                 <span class="fs-15 lh-12 m-r-6" style="color: #fa4251;">
  215.                                     <i class="zmdi zmdi-circle"></i>
  216.                                 </span>
  217.     
  218.                                 <a href="#" class="filter-link stext-106 trans-04">
  219.                                     Red
  220.                                 </a>
  221.                             </li>
  222.     
  223.                             <li class="p-b-6">
  224.                                 <span class="fs-15 lh-12 m-r-6" style="color: #aaa;">
  225.                                     <i class="zmdi zmdi-circle-o"></i>
  226.                                 </span>
  227.     
  228.                                 <a href="#" class="filter-link stext-106 trans-04">
  229.                                     White
  230.                                 </a>
  231.                             </li>
  232.                         </ul>
  233.                     </div>
  234.     
  235.                     <div class="filter-col4 p-b-27">
  236.                         <div class="mtext-102 cl2 p-b-15">
  237.                             Tags
  238.                         </div>
  239.     
  240.                         <div class="flex-w p-t-4 m-r--5">
  241.                             <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
  242.                                 Fashion
  243.                             </a>
  244.     
  245.                             <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
  246.                                 Lifestyle
  247.                             </a>
  248.     
  249.                             <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
  250.                                 Denim
  251.                             </a>
  252.     
  253.                             <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
  254.                                 Streetstyle
  255.                             </a>
  256.     
  257.                             <a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
  258.                                 Crafts
  259.                             </a>
  260.                         </div>
  261.                     </div>
  262.                 </div>
  263.             </div>#}
  264.         </div>
  266.         
  267.         
  268.         <div class="row" id='dynamic_loader'></div>
  269.         
  270.                 
  271.         <div class='p-t-10' id='pager_label'></div>
  272.         <br>
  273.         <div class="flex-c-m flex-w w-full" id='pager_control' data-type="" data-token="" data-limit="">            
  274.             <a href="javascript:void(0)" onclick="loadMore()" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
  275.                 Cargar más
  276.             </a>
  277.         </div>
  278.         
  279.         
  280.     </div>
  281. </section>
  283. {% block script %}
  284. <script>
  285.     
  286.     function imageClick(id, title)
  287.     {
  288.             
  289.         var url = '{{ path("frontend_product_modal_load", {slug: slug}) }}';
  290.         var data = {                
  291.             id: id
  292.         };
  293.         $('#viewContentBody').html('<div class="row"><div class="col-lg-12 text-center"><br><i class="fa fa-spinner fa-spin" style="font-size:30px"></i><br></div></div> ');
  294.         $('#viewContentBody').load(url,data, function()
  295.         {
  297.         });
  298.         
  299.         $('#viewContentTitle').text(title);
  300.         $('#viewContent').modal('show');
  302.             //initiate the plugin and pass the id of the div containing gallery images
  303.         $('#imageModal').elevateZoom({
  304.             gallery:'gallery_01',
  305.             responsive: true,
  306.             cursor: 'pointer',
  307.             //easing : true,
  308.             galleryActiveClass: 'active'
  309.             //imageCrossfade: true
  310.         });
  312.         //pass the images to Fancybox
  313.         $('#imageModal').bind("click", function(e)
  314.         {
  315.             var ez = $('#imageModal').data('elevateZoom');
  316.             $.fancybox(ez.getGalleryList());
  317.             return false;
  318.         });
  320.         $('#viewContent').on('hidden.bs.modal', function()
  321.         {
  322.             $(".zoomContainer"). css("display", "none"); 
  323.             $(".zoomWindow"). css("display", "none"); 
  324.         });
  325.         
  326.     }
  327.     
  328.     function imageRelationClick(id_relation, name, md5)
  329.     {
  330.         
  331.         var url = '{{ path("frontend_product_modal_load", {slug: slug}) }}';
  332.         var data = {
  333.             id: id_relation
  334.         };
  335.         $('#viewContentBody').html('<div class="row"><div class="col-lg-12 text-center"><br><i class="fa fa-spinner fa-spin" style="font-size:30px"></i><br></div></div> ');
  336.         $('#viewContentBody').load(url,data, function(){
  338.         });
  339.         
  340.         $('#viewContentTitle').text(name);
  341.        
  342.     }
  343.     
  344.          
  345. </script>
  347. {% endblock %}