Advertisement
  1. Code
  2. Shopify

Trabajando con Productos de Shopify: Un Carrito de Compras basado en Ajax

Scroll to top
Read Time: 7 min

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Hacer tu tienda Shopify más intuitiva es una magnífica forma de convertir más ventas y obtener un conteo de artículos más largo por checkout. Combinado con visualizar tus productos en una lista sencilla, podemos hacer la experiencia de añadir al carrito tan simple como una operación de un-click, sin necesidad de navegar a la página de listado de productos.

Ésta modificación puede funcionar en la visualización de una lista o grilla y realmente solo necesita unos cuantos cambios para ponerla a trabajar, además es fácilmente extensible. Así que ¡comencemos y maximicemos la monetización de tu tienda!

La Lista de Collecciones Finalizada

What you will be creating - the collection view with add to cart ajax buttonsWhat you will be creating - the collection view with add to cart ajax buttonsWhat you will be creating - the collection view with add to cart ajax buttons

Aquí está un ejemplo de lo que puedes crear con ésta modificación. Tenemos una tienda que vende monedas conmemorativas, y para facilidad de uso el usuario puede seleccionar la cantidad de cada moneda y añadirlas al carrito sin necesidad de abandonar la página.

Ésto se logra vía una llamada AJAX escrita en JavaScript que envía una solicitud a la API de Shopify. Esencialmente, el navegador puede enviar el formulario vía una petición en segundo plano y mantener al usuario en la página.

Modificando el Tema

Para hacer ésto, necesitamos modificar el tema de Shopify, así que ingresa a tu panel de administrador y ve a la Tienda Online y luego a la sección de Temas (o para un atajo, presiona G W T)

Click on the to Edit HTMLCSSClick on the to Edit HTMLCSSClick on the to Edit HTMLCSS

Ahora haz click en el botón ... en tu tema y elige Editar HMTL/CSS. Dentro de ésta sección, mira a la izquierda y haz click en el directorio snippets y luego agrega un nuevo snippet.

Create your snippet ajaxify-cartCreate your snippet ajaxify-cartCreate your snippet ajaxify-cart

Nombra tu snippet ajaxify-cart y haz click en Crear snippet.

Ahora abre éste archivo, selecciona todos, y copia pega el contenido en el snippet ajaxify-cart.liquid que recién ha sido creado.

Adding Ajaxify CartAdding Ajaxify CartAdding Ajaxify Cart

Asegúrate de Guardar tus cambios antes de salir. Si quisieras cambiar el teto del ajaxify cart, puedes mirar cambiando los strings en éste archivo como addToCartBtnLabel. Para más información sobre la configuración, lee el archivo readme para el ajaxify cart.

Ahora, dentro del directorio de tu maquetado, haz click en el archivo theme.liquid. Encuentra la etiqueta de cierre </body> en el editor y asegúrate de añadir lo siguiente en cualquier parte antes de él:

1
{% include 'ajaxify-cart' %}

Ésto incluirá el snippet ajaxify-cart que acabas de añadir a todas las páginas para que el código esté disponible cuando lo llamemos en el siguiente paso.

Example of how to add the ajaxify-cart tagExample of how to add the ajaxify-cart tagExample of how to add the ajaxify-cart tag

Puedes incluir el ajaxify-cart y otros snippets también dentro de la etiqueta <body> </body> como se muestra arriba.

Asgúrate de haber guardado tu archivo theme.liquid antes de salir de la ventana.

Agregando Cantidad

Ahora que tienes las bases para el carrito basado en ajax puestas en su lugar, podemos agregar algunas modificaciones más para utilizar más prestaciones de la API de Shopify.

Agreguemos un campo de cantidad al formulario al modificar el tema del listado de productos. Observa los archivos del snippet de tu tema para encontrar el formulario para agregar al carrito; puedes modificarlo como se muestra abajo:

1
<form method="post" action="/cart/add">
2
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
3
    <label for="quantity">Qty: </label>
4
  <input min="1" type="number" id="quantity" name="quantity" value="1" />
5
    <input type="submit" value="Add to cart" class="btn" />
6
</form>

Ahora guarda el archivo y echa un vistazo al navegdor, y también tendrás un campo de cantidad en tu formulario.

Probándolo

Visita tu tienda y ve a cualquier producto, y si todo ha ido como estaba planeado, el botón de agregar a carrito con el campo de cantidad ahora agregará al carrito sin actualizar la página.

Adding a product to the cart without refreshing the pageAdding a product to the cart without refreshing the pageAdding a product to the cart without refreshing the page

Si ésto no está funcionando, por favor verifica los pasos previos y observa la consola en las herramientas para desarrolladores de tu navegador, par ver si hay cualquier error reportado.

Visualiza Tus Artículos en una Lista

Para visualizar tu colección en una lista, necesitaremos algo de CSS para hacer que ello ocurra. Modifica el archivo css de tu tema y agrega lo siguiente para lograr ésto.

Nota: Ten en mente que algunos temas podrían visualizarse de manera diferente al tema que usamos, que es el tema Pacific, pero para adaptar éste conocimiento a tu tema, percátate de que el principio básico es agregar un float:left, combinado con la configuración de la anchura.

1
 .product-list-item-title { 
2
     font-size: 16px;
3
     line-height: 22px;
4
     margin: 5px 0 0; 
5
     float:left; 
6
     width: 50%; }  
7
  .product-list-item-price {
8
      float:left; 
9
      width: 10%; 
10
      margin-top:5px}
11
  .product-list-item-details form { 
12
      float:left; 
13
      width: 30%; 
14
      }

Para hacer que ésto  funcione de manera responsiva en dispositivos móviles y computadoras de escritorio, necesitarás usar media queries como las siguientes para despejar el float:

1
@media (min-width: 1020px) {
2
  .product-list-item-title-list { font-size: 16px;
3
  line-height: 22px;
4
  margin: 5px 0 0; float:left; width: 50%; color: #000}  
5
  .product-list-item-price-list {float:left; width: 10%; margin-top:5px}
6
  .product-list-item-details-list form { float:left; width: 30%; }
7
}
8
9
@media only screen 
10
  and (min-device-width: 320px) 
11
  and (max-device-width: 480px)
12
  and (-webkit-min-device-pixel-ratio: 2) {
13
    .product-list-item-title-list {  font-size: 16px;
14
  line-height: 22px;
15
  margin: 20px 0 0; float: none;}
16
    .product-list-item {  }
17
    .product-list-item-price-list  { float: none;}
18
    .product-list-item-details-list form { float:none; padding-left:90px; }
19
}

Hacer que Agregar al Carrito Únicamente Se Visualice para Ciertos Criterios

Digamos, por ejemplo, que solo quieres mostrar los botones dentro de las colecciones, no en tu página de inicio. Ésto puede hacerse fácilmente al agregar un condicional a tu archivo de la plantilla liquid.

Abre tu plantilla y agrega el siguiente condicional donde quisieras que apareciera el botón agregar al carrito, por ejemplo dentro del maquetado de tu lista de productos donde agregamos la cantidad. Agrega el condicional {% if collection.title %} como en el siguiente código:

1
{% if collection.title %}
2
    <form method="post" action="/cart/add">
3
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
4
        <label for="quantity">Qty: </label>
5
		<input min="1" type="number" id="quantity"name="quantity" value="1" />
6
    	<input type="submit" value="Add to cart" class="btn" />
7
    </form> 
8
{% endif %}

Puedes espeificar cualquier criterio que gustes en el lugar del {% if collection.title %} si quisieras revisar otro valor como si el producto está en inventario o qué categoria o etiquetas tiene aplicadas.

Finalizando la Visualización

Puedes cambiar el CSS de tu tema para modificar la visualización del carrito basado en ajax y modificarlo a tu gusto. Algunas clases útiles para modificar son .cart-count y #cart-count a:first.

Para especificar el valor agregado al carrito, también puedes modificar el enlace para ver el carrito sin las clases #gocart p a, #cart, y .checkout em.

Para alterar el conteo total de artículos, mira la clase .item-count.

Adicionalmente, al final del snippet ajaxify-cart.liquid están los siguientes colores que puedes editar.

1
.ajaxified-cart-feedback {
2
  display: block;
3
  line-height: 36px;
4
  font-size: 90%;
5
  vertical-align: middle;
6
}
7
.ajaxified-cart-feedback.success { 
8
  color: #3D9970;
9
}
10
.ajaxified-cart-feedback.error { 
11
  color: #FF4136; 
12
} 
13
.ajaxified-cart-feedback a {
14
  border-bottom: 1px solid;
15
}

Cambia la alineación, los márgenes y el padding para combinar tu tema y obtener la mejor vsualización que puedas para tus usuarios finales.

Soporte Responsivo para Dispositivos Móviles

Recuerda verificar las resoluciones de los dispositivos móviles para ver cómo el carrito basado en ajax está funcionando. Podrías necesitar agregar algunas media queries para que se viusalicen agradablemente en todas las pantallas.

Como se mencionó previamente, puedes usar los siguientes condicionales de media query para verificar ésto:

1
@media (min-width: 1020px) {
2
 /* Classes go here for wide screen */
3
}
4
5
@media only screen 
6
  and (min-device-width: 320px) 
7
  and (max-device-width: 480px)
8
  and (-webkit-min-device-pixel-ratio: 2) {
9
    /* Classes go here for mobile devices */
10
}

Conclusión

Así que ahora tienes un componente de carritos de compras basado en ajax en tu tienda, lo que significa que el flujo de trabajo de comprar se agiliza para el usuario final. Ojalá, ésto se traduzca en más conversiones. En combinación con visualizar tus productos en una lista con el establecimiento de la cantidad, la probabilidad para una orden más grande se ha incrementado un poco.

Para sitios que ofrecen a menudo consumibles comprados y ess que tratan de ofrecer una amplia gama de compras múltiples en un checkout, el carro basado en ajax funciona muy bien.

Más adelante, podrías querer agregar más elementos ajax a tu sitio. Si es así, tu primer punto de referencia sería la API de Shopify-y poniendo a un lado la fuente proporcionada para el carrito de compras (ajaxify-cart.liquid) para ver en más detalle como se hacen las llamadas.

Una básica comprensión de JavaScript y AJAX se requeriría para hacer ésto, pero no te preocupes si eres novato-realmente algo muy básico.

Todo el proceso para una llamada AJAX puede encontrarse en la sección $.ajax del archivo, y más información sobre cómo funciona ésto puede encontrarse en el sitio web de jQuery.

¡Espero que disfrutes modificando tus tiendas e incrementes tus ventas con éstos nuevos conceptos!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.