src/AppBundle/Resources/views/ObjectViews/search-results.html.twig line 1

Open in your IDE?
  1. {% extends '@FoxHabbitBasis/Layout/layout.html.twig' %}
  3. {% block content %}
  4.     <div class="search-results-container">
  5.         <header class="header-small bg-white">
  6.             <div class="container-fluid">
  7.                 <div class="col-10 offset-1">
  8.                     {% if searchQuery|default(null) %}
  9.                         <h1 class="display-3 text-pre-line">{{ 'fulltext-seach.header.search-result' | trans }}</h1>
  10.                         <div class="lead">{{ 'fulltext-seach.header.for' | trans }} "{{ searchQuery }}"</div>
  11.                     {% else %}
  12.                         <h1 class="display-3 text-pre-line">{{ 'fulltext-seach.header.search-page' | trans }}</h1>
  13.                     {% endif %}
  14.                 </div>
  15.             </div>
  16.         </header>
  17.         <div class="search-full-text-container col-10 offset-1 col-lg-6 offset-lg-3">
  18.             {% if error|default(null)%}
  19.                 <div class="alert alert-danger">
  20.                     {{ 'fulltext-seach.search-internal-error' | trans }}
  21.                 </div>
  22.             {% endif %}
  23.             <form id="search" method="get" action="{{ document.getProperty('enableSearch') ? document.getProperty('enableSearch').getFullPath() : '' }}">
  24.                 <div class="second-search-field form-group">
  25.                     <label for="search-field">{{ 'fulltext-seach.search-form.search-field.label' | trans }}</label>
  26.                     <input type="text" name="q" id="autocomplete" value="{{ searchQuery|default(null) }}" class="search-input form-control full-text-search-autocomplete">
  27.                     <div class="search-suggestions-secondary d-none">
  28.                     <div class="suggestions">
  29.                         <h5>{{ pimcore_input('search_suggestions_title', {"placeholder": "Enter title for Search Suggestions"}) }}</h5>
  30.                         <ul class="second-search-suggestions__list">
  31.                             {% if editmode %}<li><a href="#">Search suggestions will appear here</a></li>{% endif %}
  32.                         </ul>
  33.                     </div>
  34.                     </div>
  35.                 </div>
  36.                 <input type="submit" class="btn btn-secondary btn-search" name="submit" value={{ 'fulltext-seach.search-form.submit' | trans }}>
  37.             </form>
  38.         </div>
  40.         {# <div id="iframe-wrapper-boost"></div> #}
  41.         <script type="text/javascript">
  42.             document.addEventListener("DOMContentLoaded", function () {
  43.                 if (document.querySelector("#iframe-wrapper-boost")) return;
  45.                 const params = new URLSearchParams(window.location.search);
  46.                 const searchTerm = params.get("q");
  47.                 if (!searchTerm) return;
  49.                 // --- AI Overview Header ---
  50.                 const header = document.createElement("div");
  51.                 header.style.display = "flex";
  52.                 header.style.alignItems = "center";
  53.                 header.style.gap = "8px";
  54.                 header.style.fontSize = "16px";
  55.                 header.style.fontWeight = "500";
  56.                 header.style.color = "#444";
  57.                 header.style.margin = "40px auto 8px auto";
  58.                 header.style.maxWidth = "900px";
  59.                 header.style.paddingLeft = "4px";
  61.                 const sparkle = document.createElement("span");
  62.                 sparkle.innerHTML = "✦";
  63.                 sparkle.style.color = "#8ab4f8";
  65.                 const label = document.createElement("span");
  66.                 label.textContent = "AI Overview";
  68.                 header.appendChild(sparkle);
  69.                 header.appendChild(label);
  71.                 // --- Iframe Wrapper ---
  72.                 const wrapper = document.createElement("div");
  73.                 wrapper.id = "iframe-wrapper-boost";
  74.                 wrapper.style.position = "relative";
  75.                 wrapper.style.overflow = "hidden";
  76.                 wrapper.style.maxHeight = "280px"; // smaller initial height
  77.                 wrapper.style.border = "1px solid #ddd";
  78.                 wrapper.style.borderRadius = "12px";
  79.                 wrapper.style.boxShadow = "0 4px 12px rgba(0,0,0,0.08)";
  80.                 wrapper.style.transition = "max-height 0.4s ease";
  81.                 wrapper.style.margin = "0 auto 16px auto";
  82.                 wrapper.style.width = "100%";
  83.                 wrapper.style.maxWidth = "900px";
  84.                 wrapper.style.backgroundColor = "#fff";
  86.                 const iframe = document.createElement("iframe");
  87.                 iframe.src = `https://smart-search-prototype.vercel.app/?q=${encodeURIComponent(searchTerm)}`;
  88.                 iframe.id = "my-boost-iframe";
  89.                 iframe.width = "100%";
  90.                 iframe.style.height = "1000px";
  91.                 iframe.style.border = "none";
  92.                 iframe.style.borderRadius = "12px";
  94.                 const gradient = document.createElement("div");
  95.                 gradient.style.position = "absolute";
  96.                 gradient.style.bottom = "0";
  97.                 gradient.style.left = "0";
  98.                 gradient.style.width = "100%";
  99.                 gradient.style.height = "60px";
  100.                 gradient.style.background = "linear-gradient(to bottom, rgba(255,255,255,0), #fff)";
  101.                 gradient.style.pointerEvents = "none";
  103.                 const button = document.createElement("button");
  104.                 button.textContent = "Show more";
  105.                 button.style.display = "block";
  106.                 button.style.margin = "0 auto 40px auto";
  107.                 button.style.background = "#f2f2f2";
  108.                 button.style.border = "1px solid #ccc";
  109.                 button.style.borderRadius = "9999px";
  110.                 button.style.padding = "10px 24px";
  111.                 button.style.fontSize = "15px";
  112.                 button.style.color = "#333";
  113.                 button.style.cursor = "pointer";
  114.                 button.style.transition = "all 0.2s ease";
  116.                 let expanded = false;
  117.                 button.addEventListener("click", function () {
  118.                     expanded = !expanded;
  119.                     wrapper.style.maxHeight = expanded ? "1000px" : "280px";
  120.                     gradient.style.display = expanded ? "none" : "block";
  121.                     button.textContent = expanded ? "Show less" : "Show more";
  122.                 });
  124.                 wrapper.appendChild(iframe);
  125.                 wrapper.appendChild(gradient);
  127.                 const resultsContainer = document.querySelector("#results");
  128.                 if (resultsContainer && resultsContainer.parentNode) {
  129.                     resultsContainer.parentNode.insertBefore(header, resultsContainer);
  130.                     resultsContainer.parentNode.insertBefore(wrapper, resultsContainer);
  131.                     resultsContainer.parentNode.insertBefore(button, resultsContainer);
  132.                 }
  133.             });
  134.         </script>
  135.  
  137.         <section class="section">
  138.             {{ pimcore_area('breadcrumb', {type:'basisbundle-breadcrumb'}) }}
  139.             <div id="results"></div>
  140.         </section>
  141.         {% if searchHasResults|default(null) %}
  142.             <div class="col-11 offset-1">
  143.                 <div class="info">
  144.                     {{ 'fulltext-seach.search-list.result.results-from' | trans }} <span> {{ searchCurrentPageResultStart }} - {{ searchCurrentPageResultEnd }} </span> {{ 'fulltext-seach.search-list.result.of' | trans }} {{ searchTotalHits }}
  145.                 </div>
  146.             </div>
  147.         {% endif %}
  148.         <div class="section p-0 container-fluid">
  149.             <div class="search-list">
  150.                 {% if searchHasResults|default(null) %}
  151.                     <ul class="search-results list-unstyled">
  152.                         {% for i,searchResult in searchResults %}
  153.                             <li class="search-result">
  154.                                     <div class="search-result-content col-12 col-sm-10 offset-sm-1 col-lg-6 offset-lg-3">
  155.                                         <a href="{{ searchResult.url }}" class="search-result-title">
  156.                                             {% if searchResult.title|default(null) %}
  157.                                             {{ searchResult.title | raw }}
  158.                                             {% endif %}
  159.                                             {% if searchResult.h1|default(null) %}
  160.                                                 {{ searchResult.h1 | raw }}
  161.                                             {% endif %}
  162.                                         </a>
  163.                                     <p class="search-result-summary">{{ searchResult.summary | raw }}</p>
  164.                                         <a href="{{ searchResult.url }}" class="read-more"><i class="lorch-icon lorch-icon-next"></i>
  165.                                         {{ 'fulltext-seach.search-list.result.read-more' | trans }}
  166.                                     </a>
  167.                                     </div>
  168.                             </li>
  169.                         {% endfor %}
  170.                     </ul>
  172.                     {% set paginationVariables = full_text_search_pagination() %}
  173.                     {% if searchAllPages > 1 %}
  174.                         <div class="paginator">
  175.                             {% if paginationVariables.currentSearchPage > 1 %}
  176.                                 <a class="previous icon-arrow-left"
  177.                                    href="{{ paginationVariables.searchUrl }}{{ paginationVariables.searchUrlData }}&amp;page={{ paginationVariables.currentSearchPage - 1 }}"></a>
  178.                             {% else %}
  179.                                 <a class="previous icon-arrow-left icon-arrow-left-disabled"
  180.                                    href="{{ paginationVariables.searchUrl }}{{ paginationVariables.searchUrlData }}&amp;page={{ paginationVariables.currentSearchPage - 1 }}"></a>
  181.                             {% endif %}
  183.                             {% for i in paginationVariables.searchPageStart..paginationVariables.searchPageEnd %}
  184.                                 {% if i == paginationVariables.searchPageEnd %}
  185.                                     <a {{ paginationVariables.currentSearchPage == i ? 'class="active"' : '' }}
  186.                                         href="{{ paginationVariables.searchUrl }}{{ paginationVariables.searchUrlData }}&amp;page={{ i }}#results">{{ i }}</a>
  187.                                 {% else %}
  188.                                     <a {{ paginationVariables.currentSearchPage == i ? 'class="active"' : '' }}
  189.                                         href="{{ paginationVariables.searchUrl }}{{ paginationVariables.searchUrlData }}&amp;page={{ i }}#results">{{ i }}</a>
  190.                                     <span class="pagination-line">|</span>
  191.                                 {% endif %}
  192.                             {% endfor %}
  194.                             {% if paginationVariables.searchPageEnd > paginationVariables.currentSearchPage %}
  195.                                 <a class="next icon-arrow-right"
  196.                                    href="{{ paginationVariables.searchUrl }}{{ paginationVariables.searchUrlData }}&amp;page={{ paginationVariables.currentSearchPage + 1 }}#results"></a>
  197.                             {% else %}
  198.                                 <a class="next icon-arrow-right icon-arrow-right-disabled"
  199.                                    href="{{ paginationVariables.searchUrl }}{{ paginationVariables.searchUrlData }}&amp;page={{ paginationVariables.currentSearchPage + 1 }}#results"></a>
  200.                             {% endif %}
  201.                         </div>
  202.                     {% endif %}
  203.                 {% else %}
  204.                     {% if searchQuery|default(null) is not empty %}
  205.                         <div class="section pt-0 no-results col-10 offset-1 col-lg-6 offset-lg-3">
  206.                             <h5>{{ 'fulltext-seach.search-list.result.none' | trans }}</h5>
  207.                             {% include '@LuceneSearch/List/Partial/suggestions.html.twig' %}
  208.                         </div>
  209.                     {% endif %}
  210.                 {% endif %}
  211.             </div>
  212.         </div>
  213.     </div>
  214. {% endblock %}