Search

Tilføj kraftfuld søgefunktionalitet til din SmartWeb-webshop. Clerk.io tilbyder to komplementære søgeløsninger:

• En Instant Search-dropdown, der viser resultater, mens kunderne skriver.
• En Search Page med facetterede filtre til at gennemse alle resultater.

Instant Search #

Instant Search leverer resultater i realtid, mens kunderne skriver, vist i en dropdown under søgefeltet.

Opret design #

Brug Design Editor eller code designs.

Design Editor #

1. Gå til Search > Designs og klik på New Design.
2. Vælg Other designs > Instant Search.
3. Vælg en skabelon at starte fra.
4. Giv det et navn og klik Create design.
5. Tilpas designet efter behov.

Code Design #

1. Gå til Search > Designs og klik på New Design.
2. Vælg Other designs > Blank > With code.
3. Giv det et navn og klik Save.
4. Byg et codedesign ved hjælp af Liquid.

Opret element #

1. Gå til Search > Elements.
2. Klik på New Element.
3. Giv det navnet “Live Search”.
4. Under Element type, vælg Live-search.
5. Under Design, vælg det design, du har oprettet.
6. Klik Save.

Tilføj til website #

1. I SmartWeb Admin, gå til Online Store > Design > Aktive designs > Rediger filer > partials.
2. Åbn filen body.tpl.
3. Indsæt følgende kode og klik Gem.

<span class="clerk" 
    data-template="@live-search" 
    data-instant-search=".top-search-form .form-input" 
    data-instant-search-positioning="left"
    data-instant-search-categories="6"
    data-instant-search-pages="6"
    data-instant-search-suggestions="6">
</span>

Fejlfinding #

Hvis din Instant Search ikke vises, er det sandsynligvis fordi dit søgefelt har en anden identifikator end standarden.

1. Inspicer dit søgefelt i en browser, og find den unikke class eller ID.
2. Erstat selektoren i data-instant-search med klassen eller ID’en på dit inputfelt.

Search Page #

Search Page giver en fuldside-søgeoplevelse med avancerede filtre.

Opret design #

Brug Design Editor eller code designs.

Design Editor #

1. Gå til Search > Designs og klik på New Design.
2. Vælg Other designs > Search Page.
3. Vælg en skabelon at starte fra.
4. Giv det et navn og klik Create design.
5. Tilpas designet efter behov.

Code Design #

1. Gå til Search > Designs og klik på New Design.
2. Vælg Other designs > Blank > With code.
3. Giv det et navn og klik Save.
4. Byg et codedesign ved hjælp af Liquid.

Opret element #

1. Gå til Search > Elements.
2. Klik på New Element.
3. Giv det navnet “Search Page”.
4. Under Element type, vælg Search page.
5. Under Design, vælg det design, du har oprettet.
6. Klik Save.

Tilføj til website #

I SmartWeb genererer filen product-list-js-entity.tpl både Search Page og Category Pages. Du skal bruge en IF-sætning til at adskille dem.

1. I SmartWeb Admin, gå til Online Store > Design > Aktive designs > Rediger filer.
2. Åbn modules > product > product-list-js-entity.tpl.
3. Indsæt følgende kode øverst i filen, nær linje 35:

{if $field == 'search'}
 
<div class="page-width clerk-page-width">
<span
    id="clerk-search"
    class="clerk"
    data-template="@search-page"
    data-target="#clerk-search-results"
    data-query="{$itemId}"
    data-facets-attributes='["price","categories","vendor"]'
    data-facets-titles='{"price":"Price","categories":"Categories"}'
    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;
  }
 
  #clerk-search-results {
      display: block;
      width: 100%;
  }
 
  .clerk-page-width {
      display: flow-root;
  }
 
  #clerk-search-results {
      width: 80%;
  }
 
  #clerk-search-filters {
      width: 20%;
  }
 
  #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%;
    }
 
    #clerk-facets-container {
      display: none;
    }
    #clerk-show-facets {
        display: block;
    }
    .clerk_flex_wrap {
      flex-direction: column;
    }
  }
</style>
</div>
 
{else}

4. Nederst i filen indsættes den afsluttende IF-sætning:

{/if}

5. Klik Gem for at gemme dine ændringer.

Facetter #

Clerk.js inkluderer indbygget Faceted Search til Search Page. Alle produktattributter, der sendes til Clerk.io, kan bruges som filtre.

For at aktivere facetter skal du tilføje facet-attributterne til dit embed kode. Du kan style facetter med CSS i samme fil.

For et fuldt overblik, se Facets guide.