Product Features - installazione, configurazione e gestione degli attributi

Questo documento descrive la configurazione del modulokowal/module-product-features, il significato di tutti i campi amministrativi e la gestione degli attributi lato prodotto.

Installazione

Il modulo è destinato all’installazione tramite Composer.

I dati di accesso al repository Composer, ovvero l indirizzo e-mail del cliente e il token di licenza, saranno inviati via e-mail dopo l acquisto. Sono disponibili anche nel pannello cliente dopo l accesso su kowal.store. Sostituisci TWOJ_EMAIL_KLIENTA con l indirizzo e-mail del tuo account e TWOJ_TOKEN con il token ricevuto. Esegui i comandi nella directory principale di Magento.

composer config repositories.kowal composer https://repo.kowal.store
composer config http-basic.repo.kowal.store "TWOJ_EMAIL_KLIENTA" "TWOJ_TOKEN"
composer require kowal/module-product-features
bin/magento module:enable Kowal_ProductFeatures
bin/magento setup:upgrade
bin/magento cache:flush

Dopo il deploy in produzione, esegui i comandi standard previsti dal progetto, ad esempio la compilazione DI e il deploy degli asset statici, in base alla modalità operativa di Magento.

Posizione della configurazione

La configurazione del modulo si trova nel pannello di amministrazione Magento:

Stores > Configuration > Catalog > Product Features

Le impostazioni di aspetto si trovano in un gruppo separato:

Stores > Configuration > Catalog > Product Features Appearance

I campi di configurazione sono disponibili a livello Default, Website e Store View. In questo modo viste negozio diverse possono avere sezioni di caratteristiche differenti o un aspetto diverso.

Product Features

Enabled

Attiva o disattiva il modulo per l’ambito di configurazione selezionato.

Valori:

• Yes- le sezioni delle caratteristiche prodotto vengono renderizzate nella scheda prodotto,
• No- il modulo non restituisce sezioni e il blocco non viene visualizzato sul frontend.

Utilizzo: disattivazione rapida del modulo per l’intero negozio, per un Website selezionato o per una Store View senza eliminare la configurazione delle sezioni.

Feature Sections

Elenco delle sezioni renderizzate nella scheda prodotto. Ogni riga definisce una singola sezione frontend oppure un gruppo di sezioni, se viene utilizzato il tipocms_blocks.

Enabled

Attiva o disattiva una singola sezione.

Valori:

• Yes- la sezione viene inclusa nel rendering,
• No- la sezione viene ignorata.

Utilizzo: nascondere temporaneamente una sezione senza cancellarne le impostazioni.

Section Title

Titolo della sezione visibile nella scheda prodotto.

Esempi:

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

Utilizzo: il nome deve essere comprensibile per il cliente e non deve necessariamente corrispondere al nome tecnico dell’attributo.

Nota: per il tipocms_blocks, il titolo della sezione figlia viene preso dal titolo del blocco CMS.

Attribute Code

Singolo attributo prodotto utilizzato dalla sezione. Il campo ha la forma di un dropdown con l’elenco degli attributi prodotto.

Utilizzo: usa questo campo quando la sezione si basa su un solo attributo, ad esempiosport_usage,blocks_id,material,technology_icon.

Attribute Codes

Elenco di più attributi prodotto utilizzati da una singola sezione. Il campo ha la forma di un multiselect.

Utilizzo: usa questo campo quando una sezione deve aggregare più caratteristiche, ad esempio diverse scale nella sezioneCechy produktuoppure più parametri nella sezioneSpecyfikacja.

Esempio: la sezioneCechy produktupuò contenere gli attributifit,resistance,stretchebreathability, tutti renderizzati come scale.

Display Type

Definisce il modo in cui viene presentato il valore dell’attributo.

Il valore vuotoAutoindica la selezione automatica del renderer:

• blocks_idviene renderizzato comecms_blocks,
• swatch multiselect comeswatch_list,
• select con 2 o 3 opzioni comescale,
• select con un numero maggiore di opzioni comeselected_label,
• multiselect cometext_list,
• boolean comecheckmark,
• date comedate,
• price comeprice,
• textarea cometext_block,
• image/media_image comeimage,
• gli altri tipi cometext_inline.

Tipi disponibili:

Nel pannello di amministrazione alcune voci sono contrassegnate comeavailable in future release. Questo riguarda i tipi che sono già visibili nell’elenco di configurazione, ma non dispongono ancora di una presentazione frontend propria e definitiva:

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

Sort Order

Ordine delle sezioni nella scheda prodotto. Un numero più basso indica una visualizzazione precedente.

Utilizzo: posiziona le sezioni più importanti all’inizio, ad esempio10per le caratteristiche principali,20per gli utilizzi,30per le specifiche.

Default State

Stato iniziale della sezione nella scheda prodotto.

Valori:

• Expanded- la sezione è espansa per impostazione predefinita,
• Collapsed- la sezione è compressa per impostazione predefinita.

Utilizzo: i contenuti più importanti possono essere mostrati subito, mentre le informazioni di supporto più lunghe possono restare compresse.

Hide Empty

Determina se la sezione deve essere nascosta quando non ci sono dati da mostrare.

Valori:

• Yes- la sezione viene nascosta se il prodotto non ha un valore dell’attributo oppure se il renderer non restituisce alcun elemento,
• No- la sezione può restare visibile anche senza elementi.

Utilizzo: nella maggior parte dei casi è consigliatoYes, per non mostrare al cliente sezioni vuote.

Appearance Profile

Selezione del profilo di aspetto definito nel campoAppearance Profiles.

Il campo ha la forma di un dropdown. L’amministratore non inserisce più il codice manualmente, ma sceglie un profilo già pronto dall’elenco, di solito nel formatocode - label.

Utilizzo: consente di assegnare a una specifica sezione un aspetto diverso da quello globale, ad esempio il profilocompact,highlightoppureplain.

Se il campo è vuoto ed è selezionata l’opzioneUse global appearance, la sezione utilizza l’aspetto globale.

Ordine di lavoro consigliato:

1. definisci il profilo inAppearance Profiles,
2. salva la configurazione,
3. torna aFeature Sections,
4. seleziona il profilo nella colonnaAppearance Profileper la sezione appropriata.

CSS Class

Classe CSS aggiuntiva aggiunta alla sezione.

Utilizzo: adattamento individuale dell’aspetto nel tema frontend, ad esempioproduct-features-section--technical.

Renderer Options JSON

Impostazioni opzionali passate al renderer in formato JSON.

L’utilizzo dipende dal tipo di presentazione. Esempi:

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

Pernumber_with_unit:

• unit- unità, ad esempiocm,%,g/m2,
• precision- numero di cifre decimali.

Perrange_bar:

• min- valore minimo dell’intervallo,
• max- valore massimo dell’intervallo,
• low_label- etichetta dell’inizio dell’intervallo,
• high_label- etichetta della fine dell’intervallo.

Perrating_dots:

• steps- numero di punti o livelli.

Tiporadial_chartnon richiede opzioni aggiuntive. Il renderer legge il valore dell’attributo oppure l’etichetta dell’opzione nel formatox/y, ad esempio1/6,4/6,7/10.

Esempio per la barra di intervallo:

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

Esempio per i punti:

{"steps":5}

Nota: il campo deve contenere JSON valido. Un valore non valido viene ignorato dal renderer.

Appearance Profiles

Elenco di profili di aspetto opzionali che possono essere assegnati alle sezioni tramite il campoAppearance Profile.

Code

Codice tecnico del profilo.

Esempi:

• compact,
• highlight,
• plain.

Utilizzo: il codice identifica internamente il profilo ed è usato come valore dell’opzione nel dropdownAppearance Profiledella sezione.

Label

Nome descrittivo del profilo visibile all’amministratore.

Utilizzo: facilita il riconoscimento del profilo nella configurazione, ad esempioKompaktowy,Wyróżniony,Neutralny. In combinazione con il codice crea un’etichetta leggibile nell’elenco di selezione dei profili inFeature Sections.

Background

Colore di sfondo della sezione per il profilo.

Utilizzo: evidenziare sezioni selezionate o adattarle al tema.

Text

Colore del testo principale nella sezione.

Heading

Colore del titolo della sezione.

Accent

Colore di accento, ad esempio degli elementi attivi, dei punti della scala o delle evidenziazioni.

Accent Background

Colore di sfondo degli elementi di accento.

Border

Colore delle linee, dei separatori, degli assi della scala e dei bordi.

Icon

Colore dell’icona di espansione e compressione della sezione.

Radius, e.g. 18px

Arrotondamento degli angoli della sezione.

Esempi:0,8px,18px.

Padding, e.g. 28px

Spaziatura interna della sezione.

Esempi:16px,24px,28px.

Label Font Size, e.g. 21px

Dimensione del testo delle etichette delle caratteristiche nella sezione.

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

Product Features Appearance

Questo gruppo contiene l’aspetto globale delle sezioni. Le impostazioni vengono convertite in variabili CSS e applicate al wrapper del modulo.

Section Background Color

Colore di sfondo della sezione.

Predefinita:#f4f4f4.

Section Text Color

Colore principale del testo nella sezione.

Predefinita:#000000.

Section Heading Color

Colore dell’intestazione della sezione.

Predefinita:#000000.

Muted Text Color

Colore dei testi di supporto e meno importanti.

Predefinita:#555555.

Accent Color

Colore degli elementi attivi e delle evidenziazioni.

Predefinita:#000000.

Accent Background Color

Colore di sfondo degli elementi attivi, ad esempio delle selezioni.

Predefinita:#ffffff.

Border Color

Colore dei bordi, dei separatori e degli assi della scala.

Predefinita:#9b9b9b.

Icon Color

Colore dell’icona+/-nell’intestazione della sezione.

Predefinita:#000000.

Selected Text Color

Colore del testo del valore selezionato.

Predefinita:#000000.

Selected Font Weight

Peso del font del valore selezionato.

Predefinita:700.

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

Section Border Radius

Arrotondamento del contenitore della sezione.

Predefinita:18px.

Section Padding

Spaziatura interna della sezione.

Predefinita:28px.

Section Gap

Spaziatura tra le sezioni.

Predefinita:16px.

Heading Font Size

Dimensione del font dell’intestazione della sezione.

Predefinita:20px.

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

Label Font Size

Dimensione del font delle etichette delle caratteristiche e delle etichette dei valori.

Predefinita:21px.

Body Font Size

Dimensione del font del contenuto principale della sezione.

Predefinita:16px.

Gestione degli attributi lato prodotto

Il modulo non crea un sistema separato di dati prodotto. Utilizza gli attributi prodotto Magento, quindi la gestione dei contenuti avviene principalmente nella modifica del prodotto.

Modifica di un singolo prodotto

1. Vai aCatalog > Products.
2. Apri il prodotto da modificare.
3. Compila gli attributi utilizzati dalle sezioni del modulo.
4. Se il prodotto deve utilizzare blocchi CMS, vai al gruppoProduct Featurese imposta il campoCMS Blocks.
5. Salva il prodotto.
6. Svuota la cache, se il progetto lo richiede.

La sezione apparirà sul frontend solo se:

• il modulo è attivo,
• la sezione è attiva nella configurazione,
• l’attributo esiste,
• il prodotto ha un valore dell’attributo,
• il renderer è in grado di gestire il valore selezionato,
• la sezione non è stata nascosta daHide Empty.

Attributoblocks_id/ CMS Blocks

Durantesetup:upgradeil modulo aggiunge l’attributo prodotto:

• codice:blocks_id,
• etichetta:CMS Blocks,
• tipo:text,
• input:multiselect,
• source model: blocchi CMS attivi,
• backend: backend standard Magento per multiselect,
• scope: Store View,
• gruppo:Product Features,
• visibile nella modifica del prodotto,
• disponibile nella griglia prodotti e nel filtro della griglia.

CampoCMS Blocksconsente di assegnare al prodotto blocchi CMS attivi. Ogni blocco selezionato verrà renderizzato come sezione separata, se nella configurazione del modulo esiste una sezione con:

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

Il titolo della sezione sul frontend deriva dal titolo del blocco CMS e il contenuto dal contenuto del blocco. I blocchi non attivi o non disponibili per la Store View non vengono renderizzati.

Gestione dei blocchi CMS

I blocchi utilizzati dablocks_idvengono creati in Magento nel modo standard:

Content > Elements > Blocks

Raccomandazioni:

• usa titoli di blocco chiari, perché possono essere visibili come titoli delle sezioni,
• assegna i blocchi alle Store View corrette,
• imposta il blocco come attivo,
• conserva nei blocchi contenuti descrittivi che devono essere condivisi da molti prodotti, ad esempio spedizione, resi, istruzioni, tecnologie.

Modifica massiva dei prodotti

Attributoblocks_idè predisposto per lavorare con la modifica massiva dei prodotti.

1. Vai aCatalog > Products.
2. Seleziona i prodotti nella griglia.
3. Scegli l’azioneUpdate Attributes.
4. Imposta il valore del campoCMS Blocks.
5. Salva le modifiche.

Utilizzo: assegnazione rapida della stessa sezione CMS, ad esempioDostawa,ZwrotyoppureInstrukcja pielęgnacji, a più prodotti contemporaneamente.

Attributi per la scala

Per il tiposcaleusa attributiselectcon 2 o 3 opzioni attive.

Esempio:

• l'attributofit,
• opzioni:Luźny,Regularny,Dopasowany.

Il prodotto deve avere selezionata una delle opzioni. Il modulo mostrerà tutte le opzioni della scala ed evidenzierà quella assegnata al prodotto.

Se l’attributo ha meno di 2 oppure più di 3 opzioni, il rendererscaleignorerà tale attributo.

Attributi multiselect

Per elenchi di caratteristiche, utilizzi, tecnologie o certificati usa attributimultiselect.

Tipi di presentazione possibili:

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

Il prodotto può avere selezionati più valori. Il modulo renderizza solo i valori assegnati al prodotto.

Swatch Magento

Se l’attributo multiselect utilizza swatch Magento, è possibile usare il tiposwatch_listoppureswatch_grid.

Utilizzo:

• icone delle tecnologie,
• colori,
• pittogrammi degli utilizzi,
• marcature dei materiali.

Se l’opzione ha uno swatch immagine, il modulo mostrerà l’immagine. Se ha uno swatch colore o testuale, il modulo utilizzerà la variante appropriata.

Icone Amasty

Per il tipomultiselect_icon, il modulo tenta di recuperare l’icona dell’opzione da Amasty ShopbyBrand / ShopbyBase.

Origine dell’icona:

Shop by Brand > Option Edit > Other > Small Image

Il testo alternativo deriva daSmall Image Alte, se manca, dall’etichetta dell’opzione.

Se Amasty non è installato oppure l’opzione non ha un’icona, il modulo mostrerà solo l’etichetta.

Attributi testuali e HTML

Per informazioni brevi usatext_inline,key_valueoppurebadge.

Per descrizioni più lunghe usatext_block,accordion_textoppurehtml_block.

Nota:html_blockeaccordion_textrenderizzano HTML, quindi devono essere usati esclusivamente per contenuti amministrativi affidabili.

Attributi numerici

Per i valori numerici è possibile usare:

• number_with_unit- quando il numero richiede un’unità,
• range_bar- quando il valore deve essere mostrato come avanzamento in un intervallo,
• rating_dots- quando il valore descrive un livello o una valutazione.

Esempio diRenderer Options JSON per un numero con unità:

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

Attributi boolean

Per gli attributi sì/no usa:

• yes_no, quando il cliente deve vedere siaYessiaNo,
• checkmark, quando la caratteristica deve essere visibile solo se il prodotto la possiede.

Attributi immagine

Per gli attributi di tipo immagine è possibile usare:

• image,
• image_with_label,
• image_grid.

Il modulo costruisce l’indirizzo dell’immagine in base alla directory media del prodotto Magento e utilizza l’etichetta dell’attributo come testo alternativo.

Configurazione di esempio

Sezione con più scale:

Sezione degli utilizzi con icone:

Sezioni CMS:

Diagnostica

Se la sezione non viene visualizzata sul frontend, verifica:

• seEnableddel modulo ha valoreYes,
• se la sezione specifica haEnabled = Yes,
• se il prodotto ha l’attributo compilato,
• se è stato selezionato il correttoAttribute CodeoppureAttribute Codes,
• seDisplay Typeè adatto al tipo di attributo,
• seHide Emptynon nasconde una sezione vuota,
• se l’attributo è disponibile per la Store View specifica,
• se il blocco CMS è attivo e assegnato alla Store View corretta,
• se la cache Magento è stata aggiornata.