Integração do Shopware 6#
Adicione o Room Visualizer por meio de um plugin de storefront do Shopware 6 ou tema personalizado e use o número de produto do canal de vendas selecionado como o Product Code do ideal.house.
Status de verificação: Documentação de storefront da Shopware revisada em 7 de setembro de 2026. Nenhuma loja de cliente estava disponível. Este caminho direciona-se à loja Twig padrão Shopware 6; storefronts headless/composable precisam de seu adaptador específico do framework.
Antes de carregar o SDK: abra Dashboard → Settings, adicione a origem do storefront ao Allowed Origins (CORS) e clique em Save. Inclua o hostname publicado e quaisquer origens de preview ou staging que você use; separe várias origens com vírgulas. Consulte Etapas de configuração.
Pré-requisitos#
Prepare uma loja de desenvolvimento, acesso à fonte do plugin/tema, um canal de vendas em staging, Shop ID, Publishable Key e números de produto importados. Trabalhe em um plugin ou tema filho em vez de modificar o core do Storefront ou um tema de fornecedor.
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>
Mapeie exatamente o productNumber do Shopware para o sku do ideal.house. O SDK não consulta a Store API do Shopware.
Estender o template de produto#
No seu plugin, estenda o template/bloco Twig usado próximo ao widget de compra na versão do Shopware instalada. Renderize um host usando o produto do canal de vendas atual:
{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}
{% block buy_widget_buy_container %}
{{ parent() }}
{% if page.product.productNumber %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ page.product.productNumber|escape }}">
</div>
</div>
{% endif %}
{% endblock %}
Nomes de bloco e contexto podem mudar entre versões e temas do Shopware. Inspeccione o template da versão ativa, escolha o bloco de extensão mais restrito e confirme que page.product esteja disponível ali. Para um cartão de produto, use o contexto de produto do cartão.
Carregar o SDK#
Plugins do Shopware podem adicionar JavaScript de storefront e substituir templates. Adicione uma entrada de storefront local que crie o script do SDK uma única vez:
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);
}
Compile os assets do storefront e ative o plugin/tema usando o processo da sua versão do Shopware. Use valores de configuração para credenciais em um plugin reutilizável; renderize apenas o Publishable Key seguro para navegador.
Variantes e conteúdo dinâmico#
O Shopware frequentemente representa variantes vendáveis como produtos distintos com seu próprio productNumber e URL canônico. Em uma navegação completa, o Twig server-rendered emite naturalmente o novo código. Se seu tema alternar variantes sem recarregamento de página, conecte seu callback de conclusão documentado a:
function replaceIdealhouseProduct(host, productNumber) {
host.replaceChildren();
const code = String(productNumber || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Esta ponte é de propriedade do cliente porque temas e plugins de variante de terceiros diferem. Listagens carregadas por filtros/componentes off-canvas devem renderizar ou recriar contêineres limpos após o novo DOM chegar. Não clone filhos gerados pelo SDK.
Importação de produto#
Exporte cada productNumber de produto/variante do Shopware como ideal.house sku. Importe por meio de Envio de produtos, depois use Importar produtos, Status da tarefa, Listar produtos, Atualizar produtos, Excluir produto e Erros e novas tentativas.
Qualquer sincronização de Store API/Admin API, tarefa agendada ou integração de Flow Builder/webhook é código separado do cliente.
Verificar e remover#
Teste um produto pai, cada variante visualizável, números de produto ausentes e desconhecidos, listagens, filtros, off-canvas/quick view, Back/Forward do navegador, layout móvel, comportamento de cache/proxy e todos os canais/domínios de vendas relevantes. Confirme uma solicitação de SDK e correspondência exata entre productNumber/SKU.
Para remover, desative/desinstale o plugin ou remova o Twig do tema filho e JavaScript, reconstrua os assets do storefront, limpe caches e verifique se nenhuma solicitação de SDK ou contêiner permanece.