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 viser 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. Navngiv det 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 det 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ælg Live-search.
5. Under Design, vælg 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 identifikator end standarden.

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

Search Page #

Search Page giver en fuldskærms-søgeoplevelse 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 det 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 det 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ælg Search page.
5. Under Design, vælg 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 et IF-statement 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 i toppen af filen, omkring 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 på Gem for at gemme dine ændringer.

Facets #

Clerk.js indeholder indbygget facetteret søgning til Search Page. Alle produktattributter sendt til Clerk.io kan bruges som filtre.

For at aktivere facetter, tilføj facet-attributter til din embed-kode (som vist i eksemplet ovenfor). Du kan style facetter med CSS i samme fil.

For et fuldt overblik, se Facets guide.