Identificar y añadir botones Add-To-Cart a sus productos Clerk.io

Añade un botón “Añadir al carrito” a tu contenido de Búsqueda y Recomendaciones de Clerk.io.

Para implementar un botón de añadir al carrito en sus Recomendaciones Clerk.io, primero identifique el botón de añadir al carrito en sus productos nativos existentes dentro de su tienda web.

Inspeccione el botón de añadir al carrito para identificar el código asociado a él. El código comenzará con un < div> con una clase, “botón-contenedor” en este ejemplo. Copia hasta el

de cierre.

Esto será importante para hacer referencia en sus Recomendaciones Diseño en el backend de Clerk.io.

Copia y pega este código en tu Diseño. Dentro de ese código:

  • Tendrás que identificar la Cantidad del producto y el Identificador del producto dentro del código, incluyendo el enlace al carrito, el valor del identificador del producto y las colocaciones del valor de calidad de los datos.

    • En este ejemplo, la cantidad aparece después de /cart?add= en el enlace, y el ID del producto después de &id_product=.

    • También se hace referencia al ID del producto en data-id-product y a la cantidad del producto en data-minimal_quantity en el ejemplo anterior.

  • Estos valores se sustituirán por sus marcadores de posición liquid en el diseño (por ejemplo

    {{ product.id }} y {{ product.qty }}, para que se haga referencia a los productos y cantidades adecuados una vez que estén activos en su tienda online.

  • Dale a tu diseño Clerk un nuevo nombre de clase

    , como “clerk-button-container” para diferenciarlo de los botones de añadir al carrito nativos de tu tienda.

En este ejemplo, el código de diseño sería entonces:

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

Pegue su código en el HTML de su Diseño:

Puedes ajustar tu Diseño usando CSS debajo del HTML.