Integração ShopEngine com Gutenberg para WooCommerce Store

Finalmente a espera acabou! ShopEngine agora é compatível com seu editor de blocos Gutenberg . Anteriormente, você podia acessar os widgets do ShopEngine apenas pela janela Elementor, certo?

Mas agora ShopEngine está disponível além disso. Além de acessar os widgets do ShopEngine através do Elementor, você pode usar o ShopEngine no Gutenberg para a loja WooCommerce . No entanto, no Gutenberg, esses widgets aparecerão como blocos.

De fato, as funções dos widgets Elementor e dos blocos Gutenberg são idênticas. Então, onde está a diferença? A diferença está na aplicação. Para widgets Elementor, você precisava arrastar e soltar widgets nas áreas designadas para visualizar a saída. Mas para os blocos de Gutenberg, você só precisa clicar nos blocos e seu trabalho está feito.

Uma visão geral de Gutenberg:

Como usuário do WordPress, você deve estar familiarizado com o termo Gutenberg . É um editor de conteúdo do WordPress, também conhecido como editor de blocos do WordPress. Hoje em dia, Gutenberg é o editor WordPress mais popular entre os usuários do WordPress devido à sua facilidade de uso. Muitos plugins do WordPress Gutenberg também estão disponíveis em desenvolvedores de terceiros.

Anteriormente, as pessoas estavam mais acostumadas a usar o “Classic Editor”, outro editor do WordPress. Desde o advento do Gutenberg, as pessoas têm adotado o editor de blocos mais do que o Editor Clássico. A especialidade de Gutenberg é seu conteúdo baseado em blocos .

Não importa se é um parágrafo, imagem ou botão, cada um desses elementos é um bloco. Ao contrário do Classic Editor, este editor de conteúdo baseado em blocos permite que você manipule seu conteúdo com mais controle. A melhor parte deste editor de blocos é que ele permite que desenvolvedores de terceiros incorporem blocos personalizados.

E é exatamente isso que vamos focar neste blog informativo, pois a partir de agora, um monte de recursos do ShopEngine estará à sua disposição no Gutenberg para WooCommerce. Antes de nos aprofundarmos nos blocos personalizados do ShopEngine no Gutenberg, deixe-me esclarecer por que integramos o ShopEngine ao Gutenberg para WooCommerce .

Por que integrar ShopEngine com Gutenberg:

ShopEngine foi inicialmente projetado exclusivamente para Elementor. Isso significa que você pode criar suas páginas WooCommerce apenas para Elementor. Mas agora, como mencionei anteriormente, o ShopEngine deu um passo à frente depois de ser integrado ao Gutenberg.

Então, o que nos fez integrar ShopEngine com Gutenberg para WooCommerce ? Para responder a esta pergunta, deixe-me apresentar a você pedaços de dados-

De acordo com o gutenstats.blog, Gutenberg recebeu 76 milhões de instalações ativas até agora. Além disso, 264,5 milhões de posts escritos com Gutenberg até a data.

Esses dados, acredito, são suficientes para convencer qualquer um do motivo pelo qual expandimos a gama do ShopEngine para Gutenberg. Milhões de pessoas estão implantando o Gutenberg para desenvolver seu conteúdo e não queremos que percam os recursos fascinantes que o ShopEngine oferece.

Mais alguns motivos da integração do ShopEngine com o Gutenberg:

Deixe-me enfatizar um ponto que Gutenberg não é apenas um editor de conteúdo . O projeto Gutenberg visa transformar o editor de blocos em uma ferramenta de edição de site completo em um futuro próximo.

A ideia é permitir que você crie 100% do seu site WooCommerce com o editor Gutenberg. Se isso acontecer, a demanda por Gutenberg provavelmente disparará. Então, vale a pena integrar ShopEngine com Gutenberg para WooCommerce, certo?

• Com o Gutenberg, você não precisa usar códigos de acesso para incorporar conteúdo. Em vez disso, você pode implantar os blocos para adicionar os elementos de página necessários.
• O Gutenberg está livre de problemas de compatibilidade, para que os desenvolvedores possam incorporar facilmente o suporte ao Gutenberg em seus plugins.
• Gutenberg produz um código leve e também é uma ferramenta de carregamento rápido.

Alguns dos blocos ShopEngine notáveis ​​em Gutenberg:

Antes de esclarecer os blocos do ShopEngine, deixe-me esclarecer que o ShopEngine vem com mais de 65 widgets , mais de 13 módulos e uma infinidade de modelos para páginas de lojas WooCommerce atendidas aos usuários do Elementor. Após a integração do ShopEngine com o Gutenberg para WooCommerce, agora você pode ter acesso a mais de 45 blocos do ShopEngine no Gutenberg .

Dependendo do tipo de página que você selecionar para criar um modelo para sua loja WooCommerce, os blocos Gutenberg aparecerão de acordo. Além disso, você terá acesso a módulos como Visualização Rápida, Amostras de Variação, Comparação de Produtos e Lista de Desejos .

Vamos dar uma olhada em alguns dos blocos ShopEngine em Gutenberg para loja WooCommerce-

Título do produto:

O bloco de título do produto aparece em uma única página para um produto específico. Depois de selecionar o tipo de página única para criar seu modelo, basta clicar no bloco Título do produto na barra lateral.

Imediatamente depois disso, o título do seu produto aparecerá na página. Na barra lateral direita, você pode modificar a tag de título, alinhamento, cor e tipografia.

Lista de produtos:

A lista de produtos exibe todos os tipos de produtos que você vende em sua loja WooCommerce. O bloco de lista de produtos aparece em todos os tipos de páginas, incluindo páginas únicas, de loja, de checkout e de carrinho. Depois de selecionar o tipo de página, clique na lista de produtos no pop-up ou na barra lateral.

Certifique-se de selecionar a categoria do produto para que os produtos apareçam. Na barra lateral direita, você pode selecionar e personalizar diferentes elementos da lista de produtos. Você pode selecionar o número de produtos por página, tags, mostrar/ocultar selo de vendas, porcentagem de desconto, etc.

Descrição do produto:

Se você criar um modelo de página única, o bloco de descrição do produto aparecerá na barra lateral. Para fazer a descrição do produto aparecer em sua página, clique no bloco de descrição do produto. Você pode personalizar a descrição e também estilizá-la modificando tipografia, cor, alinhamento, etc.

Pagamento de saída:

Como o widget Checkout Payment no Elementor, o bloco Checkout Payment funciona no Gutenberg. Você pode visualizar o bloco “Pagamento de Checkout” se você for para o modelo de construção para sua página de checkout. Depois disso, você pode adicionar o bloco de pagamento de checkout conforme necessário para sua loja WooCommerce.

Você terá as opções para alterar o estilo do conteúdo, métodos de pagamento, botão, etc. Você pode ajustar a posição da caixa de seleção, cor do botão, tipografia, borda, etc.

Produtos de arquivo:

A página de produtos arquivados contém todos os produtos postados em um só lugar. Para criar um modelo para a página de arquivo no Gutenberg para WooCommerce, basta ir até a barra lateral esquerda e clicar no bloco Arquivar Produtos . Todos os produtos do inventário aparecerão um após o outro.

A página de produtos do arquivo possui vários segmentos, incluindo layout, conteúdo, paginação, classificação etc. A página contém muitos elementos, como título do produto, imagem do produto, preço do produto, descrição do produto, rodapé do produto e assim por diante.

Tabela do carrinho:

Na tabela do carrinho, todos os detalhes dos produtos selecionados aparecem, incluindo nome do produto, preço, quantidade, subtotal e valor total. Com o bloco de tabela de carrinho do ShopEngine, você pode mostrar a seus compradores todas as informações relevantes para seus produtos por meio de uma tabela de carrinho na página de carrinho do WooCommerce.

Para personalizar o conteúdo e estilizar diferentes elementos da tabela do carrinho, você obterá parâmetros na barra lateral direita. Você pode ajustar as cores do cabeçalho e rodapé do produto, cor da borda, cor do texto, bem como personalizar seções de conteúdo, incluindo título, preço, quantidade, total, etc.

Produtos vistos recentemente:

Com o bloco de produtos visualizados recentemente do ShopEngine, você pode mostrar os produtos que seus usuários navegaram recentemente ou visualizaram em sua loja WooCommerce. Você pode exibir produtos visualizados recentemente na página da loja, página do produto, página do carrinho, etc.

Assim como os outros blocos, você pode observar os parâmetros relacionados aos produtos visualizados recentemente na barra lateral direita. Aproveitando os parâmetros, você pode especificar o número de produtos a serem exibidos, mostrar/ocultar crachás de vendas, definir o espaço entre colunas e linhas, ajustar as alturas das imagens dos produtos, etc.

Encerramento:

Então, qual é a sua opinião sobre o nosso movimento para integrar ShopEngine com Gutenberg para WooCommerce ? Conte-nos sobre sua experiência de implantação de blocos ShopEngine na loja Gutenberg para WooCommerce.

Você é muito bem-vindo para dar qualquer feedback positivo ou negativo sobre a integração do Gutenberg para WooCommerce. Também gostaríamos de receber sugestões suas para agilizar nosso processo de integração. No entanto, nossos trabalhos de integração do ShopEngine com o Gutenberg ainda estão em andamento. Em breve, terminaremos o projeto.