Page Builder Apresentação parte 3: conteúdo do catálogo
Este exercício demonstra como é fácil adicionar uma lista de produtos a uma página, personalizar páginas de produtos e criar um atributo personalizado que adicione o espaço de trabalho Page Builder a um conjunto de atributos de produto.
Este exercício supõe que você tenha concluído Parte 1: Página Simples e Parte 2: Blocos, incluindo os pré-requisitos e os arquivos de exemplo baixados. Siga as três partes deste exercício em ordem.
Parte 1: Adicionar uma lista de produtos
O Page Builder facilita a adição de uma lista de produtos ao estágio. Neste exemplo, a lista de produtos é adicionada diretamente a uma página.
Etapa 1: adicionar uma lista de produtos ao estágio
-
Na barra lateral Admin, vá para Content > Elements>Pages.
-
Localize a Página Simples que você criou no primeiro exercício e modificou no segundo, e selecione Edit na coluna Action.
-
Expanda a seção Content e clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.
-
No painel Page Builder, em Layout, arraste uma Row para a parte superior do estágio.
-
No painel Page Builder, expanda Add Content e arraste um espaço reservado Products para a nova linha.
{width="600" modal="regular"}
Etapa 2: compor a condição
-
Passe o mouse sobre o contêiner de produtos vazio para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).
{width="600" modal="regular"}
-
Para Select Products By, escolha
Condition
. -
Adicione uma condição:
-
Clique no ícone Adicionar ( ).
-
Em Product Attribute, escolha Category.
{width="600" modal="regular"}
-
Conclua a parte Category is… da condição clicando no ícone Mais (…) e depois no ícone Seletor ( ).
{width="600" modal="regular"}
-
Na árvore de categorias, vá para a categoria Mulheres > Primeiros e marque a caixa de seleção Árvores.
{width="600" modal="regular"}
-
Clique no ícone Marca de seleção ( ).
A ID de categoria correspondente é exibida no campo para concluir a condição.
-
Etapa 3: Concluir as configurações
-
Insira o Number of Products to Display.
Por padrão, a lista exibe cinco produtos.
-
Conclua as configurações restantes conforme necessário.
Se necessário, use as descrições de campo no final da página Adicionar conteúdo - Produtos para referência.
-
Quando terminar, clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.
{width="600" modal="regular"}
-
No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( {width="20"} ).
Clicar nesse ícone retorna à seção Content da página com a visualização exibida.
-
No canto superior direito, clique na seta Save e escolha Save & Close.
Parte 2: Personalizar a página do produto
Nesta parte do exercício, você aprenderá como é fácil personalizar uma página de produto ao colocar um vídeo abaixo do conjunto de guias na página do produto. O processo para atualizar o conteúdo da página categoria é basicamente o mesmo.
-
Na barra lateral Admin, vá para Catalog > Products.
-
Encontre um produto simples que você pode usar para este exemplo e abra-o no modo de edição.
-
Role para baixo e expanda na seção Content.
-
Ao lado de Description, clique em Edit with Page Builder.
{width="600" modal="regular"}
Se a descrição do produto foi inserida anteriormente sem Page Builder, a descrição atual aparece como HTML em um contêiner de Código HTML. Com o tema Luma, a descrição do produto aparece na guia Detail.
-
No painel Page Builder, em Layout, arraste um Row para o estágio, colocando-o abaixo do contêiner de código de HTML.
Procure a diretriz vermelha para aparecer quando a linha estiver na posição correta.
{width="600" modal="regular"}
-
No painel Page Builder, expanda Media e arraste um espaço reservado Video para a nova linha.
{width="600" modal="regular"}
-
Passe o mouse sobre o contêiner de vídeo vazio para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).
{width="500" modal="regular"}
-
Insira o Video URL.
O vídeo pode ser hospedado no YouTube ou no Vimeo. O vídeo deste exemplo pode ser encontrado no YouTube no seguinte URL:
https://www.youtube.com/watch?v=ZpFrNyD4100
{width="500" modal="regular"}
-
Insira o Maximum Width em pixels para a exibição do vídeo.
Se você deixar essa opção em branco, o vídeo preencherá o espaço disponível.
-
Clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.
{width="600" modal="regular"}
-
No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( {width="20"} ).
Clicar nesse ícone retorna à seção Content da página com a visualização exibida.
-
No canto superior direito, clique na seta Save e escolha Save & Close.
Na loja, o vídeo é exibido abaixo do conjunto de guias. Para ver a aparência da página em um dispositivo móvel, é possível redimensionar a janela.
Parabéns! Você concluiu a segunda parte do tutorial Conteúdo do catálogo. Manter o trabalho criado para que você possa consultá-lo posteriormente.
Parte 3: Adicionar atributos personalizados
Use o atributo personalizado Page Builder para adicionar um espaço de trabalho Page Builder totalmente funcional a uma página de produto, que você pode usar para criar conteúdo envolvente. Nesta parte do exercício, você aprenderá a criar um atributo personalizado usando o tipo de entrada Page Builder e aplicá-lo às páginas de produto no catálogo. Para obter mais informações sobre esses atributos, consulte Atributos do produto.
Etapa 1: criar um produto
Para evitar alterações na loja em tempo real, crie um produto usando as propriedades descritas.
-
Na barra lateral Admin, vá para Catalog > Products.
-
No canto superior direito, clique em Add Product.
-
Crie o produto com as seguintes propriedades:
-
Conjunto de atributos: Default
-
Product Name: Meu produto
-
SKU: Tutorial
-
Price: 75.00
-
Quantity: 100
-
Stock Status: Em Estoque
-
Weight: 1
-
Categories: Mulheres > Topos > Tees
-
-
No canto superior direito, clique na seta Save e escolha Save & Close.
Etapa 2: Criar atributos personalizados
Nesta etapa, você cria dois novos atributos personalizados para mostrar como os tipos de entrada Page Builder e Editor de Texto podem ser usados.
-
Na barra lateral Admin, vá para Stores > Attributes>Product.
-
No canto superior direito, clique em Add New Attribute.
-
Digite um Default Label para o atributo.
Neste exemplo, use
My Page Builder Attribute
para o rótulo. -
Defina Catalog Input Type for Store Owner como
Page Builder
.Ao criar um atributo personalizado, você pode especificar o editor mais adequado para o aplicativo como
Page Builder
ou o padrão, WYSIWYGText Editor
.{width="600" modal="regular"}
-
Expanda a seção Advanced Attribute Properties e faça as seguintes configurações:
-
Attribute Code: Insira um código de atributo em caracteres minúsculos, usando hífens em vez de espaços. Neste exemplo, use
my_page_builder_attribute
. -
Scope: Aceite o valor padrão,
Store View
. -
Default Value: Insira um valor padrão para o atributo.
-
Unique Value:
No
-
Add to Column Options:
No
-
Use in Filter Options:
Yes
-
-
No painel Attribute Information à esquerda, escolha Storefront Properties e defina as seguintes configurações:
-
Use for Promo Rule Conditions:
Yes
-
Visible on Catalog Pages on Storefront:
Yes
-
Used in Product Listing:
Yes
-
-
Quando terminar, clique em Save Attribute.
-
Repita as etapas anteriores para criar um segundo atributo com as mesmas propriedades básicas, mas com o tipo de entrada Editor de texto da seguinte maneira:
-
Default Label: Meu atributo do editor de texto
-
Catalog Input Type for Store Owner: Editor de texto
-
Código de atributo:
my_text_editor_attribute
-
Etapa 3: atualizar o conjunto de atributos do produto
-
Na barra lateral Admin, vá para Stores > Attributes>Attribute Set.
Neste exemplo, você adiciona temporariamente os novos atributos ao conjunto de atributos
default
. No final deste exercício, remova os atributos do conjunto de atributos para não afetar seu catálogo.note note NOTE Se você não quiser alterar o armazenamento ao vivo, poderá acompanhar sem atualizar o conjunto de atributos. -
Localize o conjunto de atributos Default na lista e clique duas vezes nele para abri-lo no modo de edição.
-
Na lista Atributos Não Atribuídos, encontre os novos atributos criados e arraste cada um para a coluna Groups, em Content.
O local do atributo na coluna Groups determina onde ele aparece na página.
{width="600" modal="regular"}
-
Clique em Save para retornar à lista de conjuntos de atributos.
-
Quando solicitado, clique no link Cache Management na parte superior da página e atualize qualquer cache inválido.
Etapa 4: atualizar o produto
-
Na barra lateral Admin, vá para Catalog > Products.
-
Na grade Produtos, localize Meu Produto e abra-o no modo de edição.
-
Role para baixo e expanda na seção Content.
Na parte superior da seção, há dois atributos padrão para o conteúdo do produto:
- Descrição Curta, que usa o editor WYSIWYG padrão.
- Descrição, que exibe a visualização Page Builder.
{width="600" modal="regular"}
À medida que você rolar a tela para a metade inferior da seção, há dois atributos que você criou e atribuiu:
- Meu Page Builder Atributo, que exibe a visualização de Page Builder.
- Meu Atributo do Editor de Texto, que usa o editor WYSIWYG padrão.
{width="600" modal="regular"}
-
No editor do Atributo do Meu Editor de Texto, digite
Text Editor Attribute placeholder text
.- No canto superior direito, clique na seta Save e escolha Save & Close.
-
Para o Meu atributo do Page Builder, clique em Edit with Page Builder e adicione o texto da descrição:
-
No painel Page Builder, expanda Elements e arraste um Text object para o estágio.
-
Digite
Page Builder attribute placeholder text
. -
No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( {width="20"} ).
{width="600" modal="regular"}
-
-
Role até Description, clique em Edit with Page Builder e adicione o texto desejado usando o mesmo método da etapa anterior.
-
No canto superior direito da página do produto, clique na seta Save e escolha Save & Close.
-
Se solicitado, clique no link Cache Management na mensagem na parte superior da página e atualize qualquer cache inválido.
Etapa 5: visualizar o resultado
-
Navegue até a página de exemplo do produto na vitrine.
Neste exemplo, o produto pode ser encontrado na navegação superior em Mulheres > Topos > Árvores.
-
Role para baixo até as informações do Meu atributo do Page Builder.
A posição dos atributos na página do produto é determinada pelo tema. No tema Luma, os novos atributos estão localizados logo após a descrição do produto.
{width="600" modal="regular"}
Você concluiu o exercício Conteúdo do Catálogo Page Builder. Manter o trabalho criado para que você possa consultá-lo posteriormente.