Skip to main content

🔍 SimpleSearch für BS5

SimpleSearch (3.1.0-pl) in MODX 3.1.2-pl einrichten (Stand November 2025)

(Basic Search + Bootstrap-5-Menüsuche, eigene Snippets + eigene Chunks)

📦 1. Vorbereitung: eigene Snippets anlegen

Um Updates sicher zu umgehen, kopierst du die beiden SimpleSearch-Snippets:

  1. Elemente → Snippets
  2. SimpleSearch öffnen → Duplizieren → Name: modxSimpleSearch
  3. SimpleSearchForm öffnen → Duplizieren → Name: modxSimpleSearchForm

Ab jetzt werden nur diese beiden Snippets genutzt.

🔧 2. Snippets duplizieren (Optional)

Dupliziere die beiden SimpleSearch-Snippets:

  • SimpleSearch → modxSimpleSearch
  • SimpleSearchForm → modxSimpleSearchForm

💡 Besonders sinnvoll ist dieses Vorgehen, wenn mehrere Kontexte verwendet werden.
Da jeder Kontext eine eigene Suchseite (mit eigener Ressourcen-ID) und ggf. eigene Einstellungen benötigt, sollten alle Properties ausschließlich im Ressourcen-Aufruf gesetzt werden. Dadurch bleiben die Snippets update-sicher und verursachen keine Kontext-Konflikte.

Je nach Fall ist natürlich auch eine automatische Kontext-Umschaltung für die Suche oder ein gemeinsames Suchfeld für alle Kontexte möglich.

📄 3. Ressource „Suche“ erstellen (ID 42)

  • Neue Ressource anlegen, Titel: Suche, Alias: suche
  • Veröffentlichen, optional nicht im Menü anzeigen
  • Inhalt der Ressource:
[[!modxSimpleSearch?
    &tpl=`modxSimpleSearchResult`
    &containerTpl=`modxSimpleSearchWrapper`
    &tplResultEmpty=`modxSimpleSearchResultEmpty`
    &perPage=`20`
    &showExtract=`1`
    &highlightResults=`1`
    &highlightClass=`simplesearch-highlight`
    &highlightTag=`span`
    &urlScheme=`abs`
    &pagingType=`default`
    &pageTpl=`modxSimpleSearchPageLink`
    &currentPageTpl=`modxSimpleSearchCurrentPageLink`
    &pagingSeparator=``
]]

🧩 4. Eigene Chunks für Suchausgabe (Bootstrap 5)

4.1 Chunk: modxSimpleSearchWrapper

<div class="my-4">

    [[+total:gt=`0`:then=`
    <p class="mb-3 small text-muted">
        [[+total:abs]] Ergebnis(se) für "[[+query:escape]]" gefunden
    </p>
    `]]

    [[+results:notempty=`
    <div class="list-group mb-3">
        [[+results]]
    </div>
    `]]

    [[+paging:notempty=`
    <nav aria-label="Ergebnisseiten">
        <ul class="pagination pagination-sm mb-0">
            [[+paging]]
        </ul>
    </nav>
    `]]

</div>

4.2 Chunk: modxSimpleSearchResult

<a href="[[+link:is=``:then=`[[~[[+id]]? &scheme=`abs`]]`:else=`[[+link]]`]]"
   class="list-group-item list-group-item-action">

    <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">
            [[+longtitle:default=`[[+pagetitle]]`:escape]]
        </h5>
        <small class="text-muted">
            <i class="bi bi-clock"></i>
            [[+publishedon:date=`%Y-%m-%d`]]
        </small>
    </div>

    [[+showExtract:is=`1`:then=`
        <p class="mb-1">[[+extract]]</p>
    `:else=``]]
</a>

4.3 Chunk: modxSimpleSearchResultEmpty

<div class="alert alert-warning my-4">
    <i class="bi bi-search"></i>
    Keine Treffer gefunden.
</div>

4.4 Chunk: modxSimpleSearchPageLink

<li class="page-item">
    <a class="page-link" href="[[+link]]">[[+text:escape]]</a>
</li>

4.5 Chunk: modxSimpleSearchCurrentPageLink

<li class="page-item active" aria-current="page">
    <span class="page-link">[[+text:escape]]</span>
</li>

🔎 5. Suchfeld im Bootstrap-5-Menü

Im Template innerhalb der Navbar, unterhalb des [[!pdoMenu? ...]]-Blocks einfügen:

                <form class="d-flex ms-lg-3 mt-3 mt-lg-0"
                      action="[[~42? &scheme=`abs`]]"
                      method="get">
                    <input class="form-control form-control-sm me-2"
                           type="search"
                           name="search"
                           placeholder="Suche…"
                           aria-label="Suche">
                    <button class="btn btn-sm btn-outline-light" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
  • 42 = ID der Suchseite
  • name="search" = entspricht searchIndex in modxSimpleSearchForm

🧪 6. Funktionstest

  1. Menü-Suchfeld im Frontend testen (z.B. „mai“).
  2. Wird auf /suche.html?search=mai weitergeleitet?
  3. Werden Treffer als Bootstrap-List-Group angezeigt?
  4. Funktioniert die Paginierung (untere Pagination-Leiste)?
  5. Führt der Klick auf einen Treffer zur richtigen Seite?

✅ Zusammenfassung

  • eigene Snippets modxSimpleSearch & modxSimpleSearchForm → update-sicher
  • eigene Chunks modxSimpleSearchWrapper, modxSimpleSearchResult, modxSimpleSearchResultEmpty, modxSimpleSearchPageLink, modxSimpleSearchCurrentPageLink
  • Suchseite mit ID 42
  • Bootstrap-5-kompatible List-Group-Ansicht und Pagination
  • Menü-Suchfeld direkt in der Navbar
  • absolute URLs (urlScheme=abs) verhindern Pfadfehler
  • Suchbegriff wird immer sauber escaped (kein XSS)
Back to top