Añadiendo un producto al carrito con AJAX en Shopify

En este tutorial, agregaremos un producto al carrito de compas mediante AJAX y así poder crear una experiencia de usuario más fluida para los usuarios que visiten nuestra tienda de Shopify. 

ASEGÚRESE DE QUE JQUERY ESTÉ INSTALADO

Añadir a esta línea en el header de la sección del archivo theme.liquid.

<!-- layout/theme.liquid -->
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js' | script_tag }}

CONFIGURACIÓN: MARGEN, ESTILOS Y JQUERY

Margen

Primero necesitamos agregar el marcado inicial para el modal. Coloque el siguiente código en la parte superior de la plantilla product.liquid.

<!-- templates/product.liquid -->
<div class="modal hidden" id="download-modal"></div>
<div class="modal--overlay hidden"></div>

Estilos

.modal {
   max-width: 575px;
   background: white;
   border: 5px solid #111;
   padding: 50px 65px;
   position: fixed;
   z-index: 1000;
}
.modal .close {
   position: absolute;
   top: 10px;
   right: 20px;
   font-size: 20px;
   cursor: pointer;
}
.modal--overlay {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 100;
   background-color: rgba(0, 0, 0, 0.4);
}
.hidden {
   display: none;
}

jQuery

Aquí estamos creando algunas funciones de jquery para abrir, cerrar y centrar el modal. Coloca este código en scripts etiquetas en la cabeza de la sección del archivo theme.liquid.

Estas funciones se utilizarán más adelante en este tutorial.

function centerModal(){
   var modal = $('.modal.open');
   var mWidth = modal.outerWidth()
   var mHeight = modal.outerHeight();
   var width = $(window).width();
   var height = $(window).height();
   if((width % 1) != 0){
      width = Math.round(width)
   }
   if((height % 1) != 0){
      height = Math.round(height)
   }
   var topPos = (height / 2) - (mHeight / 2);
   var leftPos = (width / 2) - (mWidth / 2); 
   modal.css({top: topPos, left:leftPos})
}
//Abrimos el modal y lo mostramos
function openModal(){
   $('.modal').removeClass('hidden').addClass('open');
   $('.modal--overlay').removeClass('hidden').addClass('open');
   $('body').css('overflow', 'hidden');
   centerModal();
}

//Cerramos el modal y lo ocultamos
function closeModal(overlay){
   $(overlay).addClass('hidden').removeClass('open');
   $('.modal.open').addClass('hidden').removeClass('open');
   $('body').css('overflow', 'auto');
}

LA FORMA DEL PRODUCTO

En el archivo product.liquid, tiene un formulario con un envío. Modificaremos este formulario de dos formas.

1. Agregue un evento onclick al envío

Primero agregaremos un evento onclick para realizar la llamada ajax.

Modifique la entrada actual, algo similar a esto:

<input type="submit" name="add" value="Purchase" class="btn btn--purchase">

Agregando el evento onclick:

<input type="submit" name="add" value="Purchase" class="btn btn--purchase" onclick="addItem('add-to-cart'); return false; ">

Tenga en cuenta que hemos agregado una llamada de función a addItem con el argumento ‘add-to-cart’ .

Además, tenga en cuenta que hemos agregado return false; después de la llamada a la función. Esto es para evitar la acción normal del botón enviar, que es la página que redirige a la página del carrito.

2. Agrega una identificación al formulario.

A continuación, agregaremos una identificación al formulario. Esto debería coincidir con el argumento que colocamos en la llamada a la función addItem en el paso anterior.

La etiqueta de apertura del formulario debe verse similar a esto (aunque no en los comentarios)

<!--<form action="/cart/add" method="post" class="product-form" id="add-to-cart">-->

VISUALIZACIÓN DEL NÚMERO DE ARTÍCULOS EN EL CARRITO

Este tutorial asume que mostrará el número total de artículos en el carrito en el menú de navegación. En algún lugar de la barra de navegación, debería tener un enlace al carrito como este:

<a id="cart-number" href="/cart"></a>

Para los propósitos de este tutorial, necesitará tener el id=”cart-number”

Luego, justo dentro de la etiqueta de secuencia de comandos en la sección de encabezado , agregue el siguiente código:

var cartCount = {{ cart.item_count }};
$(document).ready(function(){   
{% if cart.item_count != 0 %}  
$('#cart-number').replaceWith("<a href="/cart" id="cart-number">View cart (" + cartCount + ")</a>");
{% endif %}
});

Aquí establecemos inmediatamente la cantidad de artículos en el carrito en el momento en que se carga la página. Estamos utilizando el # carrito de números para seleccionar la una etiqueta y reemplazar el contenido con el número actual si hay algún elemento.

HACIENDO LA LLAMADA AJAX

Todo hasta ahora ha sido preparación para el gran evento. Ahora estamos aquí, la llamada ajax. Se verá así:

function addItem(form_id) {
   $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: $('#'+form_id).serialize(),
      success: addToCartOk,
      error: addToCartFail
   });
}

Este código debe colocarse en las etiquetas del script en el archivo theme.liquid, justo debajo del código que agregamos en el paso anterior.

Función addToCartOk

Esta función aumenta cartCount en uno, agrega el producto (que viene del formulario) al carrito. Luego crea un pequeño mensaje sobre el producto y reemplaza cartCount en la página y abre el modal con el mensaje. Se agrega entre las etiquetas de script en theme.liquid

function addToCartOk(product) { 
   cartCount++; 
   $('.modal').html(product.title + ' was added to the cart!'); 
   $('#cart-number').replaceWith("<a href="/cart" id="cart-number">View cart (" + cartCount + ")</a>");
   openModal();
} 

Función addToCartFail

Esta función crea un pequeño mensaje sobre el producto que no está disponible y abre el modal con el mensaje. También se agrega entre las etiquetas de script en theme.liquid

function addToCartFail(obj, status) { 
   $('.modal').html('The product you are trying to add is out of stock.'); 
   openModal()
}

Cerrando el modal

Y finalmente, para cerrar el modal, esto permite al usuario hacer clic en cualquier lugar de la superposición modal. Este código debe estar en el área de preparación de documentos del javascript, ya que es un oyente.

$('.modal--overlay').on('click', function(){
   var overlay = $('.modal--overlay')
   closeModal(overlay)
})

TODO NUESTRO CODIGO JAVASCRIPT

Solo para evitar confusiones, proporcionaré todo el javascript aquí. Debe colocarse entre las etiquetas de script en la sección principal, que se encuentra en el archivo theme.liquid.

var cartCount = {{ cart.item_count }};

$(document).ready(function(){   
   {% if cart.item_count != 0 %}  
      $('#cart-number').replaceWith("<a href="/cart" id="cart-number">View cart (" + cartCount + ")</a>");
   {% endif %}

   $('.modal--overlay').on('click', function(){
      var overlay = $('.modal--overlay')
      closeModal(overlay)
    })
});

function addItem(form_id) {
   $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: $('#'+form_id).serialize(),
      success: addToCartOk,
      error: addToCartFail
    });
}

function addToCartOk(product) { 
   cartCount++; 
   $('.modal').html('<span class="close" id="close">✕</span>' + product.title + ' was added to the cart!'); 
   $('#cart-number').replaceWith("<a href="/cart" id="cart-number">View cart (" + cartCount + ")</a>");
   openModal();
} 

function addToCartFail(obj, status) { 
    $('.modal').html('<span class="close" id="close">✕</span> The product you are trying to add is out of stock.'); 
   openModal()
 } 

function centerModal(){
   var modal = $('.modal.open');
   var mWidth = modal.outerWidth()
   var mHeight = modal.outerHeight();
   var width = $(window).width();
   var height = $(window).height();
   if((width % 1) != 0){
      width = Math.round(width)
    }
   if((height % 1) != 0){
      height = Math.round(height)
   }
   var topPos = (height / 2) - (mHeight / 2);
   var leftPos = (width / 2) - (mWidth / 2);
   modal.css({top: topPos, left:leftPos})

 }

function openModal(){
   $('.modal').removeClass('hidden').addClass('open');
   $('.modal--overlay').removeClass('hidden').addClass('open');
   $('body').css('overflow', 'hidden');
   centerModal();
}

function closeModal(overlay){
   $(overlay).addClass('hidden').removeClass('open');
   $('.modal.open').addClass('hidden').removeClass('open');
   $('body').css('overflow', 'auto');
}

Espero les haya servido de algo esta breve información, si tienen dudas u otras maneras de hacerlo pueden mostrárnoslo en los comentarios, esto ayudara a qué todos crezcamos y resolvamos nuestros problemas de forma rápida y sencilla.

Saludos L. G. R.