Saltar al contenido

Categoría: Shopify

Mi análisis sobre Go Subscriptions (Shopify)

Estuve probando Go Subscriptions una aplicación embebida de Shopify que te permite agregar suscripciones a tu tienda. Esto te permite definir productos o servicios que pueden venderse cada cierto tiempo de forma automática. Así tus clientes no tienen que regresar a la tienda para volver a adquirirlos sino que se al finalizar el período se vuelve a cobrar y se envía de nuevo el producto.

Instalación

La instalación depende del tipo de tema que tengas. Go Subscriptions tiene compatibilidad con Online Themes 2.0. Así que con instalar la aplicación y activar el bloque en la configuración del tema estará la listo para usarla Si tienes la versión 1.0. Te aparece una serie de instrucciones sobre donde debes pegar el código de los botones para enlaces o mostrar la información de suscripciones. Tal vez puede ser un poco tedioso pero es lo normal para este tipo de temas.

Para ambos casos, la misma aplicación te informará los pasos requeridos para instalar la aplicación en tu tienda. Si no, puedes usar el soporte técnico para requerir una instalación asistida pero no fue necesario en mi caso.

Administrador de Go Subscriptions

Como administrador puedes hacer todas las operaciones de una orden: pausar, reanudar, cambiar fechas, productos, ítemes, etc. Pero también puedes realizar configuraciones como definir el contenido de los correos, definir las suscripciones: períodos, descuentos, envíos, etc.

Para empezar a usar Go Subscriptions, primordial es crear planes de pago que poseen un período, descuentos, los productos a los que pertenece, entre otros. Luego de crearlos aparecerán en el frontend y el usuario puede seleccionar el producto como suscripción. Posteriormente a medida que van colocando suscripciones, aparecerán en el listado de orden donde puedes controlarlas.

También con la aplicación puedes activar correos con recordatorios de renovación de la suscripción o información adicional. Otras funciones adicionales son controlar la veces que una suscripción debe ocurrir para ser cancelada, el número de re-intentos antes de pausar le suscripción entre otros.

La interfaz es sencilla de usar y con la misma apariencia que la mayoría de las aplicaciones de Shopify. Tiene soporte para español y funciona en dispositivos móviles.

Administrador del Frontend

El administrador para los clientes de la tienda, permite a los usuarios ver las suscripciones realizadas y ejecutar acciones sobre ellas. Las acciones permiten pausar, reanudar, omitir la siguiente orden. Ademas poder cambiar el método de pago, cancelar toda la orden y hacer cobros manuales.

La interfaz es muy sencilla y adaptable a cualquier plantilla que uses. El HTML es sencillo y con pocas reglas de CSS por defecto. Así que para personalizarlo a tu gusto, con un poco de CSS adicionales puedes adaptarlo sin problemas.

Este administrador le da libertad a tus clientes de controlar sus suscripciones.

Conclusión

Si necesitas aumentar tus ventas ofreciendo suscripciones, te recomiendo usar Go Subscriptions. Es una aplicación una aplicación sencilla pero hace todo lo que necesitas. El equipo de soporte responde rápidamente y siempre está dispuesto a ayudarte.

Deja un comentario

Cómo crear un menú de navegación multi idioma en Shopify

Si creas un aplicación embebida en Shopify, tienes la posibilidad de crear un menú de navegación multi idioma para acceder a las distintas partes de tu aplicación, en el idioma establecido para la cuenta del administrador.

El menú de navegación de una aplicación embebida

Normalmente éste menú lo puedes definir en la configuración de la aplicación. Y se creará automáticamente al momento de cargar la página. Pero posee la limitación de solo ser compatible con un solo idioma, entonces, si tienes mas ese menú va a estar siempre en el mismo idioma.

Crear el menú desde React con App-Bridge

Para solventar esto podemos usar el componente NavigationMenu de App-Bridge. Que no es para crear menús adicionales, sino acceder a el mismo que mostré en el párrafo anterior y se crea antes de renderizar el resto de la aplicación. Con App-Bridge le decimos a Shopify que vamos a crear un menú y le pasamos la etiqueta y dirección de cada sección.

Crear un componente para definir las rutas

Para la creación del menú de navegación multi idioma, necesitamos definir el texto y el enlace de cada entrada del menú con Applink, pues éste es el tipo de dato que acepta NavigationMenu.

Entoces simplemente podemos hacer un arreglo con la traducción del texto (en este caso uso react-i18n de Shopify) y el enlace. Posteriormente recorremos cada posición del arreglo y generamos el AppLink para enviarlo a la aplicación.

import { AppLink } from '@shopify/app-bridge/actions';

const menuEntries = (i18n) => ([
  {
    label: i18n.translate('Menu.dashboard'),
    destination: '/dashboard',
  },
  {
    label: i18n.translate('Menu.settings'),
    destination: '/settings',
  },
]);

const menuItems = (app, i18n) => {
  const items = [];
  const entries = menuEntries(i18n);

  let active;

  entries.forEach((entry) => {
    const menuLink = AppLink.create(app, entry);
    items.push(menuLink);

    if (window.location.pathname.includes(entry.destination)) {
      active = menuLink;
    }
  });

  return { items, active };
};

export { menuItems };

Cargar el componente en la aplicación

Una vez que tengamos un componente que devuelva las entradas del menú traducidas y en formato AppLink. Podemos pasarlas al componente NavigationMenu utilizando la función create().

Primero importamos el componente realizado en el paso anterior:

import { menuItems } from './NavMenu';

Luego simplemente usamos el hook useAppBridge() para obtener la instacia de la aplicación embebida. Guardamos los enlaces en una variable y posteriormente se lo pasamos como argumentos a NavigationMenu para que cree el menú.

const app = useAppBridge();
const menuOptions = menuItems(app, i18n);

NavigationMenu.create(app, menuOptions);

¡Y listo! Ya tendrás tu menú de navigación multi idioma.

Espero que te haya sido de ayuda y ahora puedas tener un menú principal que funcione en los idiomas soportados por tú aplicación.

Deja un comentario