Identifizieren und Hinzufügen von Add-To-Cart Buttons zu Ihren Clerk.io Produkten

Fügen Sie eine “In den Warenkorb”-Schaltfläche zu Ihrem Clerk.io Such- und Empfehlungsinhalt hinzu.

Um eine Add-to-Cart-Schaltfläche in Ihren Clerk.io-Empfehlungen zu implementieren, identifizieren Sie zunächst die Add-to-Cart-Schaltfläche in Ihren bestehenden nativen Produkten in Ihrem Webshop.

Untersuchen Sie die Add-to-cart-Schaltfläche, um den dazugehörigen Code zu identifizieren. Der Code beginnt mit einem < div> mit einer Klasse, in diesem Beispiel “button-container”. Kopieren Sie ihn bis zum abschließenden

.

Dies wird wichtig sein, um in Ihren Empfehlungen Design im Clerk.io Backend zu referenzieren.

Kopieren Sie diesen Code und fügen Sie ihn in Ihr Design ein. Innerhalb dieses Codes:

  • Sie müssen die Produktmenge und die Produkt-ID innerhalb des Codes identifizieren, einschließlich des Links zum Warenkorb, des Wertes der Produkt-ID und der Platzierung der Datenqualitätswerte.

    • In diesem Beispiel erscheint die Menge nach /cart?add= im Link, und die Produkt-ID steht nach &id_product=.

    • Die Produkt-ID wird auch unter data-id-product referenziert und die Produktmenge unter data-minimal_quantity im obigen Beispiel.

  • Diese Werte werden durch Ihre liquid Platzhalter im Design ersetzt (z.B.

    {{ product.id }} und {{ product.qty }}, so dass die entsprechenden Produkte und Mengen referenziert werden, sobald sie in Ihrem Webshop live sind.

  • Geben Sie Ihrem Clerk-Design einen neuen

    -Klassennamen, wie z. B. “clerk-button-container”, um es von Ihren nativen Shop-Add-to-Cart-Schaltflächen zu unterscheiden.

In diesem Beispiel würde der Design-Code dann lauten:

<div class="clerk-button-container">

 <a class="button ajax_add_to_cart_button btn btn-default" style="position: relative;" href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" rel="nofollow" title="Add to Cart" data-id-product-attribute="0" data-id-product="{{ product.id }}" data-minimal_quantity="{{ product.qty }}">

 <span style="color: orange !important"><i class="icon-shopping-cart" aria-hidden="true"></i></span></a>

</div>

Fügen Sie den Code in den HTML-Code Ihres Entwurfs ein:

Sie können Ihr Design mit CSS unterhalb des HTML-Codes anpassen.