themes/webapicTheme/templates/index.html.twig line 1

Open in your IDE?
  1. {% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
  2. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% block title %}{{ bitbag_cms_render_block('metatitle-homepage') }}{% endblock %}
  4. {% block metatags %}
  5.     {{ parent() }}
  6.      <meta name="description" content="{{ bitbag_cms_render_block('metadesc-homepage')|striptags|raw|replace({"\n": "", "\r": "", "\t": ""}) }}">  
  7. {% endblock %}
  8. {% block content %}
  9. <div class="homepage">
  10.    
  11.     {# Slides #}
  12.     <div class="slides">
  13.         <div class="slides-slider">
  14.             {% for slide in slides %}
  15.                 {# <div style="background-image: url({{ slide.getImagesByType('image_background').first.path|imagine_filter('app_home_slide_image') }})">          #}
  16.                     {% if is_mobile() and not is_device('iPad') and slide.getImagesByType('image_main_mobile').first is not empty %}
  17.                         <div style="background-image: url(/media/image/{{ slide.getImagesByType('image_main_mobile').first.path }})">
  18.                     {% elseif slide.getImagesByType('image_background').first is not empty %}
  19.                             <div style="background-image: url(/media/image/{{ slide.getImagesByType('image_background').first.path }})">
  20.                                         {% else %}
  21.                         <div>
  22.                     {% endif %}
  23.                     
  24.                     {% if slide.linkTitle is empty %}    
  25.                         <a href="{{ slide.link }}" class="slides-content">
  26.                     {% else %}
  27.                         <div class="slides-content">
  28.                     {% endif %}
  29.                         <div class="left">
  30.                             {# {% if is_mobile() and not is_device('iPad') and slide.getImagesByType('image_main_mobile').first is not empty %}
  31.                                 <img data-src="{{ slide.getImagesByType('image_main_mobile').first.path|imagine_filter('app_any_image') }}" class="ui image" />   
  32.                                 <div class="lien-ctn">
  33.                                     <a href="{{ slide.link }}">{{ slide.linkTitle }}</a>
  34.                                 </div> 
  35.                             {% elseif slide.getImagesByType('image_main').first is not empty %} #}
  36.                             {% if slide.getImagesByType('image_main').first is not empty %}
  37.                                 <img data-src="{{ slide.getImagesByType('image_main').first.path|imagine_filter('app_home_slide_image') }}" class="ui image" />    
  38.                             {% endif %}
  39.                         </div>
  40.                         <div class="middle">
  41.                             {% spaceless %}
  42.                             {% if slide.subTitle is not empty %}
  43.                             <span>{{ slide.subTitle | nl2br }}</span>
  44.                             {% endif %}
  45.                             {% if slide.title is not empty %}
  46.                             <h2>{{ slide.title }}</h2>
  47.                             {% endif %}
  48.                             {% if slide.description is not empty %}
  49.                             <p>{{ slide.description }}</p> 
  50.                             {% endif %}
  51.                             {% endspaceless %}
  52.                             
  53.                             {% if slide.linkTitle is not empty %}
  54.                                 <div class="lien-ctn">
  55.                                     <a class="lien-bleu" href="{{ slide.link }}">{{ slide.linkTitle }}</a>
  56.                                 </div>
  57.                             {% endif %}
  58.                             
  59.                         </div>
  60.                         {% if slide.fabricProduct is not empty %}
  61.                         <div class="right">
  62.                             <div class="right-ctn">
  63.                                 <div>
  64.                                     <div id="circle">
  65.                                         <a href="{{ path('app_product_variant_show', {'slug': slide.fabricProduct.slug, 'id': slide.fabricProduct.id}) }}">
  66.                                             <img src="{{ asset('webapic-theme/images/txt-tournant-tissu.svg') }}" class="ui image" />  
  67.                                         </a>
  68.                                     </div>  
  69.                                 </div>
  70.                                 <div>
  71.                                     <a class="apercu-tissu" href="{{ path('app_product_variant_show', {'slug': slide.fabricProduct.slug, 'id': slide.fabricProduct.id}) }}">
  72.                                         {% if slide.fabricProduct.getImagesByType('image_product_main')|length > 0 %}
  73.                                         <img src="{{ slide.fabricProduct.getImagesByType('image_product_main').first.path|imagine_filter('app_product_fabric_small_thumbnail') }}" class="ui image" />
  74.                                         {% endif %}
  75.                                     </a>
  76.                                   
  77.                                 </div>
  78.                             </div>                   
  79.                         </div>
  80.                         {% endif %}
  81.                         <img data-src="{{ asset('webapic-theme/images/slide-trait.svg') }}" class="ui image trait" />
  82.                    {% if slide.linkTitle is empty %}
  83.                         </a>
  84.                     {% else %}
  85.                         </div>
  86.                     {% endif %}
  87.                 </div>
  88.             {% endfor %}
  89.         </div>
  90.         <img data-src="{{ asset('webapic-theme/images/slide-arrondi.svg') }}" class="ui image arrondi" />
  91.     </div>
  92.     {# Fin Slides #}
  93.             {# "Vous les adorez" #}
  94.     <div class="taxons-categories">
  95.         {# <span class="title">{{ 'app.front.accueil.categories.titre1'|trans }} <strong>{{ 'app.front.accueil.categories.titre2'|trans }} !</strong></span> #}
  96.         <div class="taxons-categories-content">    
  97.             <div class="taxons-categories-ctn">
  98.                 <div class="carrousel">        
  99.                     {% for value in homeTaxons %}
  100.                         <div class="carrousel-ctn">
  101.                             <a href="{{ path('sylius_shop_product_index', {'slug': value.mainTaxon.slug}) }}" class="top">
  102.                                 {# <div class="image_taxon_main">
  103.                                     {% if value.mainTaxon.imagesByType('image_taxon_main')|length > 0 %}
  104.                                     <img class="ui image lazyload" data-src="{{ value.mainTaxon.imagesByType('image_taxon_main').first.path|imagine_filter('app_taxon_image_taxon_main') }}" />
  105.                                     {% else %}
  106.                                     <img class="ui image lazyload" data-src="{{ asset('webapic-theme/images/placeholder-category-image.png') }}" />
  107.                                     {% endif %}
  108.                                 </div> #}
  109.                                 
  110.                                 {% if value.mainTaxon.imagesByType('image_taxon_icon')|length > 0 %}
  111.                                 <div class="image_taxon_icon">
  112.                                     <img class="ui image lazyload" data-src="{{ value.mainTaxon.imagesByType('image_taxon_icon').first.path|imagine_filter('sylius_shop_product_original') }}" />
  113.                                 </div>
  114.                                 {% endif %}
  115.                             </a>
  116.                             <a href="{{ value.mainTaxon.slug }}">
  117.                                 <h2>
  118.                                     {% if app.request.locale == 'en_US' and value.titleen is not empty %}
  119.                                         {{ value.titleen }}
  120.                                     {% else %}
  121.                                         {{ value.title }}
  122.                                     {% endif %}
  123.                                 </h2>
  124.                             </a>
  125.                         </div>
  126.                     {% endfor %}
  127.                 </div>  
  128.                 {# {% if is_mobile() %}        
  129.                 <div class="ctn-lien">
  130.                     <a href="#">{{ 'app.front.accueil.categories.lien'|trans }}</a>
  131.                 </div>
  132.                 {% endif %}    #}
  133.             </div>           
  134.         </div>
  135.     </div>
  136.     {# Fin "Vous les adorez" #}
  137.     
  138.     {# Slide "Saisons" #}
  139.     <div class="saisons">
  140.         <span class="title">{{ 'app.front.accueil.saison1'|trans }}, <strong>{{ 'app.front.accueil.saison2'|trans }} !</strong></span>    
  141.         {# <div class="saisons-ctn left"> #}
  142.                 {% for value in saisons %}
  143.                                     <div class="saisons-left">
  144.                     <div class="item {{ loop.index }}">
  145.                         <div class="content">
  146.                             {% if not is_mobile() %}
  147.                                 <div class="bordures">
  148.                                     <style>.triangle{{ value.id }}::before {  border-right : 22px solid {{ value.couleurfond }};}</style>
  149.                                     {% for i in 0..21 %}
  150.                                         <span class="triangle triangle{{ value.id }}">&nbsp;</span>
  151.                                     {% endfor %}
  152.                                 </div>         
  153.                             {% endif %}
  154.                                                         <a href="{{ value.link }}">
  155.                                 <img class="ui image lazyload" data-src="{{ value.images.first.path|imagine_filter('app_any_image') }}" />
  156.                                                         </a>
  157.                         </div>
  158.                     </div>
  159.                                     </div>
  160.                 {% endfor %}
  161.         {# </div> #}
  162.         {# <div class="saisons-ctn right"> #}
  163.                 {% for value in saisons %}
  164.                                     <div class="saisons-right">
  165.                     <div class="item" style="background: {{ value.couleurfond }}" >
  166.                         <div class="content">
  167.                                                         <a href="{{ value.link }}">
  168.                                                             <span class="soustitre">{{ value.subTitle }}</span>
  169.                                                             <span class="titre">{{ value.title | nl2br }}</span>
  170.                                                         </a>
  171.                             <div class="lien-ctn">
  172.                                 <a href="{{ value.link }}">
  173.                                     {{ value.linkTitle }}
  174.                                 </a>
  175.                             </div>
  176.                         </div>
  177.                     </div>
  178.                                     </div>
  179.                 {% endfor %}
  180.         {# </div> #}
  181.     </div>
  182.     {# Fin Slide "Saisons" #}
  183.     {# Sac&Zip #}
  184.     {# <div class="saczip">
  185.         <img class="ui image coquilles-zip lazyload" data-src="{{ asset('webapic-theme/images/coquilles-zip.svg') }}" />
  186.         <div class="contenu">
  187.             <div class="left">
  188.                 {{ bitbag_cms_render_block('homepage-saczip') }}
  189.             </div>
  190.             <div class="right">
  191.                                 <h2 class="top">
  192.                                         <span class="soustitre">{{ 'app.front.accueil.sac.sac1'|trans }}</span>
  193.                                         <span class="titre">{{ 'app.front.accueil.sac.sac2a'|trans }}<strong> & </strong>{{ 'app.front.accueil.sac.sac2b'|trans }}</span>
  194.                                 </h2>
  195.                                 <div class="saczip-centaines">
  196.                                             {{ 'app.front.accueil.sac.slide5'|trans }} {{ 'app.front.accueil.sac.slide6'|trans }}
  197.                                 </div>
  198.                 <div class="carrousel-ctn">
  199.                     <div class="carrousel">
  200.                 
  201.                         <div class="item part1">
  202.                                                         <div class="left">
  203.                                                                 {% if sacZipSelectionDefault.productVariantBase.getImagesByType('image_product_main')|length > 0 %}
  204.                                                                 <img class="ui image lazyload" src="{{ asset('webapic-theme/images/saczip-home-base.svg') }}" />
  205.                                 {% endif %}
  206.                             </div>
  207.                                                         <div class="saczip-plus">+</div>
  208.                             <div class="left">
  209.                                 {% if sacZipSelectionDefault.productVariantFlap.getImagesByType('image_product_main')|length > 0 %}
  210.                                                                 <img class="ui image lazyload" src="{{ asset('webapic-theme/images/saczip-home-rabat.svg') }}" />
  211.                                 {% endif %}
  212.                             </div>
  213.                         </div>
  214.                     </div>
  215.                 </div>
  216.                                 <div class="saczip-legende">
  217.                                     <div class="base-legende">{{ 'app.front.accueil.sac.slide1'|trans }} {{ 'app.front.accueil.sac.slide2'|trans }}</div>
  218.                                      <div class="rabat-legende">{{ 'app.front.accueil.sac.slide3'|trans }} </div> 
  219.                                 </div>
  220.         
  221.                 <div id="circle">
  222.                     <img class="ui image lazyload" data-src="{{ asset('webapic-theme/images/txt-tournant-incontournable.svg') }}" /> 
  223.                 </div>       
  224.                 <div class="lien-ctn">
  225.                     <a class="lien-bleu" href="{{ path('app_configurateur') }}">
  226.                         {{ 'app.front.accueil.sac.commencer'|trans }}
  227.                    </a>
  228.                 </div>
  229.             </div>
  230.         </div>
  231.     </div> #}
  232.     {# Fin Sac&Zip #}
  233.     <div class="coquilles">
  234.         <div>
  235.             {{ 'app.front.accueil.coquilles.titre1'|trans }}&nbsp;
  236.             <span>
  237.                 {{ 'app.front.accueil.coquilles.titre2'|trans }}
  238.             </span>
  239.         </div>
  240.     </div>
  241.     {# "Imprimé" #}
  242.     {# <div class="imprimes">
  243.         <div class="content">
  244.             <div class="top">
  245.                  {{ 'app.front.accueil.imprime.titre'|trans }}
  246.             </div>
  247.             <div class="middle">
  248.                 <a class="lien-bleu" href="{{ path('app_collection_index') }}">{{ 'app.front.accueil.collection.voir'|trans }}</a>
  249.             </div>
  250.             <img class="ui image lazyload" data-src="{{ asset('webapic-theme/images/accueil-imprime.svg') }}" />
  251.         </div>
  252.         <div class="imprimes-carousel" id="vertical">
  253.             {% for imprime in imprimes %} 
  254.                 <div class="item">
  255.                     {% if imprime.collection is not empty %}
  256.                     <a href="{{ path('app_collection_show', {'slugCategory': imprime.slugLocale, 'slug': imprime.collection.slug}) }}">
  257.                         <img class="ui image lazyload" data-src="{{ imprime.images.first.path|imagine_filter('app_any_image') }}" />
  258.                     </a>
  259.                     {% else %}
  260.                     <img class="ui image lazyload" data-src="{{ imprime.images.first.path|imagine_filter('app_any_image') }}" />
  261.                     {% endif %}
  262.                 </div>
  263.             {% endfor %}
  264.         </div>
  265.     </div> #}
  266.     {# Fin "Imprimé" #}
  267.         {# Liste des déclinaisons mises en avant #}
  268.     <div class="bitbag-block accueil-listing1">
  269.         <div class="accueil-listing1-slider listing1">
  270.             {% for row in homeProductsVariants %}
  271.                 {% include 'products/single_product_in_circle.html.twig' with {'product': row.productVariant} only %}
  272.             {% endfor %}
  273.         </div>
  274.     </div>
  275.     {# Fin Liste des déclinaisons mises en avant #}
  276.     {# "Côté boutique" #}
  277.     <div class="banner">
  278.         
  279.         {{ bitbag_cms_render_block('accueil-orange') }}
  280.         <div class="banner-right">
  281.             <div class="coteboutique">
  282.                 <div class="coteboutique-ctn">
  283.                     <h2> {{ 'app.front.accueil.boutique.titre1'|trans }} <strong>{{ 'app.front.accueil.boutique.titre2'|trans }}</strong></h2>
  284.                     <div class="coteboutique-ctn-content">
  285.                                                 <h3>{{ coteboutique.title }}</h3>
  286.                         <img class="ui image lazyload" data-src="{{ coteboutique.images.first.path|imagine_filter('app_any_image') }}" />
  287.                         <p>
  288.                             {{ coteboutique.description }}
  289.                         </p>
  290.                                                 <div class="lien-ctn">
  291.                         <a class="lien-bleu" href="{{ coteboutique.link }}">
  292.                             {{ coteboutique.linkTitle }}
  293.                         </a>
  294.                     </div>
  295.                     </div>
  296.                 </div>
  297.             </div>
  298.         </div>
  299.     </div>
  300.     {# Fin "Côté boutique" #}
  301.     {# Instagram #}
  302.     {# {% include 'partials/block-instagram.html.twig' %} #}
  303. </div>
  304. {% endblock %}