Any (webshop)

Search

Fügen Sie leistungsstarke Suchfunktionen zu Ihrem Webshop hinzu.
Search code

Clerk.io bietet drei verschiedene Suchlösungen an, die zusammen oder separat verwendet werden können:

Dieser Artikel erklärt, wie Sie mit einer Clerk.js-Installation beginnen können.

Sofort-Suche #

Instant Search
Die Sofort-Suche liefert in Echtzeit Suchergebnisse, während die Kunden tippen, die in einem Dropdown unter dem Suchfeld angezeigt werden.

Design erstellen #

Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Design-Editor #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Sofort-Suche.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  5. Nehmen Sie alle Änderungen am Design vor, die Sie möchten.

Code-Design #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Leer > Mit Code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Speichern.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Sofort-Suche-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um das Sofort-Such-Dropdown anzuzeigen und es in Ihre Website einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf Neuer Inhalt.
  3. Nennen Sie es “Live-Suche”.
  4. Wählen Sie in Inhaltstyp Live-Suche aus dem Dropdown-Menü aus.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  6. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

  1. Öffnen Sie die Registerkarte In die Website einfügen in den Inhaltseinstellungen.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit eingebettetem Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Ersetzen Sie für den eingebetteten Code INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE durch eine eindeutige Klasse oder ID für Ihr Suchfeld. Dadurch wird die Sofort-Suche darauf abzielen und Ergebnisse anzeigen, während der Benutzer tippt.

Hier ist ein vollständiges Beispiel für den Einbettungscode der Sofort-Suche:

<span class="clerk"
  data-template="@live-search"
  data-instant-search="INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE"
  data-instant-search-suggestions="6"
  data-instant-search-categories="6"
  data-instant-search-pages="6"
  data-instant-search-positioning="right">
</span>

Suchseite #

Search Page
Die Suchseite bietet ein vollflächiges Sucherlebnis mit erweiterten Filteroptionen. Dies wird verwendet, um jedes einzelne Ergebnis für die Suchanfrage eines Kunden anzuzeigen.

Design erstellen #

Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Design-Editor #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Suchseite.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  5. Nehmen Sie alle Änderungen am Design vor, die Sie möchten.

Code-Design #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Leer > Mit Code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Speichern.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Suchseitenvorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um die Suchseite anzuzeigen und sie in Ihre bestehende Suchseite einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf Neuer Inhalt.
  3. Nennen Sie es “Suchseite”.
  4. Wählen Sie in Inhaltstyp Suchseite aus dem Dropdown-Menü aus.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  6. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

  1. Öffnen Sie die Registerkarte In die Website einfügen in den Inhaltseinstellungen.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit eingebettetem Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Fügen Sie den Code in die Vorlage ein, die Ihre bestehende Suchseite generiert.
  5. Deaktivieren Sie alle vorhandenen Suchfunktionen.

Hier ist ein vollständiges Beispiel für den Einbettungscode der Suchseite, einschließlich CSS zum Anzeigen und Ausblenden von Facetten auf mobilen Geräten:

<div class="clerk-page-width">
  <span
      id="clerk-search"
      class="clerk"
      data-template="@search-page"
      data-target="#clerk-search-results"
      data-query="INSERT_QUERY_HERE"
      data-facets-attributes='["price","categories","vendor"]'
      data-facets-titles='{"price":"Preis","categories":"Kategorien","vendor":"Marke"}'
      data-facets-target="#clerk-search-filters"
      data-facets-price-prepend="€"
      data-facets-in-url="false"
      data-facets-view-more-text="Mehr anzeigen"
      data-facets-searchbox-text="Suche nach ">
  </span>

  <div id="clerk-show-facets" onclick="toggleFacets()">Filter</div>

  <div class="clerk_flex_wrap">
    <div id="clerk-facets-container">
      <div id="clerk-search-filters"></div>
    </div>
    <div id="clerk-search-results"></div>
  </div>

  <script>
    function toggleFacets(){
      el = document.getElementById('clerk-facets-container');
      el.classList.toggle('active');
    }
  </script>

  <style>
    #clerk-show-facets {
        width: 70%;
        height: 40px;
        margin: 20px auto;
        background-color: #333;
        color: white;
        text-align: center;
        border-radius: 2px;
        line-height: 40px;
        cursor: pointer;
    }

    .clerk-page-width {
        display: flow-root;
    }

    #clerk-search-results {
        width: 80%;
    }

    #clerk-show-facets {
        display: none;
    }

    .clerk_flex_wrap {
        display: flex;
        flex-direction: row;
    }

    .active {
      display: block !important;
    }

    @media only screen and (max-width : 800px) {
      #clerk-search-filters {
        width: 100% !important;
      }

      #clerk-facets-container {
        display: none;
      }
      #clerk-show-facets {
          display: block;
      }
      .clerk_flex_wrap {
        flex-direction: column;
      }
      #clerk-search-results {
          display: block;
          width: 100%;
      }
    }
  </style>
</div>

Omnisearch #

Omnisearch
Die Omnisearch kombiniert die Sofort-Suche und die Suchseite in einer einzigen Überlagerung, die angezeigt wird, wenn der Benutzer in das Suchfeld klickt.

Design erstellen #

Omnisearch funktioniert nur mit Code-Designs, da es ein komplexeres Layout hat, das in beliebiger Weise modifiziert werden kann.

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Omni-Suche.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Speichern.
  5. Nehmen Sie alle Anpassungen am Design vor, die Sie möchten. Der Omnisearch-Leitfaden enthält weitere Informationen dazu, wie Sie dies tun können.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um die Omnisearch anzuzeigen und sie in Ihre Website einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf Neuer Inhalt.
  3. Nennen Sie es “Omni-Suche”.
  4. Fügen Sie ein Tracking-Label hinzu - dies sollte ebenfalls “Omni-Suche” sein.
  5. Wählen Sie in Inhaltstyp Omni-Suche aus dem Dropdown-Menü aus.
  6. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  7. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

  1. Öffnen Sie die Registerkarte In die Website einfügen in den Inhaltseinstellungen.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit eingebettetem Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Wenn Sie die Option für eingebetteten Code verwenden, ersetzen Sie INSERT_CSS_SELECTOR[...] durch eine eindeutige Klasse oder ID für Ihr Suchfeld. Omnisearch wird angezeigt, wenn das Eingabefeld, das dem Selektor entspricht, angeklickt wird.

Hier ist ein vollständiges Beispiel für den Einbettungscode der Omni-Suche:

<span class="clerk"
  data-template="@omni-search"
  data-api="search/omni"
  data-trigger-element="#search"
></span>

Startvorlagen #

Wenn Sie Code-Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern. Sie enthalten die grundlegenden UI-Elemente, die die Sofort-Suche und die Suchseite bilden, die Sie dann nach Ihren Bedürfnissen anpassen können.

Sofort-Suche-Code #

Dies enthält die HTML- und CSS-Teile zur Anzeige eines Sofort-Such-Dropdowns. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.

HTML #

<div class="clerk-instant-search">
    {% if hits.length == 0 %}
        <div class="clerk-instant-search-no-results">
            Nichts gefunden: <b>{{ query }}</b>... versuchen Sie eine einfachere Suche!
        </div>
    {% endif %}

    {% if content.query != response.query %}
        <div class="clerk-instant-search-alternate-query">
            <i class="fas fa-search clerk-icon" aria-hidden="true"></i> Zeige Ergebnisse für: <b>{{ query }}</b>
        </div>
    {% endif %}

    <div class="clerk-instant-search-grid">
        {% if products.length > 0 %}
            <div class="clerk-instant-search-col clerk-col-1">
                <div class="clerk-instant-search-products">
                    <div class="clerk-instant-search-title">Produkte</div>
                    {% for product in products %}
                        <a href="{{ product.url }}">
                            <div class="clerk-instant-search-product clerk-instant-search-key-selectable">
                                <div class="clerk-instant-search-product-image" style="background-image: url('{{ product.image }}');"></div>
    
                                <div>
                                    <div class="clerk-instant-search-product-name">{{ product.name | highlight query }}</div>
        
                                    {% if product.price < product.list_price %}
                                        <div class="clerk-instant-search-product-list-price">{{ product.list_price | money }}</div>
                                    {% endif %}
                                    <div class="clerk-instant-search-product-price">{{ product.price | money }}</div>
                                </div>
                                
                                <div>
                                    <div class="clerk-instant-search-product-button">Jetzt kaufen</div>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
    
                    {% if hits > products.length %}
                        <div class="clerk-desktop-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
                            <a class="clerk-view-more-results-button" href="/search?q={{ query }}">
                                <u>Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<i>{{ query }}</i>"</u>
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if (suggestions.length + categories.length + pages.length) > 0 %}
            <div class="clerk-instant-search-col clerk-col-2">
                {% if suggestions.length > 1 %}
                    <div class="clerk-instant-search-suggestions">
                        <div class="clerk-instant-search-title">Suchvorschläge</div>
                        {% for suggestion in suggestions %}
                            {% if suggestion != query %}
                                <div class="clerk-instant-search-suggestion clerk-instant-search-key-selectable">
                                    <a href="/search?q={{ suggestion highlight query 'bold' true }}">
                                    <i class="fas fa-search clerk-icon" aria-hidden="true"></i>{{ suggestion }}
                                    </a>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
        
                {% if categories.length > 0 %}
                    <div class="clerk-instant-search-categories">
                        <div class="clerk-instant-search-title">Kategorien</div>
                        {% for category in categories %}
                            <div class="clerk-instant-search-category clerk-instant-search-key-selectable">
                                <a href="{{ category.url }}">
                                    {{ category.name | highlight query }}
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
        
                {% if pages.length > 0 %}
                    <div class="clerk-instant-search-pages">
                        <div class="clerk-instant-search-title">Verwandte Inhalte</div>
                        {% for page in pages %}
                            <div class="clerk-instant-search-category clerk-instant-search-key-selectable">
                                <a href="{{ page.url }}">
                                    <div class="name">{{ page.title | highlight query 'bold' true }}</div>   
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endif %}
         {% if hits > products.length %}
            <div class="clerk-mobile-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
                <a href="/search?q={{ query }}">
                    Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<i>{{ query }}</i>"
                </a>
            </div>
        {% endif %}
    </div>
</div>

CSS #

.clerk-instant-search {
    padding: 20px;
}

.clerk-instant-search-container a {
    color: black !important;
    text-decoration: none !important;
}

.clerk-instant-search-container a:hover {
    color: #b6c254; !important;
}

.clerk-instant-search {
    overflow: hidden;

    width: 100%;
    min-width: 650px;
    max-width: 1000px;
    
    margin: .2em auto;

    background-color: white;

    border: 1px solid #eee;
    border-top: 0px;

    border-radius: 5px 5px 10px 10px;

    box-shadow: 0 1em 2em 1em rgba(0,0,0,.2);
}

.clerk-instant-search-no-results {
    padding: 1em;
    
    font-style: italic;
    
    text-align: center;
}

.clerk-instant-search-alternate-query {
    margin: 0px 0px 5px 0px;
}

.clerk-instant-search-more-results {
    padding: 1em;

    font-size: 1.2em;
    
    text-align: center;
}

.clerk-instant-search-title {
    color: #b6c254;
    margin: 20px 0px 5px 0px;
    padding: 0px 0px 10px 0px;
    text-transform: uppercase;
    font-size: 1em;
    border-bottom: 1px solid #000000;
}


/* Produkte */
.clerk-instant-search-products {
    padding-right: 2em;
}

.clerk-instant-search-product {
    display: flex;
    
    padding: .2em;
    
    color: gray;
}

.clerk-instant-search-product:hover {
    background-color: rgba(46, 204, 113, .1);
}

.clerk-instant-search-product:hover .clerk-instant-search-product-button {
    transform: scale(1.05);
}

.clerk-instant-search-product > * {
    flex: 1 1 auto;
}
.clerk-instant-search-product > *:first-child, .clerk-instant-search-product > *:last-child {
    flex: 0 0 auto;
}

.clerk-instant-search-product-image {
    display: inline-block;

    width: 3em;
    height: 3em;

    margin-right: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-instant-search-product-name {
    overflow: hidden;

    height: 1.2em;

    margin-bottom: .2em;
}

.clerk-instant-search-product-list-price {
    display: inline-block;
    
    margin-right: .5em;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-instant-search-product-price {
    display: inline-block;
    
    font-weight: bold;
}

.clerk-instant-search-product-button {
    display: block;

    margin: .2em auto;
    padding: .8em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: .8em;

    cursor: pointer;
}

/* Vorschläge */

.clerk-icon {
    color: lightgray;
    margin-right: .5em;  
}

.clerk-instant-search-suggestions {
    margin-bottom: 1em;
}

.clerk-instant-search-suggestion {
    padding: .1em;
}



/* Kategorien */
.clerk-instant-search-categories {
    margin-bottom: 1em;
}

.clerk-instant-search-category {
    padding: 5px;
    margin: 5px;
    width: auto;
    display: inline-block;
    border: 1px solid black;
    border-radius: 2px;
}


/* Seiten */
.clerk-instant-search-pages {
    margin-bottom: 1em;
}

.clerk-instant-search-page {
    padding: .1em;
}

@media screen and (min-width: 1200px) {
    .clerk-instant-search-container {
        width: 50%;
    }
    .clerk-instant-search-grid {
        display: flex;
    }

    .clerk-col-1 {
        flex: 2;
    }
    
    .clerk-col-2 {
        flex: 1;
    }

    .clerk-mobile-button {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px){
    .clerk-instant-search-container {
        right: 0px !important;
        left: 0px !important;
    }
    .clerk-mobile-button {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .clerk-instant-search-container {
        right: 0px !important;
    }
    .clerk-desktop-button {
        display: none;
    }
}

@media screen and (min-width: 376px) and (max-width: 800px) {
    .clerk-instant-search {
            min-width: 0px !important;
    }
}

@media screen and (max-width: 375px) {
    .clerk-instant-search {
        min-width: 200px !important;
    }
    .clerk-instant-search-col {
        margin: 0px 0px 20px 0px;
    }
    .clerk-instant-search-product-name {
        height: 3em !important;
    }
}

Suchseiten-Code #

Dies enthält die HTML- und CSS-Teile zur Anzeige einer Suchseite. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.

HTML #

<div class="clerk-search-result">
    <div class="clerk-search-result-headline">{{ headline }}</div>
    <div class="clerk-grid">
        {% for product in products %}
            <div class="clerk-grid-item">
                <div class="clerk-grid-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-grid-badge">Im Angebot</div>
                        {% endif %}
                        <div class="clerk-grid-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-grid-brand">{{ product.brand }}</div>
                        <div class="clerk-grid-name">{{ product.name }}</div>
                        
                        <div class="clerk-grid-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-grid-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-grid-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 1 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-grid-button-not-in-stock">Nicht auf Lager</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-grid-button">In den Warenkorb</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

    {% if count > products.length %}
        <div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Mehr Ergebnisse anzeigen</div>
    {% endif %}
</div>

CSS #

#clerk-search-results {
    margin: 0px;
}

.clerk-search-result {
    margin: 1em 0;
}

.clerk-search-result-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-grid {
    display: flex;
    flex-flow: row wrap;
}

.clerk-grid-item {
    margin: auto;
}

.clerk-grid-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-grid-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-grid-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-grid-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-grid-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-grid-brand {
    font-size: 0.9em;
    color: #757575;;
}

.clerk-grid-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight:bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-grid-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-grid-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-grid-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-grid-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-grid-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1025px) {
    .clerk-grid-item {
        flex: 0 0 25%;
        margin: auto;
    }
}

@media screen and (min-width: 500px) and (max-width: 1024px) {
    .clerk-grid-item {
        flex: 0 0 33%;
        margin: auto;
    }
}

@media screen and (max-width: 499px) {
    .clerk-grid-item {
        flex: 0 0 100%;
        margin: auto;
    }
}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.