Saltar al contenido

El blog de Skatox Entradas

JS Archive List 5.0

Publicado por Miguel Useche el 7 de junio de 2022

Luego de mas de 3 años sin poder dedicar tiempo a mi primer plugin de WordPress: JS Archive List. Finalmente he conseguido trabajar en él y lanzar una nueva versión. La idea era actualizarlo a las últimas tecnologías, realizar mantenimiento y corrección de errores.

Nuevo nombre: JS Archive List Widget

Ya hoy en día no es necesario usar jQuery debido a que los navegadores ofrecen nativamente las funcionalidades básicas de jQuery. A pesar de que WordPress lo sigue incluyendo y la mayoría de temas y plugines lo cargan (causando una descarga adicional de código) eventualmente se dejará de usar y es mejor estar preparado para ello.

Para preparar el plugin ante este cambio y para actualizarlo a las últimas tecnologías, eliminé jQuery de las dependencias. Esto requirió rescribir todo el código de Javascript a nativo sin dependencias de librerías. Prácticamente es escribirlo de nuevo, es una tarea fácil para el código de interacción con el DOM pero la parte de animaciones si tocó estudiar CSS y ver como aplicar la parte de animaciones usando sólo CSS.

Por esta razón, eliminé jQuery del nombre (que era MUY popular cuando este plugin se lanzó por primera vez) y ahora lo dejé simplemente a JS para indicar que está hecho en Javascript.

Soporte a Gutenberg

Mi objetivo pendiente con este plugin era darle soporte a los bloques, la nueva forma de configurar los widgets y de añadir contenido a WordPress. Por mas que no quieran algunos, el futuro de este CMS consiste en crear contenido a través de bloques de Gutenberg. Tarde o temprano tenía que añadir soporte a esta tecnología.

Para este plugin, debía crear un bloque desde 0 para mostrar el formulario que permite configurar el widget. Luego hacer un adaptador de la configuración de Gutenberg a la que uso internamente (y para mantener retrocompatibilidad) y al momento de generar el código HTML que se carga en el sitio, llamo a la función que genera el HTML del widget.

Fue interesante aprender este proceso de crear bloques. También es raro escribir plugins de WordPress usando React y tecnologías de JS. La ventaja es que los plugines quedan mejor integrados al CMS y creo que permite a los usuarios configurarlos fácilmente.

¿Cómo lo descargo o pruebo?

Si te interesa este plugin, en esta página en el lado izquierdo puedes ver la sección de Archivos. Esta parte se genera con JS Archive List Widget y así es una de las formas que puedes configurar el plugin para mostrar los archivos.

Para descargarlo y usarlo en tu instalación de WordPress, haz clic a continuación y disfruta de ver el listado de tus archivos con JS Archive List Widget.

JS Archive List

Ahora tengo que actualizar mi plugin de categorías y evitar que tome 3 años lanzar una nueva versión.

Deja un comentario

Mi análisis sobre Go Subscriptions (Shopify)

Publicado por Miguel Useche el 2 de junio de 2022

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.

Gestor de órdenes de Go Subscription
Gestor de órdenes de Go Subscription
Editor de órdenes de Go Subscription
Editor de órdenes de Go Subscription
Gestor de planes de Go Subscription
Gestor de planes de Go Subscription
Editor desde la página de producto
Editor desde la página de producto
Interfaz administrativa de la aplicación

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

Publicado por Miguel Useche el 30 de mayo de 2022

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 navegació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

Mi entrevista en Camino Dev

Publicado por Miguel Useche el 23 de mayo de 2022

Camino Dev es un podcast 100% en español hospedado por Lina Montaño y Miguelangel Rendon. En éste podcast cuentan las historias y anécdotas de los inicios de muchos profesionales de las TICs.

Debido a que conocí a Lina en un JSConf, empecé a escuchar el podcast desde sus inicios y me encantó por ser distinto a todos. El hecho de conocer cómo otras personas se iniciaron te hace recordar cómo fue tu inicios, lo complicado que parecía todo, las barreras y la motivación inicial para continuar. Además que todos los episodios terminan en final feliz porque los invitados son personas que están trabajando en las TICs y como les va actualmente.

Episodio #19 de Camino Dev

Tuve la oportunidad de participar en la edición 19 del podcast. Fui invitado por los organizadores para hablar de mis inicios, como llegué a ser programador y profesor y muchas cosas que prefiero que escuchen en el podcast.

Fue una gran experiencia participar en él. Es fácil escuchar las historias de los demás pero hablar de la de uno me pareció difícil. Creo que nunca había contado mi experiencia públicamente y pensaba que no es interesante o que va a aburrir y dar pena. Pero ojalá os guste y sea motivadora a algunas personas que lo escuchen.

Si quieren conocer mas de mí y de mis inicios en mi carrera profesional, los invito a escuchar el episodio #19 de Camino Dev a continuación.

#19: Miguel Ángel Useche - Camino Dev
El episodio #19 donde aparezco

Les recomiendo seguir este podcast si desean buscar motivación para iniciarse en el mundo de la informática, si están empezando para que conozcan otras historias y apliquen los que hicieron en sus vidas. Si ya son profesionales, no está demás conocer las historias de otros e inclusive usar esas experiencias cuando uno se cambia de área.

Y si te gusta mucho, comparte el contenido para que llegue a otros y expandir mas nuestros conocimientos.

Deja un comentario