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 bzw. Code einfügen.
Dann Startseite auswählen > „Abschnitt hinzufügen“ > „Benutzerdefiniertes Liquid“ wählen und den HTML-Code ( , 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.:
{% 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 -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 -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.:
