Product Features - instalare, configurare și gestionarea atributelor

Acest document descrie configurarea modulului kowal/module-product-features, semnificația tuturor câmpurilor administrative și lucrul cu atributele la nivel de produs.

Instalare

Modulul este destinat instalării prin Composer.

composer config repositories.module.product.features vcs https://github.com/kowalco/product-featurescomposer config --global --auth github-oauth.github.com composer require kowal/module-product-featuresbin/magento module:enable Kowal_ProductFeaturesbin/magento setup:upgradebin/magento cache:flush

După deploy în producție, trebuie rulate comenzile standard corespunzătoare proiectului, de ex. compilarea DI și deploy-ul asset-urilor statice, în funcție de modul de funcționare Magento.

Locația configurării

Configurarea modulului se află în panoul de administrare Magento:

Stores > Configuration > Catalog > Product Features

Setările de aspect se află într-un grup separat:

Stores > Configuration > Catalog > Product Features Appearance

Câmpurile de configurare sunt disponibile la nivelurile Default, Website și Store View. Datorită acestui lucru, diferite vizualizări ale magazinului pot avea alte secțiuni de caracteristici sau un alt aspect.

Product Features

Enabled

Activează sau dezactivează modulul pentru domeniul de configurare respectiv.

Valori:

• Yes - secțiunile de caracteristici ale produsului sunt randate pe pagina produsului,
• No - modulul nu returnează secțiuni și blocul nu apare în frontend.

Utilizare: dezactivare rapidă a modulului pentru întregul magazin, un anumit Website sau Store View, fără ștergerea configurării secțiunilor.

Feature Sections

Lista secțiunilor randate pe pagina produsului. Fiecare rând definește o secțiune frontend sau un grup de secțiuni, dacă este utilizat tipul cms_blocks.

Enabled

Activează sau dezactivează o secțiune individuală.

Valori:

• Yes - secțiunea participă la randare,
• No - secțiunea este omisă.

Utilizare: ascunderea temporară a unei secțiuni fără ștergerea setărilor ei.

Section Title

Titlul secțiunii vizibil pe pagina produsului.

Exemple:

• Caracteristicile produsului,
• Utilizare sportivă,
• Specificații,
• Tehnologii,
• Livrare.

Utilizare: denumirea ar trebui să fie ușor de înțeles pentru client și nu trebuie să corespundă neapărat denumirii tehnice a atributului.

Notă: pentru tipul cms_blocks titlul secțiunii copil este preluat din titlul blocului CMS.

Attribute Code

Atributul individual al produsului folosit de secțiune. Câmpul are forma unui dropdown cu lista atributelor produsului.

Utilizare: folosește acest câmp când secțiunea se bazează pe un singur atribut, de ex. sport_usage, blocks_id, material, technology_icon.

Attribute Codes

Lista mai multor atribute de produs folosite de o singură secțiune. Câmpul are forma unui multiselect.

Utilizare: folosește acest câmp când o secțiune trebuie să agregheze mai multe caracteristici, de ex. mai multe scale în secțiunea Caracteristicile produsului sau mai mulți parametri în secțiunea Specificații.

Exemplu: secțiunea Caracteristicile produsului poate conține atributele fit, resistance, stretch și breathability, toate randate ca scale.

Display Type

Definește modul de prezentare a valorii atributului.

Valoarea goală Auto înseamnă selectarea automată a rendererului:

• blocks_id este randat ca cms_blocks,
• swatch multiselect ca swatch_list,
• select cu 2 sau 3 opțiuni ca scale,
• select cu un număr mai mare de opțiuni ca selected_label,
• multiselect ca text_list,
• boolean ca checkmark,
• date ca date,
• price ca price,
• textarea ca text_block,
• image/media_image ca image,
• celelalte tipuri ca text_inline.

Tipuri disponibile:

În panoul de administrare, o parte dintre poziții sunt marcate ca available in future release. Acest lucru se referă la tipurile care sunt deja vizibile în lista de configurare, dar nu au încă propria prezentare frontend finală:

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

Sort Order

Ordinea secțiunilor pe pagina produsului. Un număr mai mic înseamnă afișare mai devreme.

Utilizare: setează cele mai importante secțiuni la început, de ex. 10 pentru caracteristicile principale, 20 pentru utilizări, 30 pentru specificații.

Default State

Starea inițială a secțiunii pe pagina produsului.

Valori:

• Expanded - secțiunea este extinsă implicit,
• Collapsed - secțiunea este restrânsă implicit.

Utilizare: cel mai important conținut poate fi afișat imediat, iar informațiile auxiliare mai lungi pot rămâne restrânse.

Hide Empty

Decide dacă secțiunea trebuie ascunsă atunci când nu există date de afișat.

Valori:

• Yes - secțiunea este ascunsă dacă produsul nu are valoarea atributului sau rendererul nu returnează niciun element,
• No - secțiunea poate rămâne vizibilă chiar și fără elemente.

Utilizare: de regulă este recomandat Yes, pentru a nu afișa clientului secțiuni goale.

Appearance Profile

Selectarea profilului de aspect definit în câmpul Appearance Profiles.

Câmpul are forma unui dropdown. Administratorul nu mai introduce codul manual, ci selectează un profil gata pregătit din listă, de obicei în formatul code - label.

Utilizare: permite atribuirea unui aspect diferit unei secțiuni concrete față de aspectul global, de ex. profilul compact, highlight sau plain.

Dacă câmpul este gol și este selectată opțiunea Use global appearance, secțiunea folosește aspectul global.

Ordinea de lucru recomandată:

1. definește profilul în Appearance Profiles,
2. salvează configurarea,
3. revino la Feature Sections,
4. selectează profilul în coloana Appearance Profile pentru secțiunea corespunzătoare.

CSS Class

Clasă CSS suplimentară adăugată secțiunii.

Utilizare: personalizare individuală a aspectului în tema frontend, de ex. product-features-section--technical.

Renderer Options JSON

Setări opționale transmise rendererului în format JSON.

Utilizarea depinde de tipul de prezentare. Exemple:

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

Pentru number_with_unit:

• unit - unitate, de ex. cm, %, g/m2,
• precision - numărul de zecimale.

Pentru range_bar:

• min - valoarea minimă a intervalului,
• max - valoarea maximă a intervalului,
• low_label - eticheta începutului intervalului,
• high_label - eticheta sfârșitului intervalului.

Pentru rating_dots:

• steps - numărul de puncte sau niveluri.

Tipul radial_chart nu necesită opțiuni suplimentare. Rendererul citește valoarea atributului sau eticheta opțiunii în formatul x/y, de ex. 1/6, 4/6, 7/10.

Exemplu pentru bara de interval:

{'min':0,'max':100,'low_label':'Scăzută','high_label':'Ridicată'}

Exemplu pentru puncte:

{'steps':5}

Notă: câmpul trebuie să conțină JSON valid. O valoare incorectă este ignorată de renderer.

Appearance Profiles

Listă de profiluri de aspect opționale, care pot fi atribuite secțiunilor prin câmpul Appearance Profile.

Code

Codul tehnic al profilului.

Exemple:

• compact,
• highlight,
• plain.

Utilizare: codul identifică profilul intern și este folosit ca valoare a opțiunii în dropdown-ul Appearance Profile pentru secțiune.

Label

Denumirea descriptivă a profilului vizibilă pentru administrator.

Utilizare: ușurează recunoașterea profilului în configurare, de ex. Compact, Evidențiat, Neutru. Împreună cu codul creează o etichetă clară în lista de selecție a profilurilor din Feature Sections.

Background

Culoarea de fundal a secțiunii pentru profil.

Utilizare: evidențierea secțiunilor selectate sau adaptarea la temă.

Text

Culoarea textului de bază din secțiune.

Heading

Culoarea titlului secțiunii.

Accent

Culoarea accentului, de ex. a elementelor active, a punctelor scalei sau a evidențierilor.

Accent Background

Culoarea de fundal a elementelor de accent.

Border

Culoarea liniilor, separatorilor, axelor scalei și marginilor.

Icon

Culoarea pictogramei de extindere și restrângere a secțiunii.

Radius, e.g. 18px

Rotunjirea colțurilor secțiunii.

Exemple: 0, 8px, 18px.

Padding, e.g. 28px

Spațierea interioară a secțiunii.

Exemple: 16px, 24px, 28px.

Label Font Size, e.g. 21px

Dimensiunea textului etichetelor de caracteristici din secțiune.

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

Product Features Appearance

Acest grup conține aspectul global al secțiunilor. Setările sunt transformate în variabile CSS și aplicate wrapperului modulului.

Section Background Color

Culoarea de fundal a secțiunii.

Implicit: #f4f4f4.

Section Text Color

Culoarea de bază a textului din secțiune.

Implicit: #000000.

Section Heading Color

Culoarea titlului secțiunii.

Implicit: #000000.

Muted Text Color

Culoarea textelor auxiliare și mai puțin importante.

Implicit: #555555.

Accent Color

Culoarea elementelor active și a evidențierilor.

Implicit: #000000.

Accent Background Color

Culoarea de fundal a elementelor active, de ex. marcajele.

Implicit: #ffffff.

Border Color

Culoarea marginilor, separatorilor și axelor scalei.

Implicit: #9b9b9b.

Icon Color

Culoarea pictogramei + / - din titlul secțiunii.

Implicit: #000000.

Selected Text Color

Culoarea textului valorii selectate.

Implicit: #000000.

Selected Font Weight

Grosimea fontului valorii selectate.

Implicit: 700.

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

Section Border Radius

Rotunjirea containerului secțiunii.

Implicit: 18px.

Section Padding

Spațierea interioară a secțiunii.

Implicit: 28px.

Section Gap

Spațiul dintre secțiuni.

Implicit: 16px.

Heading Font Size

Dimensiunea fontului titlului secțiunii.

Implicit: 20px.

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

Label Font Size

Dimensiunea fontului etichetelor caracteristicilor și etichetelor valorilor.

Implicit: 21px.

Body Font Size

Dimensiunea fontului conținutului de bază al secțiunii.

Implicit: 16px.

Gestionarea atributelor la nivel de produs

Modulul nu creează un sistem separat de date despre produs. Folosește atributele de produs Magento, de aceea gestionarea conținutului are loc în principal în editarea produsului.

Editarea unui singur produs

1. Accesează Catalog > Products.
2. Deschide produsul pentru editare.
3. Completează atributele care sunt folosite de secțiunile modulului.
4. Dacă produsul trebuie să folosească blocuri CMS, accesează grupul Product Features și setează câmpul CMS Blocks.
5. Salvează produsul.
6. Golește cache-ul, dacă proiectul o cere.

Secțiunea va apărea în frontend doar dacă:

• modulul este activat,
• secțiunea este activată în configurare,
• atributul există,
• produsul are valoarea atributului,
• rendererul poate gestiona valoarea selectată,
• secțiunea nu a fost ascunsă de Hide Empty.

Atributul blocks_id / CMS Blocks

În timpul setup:upgrade modulul adaugă atributul de produs:

• cod: blocks_id,
• etichetă: CMS Blocks,
• tip: text,
• input: multiselect,
• source model: blocuri CMS active,
• backend: backend Magento standard pentru multiselect,
• scope: Store View,
• grup: Product Features,
• vizibil în editarea produsului,
• disponibil în gridul de produse și în filtrarea gridului.

Câmpul CMS Blocks permite atribuirea de blocuri CMS active produsului. Fiecare bloc selectat va fi randat ca o secțiune separată, dacă în configurarea modulului există o secțiune cu:

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

Titlul secțiunii în frontend provine din titlul blocului CMS, iar conținutul din conținutul blocului. Blocurile inactive sau indisponibile pentru Store View nu sunt randate.

Gestionarea blocurilor CMS

Blocurile folosite de blocks_id se creează în mod standard în Magento:

Content > Elements > Blocks

Recomandări:

• folosește titluri clare pentru blocuri, deoarece pot fi vizibile ca titluri de secțiuni,
• atribuie blocurile Store View-urilor potrivite,
• setează blocul ca activ,
• păstrează în blocuri conținut descriptiv care trebuie partajat de mai multe produse, de ex. livrare, retururi, instrucțiuni, tehnologii.

Editarea în masă a produselor

Atributul blocks_id este pregătit pentru lucrul cu editarea în masă a produselor.

1. Accesează Catalog > Products.
2. Selectează produsele din grid.
3. Alege acțiunea Update Attributes.
4. Setează valoarea câmpului CMS Blocks.
5. Salvează modificările.

Utilizare: atribuirea rapidă a aceleiași secțiuni CMS, de ex. Livrare, Retururi sau Instrucțiuni de întreținere, mai multor produse simultan.

Atribute pentru scală

Pentru tipul scale folosește atribute select cu 2 sau 3 opțiuni active.

Exemplu:

• atributul fit,
• opțiuni: Lejer, Regular, Mulat.

Produsul ar trebui să aibă selectată una dintre opțiuni. Modulul va afișa toate opțiunile scalei și o va evidenția pe cea atribuită produsului.

Dacă atributul are mai puțin de 2 sau mai mult de 3 opțiuni, rendererul scale va omite acest atribut.

Atribute multiselect

Pentru liste de caracteristici, utilizări, tehnologii sau certificate folosește atribute multiselect.

Tipuri posibile de prezentare:

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

Produsul poate avea selectate mai multe valori. Modulul randează doar valorile atribuite produsului.

Swatch-uri Magento

Dacă atributul multiselect folosește swatch-uri Magento, se poate utiliza tipul swatch_list sau swatch_grid.

Utilizare:

• pictograme de tehnologie,
• culori,
• pictograme pentru utilizări,
• marcaje pentru materiale.

Dacă opțiunea are swatch imagine, modulul va afișa imaginea. Dacă are swatch de culoare sau text, modulul va folosi varianta corespunzătoare.

Pictograme Amasty

Pentru tipul multiselect_icon modulul încearcă să preia pictograma opțiunii din Amasty ShopbyBrand / ShopbyBase.

Sursa pictogramei:

Shop by Brand > Option Edit > Other > Small Image

Textul alternativ provine din Small Image Alt, iar dacă lipsește, din eticheta opțiunii.

Dacă Amasty nu este instalat sau opțiunea nu are pictogramă, modulul va afișa doar eticheta.

Atribute text și HTML

Pentru informații scurte folosește text_inline, key_value sau badge.

Pentru descrieri mai lungi folosește text_block, accordion_text sau html_block.

Notă: html_block și accordion_text randează HTML, de aceea ar trebui folosite exclusiv pentru conținut administrativ de încredere.

Atribute numerice

Pentru valori numerice se pot folosi:

• number_with_unit - când numărul necesită o unitate,
• range_bar - când valoarea trebuie afișată ca progres într-un interval,
• rating_dots - când valoarea descrie un nivel sau o evaluare.

Exemplu de Renderer Options JSON pentru un număr cu unitate:

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

Atribute boolean

Pentru atribute de tip da/nu folosește:

• yes_no, când clientul trebuie să vadă atât Yes, cât și No,
• checkmark, când caracteristica trebuie să fie vizibilă doar atunci când produsul o are.

Atribute imagine

Pentru atribute de tip imagine se pot folosi:

• image,
• image_with_label,
• image_grid.

Modulul construiește adresa imaginii pe baza catalogului media de produs Magento și folosește eticheta atributului ca text alternativ.

Configurare exemplu

Secțiune cu mai multe scale:

Secțiune de utilizări cu pictograme:

Secțiuni CMS:

Diagnosticare

Dacă secțiunea nu apare în frontend, verifică:

• dacă Enabled al modulului are valoarea Yes,
• dacă secțiunea respectivă are Enabled = Yes,
• dacă produsul are atributul completat,
• dacă a fost selectat corect Attribute Code sau Attribute Codes,
• dacă Display Type se potrivește tipului atributului,
• dacă Hide Empty nu ascunde secțiunea goală,
• dacă atributul este disponibil pentru Store View-ul respectiv,
• dacă blocul CMS este activ și atribuit Store View-ului corect,
• dacă cache-ul Magento a fost reîmprospătat.