Widget de loja online

Início rápido

Carregue o SDK, monte o widget e ligue um callback. Quinze minutos de uma página de produto em branco a uma disposição funcional com sincronização do carrinho.

Updated 27 October 2026

Este guia transforma uma página de produto simples num planificador incorporado a funcionar. Antes de começar, certifique-se de que tem duas coisas da sua conta Scalarcut: uma chave de widget e um catálogo. Ambas são criadas para si no registo.

1. Carregue o SDK

Adicione o SDK Scalarcut à sua página. É um script pequeno e sem dependências:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>

2. Adicione um contentor

Reserve um elemento onde o planificador será renderizado. O widget preenche o contentor e redimensiona-se enquanto o comprador trabalha:

<div id="sc-tiling" style="max-width: 960px; margin: 0 auto;"></div>

3. Monte o widget

<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
    locale: 'en',
    currency: 'USD',
    onAddToCart(payload) {
      // Add the resolved lines to your own cart.
      payload.lines.forEach((line) => {
        yourStore.addToCart(line.sku, line.qty, line.unit);
      });
    },
  });
</script>

É toda a integração. O widget carrega o seu catálogo, fixa-se nas dimensões do SKU em visualização e devolve as linhas de carrinho resolvidas através de onAddToCart.

4. Mantenha o SKU sincronizado

Se o comprador mudar para outro produto com a página aberta, avise o widget:

const planner = ScalarcutTiling.mount('#sc-tiling', { /* ... */ });
planner.setSku('NEXT_PRODUCT_SKU');

O widget muda o material, mantém a disposição do comprador e recalcula as quantidades.

O que acontece a seguir

  • O comprador descreve a parede ou o chão, vê cada corte e pode abrir a lista de cortes e o blueprint.
  • Quando clica em Adicionar ao carrinho, o seu callback onAddToCart recebe { lines, layoutFingerprint, layoutToken }, e a sua loja adiciona os artigos.
  • Nada sai da sua loja: preço, stock e checkout permanecem exatamente onde estão hoje.

Passos seguintes