DocumentaçãoCommercePage Builder

Page Builder Apresentação parte 3: conteúdo do catálogo

Last update: Tue Nov 28 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined
  • undefined

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 a Page Builder espaço de trabalho para um conjunto de atributos do produto.

Lista de produtos

Este exercício pressupõe que você tenha concluído Parte 1: Página simples e Parte 2: Blocos, incluindo os pré-requisitos e os arquivos de amostra baixados. Siga as três partes deste exercício em ordem.

Parte 1: Adicionar uma lista de produtos

Page Builder O 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

  1. No Admin barra lateral, vá para Content > Elements>Pages.

  2. Localize o Página simples que você criou no primeiro exercício e modificou no segundo, e selecionou Edit no Action ​coluna.

  3. Expandir Seletor de expansão o Content e clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.

  4. No Page Builder painel em Layout, arraste um Row ​no topo do palco.

  5. No Page Builder painel, expandir Add Content e arraste uma Products espaço reservado para a nova linha.

    Arrastar um espaço reservado de produtos para a linha {width="600" modal="regular"}

Etapa 2: compor a condição

  1. Passe o mouse sobre o contêiner de produtos vazio para exibir a caixa de ferramentas e escolher o Configurações ( Ícone Configurações {width="20"} ) ícone.

    Caixa de ferramentas Produtos {width="600" modal="regular"}

  2. Para Select Products By, escolha Condition.

  3. Adicione uma condição:

    • Clique em Adicionar ( Ícone Adicionar ) ícone.

    • Em Product Attribute, escolha Category.

      Escolha do atributo de categoria para a condição {width="600" modal="regular"}

    • Conclua o Category is… parte da condição clicando no ícone Mais (…) e clique no link Seletor ( Ícone do seletor ) ícone.

      Definição da condição {width="600" modal="regular"}

    • Na árvore de categorias, faça drill-down para a Mulheres > Topos e selecione a  Árvores caixa de seleção

      Escolha da categoria na árvore {width="600" modal="regular"}

    • Clique na marca de seleção ( Ícone de marca de seleção ) ícone.

      A ID de categoria correspondente é exibida no campo para concluir a condição.

Etapa 3: Concluir as configurações

  1. Insira o Number of Products to Display.

    Por padrão, a lista exibe cinco produtos.

  2. Conclua as configurações restantes conforme necessário.

    Se necessário, use as descrições de campo no final da Adicionar conteúdo - Produtos página para referência.

  3. Quando terminar, clique em Save para salvar as configurações e retornar para a Page Builder espaço de trabalho.

    Lista de produtos no estágio {width="600" modal="regular"}

  4. No canto superior direito do estágio, clique na guia Fechar tela cheia ( Ícone Fechar tela inteira {width="20"} ) ícone.

    Clicar nesse ícone retornará para a Content ​para a página com a pré-visualização exibida.

  5. No canto superior direito, clique na guia Save seta e escolha Save & Close.

Parte 2: Personalizar a página do produto

NOTE
Um usuário administrador deve ter Content permissões para seus escopo da função para ver Edit with Page Builder e poder usar o Page Builder.

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 a ser atualizado página de categoria o conteúdo é basicamente o mesmo.

  1. No Admin barra lateral, vá para Catalog > Products.

  2. Encontre um produto simples que você pode usar para este exemplo e abra-o no modo de edição.

  3. Rolar para baixo e expandir Seletor de expansão o Content seção.

  4. Ao lado de Description, clique em Edit with Page Builder.

    Conteúdo da descrição do produto {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 Código HTML recipiente. Com o tema Luma, a descrição do produto aparece na guia Detail.

  5. No Page Builder painel em Layout, arraste um Row ​para o estágio, colocando-o abaixo do contêiner de código HTML.

    Procure a diretriz vermelha para aparecer quando a linha estiver na posição correta.

    Arrastar uma linha para o estágio {width="600" modal="regular"}

  6. No Page Builder painel, expandir Media e arraste uma Video espaço reservado para a nova linha.

    Espaço reservado do vídeo na linha {width="600" modal="regular"}

  7. Passe o mouse sobre o contêiner de vídeo vazio para exibir a caixa de ferramentas e escolher o Configurações ( Ícone Configurações {width="20"} ) ícone.

    Caixa de ferramentas Vídeo {width="500" modal="regular"}

  8. Insira o Video URL.

    O vídeo pode ser hospedado em YouTube ou Vimeo. O vídeo deste exemplo pode ser encontrado no YouTube no seguinte URL:

    https://www.youtube.com/watch?v=ZpFrNyD4100

    Edição do vídeo {width="500" modal="regular"}

  9. 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.

  10. Clique em Save para salvar as configurações e retornar para a Page Builder espaço de trabalho.

    Vídeo no estágio de conteúdo {width="600" modal="regular"}

  11. No canto superior direito do estágio, clique na guia Fechar tela cheia ( Ícone Fechar tela inteira {width="20"} ) ícone.

    Clicar nesse ícone retornará para a Content ​para a página com a pré-visualização exibida.

  12. No canto superior direito, clique na guia Save seta 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.

Vídeo exibido na página do produto

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 Page Builder atributo personalizado para adicionar um atributo totalmente Page Builder espaço de trabalho para 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 Page Builder tipo de entrada e aplique-o à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.

  1. No Admin barra lateral, vá para Catalog > Products.

  2. No canto superior direito, clique em Add Product.

  3. 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

  4. No canto superior direito, clique na guia Save seta e escolha Save & Close.

Etapa 2: Criar atributos personalizados

Nesta etapa, você cria dois novos atributos personalizados para mostrar como a Page Builder e os tipos de entrada do Editor de texto podem ser usados.

  1. No Admin barra lateral, vá para Stores > Attributes>Product.

  2. No canto superior direito, clique em Add New Attribute.

  3. Insira um Default Label para o atributo.

    Neste exemplo, use My Page Builder Attribute para o rótulo.

  4. Definir Catalog Input Type for Store Owner para Page Builder.

    Ao criar um atributo personalizado, você pode especificar o editor mais adequado para o aplicativo como Page Builder ou o padrão, WYSIWYG Text Editor.

    Page Builder Tipo de entrada {width="600" modal="regular"}

  5. Expandir Seletor de expansão o Advanced Attribute Properties e faça as seguintes configurações:

    • Attribute Code: insira um código de atributo em caracteres minúsculos, usando hifens 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

  6. No Attribute Information ​à esquerda, escolha Storefront Properties ​e faça as seguintes configurações:

    • ​

      Use for Promo Rule Conditions: Yes

    • ​

      Visible on Catalog Pages on Storefront: Yes

    • ​

      Used in Product Listing: Yes

  7. Quando terminar, clique em Save Attribute.

  8. 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

  1. No Admin barra lateral, vá para Stores > Attributes>Attribute Set.

    Neste exemplo, adicione temporariamente os novos atributos à variável default conjunto de atributos. 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.

  2. Localize o Default ​atributo definido na lista e clique duas vezes nele para abri-lo no modo de edição.

  3. No Atributos não atribuídos , localize os novos atributos criados e arraste cada um para a Groups ​coluna, abaixo Content.

    A localização do atributo na variável Groups determina onde ele aparece na página.

    Novos atributos adicionados ao grupo de conteúdo {width="600" modal="regular"}

  4. Clique em Save para retornar à lista Conjuntos de atributos.

  5. Quando solicitado, clique no link Cache Management vincular na parte superior da página e atualizar qualquer cache inválido.

Etapa 4: atualizar o produto

  1. No Admin barra lateral, vá para Catalog > Products.

  2. Na grade Produtos, localize Meu produto e abra-o no modo de edição.

  3. Rolar para baixo e expandir Seletor de expansão o Content seção.

    Na parte superior da seção, há dois atributos padrão para o conteúdo do produto:

    • Descrição curta, que usa o padrão WYSIWYG editor.
    • Descrição, que exibe o Page Builder visualização.

    Conteúdo do produto {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:

    • Meus Page Builder Atributo, que exibe o Page Builder visualização.
    • Meu atributo do editor de texto, que usa o editor WYSIWYG padrão.

    Edição de conteúdo do produto {width="600" modal="regular"}

  4. No Meu atributo do editor de texto editor, insira Text Editor Attribute placeholder text.

    • No canto superior direito, clique na guia Save seta e escolha Save & Close.

  5. Para Meu atributo do Page Builder, clique em Edit with Page Builder e adicione o texto de descrição:

    • No Page Builder painel, expandir Elements e arraste uma Text object para o estágio.

    • Enter Page Builder attribute placeholder text.

    • No canto superior direito do estágio, clique na guia Fechar tela cheia ( Ícone Fechar tela inteira {width="20"} ) ícone.

      Atributos personalizados com texto de espaço reservado {width="600" modal="regular"}

  6. Rolar para cima até Description, clique em Edit with Page Builder e adicione qualquer texto que desejar usando o mesmo método da etapa anterior.

  7. No canto superior direito da página do produto, clique na guia Save seta e escolha Save & Close.

  8. Se solicitado, clique no link Cache Management vincular na mensagem na parte superior da página e atualizar qualquer cache inválido.

Etapa 5: visualizar o resultado

  1. 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.

  2. Role para baixo até Meu atributo do Page Builder informações.

    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.

    Page Builder e atributos do Editor de texto na loja {width="600" modal="regular"}

Você concluiu o Page Builder Exercício Conteúdo de catálogo. Manter o trabalho criado para que você possa consultá-lo posteriormente.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d