HTML Code nur für Desktop User anzeigen

[Pallmann2024]

Guten Tag,

ich habe eine Suchleiste ins Menü Header reincodiert. Die Leiste sollte aber nur für Desktop User angezeigt werden,

wenn man in die Mobil Version reingeht, ist die Leiste mitten im Header. Die Leiste soll für Mobile User etc ausgeblendet sein. Wie kriege ich das hin? Wie lautet der Code den ich einfügen muss, damit das nur für Desktop ist.

Code:

 <form class="main-search__form" action="{{ routes.search_url }}" method="get"> 
          <input type="hidden" name="type" value="{{ search.results.first.object_type | default: 'product' }}">

          <button class="main-search__submit tap-area" type="submit">{%- render 'icon' with 'header-search' -%}</button>
          <input class="main-search__input input__field" type="text" name="q" autocomplete="off" autocorrect="off" aria-label="{{ 'search.general.title' | t }}" placeholder="{{ 'search.general.search_placeholder' | t }}" value="{{ search.terms | escape }}">     
   </form>

Ich bedanke mich schonmal herzlich.

[Gabe]

Hey @Pallmann2024 

Apropos, das Thema Suchleiste ausblenden besprechen wir des öfteren hier in der Community.

• Betreff: Narrative Suche entfernen
• Suchleiste bei Theme "Gem" entfernen

Im grunde müsstest du eine Kombination aus HTML und CSS verwenden, wie z. B. das form-Element, das die Suchleiste enthält, mit einer speziellen CSS-Klasse versehen und diese Klasse dann mit einer Media Query in CSS steuern. Füge eine Klasse wie desktop-only zu deinem form-Element hinzu:

<form class="main-search__form desktop-only" action="{{ routes.search_url }}" method="get"> 
    <input type="hidden" name="type" value="{{ search.results.first.object_type | default: 'product' }}">

    <button class="main-search__submit tap-area" type="submit">{%- render 'icon' with 'header-search' -%}</button>
    <input class="main-search__input input__field" type="text" name="q" autocomplete="off" autocorrect="off" aria-label="{{ 'search.general.title' | t }}" placeholder="{{ 'search.general.search_placeholder' | t }}" value="{{ search.terms | escape }}">     
</form>

Verwende eine Media Query, um das desktop-only Element nur auf Bildschirmen anzuzeigen, die breiter als eine bestimmte Pixelanzahl sind (z.B. 768px, was oft als Grenze zwischen Mobil- und Desktopgeräten verwendet wird):

/* Standardmäßig ausblenden */
.desktop-only {
    display: none;
}

/* Anzeigen auf Bildschirmen, die breiter als 768px sind */
@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

• display: none; sorgt dafür, dass das Element standardmäßig nicht angezeigt wird.
• @media (min-width: 768px) stellt sicher, dass das Element nur auf Bildschirmen mit einer Breite von mindestens 768 Pixeln angezeigt wird, also typischerweise auf Desktop-Bildschirmen.

Wenn du es selber programmierst dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Bei weitere Fragen kann ich gerne einen Programmierer empfehlen! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.