templates/menubuilder/menu-builder.html.twig line 1

Open in your IDE?
  1. {% extends "layout/layout.html.twig" %}
  2. {# {% block title %}GFS::Menu Builder{% endblock %} #}
  3. {% block content %}
  4.     {% if editmode %}
  5.         {{'Recipe Categories'}}
  6.         {{ pimcore_relations("recipecategory", {
  7.             "types": ["object"],
  8.             "subtypes": {
  9.                 "object": ["object"]
  10.             },
  11.             "classes": ["recipecategory"]
  12.         }) }}
  13.         {{'Recipe Brands'}}
  14.         {{ pimcore_relations("recipebrands", {
  15.             "types": ["object"],
  16.             "subtypes": {
  17.                 "object": ["object"]
  18.             },
  19.             "classes": ["brands"]
  20.         }) }}
  21.     {% endif %}
  22.     {{ 
  23.             pimcore_areablock("content", {
  24.                 "allowed": ["menu-builder-main-area"],
  25.                 
  26.             })
  27.     }}
  28.     <!--Start Product Box-->
  29.     {% if not editmode %}
  30.         <section class="product-result-container recipe-result-container menu-builder">
  31.             <div class="container container-sm">
  32.                 <div class="row">
  33.                     <div class="col-12 col-md-12 col-xl-3 filter-box">
  34.                         <h4 class="title">{{'Filters'|trans}}</h4>
  35.                         <div class="filder-options">
  36.                             <div class="input-holder">
  37.                                 <input type="text" placeholder="{{'Search for product'|trans}}" class="form-control" name="query" id="search" value={{ filters.query }}>
  38.                             </div>
  39.                         </div>
  40.                         <div class="filter-accordion">
  41.                             <div class="card filter-card" id="filter1">
  42.                                 <div class="card-header">
  43.                                     <button type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
  44.                                         {{'Category'|trans}}
  45.                                     </button>
  46.                                 </div>
  47.                                 <div id="collapse1" class="collapse show" data-parent="#filter1">
  48.                                     <div class="card-body">
  49.                                         <ul class="list-unstyled check-list">
  50.                                             {% for recipecategories in pimcore_relations("recipecategory") %}
  51.                                                 <li><input class="styled-checkbox category_checkbox" name='Category' id="{{recipecategories.id}}" type="checkbox" value="{{recipecategories.id}}" {{recipecategories.id}} {{ (recipecategories.id in filters.category_ids) ? 'checked' : '' }}>
  52.                                                     <label for="{{recipecategories.id}}">{{recipecategories.recipecategoryname}}</label>
  53.                                                 </li>
  54.                                             {% endfor %}
  55.                                         </ul>
  56.                                         <div class="btn-holder clear-filter">
  57.                                             <a href="javascript:void(0)" class="btn btn-link" onclick="clearFilter('.category_checkbox')">{{'Clear Filter'|trans}}</a>
  58.                                         </div>
  59.                                     </div>
  60.                                 </div>
  61.                             </div>
  62.                             <div class="card filter-card" id="filter2">
  63.                                 <div class="card-header">
  64.                                     <button type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
  65.                                         {{'Brands'|trans}}
  66.                                     </button>
  67.                                 </div>
  68.                                 <div id="collapse2" class="collapse show" data-parent="#filter2">
  69.                                     <div class="card-body">
  70.                                         <ul class="list-unstyled check-list">
  71.                                             {% for recipe_brands in pimcore_relations("recipebrands") %}
  72.                                                 <li><input class="styled-checkbox brand_checkbox" id="{{recipe_brands.id}}" type="checkbox" value="{{recipe_brands.id}}" {{recipe_brands.id}} {{ (recipe_brands.id in filters.brand_ids) ? 'checked' : ''}}>
  73.                                                     <label for="{{recipe_brands.id}}">{{recipe_brands.name}}</label>
  74.                                                 </li>
  75.                                             {% endfor %}
  76.                                         </ul>
  77.                                         <div class="btn-holder clear-filter">
  78.                                             <a href="javascript:void(0)" class="btn btn-link" onclick="clearFilter('.brand_checkbox')">{{'Clear Filter'|trans}}</a>
  79.                                         </div>
  80.                                     </div>
  81.                                 </div>
  82.                             </div>
  83.                             <div class="card filter-card" id="filter3">
  84.                                 <div class="card-header">
  85.                                     <button type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
  86.                                         {{'Type'|trans}}
  87.                                     </button>
  88.                                 </div>
  89.                                 <div id="collapse3" class="collapse show" data-parent="#filter3">
  90.                                     <div class="card-body">
  91.                                         <ul class="list-unstyled check-list">
  92.                                             <li><input class="styled-checkbox type_checkbox" id="Lunch" type="checkbox" value="Lunch" {{ ('Lunch' in filters.meal_type) ? 'checked' : '' }}>
  93.                                                 <label for="Lunch">{{'Lunch'|trans}}</label>
  94.                                             </li>
  95.                                             <li><input class="styled-checkbox type_checkbox" id="Dinner" type="checkbox" value="Dinner" {{ ('Dinner' in filters.meal_type) ? 'checked' : '' }}>
  96.                                                 <label for="Dinner">{{'Dinner'|trans}}</label>
  97.                                             </li>
  98.                                             <li><input class="styled-checkbox type_checkbox" id="Dessert" type="checkbox" value="Dessert" {{ ('Dessert' in filters.meal_type) ? 'checked' : '' }}>
  99.                                                 <label for="Dessert">{{'Dessert'|trans}}</label>
  100.                                             </li>
  101.                                             <li><input class="styled-checkbox type_checkbox" id="Drink" type="checkbox" value="Drink" {{ ('Drink' in filters.meal_type) ? 'checked' : '' }}>
  102.                                                 <label for="Drink">{{'Drink'|trans}}</label>
  103.                                             </li>
  104.                                             <li><input class="styled-checkbox type_checkbox" id="Breakfast" type="checkbox" value="Breakfast" {{ ('Breakfast' in filters.meal_type) ? 'checked' : '' }}>
  105.                                                 <label for="Breakfast">{{'Breakfast1'|trans}}</label>
  106.                                             </li>
  107.                                             <li><input class="styled-checkbox type_checkbox" id="snack" type="checkbox" value="snack" {{ ('snack' in filters.meal_type) ? 'checked' : '' }}>
  108.                                                 <label for="snack">{{'snack'|trans}}</label>
  109.                                             </li>
  110.                                             <li><input class="styled-checkbox type_checkbox" id="bakery" type="checkbox" value="bakery" {{ ('bakery' in filters.meal_type) ? 'checked' : '' }}>
  111.                                                 <label for="bakery">{{'bakery'|trans}}</label>
  112.                                             </li>
  113.                                             <li><input class="styled-checkbox type_checkbox" id="Appetizer" type="checkbox" value="Appetizer" {{ ('Appetizer' in filters.meal_type) ? 'checked' : '' }}>
  114.                                                 <label for="Appetizer">{{'Appetizer'|trans}}</label>
  115.                                             </li>
  116.                                         </ul>
  117.                                         <div class="btn-holder clear-filter">
  118.                                             <a href="javascript:void(0)" class="btn btn-link" onclick="clearFilter('.type_checkbox')">{{'Clear Filter'|trans}}</a>
  119.                                         </div>
  120.                                     </div>
  121.                                 </div>
  122.                             </div>
  123.                             <div class="apply-filter">
  124.                                 <a href="javascript:void(0)" onclick="searchFilter(this)" class="btn btn-custom btn-green">{{'Apply Filter'|trans}}</a>
  125.                             </div>
  126.                         </div>
  127.                     </div>
  128.                     <div class="col-12 col-md-12 col-xl-9 product-results">
  129.                         <div class="recipe-box-holder">
  130.                             <div class="row">
  131.                                 {% for menu_recipes in recipes %}
  132.                                     <div class="col-12 col-md-6 col-lg-4 product-result">
  133.                                         <div class="slide">
  134.                                             <div class="slide-holder">
  135.                                                 <a href="/{{app.request.locale}}/menu-builder/{{menu_recipes.url}}" tabindex="0">
  136.                                                     <figure
  137.                                                         class="slide-img">
  138.                                                         {# <img src="{{menu_recipes.featured_image}}" alt="{{menu_recipes.name}}"> #}
  139.                                                         {% if menu_recipes.featured_image %}
  140.                                                             {{ menu_recipes.featured_image.thumbnail('354x244').getHTML({imgAttributes: {class:'',alt: menu_recipes.name}})|raw }}
  141.                                                         {% endif %}
  142.                                                     </figure>
  143.                                                 </a>
  144.                                                 <div class="slide-content">
  145.                                                     <div class="frecipes-box">
  146.                                                         <a href="/{{app.request.locale}}/menu-builder/{{menu_recipes.url}}" tabindex="0">
  147.                                                             <h3>{{menu_recipes.name}}</h3>
  148.                                                         </a>
  149.                                                         <p>{{menu_recipes.short_description}}</p>
  150.                                                         {% if menu_recipes.featured_product %}
  151.                                                         <div class="chef-names">{{menu_recipes.featured_product[0].brands.name}}</div>
  152.                                                         {% endif %}
  153.                                                     </div>
  154.                                                     <ul class="list-unstyled social-info recipe-info">
  155.                                                         {% set user = app.session.get('loginUserName') %}
  156.                                                         {% if user is not null %}
  157.                                                             {% if menu_recipes.id in  LikedId %}
  158.                                                                 <li class='liked'>{{'Like'|trans}}</li>
  159.                                                                 {% set break = true %}
  160.                                                             {% else %}
  161.                                                                 <li class="like training_list" onclick="loyaltyProgram(this,{{menu_recipes.id}},'{{menu_recipes.name}}',30,'Recipe','Like' , '{{app.request.locale}}')">{{'Like'|trans}}</li>
  162.                                                             {% endif %}
  163.                                                         {% else %}
  164.                                                             <li class="like logged-out">{{'Like'|trans}}</li>
  165.                                                         {% endif %}
  166.                                                         <li class="share" onclick="sharemodal('Recipe','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/menu-builder/' ~ menu_recipes.url}}' , '{{ " share goody recipe with your friends"|trans }}')">
  167.                                                             <span onclick="loyaltyProgram(this,{{menu_recipes.id}},'{{menu_recipes.name}}',30,'Recipe','Share' , '{{app.request.locale}}')">{{'Share'|trans}}</span>
  168.                                                         </li>
  169.                                                         {# <li class="share" onclick="sharemodal('Recipe','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/menu-builder/' ~ menu_recipes.url}}' , '{{ "SHARE GOODY RECIPE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</li> #}
  170.                                                         {# <li class="save" id="save">Save</li>                             #}
  171.                                                     </ul>
  172.                                                 </div>
  173.                                             </div>
  174.                                         </div>
  175.                                     </div>
  176.                                 {% endfor %}
  177.                             </div>
  178.                         </div>
  179.                         <!--Start pagination Section-->
  180.                         {% set page = app.request.get('page') %}
  181.                         <section class="pagination-section">
  182.                             <nav aria-label="Page navigation" class="goody-navigation">
  183.                                 <ul class="pagination justify-content-center">
  184.                                     <li class="page-item">
  185.                                         {% if total_pages > 1 %}
  186.                                             {% if page == 1 or page == ''%}
  187.                                                 <a class="page-link">{{"First"|trans}}</a>
  188.                                             {% else %}
  189.                                                 <a class="page-link" href="{{ pimcore_url({'page': 1}) }}">{{"First"|trans}}</a>
  190.                                             {% endif %}
  191.                                         {% endif %}
  192.                                     </li>
  193.                                     {% if total_pages > 1 %}
  194.                                         <li class="page-item {{ (page == 1 or page == '') ? 'active' : '' }}">
  195.                                             <a class="page-link" href="{{ pimcore_url({'page': 1}) }}" tabindex="-1">1</a>
  196.                                         </li>
  197.                                     {% endif %}
  198.                                     {% for i in 1..total_pages %}
  199.                                         {% if i != 1 and i != total_pages %}
  200.                                             <li class="page-item {{ (loop.index == page) ? 'active' : '' }}">
  201.                                                 <a class="page-link" href="{{ pimcore_url({'page': i}) }}">{{i}}</a>
  202.                                             </li>
  203.                                         {% endif %}
  204.                                     {% endfor %}
  205.                                     {% if total_pages > 1 %}
  206.                                         <li class="page-item {{ (page == total_pages) ? 'active' : '' }}">
  207.                                             <a class="page-link" href="{{ pimcore_url({'page': total_pages}) }}">{{total_pages}}</a>
  208.                                         </li>
  209.                                         <li class="page-item">
  210.                                             {% if page == total_pages %}
  211.                                                 <a class="page-link">{{"Last"|trans}}</a>
  212.                                             {% else %}
  213.                                                 <a class="page-link" href="{{ pimcore_url({'page': total_pages}) }}">{{"Last"|trans}}</a>
  214.                                             {% endif %}
  215.                                         </li>
  216.                                     {% endif %}
  217.                                 </ul>
  218.                             </nav>
  219.                         </section>
  220.                         <!--End pagination Section-->
  221.                     </div>
  222.                 </div>
  223.             </div>
  224.         </section>
  225.     {% endif %}
  226.     <!--End Product Box-->
  227.     <!--Start GFS Loyalty Program-->
  228.     {{ 
  229.             pimcore_areablock("content-loyalty", {
  230.                 "allowed": ["loyalty-banner"],
  231.                 
  232.             })
  233.     }}
  234.     <section class="menu-builder-loyalty d-none">
  235.         <div class="info-media loyalty-program">
  236.             <div class="container container-sm">
  237.                 <div class="info-section">
  238.                     <h5>{{'Loyalty Program'|trans}}</h5>
  239.                     <h4>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('heading')}}</h4>
  240.                     <h3>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('heading1')}}</h3>
  241.                     <p>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('description')}}</p>
  242.                     <div class="btn-holder">
  243.                         <div class="btn-border">
  244.                             <a href="/{{app.request.locale}}/loyalty-program" class="btn btn-custom btn-green">{{'Discover More'|trans}}</a>
  245.                         </div>
  246.                         <div class="newsletter-subscribe">
  247.                             <h4 class="cstsmLP">"{{'Coming Soon'|trans}}"</h4>
  248.                         </div>
  249.                         <div class="btn-border btn-border-black d-none">
  250.                             <a href="javascript:void(0)" class="btn btn-custom btn-lg-o-black">Sign-up Now!</a>
  251.                         </div>
  252.                     </div>
  253.                 </div>
  254.                 <div class="media-section ">
  255.                     <img src="{{loyaltybanner.sliders[0].slider_image.data}}" alt="loyalty banner slide image">
  256.                 </div>
  257.             </div>
  258.         </div>
  259.     </section>
  260.     {% if (app.request.locale =='ar') %}
  261.         {% set topMenu ="/en/menu-builder" %}
  262.     {% else %}
  263.         {% set topMenu ="/ar/menu-builder" %}
  264.     {% endif %}
  265.     <script>
  266.         var _TopMenuLink = "{{ topMenu }}";
  267.     </script>
  268.     <!--End GFS Loyalty Program-->
  269.     <script>
  270.         // {# $('.pagination li').on('click', function () {
  271.         // $('.active').removeClass('active');
  272.         // $(this).addClass('active');
  273.         // });
  274.         // #}
  275.         function searchFilter(e) {
  276.         let new_path = 'category_id=';
  277.         let new_brand = '&brand_id=';
  278.         let new_type = '&meal_type=';
  279.         let category_count = 1
  280.         let brand_count = 1
  281.         let cuisine_count = 1
  282.         let type_count = 1
  283.         let query = '';
  284.         $('.category_checkbox').each(function (index, value) {
  285.         if ($(this).is(':checked')) {
  286.         if (category_count > 1) {
  287.         new_path += '_';
  288.         }
  289.         new_path += $(this).val();
  290.         category_count++;
  291.         }
  292.         });
  293.         $('.brand_checkbox').each(function (index, value) {
  294.         if ($(this).is(':checked')) {
  295.         if (brand_count > 1) {
  296.         new_brand += '_';
  297.         }
  298.         new_brand += $(this).val();
  299.         brand_count++;
  300.         }
  301.         });
  302.         $('.type_checkbox').each(function (index, value) {
  303.         if ($(this).is(':checked')) {
  304.         if (type_count > 1) {
  305.         new_type += '_';
  306.         }
  307.         new_type += $(this).val();
  308.         type_count++;
  309.         }
  310.         });
  311.         if ($('#search').val()) {
  312.         query = '&query=' + $('#search').val();
  313.         }
  314.         window.location.href = '?' + new_path + new_brand + new_type + query;
  315.         }
  316.         function clearFilter(c) {
  317.         $(c).each(function (index, value) {
  318.         $(this).prop('checked', false);
  319.         });
  320.         }
  321.     </script>
  322. {% endblock %}