templates/prodotti/productDetailOld.html.twig line 327

  1. {% extends "base.html.twig" %}
  3. {% import 'partials/macros/_breadcrumbs.html.twig' as page %}
  5. {% block bodyClass 'single-prodotto'~((product.productCategory and product.productCategory.identifier == 'CAMPIAMATI') ? ' body_app-show-category-ortofrutta') %}
  7. {% block content %}
  9.     {% set listBreadcrumbs = {
  10.         1: [ path('app_show_category', {'category_slug': product.type.productType.slug }), ('menu.' ~ product.type.productType.slug) ],
  11.         2: [ '', product.name ]
  12.     } %}
  14.     {{ page.breadcrumbs(listBreadcrumbs) }}
  16.     <section class="wow animate__fadeIn padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom single-prodotto">
  17.         <div class="container-fluid">
  18.             <div class="row justify-content-center">
  19.                 <div class="col-12 col-sm-6 col-lg-4 order-1 order-sm-1 order-lg-2 text-center text-sm-end">
  20.                     <h1 class="margin-20px-bottom">
  21.                         {{ product.name }}
  22.                     </h1>
  23.                     <div class="easyadmin-output margin-40px-bottom">
  24.                         {{ product.description|raw }}
  25.                     </div>
  26.                     {% if app.request.locale == 'it' %}
  27.                         <a class="button button_color_jewel button_size_medium" href="{{ path('app_wheretobuy') }}">
  28.                             {{ 'products_detail.where_to_buy'|trans({}, 'pages')|upper }}
  29.                         </a>
  30.                     {% endif %}
  31.                 </div>
  32.                 <div class="col-10 col-sm-6 col-lg-4 order-0 order-sm-0 order-lg-1 position-relative z-index-2">
  33.                     {% if product.imagePackName is not null and product.imagePackName  is defined  %}
  34.                         <div class="" data-js="product">
  35.                             {% if product.new %}
  36.                                 {% include 'partials/badge/_badge_new.html.twig' %}
  37.                             {% endif %}
  38.                             <img
  39.                                     class="sm-margin-30px-bottom product-png-shadow"
  40.                                     src="{{ ('/uploads/images/product/' ~ product.imagePackName) }}"
  41.                                     alt="{{ product.name }}">
  42.                         </div>
  43.                     {% endif %}
  44.                 </div>
  47.                 {% if product.type.productType.slug in ['ortofrutta']  %}
  48.                     <div class="col-12 col-sm-6 col-lg-4 offset-sm-6 offset-lg-0 order-2 order-sm-2 order-lg-0 align-self-end sm-margin-30px-top sm-padding-30px-top md-padding-60px-top">
  50.                         <div class="d-flex align-items-center margin-20px-right">
  51.                             <div class="border-radius-50 d-flex margin-10px-right padding-10px-all Bgc(white) H(80px) W(80px) Ar(1/1)">
  52.                                 <div class="">
  53.                                     <img src="{{ asset('assets/images/frontend/products/campiamati/cottura_padella.jpg') }}" alt="{{ (product.type.productType.slug ~ '.padella')|trans({}, 'pages') }}">
  54.                                 </div>
  55.                             </div>
  56.                             <span class="text-start">
  57.                                 {{ (product.type.productType.slug ~ '.padella')|trans({}, 'pages') }}
  58.                             </span>
  59.                         </div>
  61.                         <div class="d-flex align-items-center margin-20px-right margin-20px-top">
  62.                             <div class="border-radius-50 d-flex margin-10px-right padding-10px-all Bgc(white) H(80px) W(80px) Ar(1/1)">
  63.                                 <div class="">
  64.                                     <img src="{{ asset('assets/images/frontend/products/campiamati/cottura_forno.jpg') }}" alt="{{ (product.type.productType.slug ~ '.forno')|trans({}, 'pages') }}">
  65.                                 </div>
  66.                             </div>
  67.                             <span class="text-start">
  68.                                 {{ (product.type.productType.slug ~ '.forno')|trans({}, 'pages') }}
  69.                             </span>
  70.                         </div>
  72.                         <div class="d-flex align-items-center margin-20px-right margin-20px-top">
  73.                             <div class="border-radius-50 d-flex margin-10px-right padding-10px-all Bgc(white) H(80px) W(80px) Ar(1/1)">
  74.                                 <div class="">
  75.                                     <img src="{{ asset('assets/images/frontend/products/campiamati/cottura_friggitrice.jpg') }}" alt="{{ (product.type.productType.slug ~ '.friggitrice')|trans({}, 'pages') }}">
  76.                                 </div>
  77.                             </div>
  78.                             <span class="text-start">
  79.                                 {{ (product.type.productType.slug ~ '.friggitrice')|trans({}, 'pages') }}
  80.                             </span>
  81.                         </div>
  82.                     </div>
  83.                 {% elseif product.type.productType.slug in ['kroccanti'] %}
  84.                     <div class="col-12 col-sm-6 col-lg-4 offset-sm-6 offset-lg-0 order-2 order-sm-2 order-lg-0 align-self-end sm-margin-30px-top sm-padding-30px-top md-padding-60px-top">
  86.                         <div class="d-flex align-items-center margin-20px-right">
  87.                             <div class="border-radius-50 d-flex margin-10px-right padding-10px-all Bgc(white) H(80px) W(80px) Ar(1/1)">
  88.                                 <div class="">
  89.                                     <img src="{{ asset('assets/svg/kroccanti-padella.svg') }}" alt="{{ (product.type.productType.slug ~ '.padella')|trans({}, 'pages') }}">
  90.                                 </div>
  91.                             </div>
  92.                             <span class="text-start">
  93.                                 {{ (product.type.productType.slug ~ '.padella')|trans({}, 'pages') }}
  94.                             </span>
  95.                         </div>
  97.                         <div class="d-flex align-items-center margin-20px-right margin-20px-top">
  98.                             <div class="border-radius-50 d-flex margin-10px-right padding-10px-all Bgc(white) H(80px) W(80px) Ar(1/1)">
  99.                                 <div class="">
  100.                                     <img src="{{ asset('assets/svg/kroccanti-forno.svg') }}" alt="{{ (product.type.productType.slug ~ '.forno')|trans({}, 'pages') }}">
  101.                                 </div>
  102.                             </div>
  103.                             <span class="text-start">
  104.                                 {{ (product.type.productType.slug ~ '.forno')|trans({}, 'pages') }}
  105.                             </span>
  106.                         </div>
  108.                         <div class="d-flex align-items-center margin-20px-right margin-20px-top">
  109.                             <div class="border-radius-50 d-flex margin-10px-right padding-10px-all Bgc(white) H(80px) W(80px) Ar(1/1)">
  110.                                 <div class="">
  111.                                     <img src="{{ asset('assets/svg/kroccanti-friggitrice.svg') }}" alt="{{ (product.type.productType.slug ~ '.friggitrice')|trans({}, 'pages') }}">
  112.                                 </div>
  113.                             </div>
  114.                             <span class="text-start">
  115.                                 {{ (product.type.productType.slug ~ '.friggitrice')|trans({}, 'pages') }}
  116.                             </span>
  117.                         </div>
  118.                     </div>
  119.                 {% else %}
  120.                     <div class="col-12 col-sm-6 col-lg-4 offset-sm-6 offset-lg-0 order-2 order-sm-2 order-lg-0 align-self-end sm-margin-30px-top sm-padding-30px-top md-padding-60px-top">
  122.                         {% if '~FRESH~' in product.tagValues %}
  124.                             <div class="typologyBadge d-flex align-items-center Mb(40px) Mb(80px)--md">
  125.                                 <div class="typologyBadge__item typologyBadge__item__fresh">
  126.                                     <img src="{{ asset('/assets/images/webp/frontend/products/icona_freschi.webp') | imagine_filter('size_100_100') }}"
  127.                                          class="W(50px) H(50px)"
  128.                                          alt="Freschi"
  129.                                          title="Freschi"
  130.                                          width="100"
  131.                                          height="100"
  132.                                          loading="lazy">
  133.                                     <span class="Mstart(10px)">Freschi</span>
  134.                                 </div>
  135.                             </div>
  137.                         {% elseif '~FROZEN~' in product.tagValues %}
  139.                             <div class="typologyBadge d-flex align-items-center Mb(40px) Mb(80px)--md">
  140.                                 <div class="typologyBadge__item typologyBadge__item__frozen">
  141.                                     <img src="{{ asset('/assets/images/webp/frontend/products/icona_surgelati_blu.webp') | imagine_filter('size_100_100') }}"
  142.                                          class="W(50px) H(50px)"
  143.                                          alt="Surgelati"
  144.                                          title="Surgelati"
  145.                                          width="100"
  146.                                          height="100"
  147.                                          loading="lazy">
  148.                                     <span class="Mstart(10px)">Surgelati</span>
  149.                                 </div>
  150.                             </div>
  152.                         {% endif %}
  154.                         {% for key, value in product.generalInformations %}
  155.                             <div class="d-flex align-items-center margin-20px-right {% if not loop.first %}margin-20px-top{% endif %}">
  156.                                 <div class="border-radius-50 d-flex margin-10px-right padding-10px-all w-50px Bgc(la-rioja) H(50px)">
  157.                                     {% if key|lower == 'proteine' %}
  158.                                         {% include 'partials/svg/_icon_muscle.svg.twig' %}
  159.                                     {% elseif key|lower == 'tipo_di_vegetale' %}
  160.                                         {% include 'partials/svg/_icon_bell_pepper_capsicum.svg.twig' %}
  161.                                     {% elseif key|lower == 'tempo' %}
  162.                                         {% include 'partials/svg/_icon_clock_time.svg.twig' %}
  163.                                     {% elseif key|lower == 'pack' %}
  164.                                         {% include 'partials/svg/_icon_box.svg.twig' %}
  165.                                     {% elseif key|lower == 'porzioni' %}
  166.                                         {% include 'partials/svg/_icon_fork_and_knife.svg.twig' %}
  167.                                     {% endif %}
  168.                                 </div>
  169.                                 <span class="text-start">
  170.                                     {{ value }}
  171.                                 </span>
  172.                             </div>
  173.                         {% endfor %}
  175.                         {% for value in product.plus %}
  176.                             <div class="d-flex align-items-center margin-20px-top margin-20px-right">
  177.                                 <div class="border-radius-50 d-flex margin-10px-right padding-10px-all w-50px Bgc(la-rioja) H(50px)">
  178.                                     {% include 'partials/svg/_icon_exclamation.svg.twig' %}
  179.                                 </div>
  180.                                 <span class="text-start">
  181.                                     {{ value }}
  182.                                 </span>
  183.                             </div>
  184.                         {% endfor %}
  185.                     </div>
  186.                 {% endif %}
  189.             </div>
  190.         </div>
  191.     </section>
  193.     <section class="wow animate__fadeInUp padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom">
  194.         <div class="container-fluid">
  195.             <div class="row align-items-center">
  196.                 <div class="col-12 col-sm-6 col-lg-4 offset-sm-6 offset-lg-4 order-sm-1 sm-padding-30px-top md-padding-60px-top text-sm-end">
  197.                     <h3 class="margin-40px-bottom">
  198.                         {{ 'products_detail.ingredients'|trans({}, 'pages') }}
  199.                     </h3>
  200.                     <div class="easyadmin-output">
  201.                         {{ product.ingredients|raw }}
  202.                     </div>
  203.                 </div>
  204.                 <div class="col-12 col-sm-6 offset-sm-6 offset-lg-0 col-lg-4 order-sm-0">
  205.                     <div class="icon-large sm-margin-40px-top margin-10px-bottom w-70px C(jewel)">
  206.                         {% include 'partials/svg/_icon_quote_left.svg.twig' %}
  207.                     </div>
  208.                     <p class="margin-50px-bottom md-margin-20px-bottom text-sm-end text-lg-start">
  209.                         {% if product.type.productType.slug == 'dolci' %}
  210.                             {{ 'products_detail.quote_dolci'|trans({}, 'pages') }}
  211.                         {% else %}
  212.                             {{ 'products_detail.quote'|trans({}, 'pages') }}
  213.                         {% endif %}
  214.                     </p>
  215.                 </div>
  216.             </div>
  217.         </div>
  218.     </section>
  220.     <section class="wow animate__fadeInUp sm-padding-30px-bottom">
  221.         <div class="container-fluid">
  222.             <div class="row">
  223.                 <div class="col-12 col-sm-6 col-lg-4 offset-sm-6 offset-lg-0 padding-100px-bottom md-padding-60px-bottom">
  224.                     {% if product.nutritionalValues|length > 0 %}
  225.                         <h3 class="margin-40px-bottom text-sm-end text-lg-start">
  226.                             {{ 'products_detail.nutritional_values.title'|trans({}, 'pages') }}
  227.                         </h3>
  228.                         <p class="margin-20px-bottom text-small text-end">
  229.                             {{ 'products_detail.nutritional_values.average_values'|trans({}, 'pages') }}
  230.                         </p>
  231.                         <table class="w-100">
  232.                             <tbody>
  233.                                 {% for key, value in product.nutritionalValues %}
  234.                                     <tr class="Bds(d) Bdbw(3px) Bdbc(la-rioja)">
  235.                                         <td class="padding-10px-all text-start">
  236.                                             {% if key in ['di_cui_saturi', 'di_cui_zuccheri'] %}{% else %}<strong>{% endif %}
  237.                                                 {{ ('products_detail.nutritional_values.table.' ~ key|lower)|trans({}, 'pages') }}
  238.                                             {% if key in ['di_cui_saturi', 'di_cui_zuccheri'] %}{% else %}</strong>{% endif %}
  239.                                         </td>
  240.                                         <td class="padding-10px-all text-end">
  241.                                             {% if key in ['di_cui_saturi', 'di_cui_zuccheri'] %}{% else %}<strong>{% endif %}
  242.                                                 {{ value }}
  243.                                             {% if key in ['di_cui_saturi', 'di_cui_zuccheri'] %}{% else %}</strong>{% endif %}
  244.                                         </td>
  245.                                     </tr>
  246.                                 {% endfor %}
  247.                             </tbody>
  248.                         </table>
  249.                     {% endif %}
  250.                 </div>
  251.                 <div class="col-12 col-sm-6 col-lg-4 offset-sm-6 offset-lg-4">
  252.                     {% if product.imageProductName is not null and product.imageProductName  is defined  %}
  253.                         <img src="/uploads/images/product/{{ product.imageProductName }}" alt="{{ product.name }}">
  254.                     {% endif %}
  255.                 </div>
  256.             </div>
  257.         </div>
  258.     </section>
  260.     {% set recipes = product.recipes %}
  262.     <section class="row position-relative padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom z-index-2" style="background-image: url('{{ asset('assets/images/webp/frontend/bg-texture.webp') }}')">
  263.         <div class="container-fluid p-0 overflow-hidden Bdrs(30px)">
  264.             <div class="row g-0">
  266.                 {% if product.productCookings|length > 0 %}
  267.                     <div class="col-12 {% if recipes|length > 0 %}col-sm-7 col-lg-6{% endif %} Bgc(la-rioja) overflow-hidden" data-parallax-background-ratio="0.7" style="background-image: url('{{ asset('assets/images/webp/frontend/recipes/bg-leaf.webp') }}')">
  268.                         <div class="sm-padding-20px-lr padding-40px-all">
  269.                             <h3 class="margin-40px-bottom text-white text-center {% if recipes|length > 0 %}text-sm-start{% endif %}">
  270.                                 {{ 'products_detail.product_cookings'|trans({}, 'pages') }}
  271.                             </h3>
  272.                             <div class="row g-0 justify-content-center">
  273.                                 <div class="col-12 {% if recipes|length == 0 %}col-md-10 col-lg-8{% endif %}">
  274.                                     {% for productCooking in product.productCookings %}
  275.                                         <div class="col margin-six-bottom md-margin-50px-bottom sm-margin-40px-bottom wow animate__fadeInUp last-paragraph-no-margin">
  276.                                             <div class="feature-box-5 position-relative">
  277.                                                 <i class="icon-desktop">
  278.                                                     <div class="background-white border-radius-50 d-flex margin-lr-auto padding-5px-all w-60px H(60px)">
  279.                                                         {% include 'partials/svg/_icon_' ~ productCooking.type|lower ~ '.svg.twig' %}
  280.                                                     </div>
  281.                                                 </i>
  282.                                                 <div class="feature-content">
  283.                                                     <div class="margin-10px-bottom font-weight-600">{{ ('products_detail.cooking_method.' ~ productCooking.type|lower)|trans({}, 'pages')|upper }}</div>
  284.                                                     <p class="d-inline-block sm-w-90">{{ productCooking.description }}</p>
  285.                                                 </div>
  286.                                             </div>
  287.                                         </div>
  288.                                     {% endfor %}
  289.                                 </div>
  290.                             </div>
  291.                         </div>
  292.                     </div>
  293.                 {% endif %}
  295.                 {% if recipes|length > 0 %}
  296.                     <div class="col-12 {% if product.productCookings|length > 0 %}col-sm-5 col-lg-6{% endif %} Bgc(jewel)">
  297.                         <div class="padding-40px-tb">
  298.                             <h3 class="margin-40px-bottom padding-40px-lr text-white text-center text-sm-end">
  299.                                 {{ 'products_detail.our_recipes'|trans({}, 'pages') }}
  300.                             </h3>
  301.                             <div class="row g-0 justify-content-center">
  302.                                 <div class="col-12 {% if product.productCookings|length == 0 %}col-md-10 col-lg-8{% endif %}">
  303.                                     <div class="swiper-container swiper-pagination-bottom white-move" data-slider-options='{
  304.                                         {% if recipes|length > 2 %}"loop": true,{% endif %}
  305.                                         "slidesPerView": "auto",
  306.                                         "centeredSlides": true,
  307.                                         "spaceBetween": 15,
  308.                                         "loopedSlides": {{ recipes|length < 3 ? recipes|length : 3 }},
  309.                                         "allowTouchMove": true,
  310.                                         "autoplay": {
  311.                                             "delay": 3000,
  312.                                             "disableOnInteraction": false
  313.                                         },
  314.                                         "pagination": {
  315.                                             "el": ".swiper-pagination-recipes",
  316.                                             "clickable": true
  317.                                         }
  318.                                     }'>
  319.                                         <div class="swiper-wrapper">
  320.                                             {% for recipe in recipes %}
  321.                                                 {% if recipe.isEnabled == true %}
  322.                                                     {% if recipe.locale == app.request.locale %}
  323.                                                         <div class="swiper-slide w-50 md-w-80 sm-w-70">
  324.                                                             <div class="blog-post bg-white border-radius-10 overflow-hidden">
  325.                                                                 <div class="blog-post-images border-radius-10 overflow-hidden position-relative">
  326.                                                                     <a href="{{ path('app_recipes_detail', {'slug': recipe.slug }) }}">
  327.                                                                         <img class="d-block" src="{{ ('/uploads/images/ricette/' ~ recipe.image) | imagine_filter('size_550_425') }}" alt="{{ recipe.title }}">
  328.                                                                     </a>
  329.                                                                 </div>
  330.                                                                 <div class="post-details padding-20px-all">
  331.                                                                     <a href="{{ path('app_recipes_detail', {'slug': recipe.slug }) }}" class="post-title w-100 d-block lg-w-100 margin-15px-bottom C(jewel)">
  332.                                                                         <strong>
  333.                                                                             {{ recipe.title|upper }}
  334.                                                                         </strong>
  335.                                                                     </a>
  336.                                                                 </div>
  337.                                                             </div>
  338.                                                         </div>
  339.                                                     {% endif %}
  340.                                                 {% endif %}
  342.                                             {% endfor %}
  343.                                         </div>
  344.                                         <div class="swiper-pagination-recipes swiper-pagination swiper-pagination-white"></div>
  345.                                     </div>
  346.                                 </div>
  347.                             </div>
  348.                         </div>
  349.                     </div>
  350.                 {% endif %}
  351.             </div>
  352.         </div>
  353.     </section>
  355.     <section class="position-relative padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom z-index-2" style="background-image: url('{{ asset('assets/images/webp/frontend/bg-texture.webp') }}')">
  356.         <div class="container-fluid">
  357.             <div class="row justify-content-center">
  358.                 <div class="col col-md-8 text-center">
  359.                     <h3 class="margin-40px-bottom">
  360.                         {{ 'products_detail.other_products'|trans({}, 'pages') }}
  361.                     </h3>
  362.                 </div>
  363.             </div>
  364.             <div class="row position-relative justify-content-center">
  365.                 <div class="col-12 col-md-12 col-sm-9">
  366.                     <div class="swiper-container swiper-pagination-bottom black-move blog-slider"
  367.                          data-slider-options='{
  368.                             "slidesPerView": "1",
  369.                             "allowTouchMove": true,
  370.                             "loop": false,
  371.                             "spaceBetween": 30,
  372.                             "autoplay": false,
  373.                             "keyboard": {
  374.                                 "enabled": true,
  375.                                 "onlyInViewport": true
  376.                             },
  377.                             "breakpoints": {
  378.                                 "992": {
  379.                                     "slidesPerView": {{ correlatedProducts|length < 3 ? correlatedProducts|length : 3 }}
  380.                                 },
  381.                                 "768": {
  382.                                     "slidesPerView": {{ correlatedProducts|length < 3 ? correlatedProducts|length : 3 }}
  383.                                 }
  384.                             },
  385.                             "pagination": {
  386.                                 "el": ".swiper-pagination-products",
  387.                                 "clickable": true
  388.                             }
  389.                         }'>
  390.                         <div class="swiper-wrapper">
  391.                             {% for correlatedProduct in correlatedProducts %}
  392.                                 <div class="swiper-slide">
  393.                                     <div class="text-center" onclick="track_click_item('{{ correlatedProduct.id }}', '{{ correlatedProduct.name }}', '{{ product.type.productType.name }}', 'related_products', 'Related Products')">
  394.                                         <a class="d-block margin-20px-bottom" href="{{ path('app_show_product', {'category_slug': product.type.productType.slug, 'product_slug': correlatedProduct.slug} ) }}">
  395.                                             <div class="productRelated">
  396.                                                 {% if correlatedProduct.new %}
  397.                                                     {% include 'partials/badge/_badge_new.html.twig' %}
  398.                                                 {% endif %}
  399.                                                 <img class="sm-w-70" src="{{ ('/uploads/images/product/' ~ correlatedProduct.image_pack_name) | imagine_filter('size_400_500') }}" alt="{{ correlatedProduct.name }}">
  400.                                             </div>
  401.                                         </a>
  402.                                         <h5>
  403.                                             <a class="C(jewel)" href="{{ path('app_show_product', {'category_slug': product.type.productType.slug, 'product_slug': correlatedProduct.slug} ) }}">
  404.                                                 {{ correlatedProduct.name }}
  405.                                             </a>
  406.                                         </h5>
  407.                                     </div>
  408.                                 </div>
  409.                             {% endfor %}
  410.                         </div>
  411.                         <div class="swiper-pagination-products swiper-pagination"></div>
  412.                     </div>
  413.                 </div>
  414.             </div>
  415.         </div>
  416.     </section>
  418. {% endblock %}
  420. {% block javascripts_body %}
  422.     <script>
  423.         tracking__viewcontent__title = '{{ product.name }}';
  424.         tracking__viewcontent__ids = '{{ product.id }}';
  425.         tracking__viewcontent__type = 'product';
  426.         var productTrackingObj = {
  427.             'id' : '{{ product.id }}',
  428.             'name' : '{{ product.name }}',
  429.             'brand' : 'Kioene',
  430.             'category' : '{{ product.type.productType.slug }}',
  431.             'url' : '{{ app.request.uri }}'
  432.         }
  433.     </script>
  435.     {{ parent() }}
  437.     <script type="text/javascript">
  438.         window.addEventListener('load', () => {
  440.             let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  442.             if(viewportWidth >= 576) {
  443.                 const animationProduct = gsap.timeline({
  444.                     scrollTrigger: {
  445.                         trigger: document.querySelector('[data-js="product"]'),
  446.                         start: 'top 20%',
  447.                         end: document.body.scrollHeight + ' 10%',
  448.                         pin: true,
  449.                         pinSpacing: false,
  450.                         scrub: true
  451.                     }
  452.                 })
  453.             }
  454.         });
  455.     </script>
  457. {% endblock %}