templates/front/front_shopping/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layouts_front/base_front.html.twig' %}
  3. {% block stylesheets %}
  4.     {% if isThereSlider|length > 0 %}
  5.         <link rel="stylesheet preload" as="style" media="screen"
  6.               href="{{ asset('js/modern-slide-in/css/sequencejs-theme.modern-slide-in.min.css', 'main-app') }}">
  8.     {% endif %}
  9. {% endblock %}
  11. {% set titleAff = page.seoTitle|default(page.ptitreonglet)|default(page.ptitre) %}
  12. {% set titleAff = "E-boutique" %}
  14. {% if catEnCours is defined %}
  15.     {% for cat in  ecoCategs %}
  16.         {% if cat.id == catEnCours %}
  17.             {% set titleAff = titleAff~" - "~cat.categ_entitled %}
  18.         {% endif %}
  19.     {% endfor %}
  20. {% endif %}
  21. {% set titleAff = titleAff|slice(0,34)~" | "~nomDuSite %}
  22. {% if app.request.locale == 'fr' %}
  23.     {% set metaDescr = page.seoDescription|default( "Retrouvez tous les produits sur le site de "~nomDuSite) %}
  24. {% else %}
  25.     {% set metaDescr = page.seoDescription|default("Find all the products on the "~nomDuSite~" website") %}
  26. {% endif %}
  27. {% block metaDescription %}{{ metaDescr }}{% endblock %}
  28. {% block metaDescriptionOg %}{{ metaDescr }}{% endblock %}
  29. {# {% block keywords %}{{ page.seoKeywords }}{% endblock %} #}
  30. {% block keywords %}{% endblock %}
  31. {% block title %}{{ titleAff }}{% endblock %}
  32. {% block titleOg %}{{ titleAff }}{% endblock %}
  33. {% block content %}
  34.     {% if page is not null %}
  35.         {% set mediaTmp = page.pbandeau %}
  36.         {% set mediaDefault = "default.jpg" %}
  37.         {% set mediaTmp = webp(webpSupported, mediaTmp)|url_encode %}
  38.         {% set mediaDefault = webp(webpSupported, mediaDefault)|url_encode %}
  40.         <section data-bs-version="5.1" class="header1 cid-sYtfgmlx9v mbr-parallax-background"
  41.                  style="background-image: url('{{ asset("/medias_front/pages/"~mediaTmp|default(mediaDefault))|imagine_filter('front_Bandeau_1920') }}');height: 580px">
  42.             <div class=" mbr-overlay" style="opacity: 0; background-color: rgb(255, 255, 255);"></div>
  43.             <div id="titrePage" class="pt-5 align-center container">
  44.                 <div class="row justify-content-center">
  45.                     <div class="col-12 col-lg-12">
  46.                         {% if category is not empty %}
  47.                             <h1 class="BigTitle mbr-section-title mbr-fonts-style mb-0 display-1">
  48.                                 {{ category.categEntitled }}</h1>
  49.                         {% else %}
  50.                             <h1 class="BigTitle mbr-section-title mbr-fonts-style mb-0 display-1">Boutique</h1>
  51.                         {% endif %}
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.         </section>
  56.     {% else %}
  57.         <section data-bs-version="5.1" class="header1 cid-sYtfgmlx9v mbr-parallax-background"
  58.                  style="background-image: url('{{ asset("/medias_front/pages/default.webp" ) }}');height: 580px">
  59.             <div class=" mbr-overlay" style="opacity: 0; background-color: rgb(255, 255, 255);"></div>
  60.             <div id="titrePage" class="pt-5 align-center container">
  61.                 <div class="row justify-content-center">
  62.                     <div class="col-12 col-lg-12">
  63.                         {% if category is not empty %}
  64.                             <h1 class="BigTitle mbr-section-title mbr-fonts-style mb-0 display-1">
  65.                                 {{ category.categEntitled }}</h1>
  66.                         {% else %}
  67.                             <h1 class="BigTitle mbr-section-title mbr-fonts-style mb-0 display-1">Boutique</h1>
  68.                         {% endif %}
  69.                     </div>
  70.                 </div>
  71.             </div>
  72.         </section>
  73.     {% endif %}
  75.     <div class="blocTitre d-flex justify-content-center flex-wrap">
  76.         {% include '@main-app/front/front_shopping/nav_ariane.html.twig' %}
  77.     </div>
  78.     <div id="page_{{ page.pageId }}" class="container pb-5" style="padding-bottom: 20px !important;">
  79.         {#        {% include 'front/front_shopping/tpl_filters.html.twig' %} #}
  80.         <div class="col-12 pb-4 pt-2 d-flex flex-wrap align-items-center flex-md-row justify-content-center padd">
  81.             {% if categsList is not empty %}
  82.                 <a href="{{ path('front_shopping_categorie') }}" id="allProduct"
  83.                    class="{% if catEnCours == 0 %} selected {% endif %} btnFilterProduct btn btn-light"
  84.                    onclick="toggleHomeProduct(this.id)">Tous les produits</a>
  85.                 {% for categ in categsList %}
  86.                     <a href="{{ path('front_shopping_categorie', {categ_name:categ.categ_entitled|urlrewrite, mark:'marques',categ_id:categ.id }) }}"
  87.                        id="{{ categ.categ_entitled|urlrewrite }}"
  88.                        class="{% if catEnCours == categ.id %} selected {% endif %} btnFilterProduct btn btn-light"
  89.                        onclick="toggleHomeProduct(this.id)">
  90.                         {{ categ.categ_entitled }}</a>
  92.                 {% endfor %}
  93.             {% endif %}
  94.         </div>
  95.         <div class="pb-5 d-flex flex-column flex-wrap align-items-stretch flex-xl-row justify-content-center padd align-content-center overflow-hidden">
  96.             {% for product in products %}
  97.                 <div class="col col-xl-4 containerProduct news p-3 pt-5 m-3{% if loop.index is divisible by(2) %} secondProduct{% endif %}">
  98.                     <div class="containerImage imageProduct">
  99.                         <a href="{{ path('front_shopping_fiche', {product_name:product.prod_model|urlrewrite, prod_id:product.product_id}) }}">
  100.                             <img src="{{ asset('/medias_front/products/' ~ product.prod_picture|default('default.webp') ) | imagine_filter('front_product3') }} "
  101.                                  class="{% if loop.index is divisible by(2) %} secondImage {% endif %}"
  102.                                  alt="{{ product.prod_model }}">
  104.                             <div class="containerLabel containerLabelList">
  105.                                 {% if product.prod_price_type == "promo" %}
  106.                                     <div class="languette">
  107.                                         <img src="{{ websiteroot }}{{ asset('/medias_front/common/languette.png') }}"
  108.                                              alt="promo" class="productPromo">
  109.                                         <span class="languetteTitle">PROMO</span>
  110.                                     </div>
  111.                                 {% elseif product.prod_price_type == 'solde' %}
  112.                                     <div class="languette">
  113.                                         <img src="{{ websiteroot }}{{ asset('/medias_front/common/languetteOrange.png') }}"
  114.                                              alt="solde" class="productPromo">
  115.                                         <span class="languetteTitle">SOLDE</span>
  116.                                     </div>
  117.                                 {% elseif product.prod_novelty == 1 %}
  118.                                     <div class="languetter">
  119.                                         <img src="{{ websiteroot }}{{ asset('/medias_front/common/etiquette-nouveaute.svg') }}"
  120.                                              alt="Nouveauté" class="productPromo new">
  121.                                         <span class="languetteTitle new"></span>
  122.                                     </div>
  123.                                 {% elseif product.prod_soon == 1 %}
  124.                                     <div class="languette ">
  125.                                         <img class="productPromo soon"
  126.                                              src="{{ websiteroot }}{{ asset('/medias_front/common/etiquette-prochainement.svg') }}"
  127.                                              alt="PROCHAINEMENT">
  128.                                         <span class="languetteTitle soon"></span>
  129.                                     </div>
  130.                                 {% elseif product.is_deliverable == 'sur-place' %}
  131.                                     <div class="languette ">
  132.                                         <img class="productPromo soon"
  133.                                              src="{{ websiteroot }}{{ asset('/medias_front/common/etiquette-retrait-sur-place.svg') }}"
  134.                                              alt="PROCHAINEMENT">
  135.                                         <span class="languetteTitle soon"></span>
  136.                                     </div>
  137.                                 {% endif %}
  138.                             </div>
  140.                             {#   {% if product.prod_novelty == 1 %}
  141.                                 <p class="new">Nouveauté</p>
  142.                             {% elseif product.prod_price_type == 'promo' %}
  143.                                 <p class="promo">Promo</p>
  144.                             {% elseif product.prod_price_type == 'solde' %}
  145.                                 <p class="solde">Solde</p>
  146.                             {% endif %} #}
  147.                         </a>
  150.                     </div>
  152.                     <div class="container-text row d-flex align-items-center">
  153.                         <div class="nomProduit">
  154.                             <a href="{{ path('front_shopping_fiche', {product_name:product.prod_model|urlrewrite, prod_id:product.product_id}) }}">
  155.                                 {{ product.prod_model }}
  156.                             </a>
  157.                         </div>
  158.                     </div>
  160.                     <div class="container-text row d-flex align-items-center text-center">
  161.                         {{ product.prod_description|raw }}
  162.                     </div>
  164.                     <div class="row mt-3">
  165.                         {#                        <div class="col-6 flex-wrap justify-content-start"> #}
  166.                         {#                            <span class="producteur"> {{ product.provider }}</span> #}
  167.                         {#                        </div> #}
  168.                         <div class="col-6 flex-wrap justify-content-end">
  169.                             {% set isFavorite = false %}
  171.                             {% for favprod in favsProds %}
  172.                                 {% if favprod.productId == product.product_id and isFavorite == false %}
  173.                                     <a href='javascript:removeToFavorite({{ product.product_id }});'
  174.                                        class="loveProductMultiple"
  175.                                        id="favorite-product-multiple-{{ product.product_id }}">
  177.                                     </a>
  178.                                     {% set isFavorite = true %}
  179.                                 {% endif %}
  180.                             {% endfor %}
  182.                             {% if isFavorite == false %}
  183.                                 <a href='javascript:addToFavorite({{ product.product_id }});'
  184.                                    class="loveProductMultiple"
  185.                                    id="favorite-product-multiple-{{ product.product_id }}">
  186.                                 </a>
  187.                             {% endif %}
  188.                         </div>
  189.                     </div>
  190.                     <hr class="separateBasket">
  191.                     <div class="d-flex align-items-center justify-content-center">
  192.                         <span class="price">
  193.                             {% if product.type_odyssee == "bkdovalue" %}
  194.                                 <label for="bkdoValueAmount-{{ product.ref_id }}">Montant libre</label>
  195.                                 <input name="bkdoValueAmoun-{{ product.ref_id }}t"
  196.                                        id="bkdoValueAmount-{{ product.ref_id }}" type="number" min="1" max="9999"
  197.                                        value="100" class="form-control">
  198.                             {% else %}
  199.                                 {{ product.prod_selling_price|number_format(2, '.', ',') }}€
  200.                                 <input name="bkdoValueAmount-{{ product.ref_id }}"
  201.                                        id="bkdoValueAmount-{{ product.ref_id }}" type="number" min="0" max="0"
  202.                                        value="0" hidden="">
  203.                             {% endif %}
  204.                         </span>
  205.                     </div>
  206.                     <div class="containerImage BasketDown {% if product.prod_soon %}basketDownLeft{% endif %}">
  207.                         {#                        {% if product.type_odyssee == 'soin' %} #}
  208.                         {#                            <a href="{{ path('front_shopping_fiche', {product_name:product.prod_model|urlrewrite, prod_id:product.product_id}) }}" #}
  209.                         {#                               class="plusListeProduct"></a> #}
  210.                         {#                        {% else #}
  211.                         {% if product.prod_soon %}
  212.                             <button class="btn btn-yellow btnIndispo">
  213.                                 Bientôt disponible
  214.                             </button>
  215.                         {% elseif product.ref_quantity > 0 or not stockManagement %}
  216.                             <a href="javascript:addToBasket({{ product.ref_id }}, 1, $('#bkdoValueAmount-{{ product.ref_id }}').val());"
  217.                                class="addToPanelListeProduct"></a>
  218.                         {% else %}
  219.                             <button class="btn btn-yellow btnIndispo">Produit indispo</button>
  220.                         {% endif %}
  221.                     </div>
  222.                 </div>
  223.             {% endfor %}
  224.         </div>
  225.         <div class="d-flex justify-content-center">
  226.             {{ knp_pagination_render(products,'layouts/layouts_front/pagination/paginate.html.twig') }}
  227.         </div>
  229.         {# %///////////////////////////////////% #}{#
  230.         {% set classMargTop = "" %} #}{# plusTopLittle plusTopBig #}{#
  231.         {% set classMargBot = "" %} #}{# plusBotLittle plusBotBig #}{#
  232.         {% set type = 0 %} #}{# plusBotLittle plusBotBig #}{#
  233.         #}{# %///////////////////////////////////% #}{#
  234.         <div id="bloc_listeProducts" class="pageBloc blocGalerie type{{ type }} {{ classMargTop }} {{ classMargBot }}">
  235.             <div class="intPageBloc apparition">
  236.         #}{# {% if bloc.act_bloc_titre or bloc.act_bloc_sstitre %}
  237.                     <div class="blocTitre">
  238.                         {% if bloc.act_bloc_titre %}<h2><span>{{ bloc.act_bloc_titre }}</span></h2>{% endif %}
  239.                         {% if bloc.act_bloc_sstitre %}<h3>{{ bloc.act_bloc_sstitre }}</h3>{% endif %}
  240.                     </div>
  241.                 {% endif %} #}{#
  242.         <div class="blocContenu">
  243.             <div class="intBlocTxtContenu"></div>
  244.             <div class="intBlocContenu flexCenter flexStretch galerie type{{ type }}">
  245.                 {% set cmptRef = 0 %}
  247.                 {% for prod in products %}
  248.                     {% set type = 1 %}
  249.                     {% set mediaTmp = prod.prod_picture %}
  250.                     {% set mediaDefault = "default.jpg" %}
  251.                     {% set mediaTmp = webp(webpSupported, mediaTmp) %}
  252.                     {% set mediaDefault = webp(webpSupported, mediaDefault) %}
  253.                     {% set cmptRef = cmptRef + 1 %}
  255.                     <span class="aSpan flexColumn flexStretch flexNoWrap"
  256.                           style="">
  257.                         <a class="aFigure"
  258.                            href="{{ path('front_shopping_fiche', {product_name:prod.prod_model|urlrewrite, prod_id:prod.prod_id}) }}"
  259.                            title="{{ prod.prod_model }}">
  260.                             {% if prod.prod_soon == 1 %}
  261.                                 <p class="soon">Prochainement</p>
  262.                             {% elseif prod.prod_novelty == 1 %}
  263.                                 <p class="new">Nouveauté</p>
  264.                             {% elseif prod.prod_price_type == 'promo' %}
  265.                                 <p class="promo">Promo</p>
  266.                             {% elseif prod.prod_price_type == 'solde' %}
  267.                                 <p class="solde">Solde</p>
  268.                             {% endif %}
  269.                             <img class="imgZoom lazyload"
  270.                                  data-src="{{ asset('/medias_front/products/'~mediaTmp|default(mediaDefault)) | imagine_filter('front_blocGalerie'~type) }}"
  271.                                  data-srcset="{{ asset('/medias_front/products/'~mediaTmp|default(mediaDefault)) | imagine_filter('front_blocGalerie'~type) }} 250w, {{ asset('/medias_front/products/'~mediaTmp|default(mediaDefault)) | imagine_filter('front_blocGalerie'~type) }} 465w, {{ asset('/medias_front/products/' ~ mediaTmp|default(mediaDefault)) | imagine_filter('front_blocGalerie'~type) }} 1200w"
  272.                                  alt="{{ prod.prod_model }}"/>
  273.                         </a>
  274.                         <div class="contSpan">
  275.                             <span class="infos">
  276.                                 <a href="{{ path('front_shopping_fiche', {product_name:prod.prod_model|urlrewrite, prod_id:prod.prod_id}) }}"
  277.                                    title="{{ prod.prod_model }}">
  278.                                     <span class="nomProd">{{ prod.prod_model }}</span>
  280.                                     <div class="prix flexCenter flexMiddle">
  281.                                         {% if prod.prod_price_type == 'promo' or prod.prod_price_type == 'solde' %}
  282.                                             <span class="prixOrig">{{ prod.prod_selling_price|number_format(2, '.', ',') }} €</span>
  283.                                         {% endif %}
  284.                                         <span class="prixEff ">{{ prod.prod_reference_price|number_format(2, '.', ',') }} €</span>
  285.                                     </div>
  286.                                 </a>
  287.                                 {% if prod.prod_type == 'multiple' %}
  288.                                     <a id="panier-{{ prod.id }}" class="btnPanier aTxtHide  prodMultiple"
  289.                                        href='{{ path('front_shopping_fiche', {product_name:prod.prod_model|urlrewrite, prod_id:prod.prod_id}) }}'>{% trans %}Voir la fiche{% endtrans %}</a>
  290.                                 {% else %}
  291.                                     <a id="panier-{{ prod.id }}" class="btnPanier aTxtHide "
  292.                                        href='javascript:addToBasket({{ prod.ref_id }});'>{% trans %}Ajouter au panier{% endtrans %}</a>
  293.                                 {% endif %}
  295.                             </span>
  296.                         </div>
  297.                     </span>
  298.                 {% else %}
  299.                     <p>Aucun résultat</p>
  300.                 {% endfor %}
  302.                 {{ knp_pagination_render(products) }}
  304.             </div>
  305.         </div>
  306.     </div>
  307.     </div> #}
  308.     </div>
  309.     {#
  310.     <section>
  311.         {% for prod in products %}
  312.             <a href='{{ path('front_shopping_fiche', {product_name:prod.prod_model|urlrewrite, prod_id:prod.id}) }}'>
  313.                 <div>
  314.                     {% if prod.prod_picture is not empty %}
  315.                         <img src="{{ asset('/medias_front/products/' ~ prod.prod_picture) | imagine_filter('admin_default') }}"
  316.                              alt="{{ prod.prod_model }}" />
  317.                     {% endif %}
  319.                     {% if prod.prod_soon == 1 %}
  320.                         <p>Prochainement</p>
  321.                     {% elseif prod.prod_novelty == 1 %}
  322.                         <p>Nouveauté</p>
  323.                     {% elseif prod.prod_price_type == 'promo' %}
  324.                         <p>Promo</p>
  325.                     {% elseif prod.prod_price_type == 'solde' %}
  326.                         <p>Solde</p>
  327.                     {% endif %}
  329.                     <p>{{ prod.prod_model }}</p>
  330.                     <p class="{{ prod.prod_price_type }}">{{ prod.prod_reference_price }}€</p>
  331.                 </div>
  332.             </a>
  333.         {% endfor %}
  334.     </section> #}
  336. {% endblock %}
  337. {% block javascripts %}
  338.     <script rel="preload" as="script" src="{{ asset('js/parallax.js') }}"></script>
  339. {% endblock %}