Viewer: visualize o produto
Apresentação do modelo 3D e da sua aparência. Útil quando o mais importante é mostrar o produto de diferentes ângulos sem disponibilizar a edição da estampagem.
Integração de comércio eletrónico - do projeto à encomenda
Incorpore o Alter Product no seu site: WordPress + WooCommerce ou API
Adicione apresentação em 3D, configuração de variações e personalização de produtos ao seu site. O cliente vê o produto, escolhe as opções e prepara o projeto na sua loja, enquanto gere o catálogo e as encomendas no seu sistema.
Escolha o plugin para WordPress com WooCommerce instalado para fazer a configuração sem escrever código de integração. Se desenvolve o seu próprio site ou loja, ligue as ferramentas incorporadas ao backend e ao carrinho através da Public API e de eventos postMessage.
As ilustrações mostram a interface real, extraída de gravações e do painel do plugin. Os nomes dos botões nas imagens estão em inglês; a aparência da ferramenta depende da configuração da loja.
Dois caminhos para ter a sua loja com personalização
Pode preparar o mesmo projeto de produto para apresentação, configuração ou edição da estampagem. Escolha como o ligar à loja de acordo com o seu site e o trabalho de desenvolvimento necessário.
Plugin ou integração própria?
O plugin oferece suporte pronto a utilizar para WordPress e WooCommerce. A API permite criar a sua própria ligação a outra plataforma, a uma aplicação headless ou a um sistema de encomendas existente.
| Área | WordPress + WooCommerce | Sistema próprio pela API |
|---|---|---|
| Configuração inicial | Instalação do plugin e assistente de ligação no painel do WordPress. | Implementação da ligação no backend e da incorporação no site. |
| Produtos e variações | Associação do projeto ao produto WooCommerce e sincronização das variações. | Associação dos identificadores de produtos e opções aos dados da sua loja. |
| Carrinho e encomendas | Suporte pronto para definições, projetos dos clientes e pré-visualizações no WooCommerce. | Tratamento dos eventos da ferramenta incorporada e sincronização das encomendas no seu sistema. |
| Ficheiros e recursos | Biblioteca local, projetos e ficheiros de encomendas no servidor do WordPress. | Armazenamento e acesso aos dados de acordo com o modo de integração escolhido. A opção com armazenamento próprio exige que implemente esse suporte. |
Qual ferramenta disponibilizar ao cliente?
Escolha a ferramenta de acordo com o que o cliente deve fazer no site. Prepare previamente o projeto e as regras de personalização no Designer.
Configurator: escolha uma variação
Seleção de opções de produto previamente preparadas, como tamanho, cor ou material. O cliente vê a mudança no modelo e envia a configuração ao carrinho.
Customizer: prepare a sua própria estampagem
Personalização usando as ferramentas, imagens, textos e modelos disponibilizados. O projeto guardado pelo cliente fica associado a um item do carrinho ou da encomenda.
Designer: prepare o seu catálogo
Área de trabalho do proprietário da loja. Aqui prepara a composição, as variações, as áreas de impressão e as definições das ferramentas para os clientes. O acesso à edição administrativa é separado da utilização da loja.
WordPress + WooCommerce: da instalação ao produto pronto
O Alter Product é um plugin para WordPress. Para integrar a loja, exige que o WooCommerce esteja instalado e ativo. A configuração habitual é feita no painel, sem criar uma implementação própria da API e do carrinho.
Requisitos: WordPress, WooCommerce, HTTPS e plano Business
Para incorporar o Alter Product no seu site, precisa de uma subscrição Business ativa ou de um plano superior que inclua esta funcionalidade. Isto aplica-se tanto ao plugin WordPress + WooCommerce como à integração própria através da API. Os planos Personal FREE e Personal não incluem a incorporação na sua loja.
Para usar o plugin, prepare o WordPress com WooCommerce instalado e ativo, além de uma conta Alter Product. Armazenar ficheiros no seu alojamento não substitui a subscrição necessária: o Alter Product continua a fornecer a aplicação e a autorizar a sua execução.
- Disponibilize a loja por HTTPS com um certificado SSL/TLS válido para o domínio. Isso é necessário para que as ferramentas incorporadas funcionem corretamente no site público.
- Ative as ligações permanentes amigáveis do WordPress conforme as instruções de instalação.
- Reserve espaço no alojamento para modelos, imagens, projetos e ficheiros de encomendas. A biblioteca da loja utiliza os recursos do seu servidor.
Porque são necessários HTTPS e um certificado SSL/TLS?
O Alter Product funciona no site da loja dentro de um iframe. Os navegadores restringem o acesso a algumas funções usadas pela aplicação quando a página não oferece um contexto seguro. O HTTPS cifra a ligação, e um certificado válido permite ao navegador verificar o domínio.
O navegador também verifica a página que contém o iframe. Por isso, o endereço HTTPS da aplicação Alter Product não basta se a loja usa HTTP. O HTTPS também precisa estar ativo no seu site, onde a ferramenta é incorporada. Isso decorre das regras de segurança dos navegadores para aplicações incorporadas.
- Ative um certificado SSL/TLS no seu fornecedor de alojamento e verifique se é válido para o domínio da loja.
- Configure os endereços do site WordPress e o domínio da integração para usar HTTPS. Ative o redirecionamento de HTTP para HTTPS.
- Abra a página do produto por HTTPS e verifique se o navegador indica problemas com o certificado ou com recursos carregados por HTTP.
Ligue a loja pelo Auto Connect
A ligação automática orienta-o na autorização da conta Alter Product e na configuração da loja. Nesse processo, não é necessário transferir as chaves de API manualmente.
- No WordPress, aceda a Plugins → Adicionar novo, procure Alter Product, instale e ative o plugin.
- Abra o painel do Alter Product e escolha Auto Connect. Entre na conta Alter Product correta, verifique a loja e autorize a ligação.
- Volte ao WordPress. Escolha o modelo inicial e descarregue os recursos necessários. Aguarde a conclusão das transferências e das verificações de prontidão.
- Verifique as páginas de ferramentas criadas e as definições de exibição; depois, prepare o produto.
Associe o projeto e sincronize as variações
Na edição do produto WooCommerce, abra o separador Alter Product. Crie um projeto ou escolha um existente e abra o Designer. Configure a estampagem, as opções disponíveis e as áreas de impressão desse produto.
- Para um produto variável, prepare os atributos, como tamanhos, e as variações correspondentes no WooCommerce.
- No Designer, use Sync variants para associar as opções do projeto às variações do produto. Verifique também as seleções predefinidas que não são atributos de variação no WooCommerce.
- Guarde o projeto e o produto. Escolha a ferramenta exibida na página e a forma de abri-la.
- Verifique o resultado na página do produto: selecione algumas variações, prepare um projeto e prossiga para o carrinho.
A sua biblioteca no servidor do WordPress
Armazena modelos, projetos, imagens e ficheiros de encomendas no alojamento em que o seu WordPress funciona. Os recursos adicionados localmente servem a sua loja e não passam a fazer parte da biblioteca pública do Alter Product para outras lojas.
O que é armazenado localmente?
O plugin guarda ficheiros de modelos, bibliotecas, projetos, mockups e encomendas no ambiente do WordPress. Os dados dos projetos do gerador e das suas revisões também são guardados na base de dados dessa instalação.
Pode adicionar os seus próprios materiais e importar recursos selecionados do Alter Product. Após a transferência, passa a usar uma cópia local. Importar, verificar atualizações e descarregar novas versões são ações separadas.
| Local no painel | O que faz nesse local |
|---|---|
| Recursos | Faça a gestão de modelos, imagens, modelos de projeto, fundos, logótipos, texturas e ambientes, entre outros. As formas de adicionar dependem do tipo de recurso. |
| Gerador de modelos | Crie projetos locais a partir de modelos e trabalhe com modelos associados ao gerador. |
| Projetos de produtos / Designer | Prepare ou importe um projeto, edite-o e associe-o a um produto da loja. |
| Encomendas WooCommerce | Aceda aos projetos guardados dos clientes, às pré-visualizações e aos ficheiros necessários para processar a encomenda. |
Ficheiros locais, aplicação Alter Product incorporada
Mantém os recursos no seu alojamento, enquanto a interface das ferramentas é carregada do Alter Product num iframe. O serviço Alter Product verifica o acesso da conta, o plano e as sessões, além de fornecer o catálogo para importação. A integração exige ligação com esse serviço.
Nas cópias de segurança, preserve a base de dados, o diretório de ficheiros e as chaves e salts do WordPress necessários para ler os dados cifrados do plugin. Assim, consegue restaurar tanto as imagens visíveis como os dados necessários para continuar a trabalhar.
Personalização no site da sua marca
A ferramenta incorporada pode fazer parte da página do produto ou de uma página separada do WordPress. O cliente permanece no fluxo de compra da sua loja, e o WooCommerce cuida do carrinho e da encomenda.
Página do produto, página da ferramenta ou bloco
Escolha a forma de exibição de acordo com o layout da loja: ferramenta na página do produto, botão para uma página dedicada ou incorporação pelos blocos e shortcodes disponíveis. Viewer, Configurator e Customizer têm funções diferentes; não precisa disponibilizar todos ao cliente ao mesmo tempo.
- Exiba o Viewer onde o cliente deve visualizar o modelo do produto.
- Use o Configurator quando vender variações e opções previamente preparadas.
- Escolha o Customizer quando o cliente precisar adicionar texto, uma imagem ou alterar a composição da estampagem.
Fundos, logótipo e idioma próprios
Adapte a apresentação do produto à sua marca. No plugin, gere fundos e logótipos locais e as definições visuais das ferramentas incorporadas. A disponibilidade de cada opção depende do plano.
- O fundo da cena, as cores da interface e a aparência preparada para o projeto ajudam a manter a identidade visual da loja.
- A aplicação e o plugin oferecem 22 idiomas. O idioma do painel do WordPress é definido por utilizador, e o idioma do site, nas definições do site.
- Prepare os nomes dos produtos, os textos das estampagens e as descrições do catálogo nos idiomas dos seus clientes. O suporte a um idioma na interface não significa a tradução automática do conteúdo da loja.
Do projeto do cliente ao item da encomenda
O cliente escolhe uma variação e prepara a personalização. O plugin associa a configuração e o projeto guardado ao item do carrinho e, depois, à encomenda WooCommerce. Os mockups disponíveis ajudam a identificar a estampagem encomendada.
- O cliente abre o produto ou a ferramenta associada e escolhe as opções.
- Ao personalizar, guarda o projeto e adiciona o produto ao carrinho.
- No carrinho, verifica o produto, a configuração e a pré-visualização disponível do projeto; depois, segue para o checkout do WooCommerce.
- No painel da encomenda, o proprietário abre o projeto guardado e prepara a sua produção.
Processamento de encomendas, POD e IA opcional
Ligar a loja às ferramentas 3D é o início do processo. A partir do projeto preparado, pode descarregar ficheiros para produção própria ou usar a integração do plugin com um fornecedor de impressão a pedido.
Ligue o Printify ou o Printful
Nas definições do plugin, configure a ligação com o fornecedor escolhido. Depois, associe o produto, as variações e os locais de impressão ao catálogo do fornecedor, prepare os ficheiros e envie a encomenda para produção pelo WooCommerce.
- Ajuste as áreas de impressão e o formato dos ficheiros ao produto e ao fornecedor específicos.
- Verifique os ficheiros gerados e a variação da encomenda antes de a enviar para produção.
- Use a atualização dos estados das encomendas e dos dados de envio no plugin.
- Se realiza a produção, descarregue ficheiros PDF, SVG ou PNG conforme os recursos do projeto e as definições de exportação.
IA para preparar imagens no painel do proprietário
Pode configurar a sua própria ligação a um fornecedor de IA e usar as funcionalidades disponíveis de geração ou melhoria de imagens durante a criação do projeto. Os pedidos do plugin saem do WordPress para o fornecedor escolhido e são faturados na sua conta desse fornecedor.
Sessões de incorporação: validade e consumo do limite
Uma sessão é uma autorização temporária para abrir uma ferramenta específica na sua loja. Ela ajuda a disponibilizar produtos aos clientes com segurança e é uma unidade contabilizada no limite mensal de sessões de incorporação. Não equivale a um clique, um visitante único ou uma encomenda.
Durante quanto tempo é válida a chave de sessão?
Ao iniciar uma ferramenta incorporada, a integração obtém um token temporário, ou chave de sessão. As credenciais permanentes da conta permanecem no servidor. O cliente não precisa copiar chaves nem entrar na conta Alter Product do proprietário.
Na implementação atual, a validade predefinida do token é de 15 minutos. O servidor pode definir outro prazo; por isso, a integração utiliza a data de expiração da sessão recebida. Reutilizar o token não estende esse prazo. Para autorizar novamente o acesso após a expiração, é necessária uma nova sessão.
Recarregar a página consome outra sessão?
Depende da ferramenta e de ela ainda ter uma sessão adequada e válida. O plugin não usa uma sessão partilhada entre todos os visitantes e todos os produtos. As regras abaixo descrevem o seu funcionamento atual.
| Situação | O que acontece com a sessão? | Impacto no limite |
|---|---|---|
| Primeira abertura da ferramenta sem uma sessão correspondente | A integração solicita um novo token para a ferramenta e o contexto do produto. | A emissão bem-sucedida de um novo token consome uma sessão. |
| Rodar o modelo, mudar a cor ou editar um texto na ferramenta aberta | O trabalho ocorre dentro da sessão iniciada. | Essas ações, por si só, não significam que novos tokens sejam emitidos. |
| Recarregamento completo da página com Viewer ou Configurator | O plugin geralmente obtém um novo token após a página ser recarregada. A memória de sessão dessas ferramentas não é preservada entre recarregamentos completos. | Cada nova emissão bem-sucedida de um token consome outra sessão. |
| Recarregamento do Customizer no mesmo separador | O Customizer pode reutilizar a sessão guardada se ela corresponder à loja, ao produto, à encomenda e ao modo de trabalho e não estiver próxima da expiração. | A reutilização não aumenta o contador. Se as condições não forem atendidas, será necessária uma nova sessão. |
| Expiração do token, outro produto ou mudança de contexto de trabalho | Pode ser necessária uma nova autorização e um novo token. A disponibilidade do armazenamento do navegador também afeta a possibilidade de reutilização. | Um token recém-emitido aumenta o consumo do limite. |
Como considerar as sessões nos custos e no plano da loja?
O contador aumenta quando a API emite um novo token com sucesso. Usar um token válido já emitido não é uma nova emissão. Por isso, ao escolher um plano, considere as inicializações das ferramentas, os recarregamentos e as reaberturas, além do número de encomendas ou visitantes.
As ferramentas incorporadas na mesma loja partilham um limite mensal de sessões. O contador é mantido separadamente para cada loja, por mês de calendário em UTC. Novas sessões do Designer e do Gerador de modelos incorporados no painel do WordPress também aumentam este contador. Descarregar apenas um modelo disponível através da API de importação não abre uma sessão do editor.
Quando o limite é atingido, o sistema recusa a emissão de novas sessões. Trata-se de um limite de uso da subscrição; verifique a quantidade atual incluída no seu plano.
- Inicie a ferramenta onde o cliente realmente a utiliza. Para apresentar listas de produtos, pode usar fotos comuns e mockups prontos.
- Na integração própria pela API, evite criar uma sessão a cada renderização do componente ou mudança de opção. Reutilize uma sessão válida apenas no contexto ao qual ela pertence.
- Planeie o limite separadamente dos custos de produção POD e geração por IA, que decorrem do uso desses serviços externos.
Integração própria pela API
Tnuma loja própria, uma aplicação headless ou um sistema de encomendas próprio? Pode criar a sua própria camada de integração através da Public API do Alter Product e incorporar as ferramentas necessárias no site. Este caminho exige desenvolvimento.
Ligue o Alter Product usando a sua tecnologia
A Public API utiliza pedidos HTTP e dados JSON. Assim, pode criar a integração na linguagem e no ambiente do seu backend. Não é necessário reconstruir a sua loja em WordPress para incorporar as ferramentas Alter Product.
Abaixo estão exemplos de tecnologias para implementar a ligação no servidor. Em todas elas, as etapas são as mesmas: autorizar o acesso à API, criar a sessão da ferramenta e ligar produtos, carrinho e encomendas ao seu sistema.
JavaScript e TypeScript / Node.js
Adicione a integração ao backend em Node.js, por exemplo, com Express ou NestJS. Chame a API pelo servidor e disponibilize ao frontend os dados necessários para incorporar a ferramenta.
Python
Ligue a sua aplicação Python existente, como Django ou FastAPI, aos produtos, sessões e encomendas do Alter Product através de pedidos HTTP.
PHP
Use PHP numa loja ou aplicação própria, por exemplo, Laravel ou Symfony. Pode criar a sua própria integração pela API independentemente do plugin pronto para WordPress.
Java
Integre as ferramentas a um backend Java, como Spring, e associe os dados dos projetos ao seu catálogo de produtos e gestão de encomendas.
C# / .NET
Use um backend .NET, como ASP.NET Core, para autorizar o acesso, criar sessões e enviar dados aos processos existentes da loja.
Go
Implemente a ligação num serviço escrito em Go. O cliente HTTP padrão permite processar pedidos à API e respostas JSON.
Ruby
Adicione a integração a uma aplicação Ruby, como Ruby on Rails, e use o seu próprio modelo de produtos, carrinho e processamento de encomendas.
Rust
Ligue o backend Rust usando um cliente HTTP e suporte a JSON. Pode incluir sessões e eventos de compra na sua arquitetura de serviços.
Frontend adaptado ao seu site
No navegador, pode usar React, Vue, Angular ou HTML e JavaScript puros. TypeScript também é adequado para implementar a comunicação. A página incorpora o iframe, trata eventos postMessage e liga-se ao seu backend.
O frontend cuida da aparência da página e das respostas do carrinho; o backend cuida das chamadas autenticadas à Public API. Em frameworks que combinam as duas camadas, como Next.js, mantenha as chaves permanentes e a criação de sessões exclusivamente na parte do servidor.
Pode manter o seu próprio checkout, sistema de pagamentos, CMS e processo de execução de encomendas. Na implementação, ligue estes elementos aos dados do projeto e aos eventos da ferramenta Alter Product escolhida.
O que fornece a API e o que prepara o seu sistema?
O Alter Product fornece ferramentas 3D, dados de projetos e mecanismos de sessão. O seu backend liga-os aos produtos, contas de clientes, carrinho e processamento de encomendas. Pode criar endpoints intermediários para o seu frontend sem expor as credenciais do Alter Product no navegador.
| Camada | Responsabilidade |
|---|---|
| Frontend do seu site | Exibe o iframe, responde à comunicação da ferramenta e atualiza a interface da loja. |
| O seu backend | Autentica pedidos à Public API, cria sessões, controla o acesso do cliente e guarda associações com o seu carrinho ou as suas encomendas. |
| Public API do Alter Product | Fornece funções de ligação, produtos, associações de ferramentas, encomendas e acesso a ficheiros e recursos. |
| Ferramenta incorporada | Exibe o modelo e permite configurar ou personalizar conforme o modo escolhido e o projeto preparado. |
Da autorização ao seu carrinho
Primeiro, configure a ligação e uma sessão de incorporação para um produto. Depois, adicione o tratamento da configuração, da gravação do projeto e das encomendas, conforme a ferramenta escolhida.
- Configure as credenciais da API e o domínio da loja. Teste a ligação com um pedido executado no backend.
- Associe o produto da sua loja ao projeto e à ferramenta Alter Product adequada.
- Incorpore o iframe e implemente o início da comunicação. Crie uma sessão temporária no servidor e forneça-a à ferramenta conforme a documentação.
- Trate o evento de configuração ou personalização e guarde os dados necessários no seu carrinho.
- Após a compra, sincronize a encomenda e os dados e ficheiros necessários com o seu próprio sistema de processamento de encomendas.
Aceda às instruções da sua ferramenta
As instruções de incorporação apresentam parâmetros e exemplos. Os capítulos sobre postMessage explicam a comunicação com a página, e a documentação da API descreve as operações executadas pelo backend.
Viewer: incorporação básicaConfigurator: incorporação básicaCustomizer: incorporação básicaViewer: comunicação com a páginaConfigurator: comunicação com o carrinhoCustomizer: sessão e gravação do projeto do clienteAPI: sincronização de encomendasAPI: recursos e importação de projetosAPI: acesso a ficheiros
Teste todo o fluxo antes de começar a vender
Teste o produto como um cliente: desde a abertura da página até ao projeto apresentado na encomenda. Faça o teste no computador e no telemóvel, também sem sessão iniciada no painel administrativo.
Lista rápida de verificação
Depois de preparar um produto, percorra todo o processo. Só então repita a configuração validada para os restantes itens do catálogo.
- Verifique se o plano Business ou superior está ativo e se o domínio funciona por HTTPS com um certificado SSL/TLS válido.
- Verifique a visibilidade das páginas de ferramentas, a associação do projeto e a forma de incorporação escolhida.
- Escolha diferentes tamanhos e cores. Compare as opções do projeto com as variações e os preços da loja.
- No Customizer, adicione texto ou uma imagem, guarde o projeto e adicione-o ao carrinho. Teste também a edição de uma personalização já adicionada.
- Verifique a pré-visualização, a quantidade e a configuração no carrinho e após fazer uma encomenda de teste.
- Abra o projeto associado à encomenda e verifique os ficheiros de impressão gerados. Se usar POD, teste também o mapeamento do fornecedor e o envio controlado da solicitação de produção.
- Verifique a biblioteca disponível ao cliente, o idioma, a identidade visual e o comportamento do site no telemóvel.