themes/BootstrapChildTheme/SyliusShopBundle/views/Homepage/index.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% block title %} {{ 'seo.pages.home.metaTitle'|trans }} {% endblock %}
  5. {% block metatags %}
  6.     <meta name="description" content="{{ 'seo.pages.home.metaDesc'|trans }}">
  7. {% endblock %}
  9. {% block wrapper %}
  10.     <div class="ui container">
  11.         {% if app.request.get('_route') != "sylius_shop_homepage" %}
  12.             {% include '@SyliusShop/_flashes.html.twig' %}
  13.         {% endif %}
  15.         {{ sylius_template_event('sylius.shop.layout.before_content') }}
  16.     </div>
  17.     {% block content %}
  18.         <div class="homepage">
  19.             <div class="ui container">
  20.                 {{ sylius_template_event('sylius.shop.homepage') }}
  21.             </div>
  22.             <div style="background-color: #003CBC" class="pt-3 pb-3 bg-blue-container">
  23.                 <div class="ui container">
  24.                     <div class="ui hidden divider"></div>
  25.                     <h4 class="ui horizontal section divider header section-title" style="color: white !important;">
  26.                         {{ 'sylius.pages.content.featuredPackages'|trans | raw }}
  27.                         <a class="title-link" style="color: white !important;" href="{{ path('sylius_shop_product_index', {'slug': 'catalogue'}) }}">{{ "customStrings.menu.see_catalogue" | trans }}</a>
  28.                     </h4>
  29.                     <div class="cards-inverted">
  30.                         {{ render(url('app_shop_partial_product_index_latest_by_taxon_code', {'code': 'Featured', 'count': 12, 'template': '@SyliusShop/Product/_horizontalProductListCarousel.html.twig'})) }}
  31.                     </div>
  32.                     <div class="ui hidden divider"></div>
  33.                 </div>
  34.             </div>
  35.             <div class="ui container mb-5">
  36.                 <div class="ui hidden divider"></div>
  37.                 <div class="container mt-5 pl-0 pr-0">
  38.                     {{ render(url('odiseo_sylius_blog_plugin_shop_partial_article_index_latest', {'count': 3, 'template': '@OdiseoSyliusBlogPlugin/Shop/Article/_latest.html.twig'})) }}
  39.                 </div>
  41.                 <div class="ui hidden divider"></div>
  43.                 <div class="avis-verifies-carousel">
  44.                     <h4 class="ui horizontal section divider header">
  45.                         {{ 'app.ui.reviews'|trans }}
  46.                     </h4>
  47.                     <div class="skeepers_carousel_container" data-slides-count="4"></div>
  48.                     <script defer charset="utf-8" src="//widgets.rr.skeepers.io/carousel/2daef7fd-7a49-c914-f593-50b778d77ccb/3e4b435c-f1e5-4da7-b2a3-de79f367f90a.js"></script>
  49.                 </div>
  51.                 <div class="ui hidden divider"></div>
  52.                 {% if app.request.get('_route') == "sylius_shop_homepage" %}
  53.                     <h4 class="ui horizontal section divider header">{{ 'sylius.pages.content.experties'|trans }}</h4>
  54.                     <div class="row step_guide mb-2 mt-3">
  55.                         <div class="col-sm col-md-4 mb-2 text-center mb-3">
  56.                             <picture>
  58.                                 <source srcset="{{ asset('assets/shop/img/step_1.webp') }}" type="image/webp">
  59.                                 <source srcset="{{ asset('assets/shop/img/step_1.png') }}" type="image/png">
  60.                                 <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ asset('assets/shop/img/step_1.png') }}" class="mb-2 step_guide_image img-fluid" alt="{{'sylius.pages.content.childrenLitrature'|trans }}" />
  61.                             </picture>
  63.                             <div class="text-center step_guide_text font-weight-bold">{{'sylius.pages.content.childrenLitrature'|trans }}</div>
  64.                         </div>
  65.                         <div class="col-sm col-md-4 mb-2 text-center mb-3">
  66.                             <picture>
  67.                                 <source srcset="{{ asset('assets/shop/img/step_6.webp') }}" type="image/webp">
  68.                                 <source srcset="{{ asset('assets/shop/img/step_6.png') }}" type="image/png">
  70.                                 <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ asset('assets/shop/img/step_6.png') }}" class="mb-2 step_guide_image img-fluid" alt="{{'sylius.pages.content.quizToLearn'|trans }}" />
  71.                             </picture>
  72.                             <div class="text-center step_guide_text font-weight-bold">{{'sylius.pages.content.quizToLearn'|trans }}</div>
  73.                         </div>
  74.                         <div class="col-sm col-md-4 mb-2 col-md-4 text-center mb-3">
  75.                             <picture>
  76.                                 <source srcset="{{ asset('assets/shop/img/step_3.webp') }}" type="image/webp">
  77.                                 <source srcset="{{ asset('assets/shop/img/step_3.jpg') }}" type="image/png">
  78.                                 <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ asset('assets/shop/img/step_3.jpg') }}" class="mb-2 step_guide_image img-fluid" alt="{{'sylius.pages.content.atonomyOfTheChild'|trans }}" />
  79.                             </picture>
  80.                             <div class="text-center step_guide_text font-weight-bold">{{'sylius.pages.content.atonomyOfTheChild'|trans }}​</div>
  81.                         </div>
  82.                     </div>
  83.                 {% endif %}
  84.             </div>
  86.         </div>
  87.     {% endblock %}
  89.     {{ sylius_template_event('sylius.shop.layout.after_content') }}
  90. {% endblock %}
  92. {% block javascripts %}
  93.     {{ parent() }}
  95.     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  97.     <script>
  98.         $('.owl-carousel.product-carousel').each(function() {
  99.         var tg = $(this);
  100.             tg.owlCarousel({
  101.                 items: 2,
  102.                 loop: true,
  103.                 margin: 10,
  104.                 nav: 3,
  105.                 merge:true,
  106.                 dots: true,
  107.                 slideBy: 'page',
  108.                 responsive:{
  109.                     900:{
  110.                         items:4
  111.                     }
  112.                 }
  113.             });
  114.         });
  115.     </script>
  116. {% endblock %}