integração Shoplazza#
Adicione o Room Visualizer ao Shoplazza com uma Theme App Extension ou tema personalizado Liquid e renderize o SKU da variante selecionada como o Product Code do ideal.house.
Status de verificação: documentação de tema, extensão, produto e variante do Shoplazza revisada em 7 de setembro de 2026. Nenhum app de parceiro ou loja de teste de comerciante estava disponível, portanto a instalação e a alternância de variantes devem ser validadas em uma loja de desenvolvimento.
Antes de carregar o SDK: abra Dashboard → Settings, adicione sua origem de loja virtual a Allowed Origins (CORS) e clique em Save. Inclua o hostname publicado e quaisquer origens de preview ou staging que você utilize; separe várias origens com vírgulas. Veja Etapas de configuração.
Pré-requisitos#
Prepare uma loja de desenvolvimento/comerciante Shoplazza, acesso ao código-fonte do tema ou da extensão de app, Shop ID, Publishable Key e registros importados para SKUs de variante suportados. Duplique o tema do comerciante antes da personalização.
Uma Theme App Extension é o caminho reutilizável e manutenível. Um App Block injeta interface visível e deve ser adicionado pelo comerciante a uma seção de produto compatível; um App Embed pode carregar comportamento global.
Contrato mínimo do SDK#
<script
src="https://sdk.ideal.house/sdk.js"
data-shop-id="<SHOP_ID>"
data-publishable-key="<PUBLISHABLE_KEY>"
async
></script>
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
O Shoplazza documenta o variant.sku; use essa string exata como o sku do ideal.house.
Adicione um App Block#
Crie um App Block de extensão de tema para a seção de produto. Blocos Liquid do Shoplazza em contexto de produto podem acessar product. Comece com um host vazio e, em seguida, use o estado do product-form do tema ativo para fornecer a variante selecionada:
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
Para um produto de variante única, o JavaScript do bloco pode ler a única entrada documentada em product.variants a partir dos dados serializados com segurança pelo tema. Para múltiplas variantes, mantenha o host vazio até que o formulário de produto existente do tema resolva uma seleção. Isso evita depender de uma propriedade de variante selecionada Liquid não documentada.
Carregue o SDK#
No idealhouse.js, carregue o SDK uma vez. Para um app reutilizável, forneça Shop ID e Publishable Key por meio da configuração pública sanitizada do bloco/embed, em vez de fazer hard-code de um único comerciante:
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
const script = document.createElement('script');
script.src = 'https://sdk.ideal.house/sdk.js';
script.async = true;
script.dataset.shopId = '<SHOP_ID>';
script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
document.head.append(script);
}
Nunca exponha o segredo do app ou o Client Secret de cliente do ideal.house.
Mantenha a variante selecionada sincronizada#
Conecte o callback de product-form documentado do tema a este adaptador:
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
O objeto de variante do Shoplazza documenta o sku, mas os temas podem implementar a seleção de maneira diferente. A conexão do callback é trabalho do adaptador do cliente. Recrie o contêiner após uma nova seleção; não apenas altere a marcação populada pelo SDK.
Para cartões de coleção, visualização rápida, filtros de busca e seções renderizadas no cliente, adicione um host em nível de item e execute a ponte após o callback de renderização documentado do tema. Se nenhuma variante final for conhecida em um cartão, omita o botão ou, como alternativa, forneça um link para a página do produto.
Importar produtos#
Exporte todo o variant.sku suportado e importe-o como sku do catálogo ideal.house por meio do Envio de produtos. Veja Importar produtos, Status da tarefa, Listar produtos, Atualizar produtos, Excluir produto e Erros e novas tentativas.
Exportações de API Admin, webhooks, sincronização agendada, OAuth e distribuição de extensões são implementação do cliente.
Verificar e remover#
Teste o posicionamento do App Block, ativação do Embed, um produto de variante única, todas as escolhas multi-variante, SKUs em branco/duplicados/desconhecidos, cartões de coleção, visualização rápida, filtros, histórico do navegador, mobile, localização/moeda, consentimento e modos de preview/ao vivo do tema. Confirme uma solicitação de SDK e o mapeamento exato de variante SKU.
Para remover, desative e desinstale a Theme App Extension ou remova o Liquid/JavaScript personalizado, publique o tema limpo, limpe os caches da loja virtual e verifique se o SDK e todos os nós data-idealhouse-* estão ausentes.