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.
O número de Customizers incorporados e de alterações às suas atribuições a produtos é ilimitado no WordPress ou no seu próprio servidor. Continuam a ser necessários um plano ativo com incorporação, sessões incorporadas e as quotas de transferência aplicáveis da nuvem Alter. Os Customizers guardados na nuvem Alter Product mantêm o limite de capacidade do plano escolhido. O seu armazenamento e a largura de banda dependem do alojamento ou do serviço AWS.
- 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.
Escolher um plano com uma quota mensal de sessões superior aumenta a quota sem repor a utilização registada a zero. Com uma conta Alter Product, pode comprar sessões na gestão da subscrição, mesmo antes de escolher um plano. A utilização nas ferramentas incorporadas exige um plano compatível.
São usadas primeiro as sessões incluídas, seguidas das reservas compradas que expiram mais cedo. Cada pacote pago é válido durante 6 meses de calendário desde o pagamento, em UTC, e transita para os meses seguintes até expirar. Uma nova compra não prolonga os pacotes anteriores.
Ative o carregamento automático na gestão da subscrição. Escolha um pacote, um limiar como número inteiro de sessões compradas e um limite mensal opcional com impostos. A compra começa quando a reserva comprada e não expirada atinge o limiar ou fica abaixo dele. As sessões do plano não contam; 0 significa que a reserva comprada está vazia. O pagamento pode demorar um pouco. O esgotamento da quota só bloqueia novas sessões incorporadas quando tanto a quota do plano como a reserva estão vazias.
A transferência de ficheiros tem um limite separado; comprar sessões não o aumenta. O Shopify tem faturação própria e estas compras de reserva através do Stripe não se aplicam ao Shopify.
Escolha um plano com uma quota mensal de transferência maior ou compre transferência na gestão da subscrição. Primeiro é utilizada a transferência do plano, depois a comprada. Cada pacote pago expira seis meses de calendário após o pagamento. Novas compras não prolongam pacotes anteriores. O pacote que expira primeiro é utilizado primeiro. As compras exigem uma conta Alter Product ativa. A transferência e as sessões incorporadas têm reservas separadas. Estas compras não se aplicam à faturação Shopify.
Na gestão da subscrição, escolha um pacote de transferência, uma reserva comprada mínima em GiB e um limite mensal de despesas opcional com impostos incluídos. Zero significa uma reserva comprada vazia. Cada compra automática cobra um pacote completo. O carregamento automático compra o pacote escolhido quando a reserva comprada não expirada atinge o limiar ou fica abaixo dele. A transferência do plano não conta para este limiar. Se o limite de despesas restante não cobrir o pacote completo com impostos, a compra não será iniciada.
- 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.