Search

Tilføj kraftfuld søgefunktionalitet til din DanDomain-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 med.
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 med Liquid.

Opret element #

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

Tilføj til website #

1. I DanDomain 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 fuldsides 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 med.
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 med Liquid.

Opret element #

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

Tilføj til website #

I DanDomain 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 DanDomain 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, 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ætter du den afsluttende IF-sætning:

{/if}

5. Klik på 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 din embed-kode (som vist i eksemplet ovenfor). Du kan style facetter med CSS i samme fil.

For et komplet overblik, se Facets guide.