Identificazione e aggiunta di pulsanti "Aggiungi al carrello" ai prodotti Clerk.io

Aggiungete un pulsante “Aggiungi al carrello” al vostro contenuto di ricerca e raccomandazioni di Clerk.io.

Per implementare un pulsante “add-to-cart” all’interno delle vostre raccomandazioni Clerk.io, identificate innanzitutto il pulsante “add-to-cart” nei vostri prodotti nativi esistenti all’interno del vostro webstore.

Ispezionare il pulsante aggiungi al carrello per identificare il codice ad esso associato. Il codice inizierà con un < div> con una classe, “button-container” in questo esempio. Copiare fino alla chiusura.

Questo sarà importante per fare riferimento alle Raccomandazioni Design nel backend di Clerk.io.

alt=addtocartexample

Copiate e incollate questo codice nel vostro Design. All’interno del codice:

  • Dovrete identificare la Quantità del prodotto e l’ID del prodotto all’interno del codice, compreso il link al carrello, il valore dell’ID del prodotto e il posizionamento del valore della qualità dei dati.

    • In questo esempio, la quantità appare dopo /cart?add= nel link e l’ID prodotto è dopo &id_product=.

    • Nell’esempio precedente, l’ID del prodotto è anche indicato con data-id-product e la quantità del prodotto con data-minimal_quantity.

  • Questi valori saranno sostituiti con i segnaposto liquidi nel progetto (come ad esempio

    {{ product.id }} e {{ product.qty }}, in modo che i prodotti e le quantità appropriate siano referenziati una volta in funzione sul vostro negozio web.

  • Assegnare al design del commesso un nuovo nome di classe

    , come “clerk-button-container”, per differenziarlo dai pulsanti aggiuntivi del negozio.

In questo esempio, il codice del progetto sarebbe:

<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>

Incollare il codice nell’HTML del progetto:

addtocartexample

È possibile modificare il progetto utilizzando i CSS sotto l’HTML.