Viewer: ver el producto
Presentación del modelo 3D y su aspecto. Útil cuando lo principal es mostrar el producto desde distintos ángulos sin permitir editar la impresión.
Integración de comercio electrónico - del diseño al pedido
Integra Alter Product en tu web: WordPress + WooCommerce o API
Añade presentación 3D, configuración de variantes y personalización de productos a tu web. El cliente ve el producto, elige opciones y prepara el diseño en tu tienda, mientras tú gestionas el catálogo y los pedidos en tu sistema.
Elige el plugin para WordPress con WooCommerce instalado para configurar la integración sin escribir código. Si desarrollas tu propia web o tienda, conecta las herramientas integradas con el backend y el carrito mediante la Public API y eventos postMessage.
Las ilustraciones muestran la interfaz real de grabaciones y del panel del plugin. Los nombres de los botones están en inglés; el aspecto de la herramienta depende de la configuración de la tienda.
Dos caminos para crear tu tienda con personalización
Puedes preparar el mismo diseño de producto para presentarlo, configurarlo o editar su impresión. Elige cómo conectarlo a la tienda según tu web y el trabajo de desarrollo necesario.
¿Plugin o integración propia?
El plugin ofrece compatibilidad lista para usar con WordPress y WooCommerce. La API permite crear tu propia conexión con otra plataforma, una aplicación headless o un sistema de pedidos existente.
| Área | WordPress + WooCommerce | Sistema propio mediante API |
|---|---|---|
| Puesta en marcha | Instalación del plugin y asistente de conexión en el panel de WordPress. | Implementación de la conexión en el backend y de la integración en la página. |
| Productos y variantes | Asignación del diseño al producto WooCommerce y sincronización de variantes. | Vinculación de identificadores de productos y opciones con los datos de tu tienda. |
| Carrito y pedidos | Gestión lista para usar de configuraciones, diseños de clientes y vistas previas en WooCommerce. | Gestión de eventos de la herramienta integrada y sincronización de pedidos en tu sistema. |
| Archivos y recursos | Biblioteca local, diseños y archivos de pedidos en el servidor de WordPress. | Almacenamiento y acceso a los datos según el modo de integración elegido. La opción con almacenamiento propio requiere que implementes su gestión. |
¿Qué herramienta ofrecer al cliente?
Elige la herramienta según lo que deba hacer el cliente en la página. Prepara de antemano el diseño y las reglas de personalización en Designer.
Configurator: elegir una variante
Selección de opciones preparadas del producto, como talla, color o material. El cliente ve el cambio en el modelo y envía la configuración al carrito.
Customizer: preparar tu propia impresión
Personalización con las herramientas, gráficos, textos y plantillas disponibles. El diseño guardado del cliente queda vinculado a un artículo del carrito o del pedido.
Designer: preparar tu catálogo
Espacio de trabajo del propietario de la tienda. Aquí preparas la composición, las variantes, las áreas de impresión y los ajustes de las herramientas para clientes. El acceso a la edición administrativa está separado del uso de la tienda.
WordPress + WooCommerce: de la instalación al producto listo
Alter Product es un plugin de WordPress. Para integrar la tienda requiere WooCommerce instalado y activo. La configuración habitual se realiza en el panel, sin crear tu propia gestión de API y carrito.
Requisitos: WordPress, WooCommerce, HTTPS y plan Business
Para integrar Alter Product en tu web necesitas una suscripción Business activa o un plan superior que incluya esta función. Esto se aplica tanto al plugin WordPress + WooCommerce como a la integración propia mediante API. Los planes Personal FREE y Personal no incluyen la integración en tu tienda.
Para usar el plugin, prepara WordPress con WooCommerce instalado y activo y una cuenta Alter Product. Almacenar archivos en tu alojamiento no sustituye la suscripción necesaria: Alter Product sigue proporcionando la aplicación y autorizando su ejecución.
- Publica la tienda mediante HTTPS con un certificado SSL/TLS válido para su dominio. Es necesario para que las herramientas integradas funcionen correctamente en la web pública.
- Activa los enlaces permanentes amigables de WordPress según las instrucciones de instalación.
- Reserva espacio en el alojamiento para modelos, gráficos, diseños y archivos de pedidos. La biblioteca de la tienda utiliza los recursos de tu servidor.
¿Por qué se necesitan HTTPS y un certificado SSL/TLS?
Alter Product funciona en la página de la tienda dentro de un iframe. Los navegadores restringen algunas funciones que utiliza la aplicación si la página no ofrece un contexto seguro. HTTPS cifra la conexión y un certificado válido permite al navegador verificar el dominio.
El navegador también comprueba la página que contiene el iframe. Por eso, la dirección HTTPS de la aplicación Alter Product no basta si la tienda funciona mediante HTTP. HTTPS debe cubrir también tu web, donde integras la herramienta. Esto responde a las reglas de seguridad de los navegadores para aplicaciones integradas.
- Activa un certificado SSL/TLS con tu proveedor de alojamiento y comprueba que sea válido para el dominio de la tienda.
- Configura las direcciones de WordPress y el dominio de integración con HTTPS. Activa la redirección de HTTP a HTTPS.
- Abre la página del producto mediante HTTPS y comprueba que el navegador no señale problemas con el certificado ni recursos cargados mediante HTTP.
Conecta la tienda mediante Auto Connect
La conexión automática te guía por la autorización de la cuenta Alter Product y la configuración de la tienda. Con este método no necesitas transferir manualmente las claves API.
- En WordPress, ve a Plugins → Añadir nuevo, busca Alter Product, instala y activa el plugin.
- Abre el panel Alter Product y elige Auto Connect. Inicia sesión en la cuenta Alter Product correcta, comprueba la tienda y autoriza la conexión.
- Vuelve a WordPress. Elige el modelo inicial y descarga los recursos necesarios. Espera a que terminen las descargas y las comprobaciones de preparación.
- Revisa las páginas de herramientas creadas y los ajustes de visualización; después, prepara el producto.
Asigna el diseño y sincroniza las variantes
Al editar el producto WooCommerce, abre la pestaña Alter Product. Crea un diseño o elige uno existente y abre Designer. Configura la impresión, las opciones disponibles y las áreas de impresión de ese producto.
- Para un producto variable, prepara los atributos, como tallas, y las variantes WooCommerce correspondientes.
- En Designer, usa Sync variants para vincular las opciones del diseño a las variantes del producto. Comprueba también las selecciones predeterminadas que no son atributos de variante en WooCommerce.
- Guarda el diseño y el producto. Elige la herramienta que se mostrará en la página y cómo se abrirá.
- Comprueba el resultado en la página del producto: selecciona varias variantes, prepara un diseño y pasa al carrito.
Tu biblioteca en el servidor de WordPress
Almacenas modelos, diseños, gráficos y archivos de pedidos en el alojamiento de tu WordPress. Los recursos añadidos localmente sirven a tu tienda y no pasan a formar parte de la biblioteca pública de Alter Product para otras tiendas.
¿Qué se almacena localmente?
El plugin guarda archivos de modelos, bibliotecas, diseños, mockups y pedidos en el espacio de WordPress. Los datos de los proyectos del generador y sus revisiones también se guardan en la base de datos de esa instalación.
Puedes añadir tus propios materiales e importar recursos seleccionados de Alter Product. Después de descargarlos, usas una copia local. Importar, comprobar actualizaciones y descargar nuevas versiones son acciones independientes.
| Ubicación en el panel | Qué haces allí |
|---|---|
| Recursos | Gestionas modelos, gráficos, plantillas, fondos, logotipos, texturas y entornos, entre otros. Las formas de añadirlos dependen del tipo de recurso. |
| Generador de modelos | Creas proyectos locales a partir de plantillas y trabajas con modelos asociados al generador. |
| Diseños de productos / Designer | Preparas o importas un diseño, lo editas y lo asignas a un producto de la tienda. |
| Pedidos WooCommerce | Utilizas diseños guardados de clientes, vistas previas y archivos necesarios para preparar el pedido. |
Archivos locales, aplicación Alter Product integrada
Almacenas los recursos en tu servidor, mientras la interfaz de las herramientas se carga desde Alter Product en un iframe. El servicio Alter Product comprueba el acceso de la cuenta, el plan y las sesiones, y proporciona el catálogo para importar. La integración requiere conexión con este servicio.
En las copias de seguridad, conserva la base de datos, el directorio de archivos y las claves y salts de WordPress necesarios para leer los datos cifrados del plugin. Así podrás restaurar tanto los gráficos visibles como los datos necesarios para seguir trabajando.
Personalización en la web de tu marca
La integración puede formar parte de la ficha del producto o de una página WordPress independiente. El cliente permanece en el proceso de compra de tu tienda y WooCommerce gestiona el carrito y el pedido.
Ficha del producto, página de herramienta o bloque
Elige la visualización según la estructura de la tienda: herramienta en la página del producto, botón hacia una página específica o integración mediante los bloques y shortcodes disponibles. Viewer, Configurator y Customizer tienen funciones distintas; no necesitas ofrecerlos todos a la vez.
- Muestra Viewer donde el cliente deba ver el modelo del producto.
- Usa Configurator cuando vendas variantes y opciones preparadas.
- Elige Customizer cuando el cliente deba añadir texto, una imagen o cambiar la composición de la impresión.
Fondos, logotipo e idioma propios
Adapta la presentación del producto a tu marca. En el plugin gestionas fondos y logotipos locales y los ajustes visuales de las herramientas integradas. La disponibilidad de cada opción depende del plan.
- El fondo de la escena, los colores de la interfaz y el aspecto preparado del diseño ayudan a mantener la coherencia con la tienda.
- La aplicación y el plugin admiten 22 idiomas. El idioma del panel WordPress se define por usuario y el de la web en los ajustes del sitio.
- Prepara los nombres de productos, los textos impresos y las descripciones en los idiomas de tus clientes. Admitir un idioma en la interfaz no significa traducir automáticamente el contenido de la tienda.
Del diseño del cliente al artículo del pedido
El cliente elige una variante y prepara la personalización. El plugin vincula la configuración y el diseño guardado al artículo del carrito y después al pedido WooCommerce. Los mockups disponibles ayudan a identificar la impresión encargada.
- El cliente abre el producto o la herramienta asignada y elige las opciones.
- Al personalizar, guarda el diseño y añade el producto al carrito.
- En el carrito comprueba el producto, la configuración y la vista previa disponible; después, completa la compra en WooCommerce.
- En el panel del pedido, el propietario abre el diseño guardado y prepara su producción.
Preparación de pedidos, POD e IA opcional
Conectar la tienda a las herramientas 3D es el inicio del proceso. A partir del diseño preparado puedes descargar archivos para producción propia o usar la integración del plugin con un proveedor de impresión bajo demanda.
Conecta Printify o Printful
Configura la conexión con el proveedor elegido en los ajustes del plugin. Después, vincula producto, variantes y ubicaciones de impresión con su catálogo, prepara los archivos y solicita la producción del pedido desde WooCommerce.
- Adapta las superficies de impresión y el formato de los archivos al producto y al proveedor concretos.
- Comprueba los archivos generados y la variante del pedido antes de enviarlo a producción.
- Utiliza la actualización de estados de pedidos y datos de envío en el plugin.
- Si realizas tu propia producción, descarga archivos PDF, SVG o PNG según las posibilidades del diseño y los ajustes de exportación.
IA para preparar gráficos en el panel del propietario
Puedes configurar tu propia conexión con un proveedor de IA y usar las funciones disponibles de generación o mejora de gráficos al trabajar en un diseño. Las solicitudes del plugin salen de WordPress hacia el proveedor elegido y se facturan en tu cuenta de ese proveedor.
Sesiones de integración: validez y consumo del límite
Una sesión es una autorización temporal para abrir una herramienta concreta en tu tienda. Ayuda a ofrecer productos con seguridad y es una unidad contabilizada en el límite mensual de sesiones de integración. No equivale a un clic, un visitante único ni un pedido.
¿Cuánto tiempo es válida la clave de sesión?
Al iniciar una herramienta integrada, la integración obtiene un token temporal, o clave de sesión. Las credenciales permanentes de la cuenta permanecen en el servidor. El cliente no necesita copiar claves ni entrar en la cuenta Alter Product del propietario.
La validez predeterminada del token en la implementación actual es de 15 minutos. El servidor puede definir otro plazo, por lo que la integración utiliza la caducidad de la sesión recibida. Reutilizar el token no amplía ese plazo. Para autorizar de nuevo el acceso tras caducar, hace falta una nueva sesión.
¿Recargar la página consume otra sesión?
Depende de la herramienta y de si aún dispone de una sesión adecuada y válida. El plugin no comparte una única sesión entre todos los visitantes y productos. Las reglas siguientes describen su funcionamiento actual.
| Situación | ¿Qué ocurre con la sesión? | Efecto en el límite |
|---|---|---|
| Primera apertura de la herramienta sin una sesión compatible | La integración solicita un token nuevo para la herramienta y el contexto del producto. | Emitir correctamente un nuevo token consume una sesión. |
| Girar el modelo, cambiar el color o editar texto en la herramienta abierta | El trabajo se realiza dentro de la sesión iniciada. | Estas acciones no implican por sí solas la emisión de nuevos tokens. |
| Recarga completa de una página con Viewer o Configurator | El plugin suele obtener un nuevo token al recargar la página. La memoria de sesión de estas herramientas no se conserva entre recargas completas. | Cada nueva emisión correcta de un token consume otra sesión. |
| Recarga de Customizer en la misma pestaña | Customizer puede reutilizar la sesión guardada si coincide con la tienda, el producto, el pedido y el modo de trabajo y no está próxima a caducar. | La reutilización no aumenta el contador. Si no se cumplen las condiciones, hace falta una nueva sesión. |
| Caducidad del token, otro producto o cambio de contexto de trabajo | Puede ser necesaria una nueva autorización y un nuevo token. La disponibilidad del almacenamiento del navegador también influye en la reutilización. | Un token recién emitido aumenta el consumo del límite. |
¿Cómo tener en cuenta las sesiones en los costes y el plan de la tienda?
El contador aumenta cuando la API emite correctamente un nuevo token. Usar un token válido ya emitido no es una nueva emisión. Por eso, al elegir un plan, considera los inicios de herramientas, las recargas y las reaperturas, no solo el número de pedidos o visitantes.
Las herramientas integradas de una misma tienda comparten un límite mensual de sesiones. El contador se mantiene por separado para cada tienda, por meses naturales en UTC. Las nuevas sesiones de Designer y del Generador de modelos integrados en el panel de WordPress también aumentan este contador. Descargar un modelo disponible mediante la API de importación no abre por sí solo una sesión del editor.
Al alcanzar el límite, el sistema rechaza la emisión de nuevas sesiones. Es un límite de uso de la suscripción; consulta la cantidad incluida actualmente en tu plan.
- Inicia la herramienta donde el cliente realmente la utiliza. Para mostrar listas de productos, puedes usar fotos normales y mockups preparados.
- En una integración API propia, evita crear una sesión cada vez que se renderice un componente o cambie una opción. Reutiliza una sesión válida solo en su contexto correspondiente.
- Planifica el límite por separado de los costes de producción POD y generación con IA, derivados de esos servicios externos.
Integración propia mediante API
¿Tienes una tienda a medida, una aplicación headless o tu propio sistema de pedidos? Puedes crear tu capa de integración con la Public API de Alter Product e integrar las herramientas necesarias en la web. Este camino requiere desarrollo.
Conecta Alter Product con tu tecnología
La Public API utiliza solicitudes HTTP y datos JSON. Puedes crear la integración en el lenguaje y entorno de tu backend. No necesitas reconstruir tu tienda en WordPress para integrar las herramientas Alter Product.
Estos son ejemplos de tecnologías para implementar la conexión en el servidor. En todas se siguen las mismas etapas: autorización API, creación de la sesión de la herramienta y vinculación de productos, carrito y pedidos con tu sistema.
JavaScript y TypeScript / Node.js
Añade la integración a un backend Node.js, por ejemplo con Express o NestJS. Llama a la API desde el servidor y proporciona al frontend los datos necesarios para integrar la herramienta.
Python
Conecta tu aplicación Python existente, como Django o FastAPI, con los productos, sesiones y pedidos de Alter Product mediante solicitudes HTTP.
PHP
Utiliza PHP en tu tienda o aplicación propia, por ejemplo Laravel o Symfony. Puedes crear tu integración API independientemente del plugin WordPress listo para usar.
Java
Integra las herramientas con un backend Java, como Spring, y vincula los datos de los diseños con tu catálogo de productos y gestión de pedidos.
C# / .NET
Usa un backend .NET, como ASP.NET Core, para autorizar, crear sesiones y transmitir datos a los procesos existentes de la tienda.
Go
Implementa la conexión en un servicio escrito en Go. El cliente HTTP estándar permite gestionar solicitudes API y respuestas JSON.
Ruby
Añade la integración a una aplicación Ruby, como Ruby on Rails, y utiliza tu propio modelo de productos, carrito y preparación de pedidos.
Rust
Conecta el backend Rust mediante un cliente HTTP y compatibilidad con JSON. Puedes incorporar sesiones y eventos de compra a tu arquitectura de servicios.
Frontend adaptado a tu web
En el navegador puedes usar React, Vue, Angular o HTML y JavaScript puros. TypeScript también sirve para implementar la comunicación. La página integra el iframe, gestiona eventos postMessage y se conecta con tu backend.
El frontend gestiona el aspecto de la página y las respuestas del carrito; el backend, las llamadas autenticadas a la Public API. En frameworks que combinan ambas capas, como Next.js, sitúa la gestión de claves permanentes y la creación de sesiones exclusivamente en el servidor.
Puedes conservar tu checkout, sistema de pagos, CMS y proceso de preparación de pedidos. En la implementación conectas estos elementos con los datos del diseño y los eventos de la herramienta Alter Product elegida.
¿Qué proporciona la API y qué prepara tu sistema?
Alter Product proporciona herramientas 3D, datos de diseños y mecanismos de sesión. Tu backend los conecta con productos, cuentas de clientes, carrito y pedidos. Puedes crear endpoints intermediarios para tu frontend sin exponer las credenciales de Alter Product en el navegador.
| Capa | Función |
|---|---|
| Frontend de tu web | Muestra el iframe, responde a la comunicación de la herramienta y actualiza la interfaz de la tienda. |
| Tu backend | Autentica solicitudes a la Public API, crea sesiones, controla el acceso del cliente y guarda las asociaciones con tu carrito o pedidos. |
| Public API de Alter Product | Proporciona funciones de conexión, productos, asociaciones de herramientas, pedidos y acceso a archivos y recursos. |
| Herramienta integrada | Muestra el modelo y permite configurarlo o personalizarlo según el modo elegido y el diseño preparado. |
De la autorización a tu carrito
Primero, configura la conexión y una sesión de integración para un producto. Después, añade la gestión de configuración, guardado del diseño y pedidos según la herramienta elegida.
- Configura las credenciales API y el dominio de la tienda. Prueba la conexión con una solicitud ejecutada en el backend.
- Vincula el producto de tu tienda con el diseño y la herramienta Alter Product adecuada.
- Integra el iframe e implementa el inicio de la comunicación. Crea una sesión temporal en el servidor y entrégala a la herramienta según la documentación.
- Gestiona el evento de configuración o personalización y guarda los datos necesarios en tu carrito.
- Después de la compra, sincroniza el pedido y los datos y archivos necesarios con tu sistema de preparación de pedidos.
Consulta las instrucciones de tu herramienta
Las instrucciones de integración incluyen parámetros y ejemplos. Los capítulos postMessage explican la comunicación con la página, y la documentación API describe las operaciones del backend.
Viewer: integración básicaConfigurator: integración básicaCustomizer: integración básicaViewer: comunicación con la páginaConfigurator: comunicación con el carritoCustomizer: sesión y guardado del diseño del clienteAPI: sincronización de pedidosAPI: recursos e importación de diseñosAPI: acceso a archivos
Comprueba todo el recorrido antes de empezar a vender
Prueba el producto como un cliente: desde abrir la página hasta ver el diseño en el pedido. Haz pruebas en ordenador y móvil, también sin iniciar sesión en el panel administrativo.
Lista breve de comprobación
Después de preparar un producto, recorre todo el proceso. Solo entonces repite la configuración validada para los demás artículos del catálogo.
- Comprueba que el plan Business o superior esté activo y que el dominio funcione por HTTPS con un certificado SSL/TLS válido.
- Revisa la visibilidad de las páginas de herramientas, la asignación del diseño y el modo de integración elegido.
- Elige distintas tallas y colores. Compara las opciones del diseño con las variantes y precios de la tienda.
- En Customizer, añade texto o un gráfico, guarda el diseño y añádelo al carrito. Prueba también editar una personalización ya añadida.
- Verifica la vista previa, la cantidad y la configuración en el carrito y después de hacer un pedido de prueba.
- Abre el diseño asociado al pedido y comprueba los archivos de impresión generados. Si utilizas POD, prueba también la asignación del proveedor y el envío controlado de la solicitud de producción.
- Revisa la biblioteca disponible para el cliente, el idioma, la identidad de marca y el comportamiento de la web en el móvil.