Comprobar los diferentes pasos del checkout de Shopify

Como propietario o desarrollador de un tienda con Shopify, es posible necesites retocar o añadir alguna funcionalidad de los diferentes pasos del proceso de compra.

Antes de nada, quiero puntualizar que con un plan de Shopify Básico no puedes, necesitas Shopify Plus. Ya que es este último plan el que te permite modificar el archivo /layout/checkout.liquid de tu plantilla.

En este archivo de tu plantilla, y gracias a JavaScript, puedes diferenciar los pasos del proceso de compra y añadir funcionalidades.

Los pasos del checkout son:

• Información de contacto (contact_information)
• Métodos de envío (shipping_method)
• Métodos de pago (payment_method)
• Resumen del pedido (review)
• Gracias (processing)

Con Javascript se puede meter este condicional:

document.addEventListener('DOMContentLoaded', function() {
    var paso = Shopify.Checkout.step;
    {% if paso == "contact_information" %}
        // Este es el primer paso. Donde el cliente aporta sus datos
    {% elsif paso == "shipping_method" %}
        // Este es el segundo paso, donde se selecciona el método de envío
    {% elseif paso ==  "payment_method" %}
        // Este es el tercer paso, donde se selecciona el método de pago
  {% elseif paso ==  "review" %}
        // Este es el cuarto paso, donde aparece un resumen del pedido
  {% elseif paso ==  "processing" %}
        // Este es el quinto paso, donde 
  {% else %}
        // Si no es ninguno de los casos anteriores
  {% endif %}
})

Espero que os pueda ayudar con la tarea de personalizar Shopify. 😉