templates/home/products.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% block stylesheets %}
  3.     {{ parent() }}
  4.     <style>
  5.         .cms-photo-group {
  6.             position: relative;
  7.             display: inline-block;
  8.         }
  10.         .cms-photo-wrapper {
  11.             display: none;
  12.         }
  14.         .cms-photo-wrapper.active {
  15.             display: block;
  16.         }
  18.         .cms-arrow {
  19.             position: absolute;
  20.             top: 50%;
  21.             transform: translateY(-50%);
  22.             background: rgba(0, 0, 0, 0.4);
  23.             color: white;
  24.             border: none;
  25.             cursor: pointer;
  26.             padding: 0.4rem 0.7rem;
  27.             font-size: 1.2rem;
  28.             border-radius: 50%;
  29.         }
  31.         .cms-arrow.left {
  32.             left: 5px;
  33.         }
  35.         .cms-arrow.right {
  36.             right: 5px;
  37.         }
  38.     </style>
  39. {% endblock %}
  41. {% block title %}
  42.     {% for cms_copy in cms_copy_array %}
  43.         {% if cms_copy.ranking == 1 %}
  44.             {% if cms_copy.tabTitle is defined %}
  45.                 {{ attribute(cms_copy,'tabTitle'~LanguagesService.getSelectedLanguageCode)|raw }}
  46.             {% else %}
  47.                 {% if CompanyDetails.getCompanyDetails is not null %}
  48.                     {{ CompanyDetails.getCompanyDetails.companyName }}
  49.                 {% else %}
  50.                     {{ product~Languages.getSelectedLanguageCode }}
  51.                 {% endif %}
  52.             {% endif %}
  53.         {% endif %}
  54.     {% endfor %}
  55. {% endblock %}
  57. {% block body %}
  58.     <section id="my-service-section" class="default-bg-white">
  59.         <div class="default-space"></div>
  60.         <div class="container">
  61.             <div class="row">
  62.                 <div class="col-lg-12 col-md-12 col-sm-12 col-12">
  63.                     <div class="default-title">
  64.                         {% include 'home/products_page/title.html.twig' %}
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.             {% include 'template_parts_project_specific/home_page_project_specific.html.twig' %}
  69.             {# ------------------ 1) Group photos by NON-NUMERIC rank key ------------------ #}
  70.             {% set photos_by_rank = {} %}
  71.             {% for p in cms_photo_array %}
  72.                 {% set rank_str = 'r_' ~ (attribute(p, 'ranking')|default(0)) %}
  73.                 {% set bucket = photos_by_rank[rank_str]|default([]) %}
  74.                 {% set bucket = bucket|merge([p]) %}
  75.                 {% set photos_by_rank = photos_by_rank|merge({ (rank_str): bucket }) %}
  76.             {% endfor %}
  78.             {# ------------------ 2) Render each CMS block by its rank ------------------ #}
  79.             <div class="row">
  80.                 {% for cms_copy in cms_copy_array|sort((a, b) => a.ranking <=> b.ranking) %}
  81.                     {% set rank_str = 'r_' ~ (attribute(cms_copy, 'ranking')|default(0)) %}
  82.                     {% set photos = photos_by_rank[rank_str]|default([]) %}
  84.                     <div class="col-12">
  85.                         <div class="row">
  86.                             {# Left column: CMS copy (full-width if no photo, half if photo exists) #}
  87.                             <div class="{% if photos is not empty %}col-md-6 col-12{% else %}col-12{% endif %}">
  88.                                 {% if is_granted('ROLE_ADMIN') %}
  89.                                     <a target="_blank" href="{{ path('cms_copy_edit', {'id': cms_copy.id}) }}">
  90.                                         <i style="color: red" class="fa fa-pen"> ({{ cms_copy.ranking }})</i>
  91.                                     </a>
  92.                                     {% if cms_copy.product is not null %}
  93.                                         <a target="_blank"
  94.                                            href="{{ path('cms_copy_new', {'product': cms_copy.product.id, 'ranking': (cms_copy.ranking + 1)}) }}">
  95.                                             <i style="color: blue" class="fa fa-plus"></i>
  96.                                         </a>
  97.                                     {% endif %}
  98.                                     {% if photos is empty and cms_copy.product is not null%}
  99.                                         <a target="_blank"
  100.                                            href="{{ path('cms_photo_new', {'product': cms_copy.product.id,'ranking': (cms_copy.ranking )}) }}">
  101.                                             <i style="color: blue" class="fa fa-camera"></i>
  102.                                         </a>
  103.                                     {% endif %}
  104.                                 {% endif %}
  106.                                 {% if cms_copy.pageLayout is not null %}
  107.                                     {% if cms_copy.getPageLayout.name  == "Accordion" %}
  108.                                         {% include 'home/products_page/formats/accordion.html.twig' %}
  109.                                     {% elseif cms_copy.getPageLayout.name  == "Card Layout" %}
  110.                                         {% include 'home/products_page/formats/card_layout.html.twig' %}
  111.                                     {% elseif cms_copy.getPageLayout.name  == "Carousel/Slider" %}
  112.                                         {% include 'home/products_page/formats/carousel_slider.html.twig' %}
  113.                                     {% elseif cms_copy.getPageLayout.name  == "Fullscreen Sections" %}
  114.                                         {% include 'home/products_page/formats/fullscreen_sections.html.twig' %}
  115.                                     {% elseif cms_copy.getPageLayout.name  == "Grid Layout" %}
  116.                                         {% include 'home/products_page/formats/grid_layout.html.twig' %}
  117.                                     {% elseif cms_copy.getPageLayout.name  == "Hero Banner" %}
  118.                                         {% include 'home/products_page/formats/hero_banner.html.twig' %}
  119.                                     {% elseif cms_copy.getPageLayout.name  == "List/Stacked Content" %}
  120.                                         {% include 'home/products_page/formats/list_stacked_content.html.twig' %}
  121.                                     {% elseif cms_copy.getPageLayout.name  == "Masonry Layout" %}
  122.                                         {% include 'home/products_page/formats/masonry_layout.html.twig' %}
  123.                                     {% elseif cms_copy.getPageLayout.name  == "Parallax Scrolling" %}
  124.                                         {% include 'home/products_page/formats/parallax_scrolling.html.twig' %}
  125.                                     {% elseif cms_copy.getPageLayout.name  == "Sidebar Layout" %}
  126.                                         {% include 'home/products_page/formats/sidebar_layout.html.twig' %}
  127.                                     {% elseif cms_copy.getPageLayout.name  == "Single Page Scroll" %}
  128.                                         {% include 'home/products_page/formats/single_page_scroll.html.twig' %}
  129.                                     {% elseif cms_copy.getPageLayout.name  == "Split Screen" %}
  130.                                         {% include 'home/products_page/formats/split_screen.html.twig' %}
  131.                                     {% elseif cms_copy.getPageLayout.name  == "Sticky Header/Footer" %}
  132.                                         {% include 'home/products_page/formats/sticky_header_footer.html.twig' %}
  133.                                     {% elseif cms_copy.getPageLayout.name  == "Tabbed Interface" %}
  134.                                         {% include 'home/products_page/formats/tabbed_interface.html.twig' %}
  135.                                     {% elseif cms_copy.getPageLayout.name  == "Timeline Layout" %}
  136.                                         {% include 'home/products_page/formats/timeline_layout.html.twig' %}
  137.                                     {% else %}
  138.                                         {% include 'home/products_page/formats/accordion.html.twig' %}
  139.                                     {% endif %}
  140.                                 {% else %}
  141.                                     {% include 'home/products_page/formats/accordion.html.twig' %}
  142.                                 {% endif %}
  143.                             </div>
  145.                             {# Right column: matching photos for this rank #}
  146.                             {% if photos is not empty %}
  147.                                 <div class="col-md-6 col-12">
  148.                                     {% for cms_photo in photos %}
  149.                                         <div class="d-inline-block justify-content-center py-1 p-sm-2 product-image-container">
  150.                                             <div class="image-wrapper">
  151.                                                 {% include 'home/products_page/photo_or_video.html.twig' %}
  152.                                             </div>
  153.                                         </div>
  154.                                     {% endfor %}
  155.                                 </div>
  156.                             {% endif %}
  157.                         </div>
  158.                     </div>
  159.                 {% endfor %}
  160.             </div>
  162.             {# ------------------ Sub Pages ------------------ #}
  163.             <div class="row mt-3">
  164.                 <div class="col-12">
  165.                     {% for sub_page in sub_pages %}
  166.                         <ul>
  167.                             <a target="_blank" href="{{ path('sub_page_show', {id: sub_page.id}) }}">
  168.                                 {{ sub_page.title }}
  169.                             </a>
  170.                         </ul>
  171.                     {% endfor %}
  172.                 </div>
  173.             </div>
  175.     </section>
  177.     {% include 'home/parts/contact_form_and_qr_code.html.twig' %}
  179. {% endblock %}
  181. {% block additionaljs %}
  182.     {% if include_contact_form == 1 %}
  183.         <script>
  184.             $(document).ready(function () {
  185.                 $("input[name='website_contacts[status]']").closest(".form-group").remove();
  186.                 $("input[name='website_contacts[dateTime]']").closest(".form-group").remove();
  187.                 $("input[name='website_contacts[dateResponded]']").closest(".form-group").remove();
  188.             });
  189.         </script>
  190.     {% endif %}
  191. {% endblock %}
  192. {% block javascripts %}
  193.     {{ parent() }}
  194.     <script>
  195.         document.addEventListener('DOMContentLoaded', function () {
  196.             const wrappers = Array.from(document.querySelectorAll('.cms-photo-wrapper'));
  197.             const groups = {};
  199.             // Group photos by ranking
  200.             wrappers.forEach(w => {
  201.                 const rank = w.getAttribute('data-rank');
  202.                 if (!groups[rank]) groups[rank] = [];
  203.                 groups[rank].push(w);
  204.             });
  206.             // Initialize groups
  207.             Object.keys(groups).forEach(rank => {
  208.                 const photos = groups[rank];
  209.                 if (photos.length <= 1) {
  210.                     // Single photo: keep normal behaviour (including cms_photo_view link)
  211.                     photos[0].classList.add('active');
  212.                     return;
  213.                 }
  215.                 // >>> Multiple photos with the same rank
  217.                 // 1) Disable cms_photo_view links in this group
  218.                 photos.forEach(wrapper => {
  219.                     const viewLink = wrapper.querySelector('a.cms-photo-view-link');
  220.                     if (viewLink) {
  221.                         // Option A: just prevent navigation
  222.                         viewLink.addEventListener('click', function (e) {
  223.                             e.preventDefault();
  224.                         });
  226.                         // If you prefer to completely remove the link wrapper, use this instead:
  227.                         // const img = viewLink.querySelector('img');
  228.                         // if (img) {
  229.                         //     wrapper.insertBefore(img, viewLink);
  230.                         //     viewLink.remove();
  231.                         // }
  232.                     }
  233.                 });
  235.                 // 2) Wrap them in a container
  236.                 const container = document.createElement('div');
  237.                 container.classList.add('cms-photo-group');
  238.                 const parent = photos[0].parentNode;
  239.                 parent.insertBefore(container, photos[0]);
  240.                 photos.forEach(p => container.appendChild(p));
  242.                 // Show first image
  243.                 let index = 0;
  244.                 photos[index].classList.add('active');
  246.                 // Add navigation arrows
  247.                 const leftArrow = document.createElement('button');
  248.                 leftArrow.className = 'cms-arrow left';
  249.                 leftArrow.innerHTML = '&#10094;'; // ‹
  250.                 const rightArrow = document.createElement('button');
  251.                 rightArrow.className = 'cms-arrow right';
  252.                 rightArrow.innerHTML = '&#10095;'; // ›
  254.                 container.appendChild(leftArrow);
  255.                 container.appendChild(rightArrow);
  257.                 function show(i) {
  258.                     photos.forEach(p => p.classList.remove('active'));
  259.                     photos[i].classList.add('active');
  260.                 }
  262.                 leftArrow.addEventListener('click', () => {
  263.                     index = (index - 1 + photos.length) % photos.length;
  264.                     show(index);
  265.                 });
  267.                 rightArrow.addEventListener('click', () => {
  268.                     index = (index + 1) % photos.length;
  269.                     show(index);
  270.                 });
  271.             });
  272.         });
  273.     </script>
  274. {% endblock %}