Product Features - instalação, configuração e gestão de atributos

Este documento descreve a configuração do módulo kowal/module-product-features, o significado de todos os campos administrativos e o trabalho com atributos do lado do produto.

Instalação

O módulo destina-se a instalação via Composer.

Os dados de acesso ao repositório Composer, endereço de e-mail do cliente e token de licença, serão enviados por e-mail após a compra. Também estão disponíveis no painel do cliente após iniciar sessão em kowal.store. Substitua TWOJ_EMAIL_KLIENTA pelo endereço de e-mail da sua conta e TWOJ_TOKEN pelo token recebido. Execute os comandos no diretório raiz do Magento.

composer config repositories.kowal composer https://repo.kowal.storecomposer config http-basic.repo.kowal.store 'TWOJ_EMAIL_KLIENTA' 'TWOJ_TOKEN'composer require kowal/module-product-featuresbin/magento module:enable Kowal_ProductFeaturesbin/magento setup:upgradebin/magento cache:flush

Após o deployment em produção, execute os comandos padrão adequados ao projeto, por exemplo compilação DI e deploy de assets estáticos, de acordo com o modo de funcionamento do Magento.

Localização da configuração

A configuração do módulo encontra-se no painel administrativo do Magento:

Stores > Configuration > Catalog > Product Features

As definições de aparência encontram-se num grupo separado:

Stores > Configuration > Catalog > Product Features Appearance

Os campos de configuração estão disponíveis ao nível Default, Website e Store View. Assim, diferentes vistas de loja podem ter outras secções de características ou outra aparência.

Product Features

Enabled

Ativa ou desativa o módulo para o âmbito de configuração indicado.

Valores:

• Yes - as secções de características do produto são renderizadas na página do produto,
• No - o módulo não devolve secções e o bloco não aparece no frontend.

Utilização: desativação rápida do módulo para toda a loja, Website selecionado ou Store View sem eliminar a configuração das secções.

Feature Sections

Lista de secções renderizadas na página do produto. Cada linha define uma secção frontend ou um grupo de secções, se for usado o tipo cms_blocks.

Enabled

Ativa ou desativa uma secção individual.

Valores:

• Yes - a secção participa na renderização,
• No - a secção é ignorada.

Utilização: ocultação temporária de uma secção sem apagar as suas definições.

Section Title

Título da secção visível na página do produto.

Exemplos:

• Cechy produktu,
• Zastosowanie Sportowe,
• Specyfikacja,
• Technologie,
• Dostawa.

Utilização: o nome deve ser compreensível para o cliente e não tem de corresponder ao nome técnico do atributo.

Nota: para o tipo cms_blocks, o título da secção filha é obtido a partir do título do bloco CMS.

Attribute Code

Um único atributo de produto usado pela secção. O campo tem a forma de um dropdown com a lista de atributos de produto.

Utilização: use este campo quando a secção se baseia num único atributo, por exemplo sport_usage, blocks_id, material, technology_icon.

Attribute Codes

Lista de vários atributos de produto usados por uma secção. O campo tem a forma de multiselect.

Utilização: use este campo quando uma secção deve agregar várias características, por exemplo várias escalas na secção Cechy produktu ou vários parâmetros na secção Specyfikacja.

Exemplo: a secção Cechy produktu pode conter os atributos fit, resistance, stretch e breathability, todos renderizados como escalas.

Display Type

Define a forma de apresentação do valor do atributo.

O valor vazio Auto significa seleção automática do renderer:

• blocks_id é renderizado como cms_blocks,
• swatch multiselect como swatch_list,
• select com 2 ou 3 opções como scale,
• select com maior número de opções como selected_label,
• multiselect como text_list,
• boolean como checkmark,
• date como date,
• price como price,
• textarea como text_block,
• image/media_image como image,
• restantes tipos como text_inline.

Tipos disponíveis:

No painel administrativo, algumas posições estão marcadas como available in future release. Isto aplica-se aos tipos que já estão visíveis na lista de configuração, mas ainda não têm uma apresentação frontend própria e final:

• table,
• badge,
• badge_list,
• icon_value,
• icon_list,
• swatch_grid.

Sort Order

Ordem das secções na página do produto. Um número mais baixo significa apresentação mais cedo.

Utilização: coloque as secções mais importantes no início, por exemplo 10 para características principais, 20 para utilizações, 30 para especificação.

Default State

Estado inicial da secção na página do produto.

Valores:

• Expanded - a secção está expandida por predefinição,
• Collapsed - a secção está recolhida por predefinição.

Utilização: os conteúdos mais importantes podem ser mostrados de imediato e as informações auxiliares mais longas podem ficar recolhidas.

Hide Empty

Decide se a secção deve ser ocultada quando não há dados para apresentar.

Valores:

• Yes - a secção é ocultada se o produto não tiver valor de atributo ou se o renderer não devolver quaisquer elementos,
• No - a secção pode permanecer visível mesmo sem elementos.

Utilização: na maioria dos casos, recomenda-se Yes para não mostrar secções vazias ao cliente.

Appearance Profile

Seleção do perfil de apresentação definido no campo Appearance Profiles.

O campo tem a forma de dropdown. O administrador já não introduz o código manualmente, apenas escolhe um perfil pronto da lista, normalmente no formato code - label.

Utilização: permite atribuir a uma secção específica uma aparência diferente da global, por exemplo perfil compact, highlight ou plain.

Se o campo estiver vazio e a opção Use global appearance estiver selecionada, a secção usa a aparência global.

Ordem de trabalho recomendada:

1. defina o perfil em Appearance Profiles,
2. guarde a configuração,
3. volte a Feature Sections,
4. escolha o perfil na coluna Appearance Profile para a secção adequada.

CSS Class

Classe CSS adicional adicionada à secção.

Utilização: ajuste individual da aparência no tema frontend, por exemplo product-features-section--technical.

Renderer Options JSON

Definições opcionais transmitidas ao renderer em formato JSON.

A utilização depende do tipo de apresentação. Exemplos:

{'unit':'cm','precision':1}

Para number_with_unit:

• unit - unidade, por exemplo cm, %, g/m2,
• precision - número de casas decimais.

Para range_bar:

• min - valor mínimo do intervalo,
• max - valor máximo do intervalo,
• low_label - etiqueta do início do intervalo,
• high_label - etiqueta do fim do intervalo.

Para rating_dots:

• steps - número de pontos ou níveis.

O tipo radial_chart não exige opções adicionais. O renderer lê o valor do atributo ou a etiqueta da opção no formato x/y, por exemplo 1/6, 4/6, 7/10.

Exemplo para a barra de intervalo:

{'min':0,'max':100,'low_label':'Niska','high_label':'Wysoka'}

Exemplo para pontos:

{'steps':5}

Nota: o campo deve conter JSON válido. Um valor incorreto é ignorado pelo renderer.

Appearance Profiles

Lista de perfis de apresentação opcionais que podem ser atribuídos a secções através do campo Appearance Profile.

Code

Código técnico do perfil.

Exemplos:

• compact,
• highlight,
• plain.

Utilização: o código identifica o perfil internamente e é usado como valor de opção no dropdown Appearance Profile junto da secção.

Label

Nome descritivo do perfil visível para o administrador.

Utilização: facilita o reconhecimento do perfil na configuração, por exemplo Kompaktowy, Wyróżniony, Neutralny. Em conjunto com o código, cria uma etiqueta legível na lista de seleção de perfis em Feature Sections.

Background

Cor de fundo da secção para o perfil.

Utilização: destaque de secções selecionadas ou adaptação ao tema.

Text

Cor do texto principal na secção.

Heading

Cor do título da secção.

Accent

Cor de acento, por exemplo elementos ativos, pontos da escala ou destaques.

Accent Background

Cor de fundo dos elementos de acento.

Border

Cor das linhas, separadores, eixos da escala e contornos.

Icon

Cor do ícone de expansão e recolha da secção.

Radius, e.g. 18px

Arredondamento dos cantos da secção.

Exemplos: 0, 8px, 18px.

Padding, e.g. 28px

Espaçamento interno da secção.

Exemplos: 16px, 24px, 28px.

Label Font Size, e.g. 21px

Tamanho do texto das etiquetas de características na secção.

Exemplos: 16px, 18px, 21px, 1.25rem.

Product Features Appearance

Este grupo contém a aparência global das secções. As definições são convertidas em variáveis CSS e aplicadas ao wrapper do módulo.

Section Background Color

Cor de fundo da secção.

Por predefinição: #f4f4f4.

Section Text Color

Cor principal do texto na secção.

Por predefinição: #000000.

Section Heading Color

Cor do cabeçalho da secção.

Por predefinição: #000000.

Muted Text Color

Cor de textos auxiliares e menos relevantes.

Por predefinição: #555555.

Accent Color

Cor de elementos ativos e destaques.

Por predefinição: #000000.

Accent Background Color

Cor de fundo dos elementos ativos, por exemplo seleções.

Por predefinição: #ffffff.

Border Color

Cor de contornos, separadores e eixos da escala.

Por predefinição: #9b9b9b.

Icon Color

Cor do ícone + / - no cabeçalho da secção.

Por predefinição: #000000.

Selected Text Color

Cor do texto do valor selecionado.

Por predefinição: #000000.

Selected Font Weight

Espessura da fonte do valor selecionado.

Por predefinição: 700.

Exemplos: 400, 500, 600, 700, bold.

Section Border Radius

Arredondamento do contentor da secção.

Por predefinição: 18px.

Section Padding

Espaçamento interno da secção.

Por predefinição: 28px.

Section Gap

Espaçamento entre secções.

Por predefinição: 16px.

Heading Font Size

Tamanho da fonte do cabeçalho da secção.

Por predefinição: 20px.

Exemplos: 18px, 20px, 1.25rem, clamp(18px, 2vw, 22px).

Label Font Size

Tamanho da fonte das etiquetas de características e das etiquetas de valores.

Por predefinição: 21px.

Body Font Size

Tamanho da fonte do conteúdo principal da secção.

Por predefinição: 16px.

Gestão de atributos do lado do produto

O módulo não cria um sistema separado de dados de produto. Usa os atributos de produto Magento, pelo que a gestão do conteúdo é feita principalmente na edição do produto.

Edição de um produto individual

1. Aceda a Catalog > Products.
2. Abra o produto para edição.
3. Preencha os atributos que são usados pelas secções do módulo.
4. Se o produto deve usar blocos CMS, aceda ao grupo Product Features e defina o campo CMS Blocks.
5. Guarde o produto.
6. Limpe a cache, se o projeto o exigir.

A secção aparecerá no frontend apenas quando:

• o módulo estiver ativado,
• a secção estiver ativada na configuração,
• o atributo existir,
• o produto tiver valor do atributo,
• o renderer conseguir processar o valor selecionado,
• a secção não tiver sido ocultada por Hide Empty.

Atributo blocks_id / CMS Blocks

Durante setup:upgrade, o módulo adiciona o atributo de produto:

• código: blocks_id,
• etiqueta: CMS Blocks,
• tipo: text,
• input: multiselect,
• source model: blocos CMS ativos,
• backend: backend Magento padrão para multiselect,
• scope: Store View,
• grupo: Product Features,
• visível na edição do produto,
• disponível na grelha de produtos e na filtragem da grelha.

O campo CMS Blocks permite atribuir blocos CMS ativos ao produto. Cada bloco selecionado será renderizado como uma secção separada, se existir na configuração do módulo uma secção com:

• Attribute Code: blocks_id,
• Display Type: cms_blocks.

O título da secção no frontend vem do título do bloco CMS e o conteúdo vem do conteúdo do bloco. Blocos inativos ou indisponíveis para o Store View não são renderizados.

Gestão de blocos CMS

Os blocos usados por blocks_id são criados no Magento da forma padrão:

Content > Elements > Blocks

Recomendações:

• use títulos de blocos claros, porque podem ficar visíveis como títulos de secção,
• atribua blocos aos Store View corretos,
• defina o bloco como ativo,
• guarde nos blocos conteúdos descritivos que devam ser partilhados por muitos produtos, por exemplo entrega, devoluções, instruções, tecnologias.

Edição em massa de produtos

O atributo blocks_id está preparado para trabalhar com edição em massa de produtos.

1. Aceda a Catalog > Products.
2. Selecione produtos na grelha.
3. Escolha a ação Update Attributes.
4. Defina o valor do campo CMS Blocks.
5. Guarde as alterações.

Utilização: atribuição rápida da mesma secção CMS, por exemplo Dostawa, Zwroty ou Instrukcja pielęgnacji, a muitos produtos em simultâneo.

Atributos para escala

Para o tipo scale, use atributos select com 2 ou 3 opções ativas.

Exemplo:

• atributo fit,
• opções: Luźny, Regularny, Dopasowany.

O produto deve ter uma das opções selecionada. O módulo mostrará todas as opções da escala e destacará a atribuída ao produto.

Se o atributo tiver menos de 2 ou mais de 3 opções, o renderer scale ignorará esse atributo.

Atributos multiselect

Para listas de características, utilizações, tecnologias ou certificados, use atributos multiselect.

Tipos de apresentação possíveis:

• text_list,
• badge_list,
• swatch_list,
• swatch_grid,
• multiselect_icon,
• icon_list.

O produto pode ter vários valores selecionados. O módulo renderiza apenas os valores atribuídos ao produto.

Swatches Magento

Se o atributo multiselect usar swatches Magento, pode usar o tipo swatch_list ou swatch_grid.

Utilização:

• ícones de tecnologias,
• cores,
• pictogramas de utilização,
• marcações de materiais.

Se a opção tiver um swatch de imagem, o módulo mostrará a imagem. Se tiver um swatch de cor ou texto, o módulo usará a variante adequada.

Ícones Amasty

Para o tipo multiselect_icon, o módulo tenta obter o ícone da opção a partir de Amasty ShopbyBrand / ShopbyBase.

Fonte do ícone:

Shop by Brand > Option Edit > Other > Small Image

O texto alternativo vem de Small Image Alt e, se estiver em falta, da etiqueta da opção.

Se o Amasty não estiver instalado ou a opção não tiver ícone, o módulo mostrará apenas a etiqueta.

Atributos textuais e HTML

Para informações curtas, use text_inline, key_value ou badge.

Para descrições mais longas, use text_block, accordion_text ou html_block.

Nota: html_block e accordion_text renderizam HTML, por isso devem ser usados apenas para conteúdos administrativos fidedignos.

Atributos numéricos

Para valores numéricos, pode usar:

• number_with_unit - quando o número exige uma unidade,
• range_bar - quando o valor deve ser apresentado como progresso num intervalo,
• rating_dots - quando o valor descreve um nível ou avaliação.

Exemplo de Renderer Options JSON para número com unidade:

{'unit':'%','precision':0}

Atributos boolean

Para atributos sim/não, use:

• yes_no, quando o cliente deve ver tanto Yes como No,
• checkmark, quando a característica deve estar visível apenas se o produto a tiver.

Atributos de imagem

Para atributos do tipo imagem, pode usar:

• image,
• image_with_label,
• image_grid.

O módulo constrói o endereço da imagem com base no diretório de media do produto Magento e usa a etiqueta do atributo como texto alternativo.

Configuração de exemplo

Secção de várias escalas:

Secção de utilizações com ícones:

Secções CMS:

Diagnóstico

Se a secção não aparecer no frontend, verifique:

• se Enabled do módulo tem o valor Yes,
• se a secção em causa tem Enabled = Yes,
• se o produto tem o atributo preenchido,
• se foi selecionado o Attribute Code ou Attribute Codes correto,
• se Display Type corresponde ao tipo do atributo,
• se Hide Empty não oculta a secção vazia,
• se o atributo está disponível para o Store View indicado,
• se o bloco CMS está ativo e atribuído ao Store View correto,
• se a cache Magento foi atualizada.