Search

Øjeblikkelig søgning #

Dette afsnit viser dig, hvordan du installerer Clerk.io’s Live Search med alt drevet af Content and Designs.

1. Opret en søgning Design kaldet “Instant Search”. Start med at bruge en standard

Dropdown med øjeblikkelig søgning til højre design.

2. Opret en Search Indhold -blok med navnet “Live Search”.

3. Vælg Live-søgning som produktlogik, og vælg dit Live-Search-design

4. Kopier indlejringskoden fra afsnittet “Indsæt på hjemmesiden” ind i feltet bunden af den fil, der genererer alle sider i din webshop.

5. Erstat INDSÆT_SEARCH_INPUT_CSS_SELECTOR_HER i data-instant-søgning med klassen eller ID’et for dit søgefelt.

6. Nu er live-søgning korrekt bundet til søgefeltet, når kunderne skriver.

Eksempel på kode til live-søgning

<span class="clerk"
  data-template="@live-search"
  data-instant-search="#search"
  data-live-search-categories="true">
</span>

Søg side #

Dette afsnit viser dig, hvordan du installerer Clerk.io’s søgeside, hvor alt er drevet af indhold og design.

1. Opret en søgning Design kaldet " Søg side", og vælg standardindstillingen

Søg side design.

2. Opret en Indhold -blok, der hedder " Søg side".

3. Vælg Søgning som produktlogik, og vælg dit søgesidedesign.

4. Sæt Antal produkter til 40, og skriv " Søgeresultater" som overskrift.

5. Kopier nedenstående kode ind i din Søg side.

6. Erstat teksten INDSÆT_FORESPØRGSEL_HER i data-forespørgsel med en logik til at få

den forespørgsel, som kunderne indtaster, fra søgefeltet.

7. Nu har du Clerk som din søgefunktion!

Skabelon til dynamisk søgeside med facetter

<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>

Facetter #

Clerk.js kommer med indbygget understøttelse af Facetteret søgning.

Alle produktattributter, du sender til os, kan bruges som en del af den facetterede søgning.

Lad os starte med et hurtigt eksempel:

<div id="clerk-search-filters"></div>
<div id="clerk-search-results"></div>

<span
  class="clerk"

  data-template="@search-page"
  data-query="shoes"
  data-offset="0"

  data-target="#clerk-search-results"

  data-facets-target="#clerk-search-filters"
  data-facets-attributes='["categories","manufacturer","gender"]'
  data-facets-multiselect-attributes='["categories","manufacturer"]'
  data-facets-titles='{"categories":"Categories","manufacturer":"Brand","gender":"Sex"}'>
</span>

Delene data-facetter- giver dig mulighed for at enable og Tilpas den facetterede søgning.

Ved at tilføje disse til din Indlejringskode til søgning vises facetter, så snart der vises resultater.

Nedenfor kan du se, hvad hver del gør:

Styling af facetter #

Facets leveres med en simpel styling ud af boksen. For at ændre dette skal du blot bruge disse CSS selectors til at tilføje en tilpasset styling: