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 tus recomendaciones de Clerk.io, primero identifica el botón add-to-cart en los productos originalmente existentes en tu tienda web.

! [] (screenshot_689452233.png)

Inspecciona el botón add-to-cart para identificar el código asociado a él. En este ejemplo, el código empezará con un < _div> _ con la clase «button-container». Copia hasta el cierre.

Esto es importante para añadir la referencia en tu diseño de recomendaciones, en el backend de Clerk.io.

! [alt=ejemplo de agregar al carrito] (screenshot_1229555095.png)

Copia y pega este código en tu Diseño, dentro de ese código:

  • Deberás identificar la cantidad del producto y el product ID en el código, incluyendo el enlace al carrito, el valor del product ID y la ubicación de cualquier valor relevante.

  • En este ejemplo, la cantidad aparece después de /cart? add= en el enlace y el identificador del producto está después de &id\ _product=.

  • En el ejemplo anterior, también se hace referencia al Product ID en data-id-product y a la cantidad del producto en data-minimal\ _quantity.

  • Estos valores se reemplazarán con tus liquid placeholders en el diseño (como

{{ product.id }} y {{ product.qty }}, para que hagan referencia a los productos y cantidades apropiados una vez que estén disponibles en su tienda web.

  • Asigne a su diseño de Clerk un nuevo nombre de clase
    , como " clerk-button-container" para diferenciarlo de los botones de agregar al carrito de su tienda nativa.

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

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

Pega tu código en el HTML de tu diseño:

! [ejemplo de añadir al carrito] (screenshot_1158934295.png)

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