Search

Tilføj kraftfuld søgefunktionalitet til din ScanNet-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 giver realtidsresultater, 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. Navngiv den og klik på 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. Navngiv den og klik på Save.
4. Byg et code design ved at bruge Liquid.

Opret Element #

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

Tilføj til hjemmeside #

1. I ScanNet Admin, gå til Online Store > Design > Aktive designs > Rediger filer > partials.
2. Åbn filen body.tpl.
3. Indsæt følgende kode, og klik på 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, skyldes det sandsynligvis, at dit søgefelt har en anden identifier end standarden.

1. Inspicér dit søgefelt i en browser og find den unikke class eller ID.
2. Erstat vælgeren i data-instant-search med class eller ID for dit inputfelt.

Search Page #

Search Page giver en søgeoplevelse over hele siden med avanceret filtrering.

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. Navngiv den og klik på 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. Navngiv den og klik på Save.
4. Byg et code design ved at bruge Liquid.

Opret Element #

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

Tilføj til hjemmeside #

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

1. I ScanNet 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, tæt ved 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. Allernederst i filen indsættes den afsluttende IF-sætning:

{/if}

5. Klik på Gem for at gemme dine ændringer.

Facetter #

Clerk.js indeholder 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 din embed-kode (som vist i eksemplet ovenfor). Du kan style facetter ved hjælp af CSS i samme fil.

For et komplet overblik, se Facets guide.