Search

Tilføj kraftfuld søgefunktionalitet til din DanDomain-webshop. Clerk.io tilbyder to supplerende 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 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 Website #

1. I DanDomain Admin skal du 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, 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. Udskift selektoren i data-instant-search med class eller ID for 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 Website #

I DanDomain 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 DanDomain Admin skal du 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.

Facets #

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

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

For et komplet overblik, se Facets guide.