Pagekraft v1 — Web Components

Ambiente de demonstração. Escolha um componente:

Compra e conta

Login auth-wc — modal Catálogo catalogue-wc — grade de pacotes Pacote compact package-wc — card isolado Checkout checkout-wc — carrinho e pagamento Minha conta my-account-wc — pedidos e perfil Profile box profile-box-header-wc — avatar + créditos Créditos credits-popover-wc — badge e popover

Agenda e reserva

Agenda appointment-group-wc — aulas e slots Book / map / cancel book-wc · map-wc · cancel-book-wc — smoke completo

Fluxos globais (auto-inject)

Gift card gift-card-redeem-wc — ?codegf= Termos terms-wc — pk-open-terms Confirmação e-mail email-confirm-wc — OTP Revalidação revalidate-wc — recadastramento Debug técnico developer-modal-wc — pk-open-developer-modal

Listagens e navegação

Unidades unit-list-wc Instrutores instructor-list-wc Atividades activity-list-wc Menu mobile mobile-menu-wc — hambúrguer

Setup global, feito uma única vez em um lugar que se repete em todas as páginas (header ou footer do site). Os componentes específicos de cada página partem daqui.

Defina a configuração global window.__WC_CONFIG__ (antes do loader, para que ele já a encontre):

<script>
  window.__WC_CONFIG__ = {
    apiBaseUrl: '',   // vazio = mesma origem
    appCode: 'users',
    // assetBase: '/webcomponents'  // opcional: só se os assets forem publicados em outro caminho
  }
</script>

Carregue axios e @angularecommerce/ws via CDN, nessa ordem, antes do loader — a partir do build de produção essa dependência não vem mais empacotada dentro dos arquivos da lib, é carregada como script global:
```
<script src="https://cdn.jsdelivr.net/npm/axios@1.18.1/dist/axios.min.js"></script>
<script src="https://static.angulare.app/ws/v1.6.19/ws.min.js?x=1.6.19"></script>
```

Carregue o loader no <head> do site:

<script type="module" src="/web-loader.js"></script>

Com isso pronto, dois grupos de componente:

Globais (auth-wc, checkout-wc, book-wc, map-wc, cancel-book-wc, gift-card-redeem-wc, email-confirm-wc, terms-wc, developer-modal-wc, mobile-menu-wc) — o loader injeta a tag sozinho em toda página. Não declare nada; só um gatilho (id/class <tag>-open, ou o evento próprio de cada um).
Os demais (catalogue-wc, appointment-group-wc, my-account-wc, etc.) — precisam da tag declarada onde o conteúdo deve aparecer.

Use o ícone de instalação em cada demo para ver o guia específico do componente.