Search

Tilføj kraftfuld søgefunktionalitet til din SmartWeb-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 kodet 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 oprettede.
6. Klik på Save.

Tilføj til Website #

1. I SmartWeb Admin, gå til Online Store > Design > Aktive designs > Rediger filer > partials.
2. Åbn filen body.tpl.
3. Indsæt følgende kode og klik 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 selektoren i data-instant-search med class eller ID for dit inputfelt.

Search Page #

Search Page giver en fuldside-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 kodet 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 oprettede.
6. Klik på Save.

Tilføj til Website #

I SmartWeb 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 SmartWeb 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, tæt på 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. Helt nederst i filen, indsæt 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 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 en komplet oversigt, se Facets guide.