Cómo Click Here Labs desbloqueó Composable Commerce con Atlas

Actualmente, WP Engine facilita la mayor comunidad colaborativa de agencias de WordPress a través de nuestro Programa de socios de agencias.

En esta sesión a pedido de DE{CODE} 2023, aprenderá cómo WP Engine Agency Partner Click Here Labs usó el nuevo Atlas BigCommerce Blueprint para volver a imaginar la tienda en línea de Combat Corner. ¡También obtendrá una demostración de BigCommerce Blueprint para que pueda crear su propio sitio de comercio electrónico de Atlas en tan solo 10 minutos!

Altavoces:

• Jonathan Jeter, director de producción técnica de Click Here Labs
• Bryan Smith, gerente principal de productos en WP Engine

Diapositivas de la sesión:

Transcripción:

BRYAN SMITH: Hola a todos. Mi nombre es Bryan Smith, gerente principal de productos aquí en WP Engine. Hoy, vamos a hablar sobre cómo Click Here Labs desbloqueó el comercio componible con Atlas.

Hoy me acompaña Jonathan Jeter, director de producción técnica de Click Here Labs. Dirige el equipo de allí. Es un socio de la agencia de WP Engine, con el que hemos trabajado muy de cerca durante los últimos meses para llevar a nuestro primer cliente de comercio sin cabeza o componible a Atlas.

Entraremos más en ese estudio de caso en un minuto, pero antes de hacerlo, me gustaría hablar un poco sobre el estado del mercado con el desarrollo componible. Tan componibles y sin cabeza, los estamos usando indistintamente aquí. Sin cabeza a menudo implica componible.

Y no es solo porque estos sitios son tan eficaces que la demanda de ellos está creciendo. Son altamente personalizables y pueden adaptarse rápidamente a un panorama tecnológico cambiante, así como a un entorno empresarial en constante cambio, donde los resultados de su negocio pueden cambiar con frecuencia. Ofrecen experiencias dinámicas a la velocidad de la estática, de las que hablaremos más adelante.

Y también puede escalarlos sin tener que cambiar la plataforma. En el caso de estudio que presentaremos hoy, el cliente de Click Here Labs pudo permanecer en BigCommerce, su backend de comercio electrónico, integrar WordPress como su CMS y llevar todo eso a una tienda sin cabeza. Pero toda esta nueva tecnología a menudo puede tener un costo prohibitivo, razón por la cual hemos pasado los últimos años abordando los puntos débiles de desarrollo más severos con Atlas de sitios de construcción de esta manera.

Y Atlas, por supuesto, es más que un anfitrión. Es más que un marco frontal. Tiene la capa API, el complemento de campos personalizados, la aplicación de desarrollo local, todas estas cosas que necesita para comenzar. Pero quizás lo más importante es que tiene una comunidad de aprendizaje y apoyo.

Sin embargo, con todas estas herramientas a su alcance, no lo culparíamos por tener un poco de fatiga de decisión. Puede ser difícil incluso comenzar cuando tiene tantas opciones al alcance de su mano y ahí es donde entran los planos.

Así que hemos desarrollado planos que le permiten configurar un sitio de inicio con todos los complementos de código, modelos de contenido y estructura paga que necesita. Puede ponerlos en funcionamiento en menos de 10 minutos. Realmente puede optimizar ese proceso de iniciar un nuevo proyecto.

Y además de eso, también lo ayuda a conocer la plataforma y nuestras mejores prácticas. Por lo tanto, lo prepara para el próximo proyecto, pero hasta ahora, los planos que teníamos se limitaban a casos de uso de sitios de tipo más estático, como cartera o sitios de tipo blog; nada tan dinámico es una tienda sin cabeza.

Y es por eso que hemos creado el plan BigCommerce. Entonces, este plan que le mostraremos aquí en solo un minuto, viene preconfigurado con WPGraphQL, Atlas Content Modeler, el marco Faust JS y un par de cosas nuevas también: un complemento de Atlas Commerce Blocks, que le permite para traer datos de productos al editor de WordPress, y luego también un conector de comercio, que lo conecta a la API de BigCommerce, lo que le permite sincronizar datos de BigCommerce a WordPress, mantenerlos sincronizados.

Puede crear modelos de contenido a partir de ellos y también puede activar el complemento de ese bloque. Entonces, con eso, ¿por qué no te muestro cómo funciona esto y saltamos a una demostración?

Muy bien, aquí estamos en el portal de WP Engine en la página de Atlas. Entonces, cuando crea una nueva aplicación Atlas, puede comenzar desde un plano y aquí tendrá un par de opciones. Lo que vamos a hacer aquí es seleccionar el plano de BigCommerce que se encuentra a la derecha.

Y desde aquí también puede obtener una vista previa de esa tienda o ver el código en GitHub. Seleccionaremos ese plano y presionaremos Continuar. Entonces, el siguiente paso es conectarse a su cuenta de GitHub.

Y luego, lo que haremos será clonar nuestro repositorio en el tuyo. Así que selecciona su cuenta de GitHub, el nombre del repositorio y luego presionamos Crear aplicación.

Así que algunas cosas suceden durante este proceso. Primero, aprovisionamos el sitio de WordPress. Creamos el código Atlas para la aplicación Atlas. Y luego se despliega. Y ese proceso suele tardar unos cinco minutos, pero aquí lo hemos acelerado.

Una vez que se crea el sitio de WordPress, podemos ingresar al conector BigCommerce, que verá en la pantalla aquí. Pantalla de configuración: ingresaremos las credenciales y luego podremos iniciar la sincronización de ese producto.

Y tengo esto conectado a una cuenta de sandbox de Atlas, así como a una cuenta de sandbox de BigCommerce. Y puedo importar los productos que tengo en esa cuenta de BigCommerce. Acabo de recibir unos 13 productos de demostración.

Quería señalar aquí que después de esta sincronización inicial, en realidad no es necesario ejecutarla nuevamente para obtener actualizaciones. El complemento admite webhooks, así como un trabajo cron nocturno. Y luego, una vez que esos productos terminen de importarse, también sincronizará las imágenes.

Y luego iremos a ver los productos. Muy bien, entonces tenemos nuestros productos cargados. Puede verlos aquí en la página de Productos. Estos son los productos de demostración del sitio de BigCommerce.

Iremos a la página Detalles de uno de estos y todo lo que muestro aquí son solo todos los campos de datos que hemos traído: título, imágenes, descripciones. Está todo ahí.

Así que ahora, está allí en WordPress. Está sincronizado para ti. Realiza un cambio en el sitio de BigCommerce, se actualiza inmediatamente.

Ahora, quiero mostrarles los modelos de contenido que hemos creado con Atlas Content Modeler. Este es solo un ejemplo. Y supongo que ten eso en cuenta con estos. Es realmente un punto de partida para mostrarle cómo lo hemos hecho.

Estos modelos de contenido impulsan nuestra página de detalles del producto en el escaparate sin cabeza, que veremos aquí en solo un minuto. Solo un ejemplo de cuán flexible es el modelado de contenido con Atlas Content Modeler. Bien, a continuación, les mostraré el complemento de bloques de comercio del que hablamos anteriormente.

Iremos a la página de inicio en el editor de bloques en WordPress. Y aquí puede ver esta sección Compre nuestros últimos productos. Estos son los bloques de comercio.

Entonces, lo que puede hacer es elegir el tipo de bloque, los últimos productos, los productos populares, el recuento de visualización que desea mostrar. Estamos mostrando cuatro allí. Todo esto viene del lado de BigCommerce. Aquí hay otro ejemplo más abajo en la página: artículos de venta, solo como una alternativa a cómo puede usarlos.

Hasta ahora, hemos visto modelos de contenido y el complemento de bloques. Aquí está todo lo que está instalado en el sitio de WordPress. Son todos esos complementos que mencionamos anteriormente.

DE ACUERDO. Aquí estamos en el escaparate. Este es nuestro escaparate sin cabeza, que puedes ver en la URL. Puede ver nuestros bloques de productos en la página.

Y este es un escaparate simple. Realmente está destinado a ser un punto de partida. Y por esa razón, hemos tratado de mantenerlo lo más simple posible. A continuación, iré a la página de la tienda.

Aquí puedes ver todos nuestros productos. Entonces, esta página es en realidad un modelo de contenido, la página Detalles del producto. Puede ver que tenemos un lugar en la parte inferior para revisiones. Nuestro próximo paso será agregar esto al carrito.

Y verás que el carro también no tiene cabeza. Así que todo esto está en la parte delantera de Atlas. Ahora, para el pago, redirigimos a BigCommerce. Para los propósitos de este plan, sentimos que tenía más sentido, pero todo lo demás está en la parte delantera del Atlas sin cabeza.

Aquí estamos de vuelta a la tienda. Aquí está la página Acerca de, solo un ejemplo de lo que puede hacer al diseñar estas diferentes secciones de página. Para que pueda tomarlo, usarlo, aprender de él. Esa es realmente la intención aquí es que comiences rápidamente.

Muy bien, eso es todo y con eso, voy a pasárselo a Jonathan para que profundice más sobre cómo Click Here Labs tomó este modelo y lo amplió para un caso de uso de un cliente real. A ti, Jonathan.

JONATHAN JETER: Gracias, Bryan. Antes de que hablemos sobre la ampliación del modelo, primero quería hablar un poco sobre la planificación de la solución. Antes de comenzar una solución de comercio componible muy flexible, queremos asegurarnos de que la hemos planificado correctamente para asegurarnos de que usamos las piezas adecuadas.

Y siempre comenzamos con la documentación de la API y los requisitos funcionales. Entonces, en este caso, para BigCommerce, revisamos la documentación de su API para asegurarnos de que todas las funciones que el cliente necesitaba en su tienda estuvieran disponibles a través de la API. Y aquellos que no lo eran, necesitábamos planificar cómo íbamos a satisfacer esas necesidades, cumplir con esos requisitos.

Entonces, como parte de ese plan, debe determinar dónde se cumplirá cada requisito, ¿verdad? ¿Es a través del BigCommerce nativo? ¿Es a través de WordPress? ¿Es a través de la aplicación frontal que está creando o de aplicaciones de terceros?

En este caso, tuvimos que tomar algunas decisiones y debido a que la plataforma es tan flexible, el objetivo principal aquí era acelerar el sitio, para obtener, como dijimos antes, la velocidad de la estática en la aplicación de front-end. Así que queríamos asegurarnos de que todas las piezas del sitio, todos los componentes del sitio que Google iba a ver, estuvieran en la aplicación de interfaz sin interfaz.

Y luego tuvimos que echar un vistazo, por ejemplo, Bryan habló sobre el carrito, habló sobre la sección de la cuenta. Habló de esas cosas diferentes. ¿Cuál de esas piezas íbamos a hacer en los diferentes sistemas? Entonces, por ejemplo, decidimos en este caso que el carrito, el pago, la cuenta del cliente lo hiciera dentro de la aplicación nativa.

Luego, el contenido del sitio: queríamos asegurarnos de que pudiera categorizarse correctamente, que el cliente pudiera sentirse cómodo al agregar ese contenido a través de una interfaz estándar de WordPress. También agregamos algunos datos dentro de WordPress para poder presentarlos en el front-end de una manera diferente. Estas serían cosas que tal vez no estaban disponibles en BigCommerce y luego teníamos que tener en cuenta las aplicaciones de terceros.

De dónde venían o iban los datos para su CRM, para el seguimiento, para ese tipo de cosas y, finalmente, debe planificar: ¿cuáles son los componentes que va a construir en esa interfaz y de dónde se van a extraer? los datos de?

Entonces, la máxima flexibilidad significa que tiene que tomar muchas decisiones y recordar que básicamente está creando una aplicación de comercio electrónico con todas las herramientas disponibles en Atlas y, en este caso, BigCommerce, para poder crear esa tienda. Así que solo quería resaltar que es muy importante hacer ese plan, para entender en lo que te estás metiendo.

Y tenga esas conversaciones con el cliente también y diga, esto es lo que estamos construyendo. Esto es lo que permanecerá en la aplicación nativa. Esto es lo que va a estar en la parte delantera.

Esas piezas que están protegidas con contraseña, por ejemplo, Mi cuenta, Historial de facturación, ese tipo de cosas, nuevamente esas, son cosas que no se indexarán. Entonces eso es menos importante que esos estén en la aplicación de front-end. Entonces, una vez que lo descubras y establezcamos el plano, ahora estás listo para comenzar.

Ahora hablamos de ampliar el plano, ¿verdad? Entonces, ¿qué está involucrado en eso? Vamos a ver aquí que se inicia la aplicación front-end. Y ahora, debe construir todas esas piezas adicionales que harán que la tienda sea única, que harán que haga lo que su cliente necesita hacer.

Entonces, por ejemplo, en BigCommerce, hay algunas funciones nativas que están disponibles en la API, como productos complementarios, grupos de clientes, ese tipo de cosas. Entonces, el cliente todavía usa BigCommerce nativo para administrar esos productos complementarios, para administrar los diferentes grupos de clientes, para administrar cuándo las cosas saldrán a la venta, códigos de descuento y ese tipo de cosas.

Tomamos esos datos y los presentamos en la parte delantera. También teníamos aplicaciones de terceros que eran complementos instalados en BigCommerce, ¿verdad? Hay un personalizador de productos.

Y luego los datos de diferentes ubicaciones, esos debían ser considerados. Y esos componentes se pueden construir, por ejemplo, en una página de detalles del producto, ¿verdad? Si hay un producto que tiene personalización, puede cambiar los colores.

Puede agregar logotipos. Puedes hacer ese tipo de cosas, ¿verdad? Este personalizador le permite hacer eso. Entonces, estas son piezas diferentes que se crearon con la funcionalidad de terceros.

Y, por último, está la funcionalidad que se incorporó directamente en el front-end. Por ejemplo, matriz de comparación de productos, todos hemos visto esto en diferentes lugares. Compare tres productos diferentes, vea qué atributos diferentes, cómo se comparan, la capacidad de agrupar productos en una venta, un descuento para un paquete. Y luego hay cosas que, por ejemplo, están disponibles en BigCommerce nativo, pero por alguna razón, la API no hace la funcionalidad.

Entonces, el cargador de archivos es un ejemplo de algo que básicamente tuvimos que crear dentro del front-end usando diferentes funciones en el back-end. Estas son todas las cosas que construyes para extender ese plan y algunas de ellas se incluirán en el plan extendido, o el plan premium del que creo que Bryan hablará aquí muy pronto.

BRYAN SMITH: Gracias, Jonathan. Ahora voy a cubrir la hoja de ruta de Atlas muy rápido. Hemos dividido esto en columnas Ahora, Siguiente y Más tarde.

En la columna Ahora, verá en negrita nuestras iniciativas Atlas específicas de comercio electrónico. Debajo, en el lado izquierdo, el plano de BigCommerce, que está en vivo, disponible para que cualquiera pueda probarlo ahora mismo. También estamos trabajando en una API de escaparate.

Esta es una capa de datos que reunirá el contenido de WordPress, BigCommerce o cualquier otra fuente de terceros que le interese. Así que aquí hay una manera de integrarlos todos. Estamos trabajando en la versión beta en este momento, así que estad atentos para obtener más detalles a medida que avanza.

A continuación, trabajaremos en un plano de Shopify. Esta es una integración similar a la que hemos hecho con BigCommerce, pero en este caso será con Shopify. Y luego, a medida que superemos eso, nos centraremos en la personalización y localización sin cabeza. Sabemos que estas cosas son realmente importantes para los escaparates dinámicos. Y es algo que queremos asegurarnos de que esté estrechamente integrado con la plataforma de comercio Atlas.

Entonces, si está listo para comenzar con el modelo de BigCommerce, puede abrir una cuenta gratuita de Atlas sandbox hoy para probarlo. Si ya tiene una cuenta de Atlas, el plan, por supuesto, también está disponible para usted. Ve a probarlo hoy.

Pruébelo en su próximo proyecto. Háganos saber lo que piensas. Gracias a todos. Realmente apreciamos su tiempo hoy. Qué tengas un lindo día.