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.

Datele de acces la repository-ul Composer - adresa de e-mail a clientului și tokenul de licență - le veți primi prin e-mail după achiziție. Acestea sunt disponibile și în panoul clientului după autentificarea pe kowal.store. Înlocuiți TWOJ_EMAIL_KLIENTA cu adresa de e-mail a contului dumneavoastră, iar TWOJ_TOKEN cu tokenul primit. Executați comenzile în directorul rădăcină 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

După implementarea în producție, trebuie rulate comenzile standard specifice proiectului, de exemplu compilarea DI și deploy-ul asseturilor statice, în conformitate cu 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. Astfel, diferite vizualizări ale magazinului pot avea secțiuni de caracteristici diferite sau un aspect diferit.

Product Features

Enabled

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

Valori:

• Yes - secțiunile cu caracteristicile produsului sunt randate pe pagina produsului,
• No - modulul nu returnează secțiuni, iar blocul nu apare pe frontend.

Utilizare: dezactivarea rapidă a modulului pentru întregul magazin, pentru un Website selectat sau pentru un Store View, fără eliminarea configurării secțiunilor.

Feature Sections

Lista secțiunilor randate pe pagina produsului. Fiecare rând definește o secțiune de frontend sau un grup de secțiuni, dacă este folosit 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 acesteia.

Section Title

Titlul secțiunii vizibil pe pagina produsului.

Exemple:

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

Utilizare: denumirea trebuie să fie clară 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

Un singur atribut de produs utilizat de secțiune. Câmpul are forma unui dropdown cu lista atributelor produsului.

Utilizare: folosiți acest câmp atunci când secțiunea se bazează pe un singur atribut, de exemplu sport_usage, blocks_id, material, technology_icon.

Attribute Codes

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

Utilizare: folosiți acest câmp atunci când o secțiune trebuie să agregheze mai multe caracteristici, de exemplu mai multe scale în secțiunea Cechy produktu sau mai mulți parametri în secțiunea Specyfikacja.

Exemplu: secțiunea Cechy produktu 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, unele 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: setați cele mai importante secțiuni la început, de exemplu 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 pliată implicit.

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

Hide Empty

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

Valori:

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

Utilizare: de obicei 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 alege un profil predefinit din listă, de obicei în formatul code - label.

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

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

Ordinea de lucru recomandată:

1. definiți profilul în Appearance Profiles,
2. salvați configurarea,
3. reveniți la Feature Sections,
4. selectați profilul în coloana Appearance Profile pentru secțiunea corespunzătoare.

CSS Class

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

Utilizare: ajustarea individuală a aspectului în tema frontend, de exemplu 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 - unitatea, de exemplu 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 exemplu 1/6, 4/6, 7/10.

Exemplu pentru bara de interval:

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

Exemplu pentru puncte:

{'steps':5}

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

Appearance Profiles

Lista profilurilor opționale de aspect care pot fi atribuite secțiunii 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 dropdownul Appearance Profile al secțiunii.

Label

Denumirea descriptivă a profilului, vizibilă pentru administrator.

Utilizare: facilitează identificarea profilului în configurare, de exemplu Kompaktowy, Wyróżniony, Neutralny. Împreună cu codul, creează o etichetă clară în lista de selectare 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 de accent, de exemplu a elementelor active, punctelor scalei sau evidențierilor.

Accent Background

Culoarea de fundal a elementelor de accent.

Border

Culoarea liniilor, separatoarelor, axelor scalei și chenarelor.

Icon

Culoarea pictogramei de extindere și pliere a secțiunii.

Radius, e.g. 18px

Rotunjirea colțurilor secțiunii.

Exemple: 0, 8px, 18px.

Padding, e.g. 28px

Spațiul interior al secțiunii.

Exemple: 16px, 24px, 28px.

Label Font Size, e.g. 21px

Dimensiunea textului etichetelor caracteristicilor 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 antetului 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 exemplu a selecțiilor.

Implicit: #ffffff.

Border Color

Culoarea chenarelor, separatoarelor și axelor scalei.

Implicit: #9b9b9b.

Icon Color

Culoarea pictogramei + / - din antetul 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țiul interior al secțiunii.

Implicit: 28px.

Section Gap

Spațiul dintre secțiuni.

Implicit: 16px.

Heading Font Size

Dimensiunea fontului antetului 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 de produs. Folosește atributele produsului Magento, prin urmare gestionarea conținutului se realizează în principal în editarea produsului.

Editarea unui singur produs

1. Accesați Catalog > Products.
2. Deschideți produsul pentru editare.
3. Completați atributele utilizate de secțiunile modulului.
4. Dacă produsul trebuie să folosească blocuri CMS, accesați grupul Product Features și setați câmpul CMS Blocks.
5. Salvați produsul.
6. Goliți cache-ul, dacă proiectul necesită acest lucru.

Secțiunea va apărea pe frontend numai dacă:

• modulul este activat,
• secțiunea este activată în configurare,
• atributul există,
• produsul are o valoare a atributului,
• rendererul poate gestiona valoarea selectată,
• secțiunea nu a fost ascunsă prin 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 standard Magento 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 blocurilor CMS active la produs. Fiecare bloc selectat va fi randat ca secțiune separată, dacă în configurarea modulului există o secțiune cu:

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

Titlul secțiunii pe 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 utilizate de blocks_id se creează standard în Magento:

Content > Elements > Blocks

Recomandări:

• folosiți titluri clare pentru blocuri, deoarece pot fi vizibile ca titluri de secțiuni,
• atribuiți blocurile la Store View-urile corespunzătoare,
• setați blocul ca activ,
• păstrați în blocuri conținut descriptiv care trebuie partajat de mai multe produse, de exemplu 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. Accesați Catalog > Products.
2. Selectați produsele în grid.
3. Alegeți acțiunea Update Attributes.
4. Setați valoarea câmpului CMS Blocks.
5. Salvați modificările.

Utilizare: atribuirea rapidă a aceleiași secțiuni CMS, de exemplu Dostawa, Zwroty sau Instrukcja pielęgnacji, la mai multe produse simultan.

Atribute pentru scală

Pentru tipul scale, folosiți atribute select cu 2 sau 3 opțiuni active.

Exemplu:

• atribut fit,
• opțiuni: Luźny, Regularny, Dopasowany.

Produsul trebuie 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, folosiți 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ă numai 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 ale tehnologiilor,
• culori,
• pictograme ale utilizărilor,
• marcaje ale materialelor.

Dacă opțiunea are un swatch de imagine, modulul va afișa imaginea. Dacă are un 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ă acesta 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, folosiți text_inline, key_value sau badge.

Pentru descrieri mai lungi, folosiți text_block, accordion_text sau html_block.

Notă: html_block și accordion_text randează HTML, de aceea trebuie utilizate numai pentru conținut administrativ de încredere.

Atribute numerice

Pentru valori numerice se pot utiliza:

• number_with_unit - atunci când numărul necesită o unitate,
• range_bar - atunci când valoarea trebuie afișată ca progres într-un interval,
• rating_dots - atunci 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 da/nu, folosiți:

• 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 de imagine

Pentru atribute de tip imagine se pot utiliza:

• image,
• image_with_label,
• image_grid.

Modulul construiește adresa imaginii pe baza directorului media al produsului Magento și folosește eticheta atributului ca text alternativ.

Exemplu de configurare

Secțiune cu mai multe scale:

Secțiune de utilizări cu pictograme:

Secțiuni CMS:

Diagnosticare

Dacă secțiunea nu apare pe frontend, verificați:

• 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 cu tipul 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 corespunzător,
• dacă cache-ul Magento a fost reîmprospătat.