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 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 med 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 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. Erstat vælgeren i data-instant-search med class eller ID for dit inputfelt.

Search Page #

Search Page giver en sidefyldende 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 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 med 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 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, 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. I bunden af filen indsættes 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. Enhver produktegenskab, der sendes til Clerk.io, kan bruges som filter.

For at aktivere facetter skal du tilføje facet-egenskaberne til din embed-kode (som vist i eksemplet ovenfor). Du kan style facetter ved hjælp af CSS i samme fil.

For et fuldt overblik, se Facets guide.