Clerk.io verwenden, um eine ganze Kategorieseite anzuzeigen

Sehen Sie, wie Sie die Logik “Bestseller in Kategorie” verwenden können, um eine ganze Kategorie mit Clerk.io zu rendern

WICHTIG

**Es ist wichtig zu beachten, dass das Ersetzen der Produkte Ihrer Kategorie in Ihrem Webshop technisches Fachwissen erfordert, und wir empfehlen Ihnen, sich an Ihren eigenen Entwickler zu wenden.

**Bitte beachten Sie, dass unsere internen Entwickler bei Clerk.io nicht in der Lage sind, diese Aufgabe für Sie zu übernehmen.

Clerk.io’s Bestseller in Kategorien Logik unterstützt sowohl die Anzeige von Facetten ( Filter ) als auch die Sortierung von Produkten .

Das bedeutet, dass sie für die Darstellung einer ganzen Kategorieseite verwendet werden kann.

Ersetzen Sie Ihre Kategorieprodukte durch Clerk-Ergebnisse:

Um dies zu tun, müssen Sie Folgendes tun:

  • Erstellen Sie ein Grid Design in Ihrem my.clerk.io Backend, um Produkte anzuzeigen

  • Blenden Sie Ihre bestehenden Produkte in Kategorien aus / deaktivieren Sie sie

  • Fügen Sie einen Clerk.io Embedcode ein, um Produkte auf den Kategorieseiten anzuzeigen, indem Sie dynamisch die ID der Kategorie einfügen, genau wie bei einem Empfehlungsbanner.

Ein einfaches Beispiel für einen Embedcode, der eine Kategorieseite mit Facetten generiert, die nach dem niedrigsten Preis geordnet ist, sehen Sie hier:

{% raw %}<div id="clerk-category-filters"></div>
<ul id="clerk-category-results"></ul>

<span
    id="clerk-category"
    class="clerk"
    data-template="@category-page-results"
    data-target="#clerk-category-results"
    data-category="{{ collection.id }}"

    data-facets-target="#clerk-category-filters"
    data-facets-attributes='["price","brand"]'
    data-facets-titles='{"price":"Price","brand":"Manufacturer"}'
    data-orderby="price"
    data-order="asc">
</span>
{% endraw %}

Wenn Sie Shopify nicht verwenden, müssen Sie {{ collection.id }} durch einen Shortcode ersetzen, der Ihre Kategorie-ID einfügt.

Einstellen eines Fallbacks

Da Clerk.io danach tatsächlich die meisten Produkte im Webshop anzeigt, ist es wichtig, eine Fallback-Option für den Fall zu haben, dass Clerk.io nicht reagiert.

Obwohl dies sehr selten vorkommt, wie unsere Statusseite **belegt, **kann man nie zu sicher sein.

Eine einfache Möglichkeit, dies zu tun, ist im Frontend:

  • Verwenden Sie display:none; bei Ihren bestehenden Kategorie-Produkten

  • Verwenden Sie ein Skript, das ein [Ereignis] (https://docs.clerk.io/docs/clerkjs-events) verwendet, um zu bestätigen, dass Clerk Produkte zurückgegeben hat.

  • Verwendung der Methode .show() von jQuery, um vorhandene Produkte anzuzeigen, wenn Clerk nicht antwortet.

Dieses Skript prüft, ob der Verkäufer innerhalb von 750ms geantwortet hat und zeigt, falls nicht, die vorhandenen Produkte an:

<script type="text/javascript">
      var clerk_response = false;
      var category_page_selector = ".category-container"

      Clerk('on','response', function(data,content){
        if (content.result.length > 0) {
            clerk_response = true;
        }
      });

      setTimeout(
        function(){
          if (clerk_response == false) {
             document.querySelector(category_page_selector).style.display = '';
          }
        }
      ,750)
</script>

Ersetzen Sie einfach Ihren .category-container durch die Klasse oder ID Ihres Produkt-Container-HTML.

Vollständiges Shopify-Beispiel

Hier ist ein Beispiel, wie Sie dies in Shopify erreichen können.

1. Gehen Sie in [my.clerk.io] (http://my.clerk.io) zu Suche -> Designs -> Neues Design (Sie müssen ein Grid-Design ähnlich einer Suchseite für Ihre Kategorien erstellen)

2. Wählen Sie aus den Optionen Suchseite, geben Sie dem Design einen guten Namen, z.B. “Kategorieseitenergebnisse” und klicken Sie auf Design erstellen:

3. Auf dem nächsten Bildschirm können Sie die Ergebnisseite mit dem Design-Editor nach Ihren Wünschen gestalten. Wenn Sie fertig sind, klicken Sie auf Design speichern:.

4. Gehen Sie zu Empfehlungen -> Inhalt -> Neuer Inhalt:

5. Nennen Sie Ihren Inhalt “Kategorieseitenergebnisse “ und klicken Sie auf Inhalt erstellen:

6. Wählen Sie unter Produktlogik auswählen, Bestseller in Kategorie:

7. Wählen Sie unter Design auswählen eine gute Anzahl von Produkten, die pro Seite angezeigt werden sollen, und wählen Sie das von Ihnen erstellte Design.

8. Klicken Sie auf Inhalt aktualisieren:.

9. Gehen Sie nun in das Backend Ihres Webshops und suchen Sie die Datei, die Ihre Kategorieseiten erzeugt. In Shopify ist dies oft die Datei:

Online-Shop -> Themes -> Aktionen -> Code bearbeiten -> Abschnitte -> collection-template.liquid:

10. Suchen Sie den Code, der alle Produkte auf Ihrer Kategorieseite enthält. Sie können das Inspektionswerkzeug Ihres Browsers verwenden, um diesen Code auf jeder Ihrer Kategorieseiten zu finden:

11. Es gibt mehrere Möglichkeiten, die vorhandenen Produkte auszublenden, aber ein einfacher Weg ist, einfach style=“display:none;” zur Container-Klasse hinzuzufügen:

12. Nun müssen Sie die Clerk.io Ergebnisse einbetten. Um dies zu vereinfachen, haben wir den folgenden Embedcode vorbereitet, der bereits vorgestylte Facetten enthält. Er zeigt Facetten auf der Basis von Preis und Lieferant an, aber das kann erweitert werden:

{% raw %}<div class="page-width" id="Collection">

    <div id="clerk-show-facets">Show/Hide filters</div>
    <div id="clerk-facets-container">
      <div id="clerk-category-filters"></div>
    </div>

    <span
        id="clerk-category"
        class="clerk"
        data-template="@category-page-results"
        data-target="#clerk-category-results"
        data-category="{{ collection.id }}"
        data-facets-target="#clerk-category-filters"
        data-facets-attributes='["price","vendor"]'
        data-facets-titles='{"price":"Price","vendor":"Manufacturer"}'>
    </span>

    <ul id="clerk-category-results"></ul>

    <script>
      document.querySelector("#clerk-show-facets").addEventListener('click', function(event) {
        el = document.querySelector("#clerk-facets-container");
        if(el.style.display == '' || el.style.display == 'block'){
          el.style.display = 'none';
        } else {
          el.style.display = '';
        }
      });
    </script>
    <style>
      #clerk-show-facets {
          width: 50%;
          height: 40px;
          margin: 0px auto 20px auto;
          background-color: #2cae39;
          color: white;
          text-align: center;
          border-radius: 3px;
          line-height: 40px;
        }

      #clerk-category-results {
          display: inline-block;
          width: 100%;
      }

      #load-more-results {
          margin: 10px 10px 5px 10px;
          padding: 10px 20px;
          border-radius: 3px;
          background-color: #E8B22F !important;
          color: white;
          line-height: 1em;
          cursor: pointer;
      }

      #clerk-category-load-more-button {
          display: none;
      }

      .clerk-button-container {
          text-align: center;
      }

      .clerk-product {
          box-sizing: border-box;

          float: left;

          width: calc(25% - 10px);

          margin: 5px;
          padding: 5px;

          text-align: center;
          line-height: 1.2em;

          border: 1px solid #eee;
          border-radius: 3px;
      }

      .clerk-product img {
          max-width: 100%;
          max-height: 180px;

          margin: 5px 10px;
      }

      .clerk-product-name {
          overflow: hidden;
          color: black;
          height: 2.3em;

          margin: 5px 10px;
      }

      .clerk-price-wrapper {
          height: 20px !important;
          margin-bottom: 10px;
      }

      .clerk-new-price{
          color: black;
      }

      .clerk-product-price {
          margin: 5px;
          color: black;
          font-weight: bold;
      }

      .clerk-old-price {
          font-size: 0.8em;
          color: black;
      }

      .clerk-cta-button, .button {
          margin: 10px 10px 5px 10px;

          padding: 10px 20px;

          border-radius: 3px;

          background-color: #E8B22F !important;
          color: white !important;

          line-height: 1em;
      }

      .clerk-slider {
          list-style: none;

          width: 100%;

          margin: 10px 0;
          padding: 0;
      }

      .clerk-product > a, .clerk-product > a:hover, .clerk-product > a:visited {
          display: block;

          color: inherit;
          text-decoration: inherit;
      }

      @media only screen and (max-width : 800px) {
            .clerk-product {
                width: calc(50% - 10px);
            }
            #clerk-category-filters {
                width: 100%;
                float: left;
            }
            #clerk-facets-container {
                display: none;
            }
      }

      @media only screen and (min-width : 800px) {
          #clerk-category-results {
              width: 78%;
              float: right;
          }
          #clerk-category-filters {
              width: 20%;
              float: left;
          }
          #clerk-show-facets {
              display: none;
          }
      }
    </style>
 </div>
  <script type="text/javascript">
        var clerk_response = false;
      var category_page_selector = ".category-container"

      Clerk('on','response', function(data,content){
        if (content.result.length > 0) {
            clerk_response = true;
        }
      });

      setTimeout(
        function(){
          if (clerk_response == false) {
             document.querySelector(category_page_selector).style.display = '';
          }
        }
      ,750)
  </script>
{% endraw %}

13. Fügen Sie den Embedcode oberhalb des Containers ein, den Sie gerade ausgeblendet haben:

14. Klicken Sie auf Speichern:

15. Ihre Kategorieergebnisse werden nun von Clerk.io: angezeigt.

Nach diesem Schritt können Sie die Seiten natürlich mit Designs. beliebig gestalten.