templates/product/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ 'PRODUCT'|trans }}{% endblock %}
  4. {% block head %}
  5.     {{ parent() }}
  6.     <meta name="description" content="{{ 'PRODUCT_META_DESCRIPTION'|trans}}">
  7.     <meta name="keywords" content="{% for product in productPaginator.result %}{{ product.title }}, {% endfor %}">
  8. {% endblock %}
  10. {% block body %}
  11.     <main>
  12.         <section class="komili-home-hero owl-carousel">
  13.             {% for item in sliderItemPaginator.result %}
  14.                 <div class="hero-item">
  15.                     <a {% if item.pathUrl %}href="{{ item.pathUrl }}"{% else %}href="javascript:;" {% endif %}>
  16.                         <img src="{{ item.image.url }}" alt="{{ item.image.originalName }}">
  17.                     </a>
  18.                 </div>
  19.             {% endfor %}
  20.         </section>
  22.         <section class="komili-home-products">
  23.             <div class="komili-wrapper">
  24.                 <h1 class="text-center bold text-color-p mb-24 h2">{{ 'PRODUCTS' | trans }}</h1>
  26.                 <div class="komili-home-products-slider komili-product-page-products">
  27.                     {% for product in productPaginator.result %}
  28.                         <div class="komili-home-products-item">
  29.                             <a href="{{ path('product_item', {'categorySlug': product.slug }) }}">
  30.                                 <figure>
  31.                                     <img src="{{ product.image.url }}" alt={{ product.title }} width="200" height="200" loading="lazy">
  32.                                 </figure>
  33.                                 <div class="text">
  34.                                     <h3 class="bold text-color-p h4 mb-10">{{ product.title }}</h3>
  35.                                     <p class="text-black mb-0">{{ product.shortContent }}</p>
  36.                                 </div>
  37.                             </a>
  38.                         </div>
  39.                     {% endfor %}
  40.                 </div>
  41.             </div>
  42.         </section>
  43.         {% for product in productPaginator.result %}
  44.             <div itemscope itemtype="http://schema.org/Product">
  45.                 <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="{{ url('product_item', {'categorySlug': product.slug }) }}"/>
  46.                 <meta itemprop="headline" content="{{ product.title }}">
  47.                 <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
  48.                     <meta itemprop="name" content="Komili">
  49.                 </h3>
  50.                 <meta itemprop="description" content="{{ product.shortContent }}"/>
  51.                 <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
  52.                     <meta itemprop="url" content="{{ product.image.url }}">
  53.                 </div>
  54.                 <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
  55.                     <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
  56.                         <meta itemprop="url" content="{{ absolute_url('/img/komili-logo.svg') }}">
  57.                     </div>
  58.                     <meta itemprop="name" content="Komili">
  59.                 </div>
  60.                 <meta itemprop="datePublished" content="{{ product.createdAt|date('Y-m-d') }}T{{ product.createdAt|date('H:s') }}"/>
  61.                 <meta itemprop="dateModified" content="{{ product.updatedAt|date('Y-m-d') }}T{{ product.updatedAt|date('H:s') }}"/>
  62.             </div>
  63.         {% endfor %}
  64.     </main>
  65. {% endblock %}
  66. {% block javascripts %}
  67.     {{ parent() }}
  68.     <script>
  70.         $(".komili-home-hero").owlCarousel({
  71.             loop: true,
  72.             nav: true,
  73.             lazyLoad: true,
  74.             margin: 0,
  75.             items: 1,
  76.             autoplay: true,
  77.             autoplayTimeout: 6000,
  78.             autoplayHoverPause: true
  79.         });
  81.     </script>
  82. {% endblock %}