Como usar o plugin Simplio3D WordPress no Elementor

O plugin Simplio3D WordPress não tem widgets Elementor próprios, nem precisa deles. Cada bloco Simplio3D também é um shortcode, e pode ser inserido com o widget Shortcode do próprio Elementor, um widget por bloco. O shortcode apresenta exatamente o mesmo que o bloco, pelo que um configurador de produtos no Elementor funciona tal como um criado no editor de blocos WordPress: uma configuração em tempo real partilhada por todos os widgets, a barra de ferramentas 3D, dimensões, AR, o preço em tempo real, o resumo, os pedidos de orçamento e o carrinho WooCommerce.

Este guia aborda o caminho mais curto: encontrar os seus IDs, criar o layout, adicionar ao carrinho e corrigir os erros mais comuns. Foi escrito para a versão 2.0.3 do plugin e funciona com a versão gratuita do Elementor.

Antes de começar

• O plugin Simplio3D, versão 2.0.3 ou posterior, disponível no diretório de plugins WordPress.org, a funcionar no modo Simplio3D v3. As novas instalações começam neste modo. Um site atualizado da versão 1.x permanece no modo Legacy até efetuar a mudança em Simplio3D → Migração.
• A sua conta Simplio3D ligada: em WordPress, aceda a Simplio3D → Iniciar sessão em Simplio3D.
• Um projeto publicado: em Simplio3D, abra Partilhar, ative a ligação de partilha e deixe-a sem palavra-passe. Se restringir domínios de incorporação, adicione o domínio do seu site.
• Elementor. A versão gratuita é suficiente.
• Para Adicionar ao carrinho: WooCommerce e um produto simples com preço.

Adicionar ao carrinho com WooCommerce

No editor de blocos, escolher um produto no bloco Adicionar ao carrinho associa-o ao seu projeto. Um shortcode não consegue fazê-lo, por isso associe primeiro o produto manualmente:

1. Em Produtos, edite um produto simples com um preço normal.
2. Abra Dados do produto → Simplio3D, defina projeto Simplio3D como o seu projeto e Preço do carrinho como preço calculado por Simplio3D (validado no servidor), ou como o preço WooCommerce do próprio produto. Clique em Atualizar.
3. Anote o ID do produto: passe o cursor sobre o produto na lista Produtos ou consulte post=123 na barra de endereço do ecrã de edição.
4. Substitua o widget Enviar por [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Adicione quantity_mode="selector" para permitir que os clientes escolham uma quantidade e after_add="cart" para os levar ao carrinho.

O carrinho, o checkout, os e-mails de encomenda e WooCommerce → Encomendas passam então a mostrar a configuração, uma imagem da mesma e o preço validado.

Um produto associado ao preço Simplio3D só pode ser comprado através do configurador, pelo que o botão normal Adicionar ao carrinho de WooCommerce na página do produto pede aos clientes que o configurem primeiro. Com o Elementor gratuito, mantenha o configurador numa página própria e crie uma ligação para ela a partir do produto, por exemplo, com uma ligação «Configure o seu» na descrição curta. Com o Elementor Pro, pode criar um modelo de Produto individual que utilize os widgets Shortcode Simplio3D em vez do widget Adicionar ao carrinho do Elementor; pré-visualize essa configuração antes de a publicar.

Definições mais utilizadas

Adicione definições dentro do shortcode, com aspas retas e sublinhados. Copiar do Word, Google Docs ou Slack pode transformar as aspas em aspas curvas, e o WordPress ignorará então a definição.

• height="620px" mobile_height="400px" no Visualizador define a sua altura em computadores e em ecrãs com até 781 px de largura.
• loading="eager" num Visualizador no topo da página carrega-o imediatamente, em vez de apenas quando entra na área visível ao deslocar a página.
• layout="dropdown" num widget Opções transforma as escolhas num menu pendente. grid, list e buttons também funcionam, consoante o tipo de opção.
• columns="4" thumbnails="small" permite colocar mais escolhas em cada linha.
• prefix="From" tax_display="exclude" no Preço adiciona texto antes do valor e mostra o preço antes de impostos, correspondendo ao carrinho WooCommerce.
• summary_mode="compact" hide_defaults="yes" no Resumo coloca cada opção numa linha e omite as que permanecem no valor predefinido.
• display="hosted" no Visualizador apresenta o configurador Simplio3D completo, incluindo as opções, num único widget, sem necessidade de IDs de opções.
• instance="oak" em cada widget de um conjunto mantém separados dois configuradores na mesma página. Os widgets com a mesma instância partilham uma configuração.

Faça corresponder ao design do seu Elementor

• O separador Avançado de cada widget Shortcode permite controlar margens, preenchimento, fundo, contorno e visibilidade responsiva. O visualizador preenche a respetiva coluna, por isso defina a largura da coluna ou do contentor para o tornar mais largo ou mais estreito.
• Os blocos usam o tipo de letra e a cor do texto da página. A cor de destaque (a escolha selecionada, o anel de foco e os botões) recorre por predefinição a um preto quase absoluto em temas clássicos como o Hello Elementor, por isso defina-a como a cor de destaque do seu Elementor em Aparência → Personalizar → CSS adicional: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Outras propriedades incluem --s3d-radius para cantos, --s3d-thumb para o tamanho das miniaturas e --s3d-button-bg para o botão. Para estilizar apenas um widget, adicione class="my-finish" ao respetivo shortcode e direcione .my-finish no seu CSS.