themes/webapicTheme/templates/site_collection_show.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 %}
  4.     Collection {{ collection.title }} | {{ parent() }}
  5. {% endblock %}
  6. {% block metatags %}
  7.     {{ parent() }}
  8.     <meta name="description" content="Découvrez la Collection {{ collection.title }} - {{ type }} - Choisissez votre accessoire de mode ou votre tissu. Livraison gratuite en boutique." />
  9. {% endblock %} #}
  10. {% block title %}{{ bitbag_cms_render_block('metatitle-collection-show') }} {{ collection.title }} | {{ parent() }}{% endblock %}
  11. {% block metatags %}
  12.     {{ parent() }}
  13.     <meta name="description" content="{{ collection.title }} - {{ type }} - {{ bitbag_cms_render_block('metadesc-collection-show')|striptags|raw|replace({"\n": "", "\r": "", "\t": ""}) }}" />  
  14. {% endblock %}
  15. {% block container_css_classes %}
  16. {% apply spaceless %}
  17.     bitbag_sylius_cms_plugin_shop_page_show
  18. {% endapply %}
  19. {% endblock %}
  20. {% block content %}
  21. <div class="page-content typecms3">
  22.     {# Fil d'ariane #}
  23.     {{ wo_render_breadcrumbs() }}
  24.     <div class="page-collection-ctn">
  25.         <div class="page-collection-left" style="background: {{ collection.mainColor|default('gray') }};">
  26.             {% if collection.getImagesByType('image_collection_main_left')|length > 0 %}
  27.             <img src="{{ collection.getImagesByType('image_collection_main_left').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image">
  28.             {% endif %}
  29.         </div>
  30.         <div class="page-collection-right">
  31.             <div class="page-collection-right-ctn">
  32.                 <div class="top">
  33.                     {% if collection.new == true %}
  34.                     <span>{{ 'app.front.collections.new'|trans }}</span>
  35.                     {% endif %}
  36.                     Collection
  37.                 </div>
  38.                 <h1 class="bitbag-page-name">{{ collection.title }}</h1>   
  39.                 <div class="links">
  40.                     <a href="#product-ancre-collection">{{ 'app.front.global.voirlesproduits'|trans }}</a>
  41.                     {% if collection.replay is not empty %}
  42.                         <a href="{{ collection.replay }}">Voir le live shopping</a>
  43.                     {% elseif collection.singleArticle is not empty %}
  44.                         <a href="{{ path('app_leguide_article', {'slugCategory': collection.singleArticle.articleCategory.slug, 'slug': collection.singleArticle.slug, 'articleId': collection.singleArticle.id}) }}">Voir notre look book</a>
  45.                     {% endif %}
  46.                 </div>
  47.             </div>
  48.             
  49.             {% if complementaryFabric is not empty %}
  50.             <div class="badge-ctn">
  51.                 <div>
  52.                     <div id="circle">
  53.                         <a href="{{ path('app_product_variant_show', {'slug': complementaryFabric.slug, 'id': complementaryFabric.id}) }}">
  54.                             <img src="{{ asset('webapic-theme/images/txt-tournant-tissu.svg') }}" class="ui image" />
  55.                         </a>
  56.                     </div>  
  57.                 </div>
  58.                 <div>
  59.                     <a class="apercu-tissu" href="{{ path('app_product_variant_show', {'slug': complementaryFabric.slug, 'id': complementaryFabric.id}) }}">
  60.                         {% if complementaryFabric.getImagesByType('image_product_main')|length > 0 %}
  61.                         <img src="{{ complementaryFabric.getImagesByType('image_product_main').first.path|imagine_filter('app_product_fabric_small_thumbnail') }}" class="ui image" />
  62.                         {% endif %}
  63.                     </a>
  64.                 </div>
  65.             </div>
  66.             {% endif %}      
  67.         </div>
  68.         {% if collection.textSubtitle is not empty %}
  69.         <div class="page-collection-bottom">
  70.             
  71.             <div>{{ collection.textSubtitle|raw }}</div>
  72.             {% if collection.colors|length > 0 %}
  73.             <div class="colors">
  74.                 {% for color in collection.colors %}
  75.                 <div class="color" style="background-color:{{ color }}">&nbsp;</div>
  76.                 {% endfor %}
  77.             </div>
  78.             {% endif %}
  79.         </div>
  80.         {% endif %}
  81.         
  82.         {% if collection.getImagesByType('image_collection_parallax')|length > 0 %}
  83.         <div class="page-collection-parallaxe">
  84.             <div class="caroussel">
  85.                 {% for image in collection.getImagesByType('image_collection_parallax') %}
  86.                 <img src="{{ image.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  87.                 {% endfor %}
  88.             </div>
  89.         </div>
  90.         {% endif %}
  91.     </div>     
  92. </div>
  93. <div class="bitbag-block">
  94.     {# Text a gauche et image a droite #}
  95.     <div class="block-type2 block-type10">      
  96.         <div class="block-type2-ctn">          
  97.             <div class="block-type2-left block-type10-left">
  98.                 {{ collection.textLeftPart|raw }}
  99.             </div> 
  100.             <div class="block-type2-right">
  101.                 {% if collection.getImagesByType('image_collection_main_right_text')|length > 0 %}
  102.                 <img src="{{ collection.getImagesByType('image_collection_main_right_text').first.path|imagine_filter('sylius_shop_product_original') }}">
  103.                 {% endif %}
  104.             </div>
  105.         </div>    
  106.     </div>
  107.     
  108.     {# Image à gauche et texte à droite #}
  109.     <div class="block-type11">      
  110.         <div class="block-type11-ctn">          
  111.             <div class="block-type11-left">
  112.                 {% if collection.getImagesByType('image_collection_main_left_text')|length > 0 %}
  113.                 <img src="{{ collection.getImagesByType('image_collection_main_left_text').first.path|imagine_filter('sylius_shop_product_original') }}">
  114.                 {% endif %}
  115.             </div> 
  116.             <div class="block-type11-right">  
  117.                 <div class="desc">
  118.                     {{ collection.textRightPart|raw }}
  119.                 </div>
  120.             </div>
  121.         </div>    
  122.     </div>
  123.     {# Liste des produits #}
  124.     <div id="product-ancre-collection" class="bitbag-page-products listing1">
  125.         <div class="title">{{ 'app.front.collections.productsof'|trans }} <strong>collection {{ collection.title }}</strong></div>
  126.         {% for variant in variants %}
  127.             {% if variant.canAddItem() %}
  128.                 {% include 'products/single_product_in_circle.html.twig' with {'product': variant} only %}
  129.             {% endif %}
  130.         {% endfor %}
  131.     </div>
  132.     {# Affiche le tissu et l'image #}
  133.     <div class="block-type12">      
  134.         <div class="block-type12-ctn">          
  135.             <div class="block-type12-left">
  136.                 {% if collection.getImagesByType('image_collection_bottom_fabric')|length > 0 %}
  137.                 <img src="{{ collection.getImagesByType('image_collection_bottom_fabric').first.path|imagine_filter('sylius_shop_product_original') }}">
  138.                 {% endif %}
  139.             </div>
  140.              {% if complementaryFabric is not empty %}
  141.             <div class="block-type12-right">
  142.               
  143.                 <img src="/webapic-theme/images/collection-fleche.png" class="top ui image">
  144.                 <div id="circle">
  145.                                         <img src="{{ asset('webapic-theme/images/txt-tournant-tissu.svg') }}" class="ui image" />  
  146.                 </div>
  147.                 {% if complementaryFabric.imagesByType('image_product_hover') is not empty %}
  148.                     {% set source_path = complementaryFabric.imagesByType('image_product_hover').first.path %}
  149.                     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  150.                     {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  151.                 {% elseif complementaryFabric.images.first %}
  152.                     {% set source_path = complementaryFabric.images.first.path %}
  153.                     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  154.                     {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  155.                 {% else %}
  156.                     {% set original_path = asset('assets/shop/img/400x300.png') %}
  157.                     {% set path = original_path %}
  158.                 {% endif %}
  159.                 
  160.                 <div class="collection-right-product-ctn">
  161.                     <a href="{{ path('app_product_variant_show', {'slug': complementaryFabric.slug, 'id': complementaryFabric.id}) }}">
  162.                         <div class="img-ctn">
  163.                             <div class=" img-ctn-content">
  164.                                 <img src="{{ path }}" id="main-image" alt="{{ complementaryFabric.name }}" {{ sylius_test_html_attribute('main-image') }} />
  165.                             </div>     
  166.                         </div>
  167.                         {% set price = money.calculatePrice(complementaryFabric) %}
  168.                         {% set originalPrice = money.calculateOriginalPrice(complementaryFabric) %}
  169.                         <div class="sylius-product-price price" {{ sylius_test_html_attribute('product-price') }}>
  170.                             <span>{{ 'app.front.global.apartir'|trans }} </span>
  171.                             {{ price }}/m
  172.                         </div>
  173.                     </a>
  174.                 </div>              
  175.             </div>
  176.             {% endif %}
  177.         </div>
  178.     </div>
  179.     {# Motif répétable #}
  180.     {% if complementaryFabric is not empty %}
  181.     <div class="block-type13">
  182.         {% if collection.getImagesByType('image_collection_pattern')|length > 0 %}
  183.         <img src="{{ collection.getImagesByType('image_collection_pattern').first.path|imagine_filter('sylius_shop_product_original') }}">
  184.         {% endif %}
  185.     </div>
  186.     {% endif %}
  187.     {# Collections qui matchent #}
  188.     {% if collectionMatchs|length > 0 %}
  189.     <div class="block-type14">
  190.         <div class="block-type14-ctn" data-bgtitle="{{ collection.title }}">
  191.             <div class="block-type14-top">
  192.                 <span>{{ 'app.front.collections.match1'|trans }},</span>
  193.                 <h3>{{ 'app.front.collections.match2'|trans }} <strong>{{ 'app.front.collections.match3'|trans }}</strong> !</h3>
  194.             </div>
  195.             <div class="block-type14-collections">
  196.                 <div class="block-type14-collections-ctn">
  197.                     {% for collectionMatch in collectionMatchs %}
  198.                     {# {{ dump(collectionMatch) }} #}
  199.                     <div class="taxon-ctn">
  200.                         <div class="taxon">
  201.                             <div class="img-ctn">                                
  202.                                 {% if collectionMatch.getImagesByType('image_collection_pattern').first.path is defined %}
  203.                                     <img src="{{ collectionMatch.getImagesByType('image_collection_pattern').first.path|imagine_filter('sylius_shop_product_original') }}"  /> 
  204.                                     
  205.                                 {% else %}
  206.                                     <img src="{{ asset('webapic-theme/images/slide-circle.svg') }}">
  207.                                 {% endif %}
  208.                             </div>
  209.                             <div class="content">
  210.                                 <span>{{ collectionMatch.title }}</span>
  211.                             </div>
  212.                         </div>
  213.                     </div>
  214.                     <div class="hover">
  215.                         <div class="hover-ctn">
  216.                             {% for variantMatch in variantsMatch[collectionMatch.id] %}
  217.                             <div class="association-ctn-product">
  218.                                 {% include 'products/petite_touche_product.html.twig' with {'product': variantMatch} only %}
  219.                             </div>
  220.                             {% endfor %}
  221.                         </div>
  222.                     </div>
  223.                     {% endfor %}
  224.                 </div>
  225.             </div>
  226.         </div>
  227.     </div>
  228.     {% endif %}
  229. </div>
  230. {% endblock %}