Activo de JavaScript de estado de pedido

Precaución

Este es un tutorial avanzado y Shopify no presta el soporte. Es necesario conocer lenguajes de diseño web, como HTML, CSS, JavaScript y Liquid. Te recomendamos contratar a un Shopify Partner si no te sientes capaz de continuar con el siguiente tutorial.

Puedes agregar contenido personalizado a la página de estado de tu pedido con el activo JavaScript de estado del pedido Shopify.Checkout.OrderStatus, como por ejemplo en notas sobre productos específicos, instrucciones para métodos de envío individuales, enlaces de descarga para productos digitales.

Para agregar este recurso de Javascript desde el panel de control de Shopify, ve a Configuración > Pago. Desplázate hacia abajo a la sección Página de estado del pedido y luego agrega el activo Javascript al cuadro Scripts adicionales.

También se puede acceder a este activo de JavaScript a través de ScriptTag.

Cómo funciona

Shopify.Checkout.OrderStatus contiene una función para generar contenido nuevo:

addContentBox(params)

Esta función agrega un cuadro de contenido donde cada parámetro pasado a la función se representa como una fila separada.

HTML5 es compatible dentro de la función y puedes usar liquid fuera de la función.

Ejemplo

Puedes agregar contenido cuando se haya utilizado un método de envío en particular. Este código agrega el horario de atención de la tienda a la página de estado del pedido cuando un cliente elige el método de envío de retiro en la tienda.

<script>
  {% if checkout.shipping_method.title == 'Pick-up at the store' %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Pick-up in store</h2>',
     '<p>We are open everyday from 9am to 5pm.</p>'
    )
  {% endif %}
</script>