integração OpenCart#
Adicione Room Visualizer por meio de uma extensão OpenCart 4 ou tema personalizado e vincule um código de produto estável da loja virtual ao catálogo ideal.house.
Status de verificação: documentação da extensão OpenCart 4 revisada em 7 de setembro de 2026. Nenhuma loja de teste estava disponível. Extensões OpenCart 3 e temas de terceiros usam caminhos e convenções de eventos diferentes; adapte este guia à versão principal instalada.
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 e escolha do código#
Prepare uma loja de staging, acesso ao desenvolvimento de extensões/temas, Shop ID, Publishable Key e registros de teste importados. O núcleo OpenCart normalmente expõe model em templates de produto, enquanto o SKU pode exigir trabalho de controlador/extensão dependendo da versão e do tema. Escolha um valor e use-o consistentemente como o sku do ideal.house.
Não edite arquivos de catálogo principais diretamente. Embale as alterações como uma extensão OpenCart 4 ou mantenha-as em um tema personalizado sob controle de versão.
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 Product Code deve ser igual ao sku do catálogo ideal.house, caractere por caractere.
Renderize o contêiner do produto#
Estenda o template de produto ativo por meio da sua extensão. Se você mapear intencionalmente o campo model do OpenCart para o sku do ideal.house, posicione-o próximo às ações do produto:
{% if model %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ model }}">
</div>
</div>
{% endif %}
O autoescape do Twig depende da configuração do ambiente; garanta que o valor escolhido seja escapado para uso como valor de atributo HTML. Se você optar pelo campo real SKU, adicione esse valor sanitizado aos dados do template do controlador na sua extensão e renderize-o no lugar de model.
Carregue o SDK uma vez#
Adicione um ativo de loja virtual JavaScript por meio do mecanismo de extensão/tema. Ele deve criar um script com os atributos obrigatórios:
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);
}
Armazene os dois valores públicos na configuração da extensão e renderize-os com segurança. Nunca coloque um Client Secret do ideal.house em JavaScript, Twig, logs de extensão ou HTML em cache.
Opções, variantes e renderização dinâmica#
As opções OpenCart não têm um mapeamento universal um-para-um com variantes que contenham SKU. Se sua loja usar uma extensão de opção/variante, integre-se ao callback de variante resolvida e ao modelo de dados documentados dessa extensão. Substitua o host somente quando ele fornecer o código selecionado exato:
function renderIdealhouseCode(host, productCode) {
host.replaceChildren();
const code = String(productCode || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Este é código do adaptador do cliente; não há um evento de variante OpenCart universal neste guia. Para pesquisa AJAX, filtros de categoria, pop-ups e visualização rápida, renderize contêineres limpos nos templates da extensão ou invoque a ponte a partir do callback de conclusão documentado. Nunca copie filhos produzidos pelo SDK.
Importar produtos#
Exporte o model/SKU escolhido pelo OpenCart para cada item visualizável e vincule-o ao sku do ideal.house. Use Envio de produtos, depois siga Importar produtos, Status da tarefa, Listar produtos, Atualizar produtos, Excluir produto e Erros e novas tentativas.
Chamadas de API Admin do OpenCart, exportações agendadas, listeners de eventos e webhooks são trabalho de integração de propriedade do cliente.
Verificar e remover#
Teste produtos simples, todas as combinações de opções suportadas, códigos ausentes e duplicados, SKUs de ideal.house desconhecidos, páginas de categoria/busca, visualização rápida, navegação Back/Forward do navegador, layout mobile, múltiplas lojas, idiomas/ moedas, consentimento e cache/minificação em produção. Confirme exatamente uma solicitação de SDK e uma correspondência exata de código.
Para remover, desative/desinstale a extensão ou remova a substituição e o ativo do tema personalizado, atualize as modificações/eventos do OpenCart, limpe os caches do tema/CDN e verifique se a solicitação de SDK e os contêineres estão ausentes.