templates/pages/collection/section/single-collection-smartphone.html.twig line 1

Open in your IDE?
  1. <div id="single-collection-smartphone" class="page--mainwrap single-collection p-0 slideJs single-collection-smartphone">
  2.     <div class="page--mainwrap-header single-collection--header single-collection--header-first">
  3.         <h3 class="page--mainwrap-header-heading">
  4.             {% if collection is defined %}
  5.                 {{ collection.name }}
  6.             {% endif %}
  7.         </h3>
  8.     </div>
  9.     <div class="page--mainwrap-arrow slideArrow">
  10.         <img src="{{ asset('build/icon/2tec2_arrow_bottom_black.svg') }}" alt="{{ 'caret down icon' | trans }}"/>
  11.     </div>
  12. </div>
  13. <div class="page--mainwrap single-collection p-0 slideJs single-collection-smartphone">
  14.     <div class="page--mainwrap-header single-collection--header">
  15.         <h3 class="page--mainwrap-header-heading">
  16.             {% if collection is defined %}
  17.                 {{ collection.name }}
  18.             {% endif %}
  19.         </h3>
  20.     </div>
  21.     <div class="page--mainwrap-content single-collection--content">
  22.         <div class="single-collection--content-desc page--mainwrap-content-desc">
  23.             <div class="single-collection--content-desc-img">
  24.                 <picture>
  25.                     <source srcset="{{ collection.attachmentsFile['urls'][0]['webp']['thumb_320x280'] }}" type="image/webp">
  26.                     <source srcset="{{ collection.attachmentsFile['urls'][0]['jpg']['thumb_320x280'] }}" type="image/jpeg">
  27.                     <img src="{{ collection.attachmentsFile['urls'][0]['jpg']['thumb_320x280'] }}" alt="{{ collection.name }}" class="single-collection--content-desc-img-thumb">
  28.                 </picture>
  29.             </div>
  30.             <div class="single-collection--content-desc-txt scrollableDiv scrollableY">
  31.                 <div class="scrollableY-content">
  32.                     <div class="single-collection--content-desc-txt-title txt--label">
  33.                         <h3 class="txt--label">{{ 'Collection DNA'|trans|upper  }}</h3>
  34.                     </div>
  35.                     <p>{{ collection.description|raw }}</p>
  36.                     <div class="single-collection--content-desc-txt-buttons">
  37.                         <a rel="canonical" href="{{ threeDSimulationUrl }}" class="cta-button btn page-btn add-collection-to-cart" data-collection="{{ collection.id }}" data-redirect="true">
  38.                             {{ include('layouts/buttons/2tec2_3d_simulation.html.twig') }}
  39.                             {{ "3D Simulation" | trans }}
  40.                         </a>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.         <div class="single-collection--content-menus">
  46.             <div class="single-collection--content-menus-menu mobileview--menu">
  47.                 <div class="single-collection--content-menus-menu-title mobileview--toggler toggler--subtitle">
  48.                     <h3 class="txt--label">{{ 'Technical details'|trans|upper }}</h3>
  49.                     <span class="mobileview--caretdown toggler--caretdown"><i class="fas fa-caret-down"></i></span>
  50.                 </div>
  51.                 <div class="single-collection--content-menus-menu-content mobileview--toggled-content toggler--list collapse show">
  52.                     <div class="single-collection--content-menus-menu-content-list">
  53.                         <ul>
  54.                             <li>{{ 'Composition description' | trans }}</li>
  55.                             <li>{{ 'Warranty 10 years' | trans }}</li>
  56.                             <li>{{ 'Level of use Class 33' | trans }}</li>
  57.                             <li>{{ 'Reaction to fire description' | trans }}</li>
  58.                             <li><a href="{{ path("pages_2tec2Play_index", { _locale: currentLocale }) }}">{{ "Sizes"|trans }}</a></li>
  59.                             <li><a href="{{ path('pages_aboutOurFloors_detail', { _locale:  currentLocale, sectionSlug: section_acoustic.slug }) }}">{{ "Acoustic Comfort Backing"|trans }}</a></li>
  60.                         </ul>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.             <div class="single-collection--content-menus-menu mobileview--menu">
  65.                 <div class="single-collection--content-menus-menu-title mobileview--toggler toggler--subtitle">
  66.                     <h3 class="txt--label">{{ 'Download'|trans|upper }}</h3>
  67.                     <span class="mobileview--caretdown toggler--caretdown"><i class="fas fa-caret-down"></i></span>
  68.                 </div>
  69.                 <div class="single-collection--content-menus-menu-content mobileview--toggled-content toggler--list collapse">
  70.                     <ul class="single-product--content-menus-menu-content-list">
  71. {#                        <li class="add-technical-to-download" >{{ 'Technical sheet' | trans }}</li>
  72.                         <li class="add-installation-to-download" >{{ 'Installation' | trans }}</li>
  73.                         <li class="add-maintenance-to-download" >{{ 'Maintenance' | trans }}</li>#}
  74.                         <li>
  75.                             {% if currentLocale == 'en' %}
  76.                                 {% if collection.name == 'Desert' or collection.name == 'Marble' %}
  77.                                     <a href="{{asset('uploads/pdf/technical_informations/2tec2-en-1.pdf') }}" target="_blank">
  78.                                 {% else %}
  79.                                     <a href="{{asset('uploads/pdf/technical_informations/2tec2-en-2.pdf') }}" target="_blank">
  80.                                 {% endif %}
  81.                             {% elseif currentLocale == 'ja' %}
  82.                                 {% if collection.name == 'Desert' or collection.name == 'Marble' %}
  83.                                     <a href="{{asset('uploads/pdf/technical_informations/2tec2-jp-1.pdf') }}" target="_blank">
  84.                                 {% else %}
  85.                                     <a href="{{asset('uploads/pdf/technical_informations/2tec2-jp-2.pdf') }}" target="_blank">
  86.                                 {% endif %}
  87.                                 {% elseif currentLocale == 'fr' %}
  88.                                 <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EZc8UYdORtNPvsddtJLQbpgBESOsZGeDSnkaQ8dSWbmcCg?e=TWQZYz" target="_blank">
  89.                                     {% elseif currentLocale == 'nl' %}
  90.                                     <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/ERWMm7hSLQBIiNGBAg1wLJEBXWxhJUPqtldl4NSsdKEXYg?e=qZQas2" target="_blank">
  91.                                         {% elseif currentLocale == 'de' %}
  92.                                         <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EeHjSbk4TetKg-YGl9x8y4UBhi9QV5HHmhU5hB2dF2dfDg?e=TlSBgx" target="_blank">
  93.                                             {% elseif currentLocale == 'es' %}
  94.                                             <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EfuOLvLdDv5Pgw1iEO14HuMB4Hf4wPQvI7YliIFKFURygg?e=Cacews" target="_blank">
  95.                                                 {% elseif currentLocale == 'it' %}
  96.                                                 <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EeKWBg-jJu9MrfaDTm4FLLUBm2QJIYG2fZh68iRIB7lL1w?e=bOfdPD" target="_blank">
  97.                                                     {% endif %}
  98.                                                     {{ 'Technical sheet' | trans }}
  99.                                                 </a>
  100.                         </li>
  101.                         <li><a href="https://limitededition.sharepoint.com/:f:/s/mediabank_/2tec2/EvymjjMNr3lItncIKWbcXDYBHp8t51IXqIpMOPU2kAx1HA?e=P0SgXS" target="_blank">{{ 'Installation' | trans }}</a></li>
  102.                         <li>
  103.                             {% if currentLocale == 'en' %}
  104.                             <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EUqs09pV5vVIvMGJV7RxMnsBQZt3TWHvNQbq-mdYMBDp_Q?e=UVgJBv" target="_blank">
  105.                                 {% elseif currentLocale == 'fr' %}
  106.                                 <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EUz_d0I-UM5PvMdCT3ZuNm4Bw6UOPVAHz0-cIDUPT-m13w?e=NmVm3V" target="_blank">
  107.                                     {% elseif currentLocale == 'nl' %}
  108.                                     <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/Efhflj8E2-lKh4UFIceal4sB524XIsG_gkKN2f2NI42clQ?e=E0SlKn" target="_blank">
  109.                                         {% elseif currentLocale == 'de' %}
  110.                                         <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EXkr-rJGCaJMl09Gq8CmFpQBRqbBNskwEdrtj5DIoha73A?e=czwv8z" target="_blank">
  111.                                             {% elseif currentLocale == 'es' %}
  112.                                             <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/ETlxOh88ohxOvAELZiXvaEABUDWheDlzPO36HZZIbYrZNw?e=t6HFSU" target="_blank">
  113.                                                 {% elseif currentLocale == 'it' %}
  114.                                                 <a href="https://limitededition.sharepoint.com/:b:/s/mediabank_/2tec2/EcvmL2BRTXdMvOU0n7ZijeIBAA6TJGgG5Qg_Zg0cEjiaVw?e=11yaRG" target="_blank">
  115.                                                     {% endif %}
  116.                                                     {{ 'Maintenance' | trans }}
  117.                                                 </a>
  118.                         </li>
  119.                     </ul>
  120.                 </div>
  121.             </div>
  122.             <div class="single-collection--content-menus-menu mobileview--menu">
  123.                 <div class="single-collection--content-menus-menu-title mobileview--toggler toggler--subtitle">
  124.                     <h3 class="txt--label">{{ collection.tile ? "Available in various shapes" | trans | upper : 'Available roll' | trans | upper }}</h3>
  125.                     <span class="mobileview--caretdown toggler--caretdown"><i class="fas fa-caret-down"></i></span>
  126.                 </div>
  127.                 {% if collection.tile %}
  128.                 <div class="single-collection--content-menus-menu-content mobileview--toggled-content toggler--list collapse">
  129.                     <ul class="single-collection--content-menus-menu-content-list">
  130.                         <li class="single-product--content-menus-menu-content-list-icons d-flex justify-content-between align-items-center col-12 p-0 mt-1">
  131.                             <span class="col-15 p-0"><img src="{{ asset('build/icon/2tec2_detailshape_triangle.svg') }}" alt="{{ "triangle shape icon"|trans }}"></span>
  132.                             <span class="col-15 p-0"><img src="{{ asset('build/icon/2tec2_detailshape_square.svg') }}" alt="{{ "square shape icon"|trans }}"></span>
  133.                             <span class="col-15 p-0"><img src="{{ asset('build/icon/2tec2_detailshape_minisquare.svg') }}" alt="{{ "mini-square shape icon"|trans }}"></span>
  134.                             <span class="col-15 p-0"><img src="{{ asset('build/icon/2tec2_detailshape_plank.svg') }}" alt="{{ "plank shape icon"|trans }}"></span>
  135.                             <span class="col-15 p-0"><img src="{{ asset('build/icon/2tec2_detailshape_diamond.svg') }}" alt="{{ "diamond shape icon"|trans }}"></span>
  136.                             <span class="col-15 p-0"><img src="{{ asset('build/icon/2tec2_detailshape_hexagon.svg') }}" alt="{{ "hexagon shape icon"|trans }}"></span>
  137.                         </li>
  138.                         <a href="{{ path("pages_2tec2Play_index", { _locale: currentLocale }) }}" class="single-collection--content-menus-menu-content-list-a cta-button btn page-btn">
  139.                             {{ include('layouts/buttons/2tec2_multi_tab.html.twig') }}
  140.                             {{ 'Read more' | trans }}
  141.                         </a>
  142.                     </ul>
  143.                 </div>
  144.             </div>
  145.         </div>
  146.         {% endif %}
  147.         {% if not collection.tile %}
  148.             <a href="{{ path("pages_2tec2Play_index", { _locale: currentLocale }) }}" class="single-collection--content-menus-menu-content-list-a cta-button btn page-btn">
  149.                 {{ include('layouts/buttons/2tec2_multi_tab.html.twig') }}
  150.                 {{ 'Read more' | trans }}
  151.             </a>
  152.         {% endif %}
  153.     </div>
  154.     <div class="page--mainwrap-arrow slideArrow">
  155.         <img src="{{ asset('build/icon/2tec2_arrow_bottom_black.svg') }}" alt="{{ 'caret down icon' | trans }}"/>
  156.     </div>
  157. </div>
  158. <div class="page--mainwrap single-collection p-0 slideJs single-collection-smartphone">
  159.     <div class="page--mainwrap-header single-collection--header">
  160.         <h3 class="page--mainwrap-header-heading">
  161.             {% if collection is defined %}
  162.                 {{ collection.name }}
  163.             {% endif %}
  164.         </h3>
  165.     </div>
  166.     <div class="page--mainwrap-content single-collection--associated">
  167.         <div class="single-collection--content-desc-last page--mainwrap-content-desc">
  168.             <p class="single-collection--content-desc-title txt--label">
  169.                 {{ "Products associated"|trans }}
  170.             </p>
  171.         </div>
  172.         <div class="single-collection--content-magnets page--mainwrap-content-magnets">
  173.             <div class="single-collection--content-magnets-lines">
  174.                 <div class="single-collection--content-magnets-lines-first single-collection--content-magnets-lines-line">
  175.                     {% if firstLineProducts is defined %}
  176.                         {% for key, firstLineProduct in firstLineProducts %}
  177.                             <a href="" class="single-collection--content-magnets-lines-line-magnet" href="{{ firstLineProduct.urlProduct }}">
  178.                                 <picture>
  179.                                     <source srcset="{{ firstLineProduct.attachmentsFile['urls'][0]['webp']['thumb_180x180'] }}" type="image/webp">
  180.                                     <source srcset="{{ firstLineProduct.attachmentsFile['urls'][0]['jpg']['thumb_180x180'] }}" type="image/jpeg">
  181.                                     <img src="{{ firstLineProduct.attachmentsFile['urls'][0]['jpg']['thumb_180x180'] }}" alt="{{ firstLineProduct.name }}">
  182.                                 </picture>
  183.                                 <p>{{ firstLineProduct.name }}</p>
  184.                             </a>
  185.                         {% endfor %}
  186.                     {% endif %}
  187.                 </div>
  188.                 <div class="single-collection--content-magnets-lines-second single-collection--content-magnets-lines-line">
  189.                     {% if secondLineProducts is defined %}
  190.                         {% for key, secondLineProduct in secondLineProducts %}
  191.                             <a href="" class="single-collection--content-magnets-lines-line-magnet" href="{{ secondLineProduct.urlProduct }}">
  192.                                 <picture>
  193.                                     <source srcset="{{ secondLineProduct.attachmentsFile['urls'][0]['webp']['thumb_180x180'] }}" type="image/webp">
  194.                                     <source srcset="{{ secondLineProduct.attachmentsFile['urls'][0]['jpg']['thumb_180x180'] }}" type="image/jpeg">
  195.                                     <img src="{{ secondLineProduct.attachmentsFile['urls'][0]['jpg']['thumb_180x180'] }}" alt="{{ secondLineProduct.name }}">
  196.                                 </picture>
  197.                                 <p>{{ secondLineProduct.name }}</p>
  198.                             </a>
  199.                         {% endfor %}
  200.                     {% endif %}
  201.                 </div>
  202.             </div>
  203.         </div>
  204.         <div class="single-collection--content-button page--mainwrap-content-button">
  205.             <a rel="canonical" href="{{ threeDSimulationUrl }}" class="cta-button btn page-btn add-collection-to-cart" data-collection="{{ collection.id }}" data-redirect="true">
  206.                 {{ include('layouts/buttons/2tec2_3d_simulation.html.twig') }}
  207.                 {{ "3D Simulation" | trans }}
  208.             </a>
  209.         </div>
  210.     </div>
  211.     <div class="page--mainwrap-arrow slideArrow">
  212.         <img src="{{ asset('build/icon/2tec2_arrow_bottom_black.svg') }}" alt="{{ 'caret down icon' | trans }}">
  213.     </div>
  214. </div>