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 }}&id_product={{ product.id }}&" 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.