templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}AFI importExport Market{% endblock %}
  5. {% block body %}
  6.     <div style="background: #f3f3f3; padding-top: 7px">
  8.         {% if homeSlider %}
  9.             {{ include('partials/home_slider.html.twig') }}
  10.         {% else %}
  12.         {% endif %}
  13.         <div class="d-none d-xl-block pl-5 pr-5" style="margin-top: 17px">
  14.             <div class="row  justify-content-center">
  15.                 {% for market in mymarkets|shuffle|slice(0,4) %}
  16.                     {% if market|length > 0 %}
  17.                         <div class="col-3" style="border: 6px solid #f3f3f3">
  18.                             <div class="row justify-content-center" style="background: #fff; border-radius: 10px">
  19.                                 <div class="col-12 font-weight-bold font-monospace  p-2" >
  20.                                     &nbsp; &nbsp;<img width="40px" height="40px" style="border-radius: 50%" src="/assets/uploads/mymarket/{{ market.image }}"> {{ market.name|upper|trans }}
  21.                                 </div>
  22.                                 {% for category in market.categories|toArray|shuffle|slice(0,1) %}
  23.                                     {% for product in category.products|toArray|shuffle|slice(0,2) %}
  24.                                         <div class=" col-6" >
  25.                                             {{ include('partials/product_item_tag_or_categorie_market.html.twig',{'product': product}) }}
  26.                                         </div>
  27.                                     {% else %}
  28.                                         <div class=" col-6 ">
  29.                                             {{ include('partials/default.html.twig') }}
  30.                                         </div>
  31.                                     {% endfor %}
  32.                                 {% else %}
  33.                                     <div class="col-6">
  34.                                         {{ include('partials/default.html.twig') }}
  35.                                     </div>
  36.                                 {% endfor %}
  37.                             </div>
  38.                         </div>
  39.                     {% endif %}
  40.                 {% endfor %}
  41.             </div>
  42.         </div>
  44.         <div class="row product_index">
  45.             <div class="col-lg-6">
  46.                 <h2 style="background: white" class="ml-4 mr-4  p-3">{{ 'Special Offer'|trans }} <b>{{ 'Products'|trans }}</b></h2>
  47.                 <div class="" style="margin-top: -100px">
  48.                     <div class="card-body">
  49.                         <div class="row ">
  50.                             <div class="col-12" style="background: #f3f3f3">
  51.                                 <div class="releted_prslider  slick_slider_3 mt-4" data-margin="20" data-slides-to-show="6" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}'>
  52.                                     {% for product in productSpecialOffer|shuffle|slice(0,24) %}
  53.                                         {{ include('partials/product_item.html.twig',{'product': product}) }}
  54.                                     {% endfor %}
  55.                                 </div>
  56.                             </div>
  57.                         </div>
  58.                     </div>
  59.                 </div>
  60.             </div>
  62.             <div class="col-lg-6">
  63.                 <h2 style="background: white" class="ml-4 mr-4  p-3">{{ 'In promotional'|trans }} <b>{{ 'Products'|trans }}</b></h2>
  64.                 <div class="" style="margin-top: -100px">
  65.                     <div class="card-body">
  66.                         <div class="row ">
  67.                             <div class="col-12" style="background: #f3f3f3">
  68.                                 <div class="releted_prslider  slick_slider_3 mt-4" data-margin="20" data-slides-to-show="6" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}'>
  69.                                     {% for product in Promotional|shuffle|slice(0,24) %}
  70.                                         {{ include('partials/product_item_promotianal.html.twig',{'product': product}) }}
  71.                                     {% endfor %}
  72.                                 </div>
  73.                             </div>
  74.                         </div>
  75.                     </div>
  76.                 </div>
  77.             </div>
  78.         </div>
  83.         <div class="d-none d-xl-block product_index" style="margin-top: -25px">
  84.             <h2>{{ 'Categories of '|trans }} <b>{{ 'Products'|trans }}</b></h2>
  85.             <div class="row  justify-content-center" style="margin-top: -50px">
  86.                 {% for market in mymarkets|shuffle|slice(0,3) %}
  87.                     {% for category in market.categories|toArray|shuffle|slice(0,1) %}
  88.                         {% if category|length > 0 %}
  89.                             <div class="col-3" style="border: 6px solid #f3f3f3">
  90.                                 <div class="row justify-content-center" style="background: #fff; border-radius: 10px">
  91.                                     <div class="col-12 font-weight-bold font-monospace  p-2" >
  92.                                         &nbsp; &nbsp;<img width="40px" height="40px" style="border-radius: 50%" src="/assets/uploads/categories/{{ category.image }}"> {{ category.name|upper|trans }}
  93.                                     </div>
  94.                                     {% for product in category.products|toArray|shuffle|slice(0,6) %}
  95.                                         <div class=" col-4" >
  96.                                             {{ include('partials/product_item_tag_or_categorie_market.html.twig',{'product': product}) }}
  97.                                         </div>
  98.                                     {% else %}
  99.                                         <div class=" col-4 ">
  100.                                             {{ include('partials/default.html.twig') }}
  101.                                         </div>
  102.                                     {% endfor %}
  103.                                 </div>
  104.                             </div>
  105.                         {% endif %}
  106.                     {% endfor %}
  107.                 {% endfor %}
  108.             </div>
  109.         </div>
  113.         <div class="container product_index">
  114.             <h2>{{ 'New Arrival'|trans }} <b>{{ 'Products'|trans }}</b></h2>
  115.             <div class="row justify-content-center" style="margin-top: -40px">
  116.                 {% for product in productNewArrival|shuffle|slice(0,8) %}
  117.                     {% if product.etat == true %}
  118.                         <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 col-12">
  119.                             {{ include('partials/product_no_quick_view.html.twig',{'product':product}) }}
  120.                         </div>
  121.                     {% endif %}
  122.                 {% endfor %}
  123.             </div>
  124.         </div>
  129.         <div class=" product_index" style="background: #e7f0fe; margin-top: -7px">
  130.             <div class="primary-overlay parallax-container ">
  131.                 <div class="parallax-content section-xl bg-white text-dark text-md-left">
  132.                     <div class="container ">
  133.                         <div class="row justify-content-end">
  134.                             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 ">
  135.                                 <div class="cta-moder p-5">
  136.                                     <h3 class="cta-modern-title wow fadeInRight font-weight-bolder font-monospace">{{ 'WHY CHOOSE US ?'|trans|upper }}</h3>
  137.                                     <p class="lead text-dark">{{ 'Alliance Force internationale offer you the best and high quality of service.'|trans }}</p>
  138.                                     <p class="cta-modern-text text-danger oh-desktop" data-wow-delay=".1s"><span class="cta-modern-decor wow slideInLeft"></span><span class="d-inline-block wow slideInDown text-dark font-monospace">AFI SARL</span></p><a class="btn btn-fill-line font-monospace font-weight-bold  text-white" href="{{ path('shop') }}" data-wow-delay=".2s"><i class="linearicons-cart-exchange"></i> {{ 'Go to shop page'|trans }}</a>
  139.                                 </div>
  140.                             </div>
  141.                             <div class="col-sm-4 col-md-5 col-lg-6 pl-lg-3 text-left p-5 d-none d-xl-block d-lg-block">
  142.                                 <ul style="list-style: none;" class="d-inline-block d-sm-block wow fadeInUp">
  143.                                     <li style="font-size: 20pt;padding-top: 0pt">&nbsp;&nbsp;&nbsp;<span class="badge badge-dark bg-gray-7 text-white text-bold"><a class="linearicons-sun"></a></span>&nbsp;&nbsp;&nbsp; {{ 'Speed in work'|trans }} </li>
  144.                                     <li style="font-size: 20pt;padding-top: 40pt">&nbsp;&nbsp;&nbsp;<span class="badge badge-dark bg-gray-7 text-white text-bold"><a class="linearicons-inbox"></a></span>&nbsp;&nbsp;&nbsp; {{ 'Reliability and Confidence'|trans }} </li>
  145.                                     <li style="font-size: 20pt;padding-top: 40pt">&nbsp;&nbsp;&nbsp;<span class="badge badge-dark bg-gray-7 text-white text-bold"><a class="linearicons-thumbs-up"></a></span>&nbsp;&nbsp;&nbsp; {{ 'High quality of service'|trans }} </li>
  146.                                 </ul>
  147.                             </div>
  148.                         </div>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.         </div>
  157.         <div class="row product_index">
  158.             <div class="col-lg-6">
  159.                 <h2>{{ 'Best Seller'|trans }} <b>{{ 'Products'|trans }}</b></h2>
  160.                 <div class="" style="margin-top: -80px">
  161.                     <div class="card-body">
  162.                         <div class="row ">
  163.                             <div class="col-12" style="background: #f3f3f3">
  164.                                 <div class="releted_prslider  slick_slider_3 mt-4" data-margin="20" data-slides-to-show="3" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}'>
  165.                                     {% for product in productBestSeller|shuffle|slice(0,24) %}
  166.                                         {{ include('partials/product_item_BestSeller.html.twig',{'product': product}) }}
  167.                                     {% endfor %}
  168.                                 </div>
  169.                             </div>
  170.                         </div>
  171.                     </div>
  172.                 </div>
  173.             </div>
  174.             <div class="col-lg-6">
  175.                 <h2>{{ 'Featured'|trans }} <b>{{ 'Products'|trans }}</b></h2>
  176.                 <div class="" style="margin-top: -80px">
  177.                     <div class="card-body" >
  178.                         <div class="row ">
  179.                             <div class="col-12" style="background: #f3f3f3">
  180.                                 <div class="releted_prslider  slick_slider_3 mt-4" data-margin="20" data-slides-to-show="3" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}'>
  181.                                     {% for product in productFeatured|shuffle|slice(0,24) %}
  182.                                         {{ include('partials/product_item_Featured.html.twig',{'product': product}) }}
  183.                                     {% endfor %}
  184.                                 </div>
  185.                             </div>
  186.                         </div>
  187.                     </div>
  188.                 </div>
  189.             </div>
  190.         </div>
  193.         <div class="container product_index" style="margin-top: 10px">
  195.             <h2>{{ 'AFI SARL'|trans }} <b>{{ 'Import Export'|trans }}</b></h2>
  197.             <div class="row">
  198.                 <div class="col-lg-6">
  199.                     <div class="card" style="background:#fff; ">
  200.                         <div class="card-body">
  201.                             <div class="message-flash">
  202.                                 <div id="alert-msg" class="col-md-12" role="alert"></div>
  203.                             </div>
  204.                             <div id="div_field_form_id">
  205.                                 {{ render(path('contact_form')) }}
  206.                             </div>
  207.                         </div>
  208.                     </div>
  209.                 </div>
  210.                 <div class="col-lg-6">
  211.                     <div class="row">
  212.                         <div class="col-xl-12 col-lg-12 col-md-12">
  213.                             <div class="contact_wrap bg-white contact_style3">
  214.                                 <div class="contact_icon">
  215.                                     <i class="linearicons-map-marker"></i>
  216.                                 </div>
  217.                                 <div class="contact_text">
  218.                                     <span>{{ 'CHINA - GUANGZHOU' }}</span>
  219.                                     <p>XIAO BEI LU N°63, HUAYU BUILDING ROOM 13K, YUE XIU DISTRICT</p>
  220.                                 </div>
  221.                             </div>
  222.                         </div>
  223.                         <div class="col-xl-12 col-lg-12 col-md-12">
  224.                             <div class="contact_wrap contact_style3 bg-white">
  225.                                 <div class="contact_icon">
  226.                                     <i class="linearicons-map-marker"></i>
  227.                                 </div>
  228.                                 <div class="contact_text">
  229.                                     <span>{{ 'CHINA - YIWU' }}</span>
  230.                                     <p>YONGSHENG XIAOQU, BLOCK 96, 3<sup>ème</sup>NIVEAU</p>
  231.                                 </div>
  232.                             </div>
  233.                         </div>
  234.                         <div class="col-xl-12 col-lg-12 col-md-12">
  235.                             <div class="contact_wrap contact_style3 bg-white">
  236.                                 <div class="contact_icon">
  237.                                     <i class="linearicons-map-marker"></i>
  238.                                 </div>
  239.                                 <div class="contact_text">
  240.                                     <span>{{ 'RD CONGO - LUBUMBASHI' }}</span>
  241.                                     <p>1138, AV KASAI COIN TABORA COMMUNE LUBUMBASHI</p>
  242.                                 </div>
  243.                             </div>
  244.                         </div>
  245.                         <div class="col-xl-12 col-lg-12 col-md-12">
  246.                             <div class="contact_wrap contact_style3 bg-white">
  247.                                 <div class="contact_icon">
  248.                                     <i class="linearicons-map-marker"></i>
  249.                                 </div>
  250.                                 <div class="contact_text">
  251.                                     <span>{{ 'RD CONGO - KINSHASA' }}</span>
  252.                                     <p>254, KINSHASA NGOMBE</p>
  253.                                 </div>
  254.                             </div>
  255.                         </div>
  256.                     </div>
  257.                 </div>
  258.             </div>
  259.         </div>
  260.         <br>
  261.         <br>
  262.         <br>
  263.         {{ include('partials/modalQuickView.html.twig') }}
  264.     </div>
  266. {% endblock %}
  268. {% block javascripts %}
  269.     <script type="text/javascript">
  271.         var input = document.querySelector("#contact_phone"),
  272.             output = document.querySelector("#error-msg");
  274.         var iti = window.intlTelInput(input, {
  275.             nationalMode: true,
  276.             preferredCountries: [ "cd", "cn" ],
  277.             separateDialCode: true,
  278.             autoHideDialCode: true,
  279.             utilsScript: "assets/js/utils.js?1613236686837"
  280.         });
  282.         var handleChange = function() {
  283.             var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below";
  284.             var textNode = document.createTextNode(text);
  285.             output.innerHTML = "";
  286.             input.value = iti.getNumber();
  287.         };
  289.         // listen to "keyup", but also "change" to update when the user selects a country
  290.         input.addEventListener('change', handleChange);
  291.         input.addEventListener('keyup', handleChange);
  294.         $(document).ready(function(){
  295.             $('.js-categories-multiple').select2({
  296.                 width: 'resolve',
  297.                 theme: 'classic',
  298.                 placeholder: 'Select option'
  299.             });
  300.         })
  301.     </script>
  302. {% endblock %}