Ir para o conteúdo
decodecodeveloper docs
Storefront → Templates → Commerce

Visão geral de commerce

Configure integrações de commerce para o framework Blocks 7.x publicado.

Apps de commerce são pacotes de integração no servidor para um site Blocks 7.x. Oferecem loaders, actions, tipos compartilhados e, quando disponíveis, middleware de requisição e hooks de UI. São diferentes dos MCP Apps do Studio, que estendem sua interface, e de um template de site, que fornece a implementação do storefront.

Plataformas suportadas

IntegraçãoPacoteGuia
VTEX@decocms/apps-vtexVTEX
Shopify@decocms/apps-shopifyShopify
Wake@decocms/apps-wakeWake
Email transacional@decocms/apps-resendResend
Tipos compartilhados@decocms/apps-commerceTipos de commerce
SEO, fontes e tags de analytics@decocms/apps-websiteApp Website

Fluxo de configure / autoconfigApps

Instale os pacotes dos provedores usados pelo site. Editores configuram os blocos no Site Editor; o código registra cada app no runtime. Editar um formulário não instala o pacote nem provisiona o provedor.

Passe o decofile carregado e um registro explícito para a autoconfiguração. Cada pacote exporta sua entrada de registro; @decocms/apps-commerce/registry fornece tipos compartilhados, não um catálogo combinado.

src/setup/apps.ts
import { autoconfigApps, type AppRegistry } from "@decocms/blocks-admin/apps";
import { loadBlocks } from "@decocms/blocks/cms";
import { VTEX_REGISTRY_ENTRY } from "@decocms/apps-vtex/registry";
import * as vtexMod from "@decocms/apps-vtex/mod";
import { SHOPIFY_REGISTRY_ENTRY } from "@decocms/apps-shopify/registry";
import * as shopifyMod from "@decocms/apps-shopify/mod";
 
const APP_REGISTRY: AppRegistry = [
  { ...VTEX_REGISTRY_ENTRY, module: async () => vtexMod },
  { ...SHOPIFY_REGISTRY_ENTRY, module: async () => shopifyMod },
];
 
await autoconfigApps(loadBlocks(), APP_REGISTRY);

Execute esse módulo apenas no servidor, depois de o setup carregar o decofile. No TanStack, importe-o pelo Worker entry após ./setup. Imports estáticos mantêm os módulos disponíveis no bundle de produção. Veja Apps.

O registro

Componha APP_REGISTRY com os pacotes instalados no site. Uma entrada é ignorada quando seu bloco de configuração não existe. autoconfigApps(blocks, registry) chama configure do provedor e registra os loaders, actions, sections e middleware retornados.

Configuração manual

Os inicializadores de conveniência recebem o mapa de blocos passado por initPlatform de createSiteSetup. Alguns aceitam apenas credenciais em texto. Use o registro quando precisar resolver secrets e siga o guia 7.x do provedor, sem misturar padrões de setup.

Peer dependencies

As integrações publicadas usam React 19 e os pacotes Blocks 7.x. Instale a mesma major do framework e versões compatíveis dos provedores; preserve as versões resolvidas no lockfile. Consulte os requisitos e as peer dependencies ao atualizar. @decocms/apps-* indica uma família de pacotes, não um nome instalável.

Estrutura por plataforma

  • O framework resolve a configuração e fornece o protocolo do editor.
  • Os pacotes de provedores consultam ou alteram o sistema externo de commerce.
  • O código do site renderiza produtos, carrinho e outras interfaces, usando hooks suportados ou suas próprias funções de servidor.
  • O Site Editor edita a configuração salva; o Studio fornece o workspace desse app.

Páginas de referência

Use a referência versionada de Apps para o contrato do runtime e estes guias para tarefas de implementação:

Veja também