Suchleiste mit Vorschlägen auf Hauptseite als Benutzerdefinierten Liquid?

[chris-eot]

Hallo liebe Shopify Community,

ich würde gerne die Suchleiste vom Theme "Dawn" auf die Hauptseite bringen:

Diese Suchleiste erscheint, sobald man im Dawn Theme über die Lupe im Header etwas sucht. Nur hätte ich gerne die feste Suchleiste mit den Ergebnissen und Lupenicon rechts dauerhaft auf der Startseite. Ich vermute mal das wird über ein benutzerdefiniertes Liquid über Abschnitte gemacht? Falls ja, ich wäre dankbar wenn jemand weiß wie das geht und gerne helfen möchte.

Danke und viele Grüße

[Ben310]

Hey ja du möchtest eine "sticky search bar" auf der Homepage haben. Hast du das hier ausprobiert?

Du kannst folgende Änderungen am Code vornehmen, falls nötig:

• width: 250px;: Breite der Suchleiste anpassen.
• content: "Search...";: Ändere den Platzhaltertext in eine gewünschte Sprache oder Phrase.
• border: 2px solid;: Passe die Breite oder Art des Rahmens an (z. B. 1px dashed).
• border-radius: var(--inputs-radius);: Kontrolliere die Rundung der Ecken, oder ersetze sie durch z. B. 5px.

[chris-eot]

Hallo Ben, danke für die Antwort. So ganz blicke ich nicht durch: den Code habe ich in die CSS Datei gepackt. Allerdings ist die Beschreibung eigenartig, was ist mit "simply create a box by showing borders..." gemeint? Und dann positioniert man das Search Icon da, auch das verstehe ich nicht. Kannst Du mir da weiterhelfen? Lieben Dank und viele Grüße

Procedure

To make the search bar always visible we are going to create a box simply by showing borders around an existing element in the theme.

Then we position the search icon within that box and add a placeholder text, in this case, “Search…” but it can be anything you want.

Lastly, the @media query rule will make sure that these changes only apply to desktop screens (or windows bigger than 990px).

[Ben310]

Ich kann dir nur über diesen Thread hier weitere Tipps dazu geben, ansonsten müsstest du einen Experten anheuern.

Zuerst musst du eine neue benutzerdefinierte Liquid-Sektion erstellen (mach das immer zuerst in einer Themekopie als Testumgebung) um die Suchleiste dauerhaft in die Startseite einzubetten (du möchtest die Leiste ja nur auf der HP darstellen, korrekt?)

• Gehe zu Online-Shop > Themes > Bearbeiten > Code bearbeiten.
• Klicke auf Abschnitte (Sections) und erstelle eine neue Datei namens search-bar.liquid und füge einen Code wie den folgenden ein:

<section class="search-bar-container">
  <form method="get" action="/search" class="search-form">
    <input type="text" name="q" placeholder="Suchen..." class="search-input" />
    <button type="submit" class="search-button">
      <svg class="icon" viewBox="0 0 20 20">
        <path d="M8.5 2a6.5 6.5 0 104.92 11.12l4.7 4.7a1 1 0 001.41-1.41l-4.7-4.7A6.5 6.5 0 008.5 2zM4 8.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z"></path>
      </svg>
    </button>
  </form>
</section>

• Das <form> erstellt das Suchformular, das mit /search verlinkt ist.
• Das <input>-Feld ist die Textbox für die Sucheingabe.
• Das <button> enthält das Lupen-Icon, um den Suchbutton darzustellen.

Füge auch etwas CSS-Code in den CSS Editor um die Suchleiste stylisch anzupassen, wie:

.search-bar-container {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.search-form {
  display: flex;
  align-items: center;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 0.5rem;
  width: 100%;
  max-width: 400px;
}

.search-input {
  border: none;
  outline: none;
  width: 100%;
  padding: 0.5rem;
}

.search-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.search-button .icon {
  width: 20px;
  height: 20px;
  fill: #000;
}

• .search-bar-container sorgt dafür, dass die Suchleiste in der Mitte der Seite angezeigt wird.
• .search-form definiert den Rahmen und das Layout der Suchleiste.
• .search-input ist das Eingabefeld, mit einfacher und klarer Gestaltung.
• .search-button macht das Lupen-Icon klickbar.

Füge die neue Suchleiste zur Startseite hinzu.

• Gehe in Online-Shop > Themes > Bearbeiten > Code bearbeiten.
• Öffne die Datei theme.liquid (oder je nach Theme).
• Füge den folgenden Code an die gewünschte Stelle ein:

{% section 'search-bar' %}

Wenn du die Suchleiste nur auf Desktop-Bildschirmen anzeigen möchtest, füge eine Media-Query hinzu:

@media screen and (max-width: 990px) {
  .search-bar-container {
    display: none;
  }
}

[chris-eot]

Vielen lieben Dank für die ausführliche Anleitung. Das hat soweit geklappt, ich hätte noch zwei Folgefragen an dich, insofern das okay ist: 

1. Kann ich die erstellte search-bar  {% section 'search-bar' %} auch als Abschnitt im Template als Benutzerdefiniertes Liquid einbinden, bzw. einen Abschnitt erstellen, wo eben diese Searchbar drin ist? 

2. Weißt du, wie man die Suchvorschläge mit reinbekommt? Eigentlich hat ja Dawn diese Vorlage schon, wenn man eine Suche über die Lupe ausführt und auf der Seite mit den Ergebnissen landet, dann erscheint ja genau diese Textbox. Hatte mir das etwas einfacher vorgestellt, direkt zu kopieren.

Danke und liebe Grüße

Chris

[Ben310]

Ja gerne, und du solltest den Code, den du in search-bar.liquid erstellt hast, auch in einem benutzerdefinierten Liquid-Abschnitt innerhalb des Theme-Editors einbinden können. Wenn deine Testumgebung bereits eine Sektion vom Typ „Benutzerdefiniertes Liquid“ hast, kannst du diese im Editor der Startseite hinzufügen und dort einfach den <section> bzw. <form> Code einfügen.

Dann Startseite auswählen > „Abschnitt hinzufügen“ > „Benutzerdefiniertes Liquid“ wählen und den HTML-Code ( <form>, <input> usw.) einfügen. Dann das CSS weiterhin global in der base.css belassen oder in die Section CSS über style-Tags (weniger empfehlenswert) integrieren.

ODER
...wie du bereits search-bar.liquid in sections angelegt hast, diese Section in Deinem theme.liquid oder im Template der Startseite per folendem Liquid integrieren:

{% section 'search-bar' %}

Diese Section kannst du auch so definieren, dass sie im Theme-Editor als auswählbarer Abschnitt für die Startseite auftaucht.
Dazu erweiterst Du den search-bar.liquid um einen schema-Block, damit Shopify diesen Abschnitt im Customizer führt, und in „Anpassen (Customizer)“ den Abschnitt "Search Bar" hinzufügen, verschieben, etc. wie z. B.:

<section class="search-bar-container">
  ... deine Suchleisten-Codes ...
</section>

{% schema %}
{
  "name": "Search Bar",
  "settings": [],
  "blocks": [],
  "max_blocks": 0,
  "presets": [
    {
      "name": "Search Bar"
    }
  ]
}
{% endschema %}

Die Suchleiste im Dawn-Theme verwendet das Predictive Search, das nicht nur das Input-Feld, sondern auch ein JavaScript-Handling und bestimmte Snippets/Teile des Codes voraussetzt. Wenn Du dir den Original-Code vom Dawn-Theme anschaust, ist die Suchfunktionalität i.d.R. im Header (also in header.liquid oder über header-search.liquid bzw. predictive-search.liquid Snippets) realisiert. Die Suggestions werden dynamisch per JavaScript aus der Shopify Search API geladen, sobald man tippt. Es handelt sich dabei meistens um eine Kombination aus:

• Einem <form>-Element mit dem data-predictive-search="true" Attribut oder Ähnliches.
• Einem speziellen Snippet, z. B. predictive-search.liquid, welches die Markup-Struktur der Vorschläge ausgibt.
• Einem JavaScript (z. B. predictive-search.js) welches diese Vorschläge per AJAX nachlädt, sobald jemand in das Suchfeld eingibt.

Schau im Original Dawn-Code nach dem Snippet, das für die Vorschläge zuständig ist wie predictive-search.liquid. Kopiere den kompletten Code in dein Theme, falls er nicht schon vorhanden ist.

Füge innerhalb deiner search-bar.liquid Section (oder deinem benutzerdefinierten Liquid) an entsprechender Stelle einen Liquid wie Folgendes ein:

{% render 'predictive-search' %}

Außerdem sollte das <form>-Element ggf. dieselbe class oder data-Attribute haben, wie im Original Dawn-Header, damit das JavaScript weiß, wo es die Vorschläge einblenden soll, wie z. B.:

<form method="get" action="/search" class="search__form" data-predictive-search>
  <input type="search" name="q" class="search__input" aria-label="Search" placeholder="Suchen...">
  <button type="submit" class="search__submit" aria-label="Submit search">
    <!-- Icon -->
  </button>
  {% render 'predictive-search' %}
</form>