Dieser Abschnitt zeigt Ihnen, wie Sie die Suchseite von Clerk.io installieren können, bei der alles von Inhalten und Designs gesteuert wird.

Suchseite #

1. Erstellen Sie ein Such-Design mit dem Namen " Suchseite" und wählen Sie die Standard

Suchseite Design.

2. Erstellen Sie einen Inhalt Block mit dem Namen " Suchseite".

3. Wählen Sie Suche als Produktlogik, und wählen Sie das Design Ihrer Suchseite.

4. Setzen Sie Anzahl der Produkte auf 40, und geben Sie " Suchergebnisse “ als Überschrift ein.

5. Kopieren Sie den folgenden Code in Ihre Suchseite.

6. Ersetzen Sie den Text INSERT_QUERY_HERE in data-query durch eine Logik, die

die Abfrage, die Kunden eingeben, aus dem Suchfeld zu erhalten.

7. Jetzt haben Sie Clerk als Ihre Suchfunktion!

Dynamische Suchseite Vorlage mit Facetten

<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":"Price","categories":"Categories","vendor":"Brand"}'
      data-facets-target="#clerk-search-filters"
      data-facets-price-prepend="€"
      data-facets-in-url="false"
      data-facets-view-more-text="View More"
      data-facets-searchbox-text="Search for ">
  </span>

  <div id="clerk-show-facets" onclick="toggleFacets()">Filters</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>

Ist damit Ihre Frage beantwortet?