Product Features - installatie, configuratie en attribuutbeheer

Dit document beschrijft de configuratie van de module kowal/module-product-features, de betekenis van alle beheervelden en het werken met attributen aan de productzijde.

Installatie

De module is bedoeld voor installatie via 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

Na de productie-implementatie moeten de standaardcommando's worden uitgevoerd die voor het project van toepassing zijn, bijvoorbeeld DI-compilatie en deploy van statische assets, afhankelijk van de Magento-werkwijze.

Locatie van de configuratie

De configuratie van de module bevindt zich in het Magento-beheerpaneel:

Stores > Configuration > Catalog > Product Features

De uiterlijkinstellingen bevinden zich in een aparte groep:

Stores > Configuration > Catalog > Product Features Appearance

Configuratievelden zijn beschikbaar op het niveau Default, Website en Store View. Daardoor kunnen verschillende winkelweergaven andere kenmerksecties of een ander uiterlijk hebben.

Product Features

Enabled

Schakelt de module in of uit voor het opgegeven configuratiebereik.

Waarden:

• Yes - productkenmerksecties worden op de productpagina gerenderd,
• No - de module retourneert geen secties en het blok verschijnt niet op de frontend.

Toepassing: snel uitschakelen van de module voor de hele winkel, een geselecteerde Website of Store View zonder de configuratie van de secties te verwijderen.

Feature Sections

Lijst met secties die op de productpagina worden gerenderd. Elke rij definieert één frontendsectie of een groep secties, als het type cms_blocks wordt gebruikt.

Enabled

Schakelt een individuele sectie in of uit.

Waarden:

• Yes - de sectie wordt meegenomen in de rendering,
• No - de sectie wordt overgeslagen.

Toepassing: tijdelijk verbergen van één sectie zonder de instellingen ervan te verwijderen.

Section Title

Titel van de sectie die zichtbaar is op de productpagina.

Voorbeelden:

• Productkenmerken,
• Sporttoepassing,
• Specificatie,
• Technologieën,
• Levering.

Toepassing: de naam moet begrijpelijk zijn voor de klant en hoeft niet overeen te komen met de technische naam van het attribuut.

Let op: voor het type cms_blocks wordt de titel van de onderliggende sectie overgenomen uit de titel van het CMS-blok.

Attribute Code

Eén productattribuut dat door de sectie wordt gebruikt. Het veld heeft de vorm van een dropdown met een lijst van productattributen.

Toepassing: gebruik dit veld wanneer de sectie is gebaseerd op één attribuut, bijvoorbeeld sport_usage, blocks_id, material, technology_icon.

Attribute Codes

Lijst van meerdere productattributen die door één sectie worden gebruikt. Het veld heeft de vorm van een multiselect.

Toepassing: gebruik dit veld wanneer één sectie meerdere kenmerken moet samenvoegen, bijvoorbeeld meerdere schalen in de sectie Productkenmerken of meerdere parameters in de sectie Specificatie.

Voorbeeld: de sectie Productkenmerken kan de attributen fit, resistance, stretch en breathability bevatten, allemaal weergegeven als schalen.

Display Type

Bepaalt de manier waarop de attribuutwaarde wordt gepresenteerd.

Een lege waarde Auto betekent automatische keuze van de renderer:

• blocks_id wordt gerenderd als cms_blocks,
• swatch multiselect als swatch_list,
• select met 2 of 3 opties als scale,
• select met meer opties als selected_label,
• multiselect als text_list,
• boolean als checkmark,
• date als date,
• price als price,
• textarea als text_block,
• image/media_image als image,
• overige typen als text_inline.

Beschikbare typen:

In het beheerpaneel zijn sommige posities gemarkeerd als available in future release. Dit betreft typen die al zichtbaar zijn in de configuratielijst, maar nog geen eigen, definitieve frontendpresentatie hebben:

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

Sort Order

Volgorde van secties op de productpagina. Een lager getal betekent eerdere weergave.

Toepassing: zet de belangrijkste secties bovenaan, bijvoorbeeld 10 voor hoofdkenmerken, 20 voor toepassingen, 30 voor specificaties.

Default State

Beginstatus van de sectie op de productpagina.

Waarden:

• Expanded - de sectie is standaard uitgeklapt,
• Collapsed - de sectie is standaard ingeklapt.

Toepassing: de belangrijkste content kan direct worden getoond, terwijl langere ondersteunende informatie ingeklapt blijft.

Hide Empty

Bepaalt of een sectie moet worden verborgen wanneer er geen gegevens zijn om te tonen.

Waarden:

• Yes - de sectie wordt verborgen als het product geen attribuutwaarde heeft of de renderer geen elementen retourneert,
• No - de sectie kan zichtbaar blijven, zelfs zonder elementen.

Toepassing: meestal wordt Yes aanbevolen, zodat de klant geen lege secties ziet.

Appearance Profile

Keuze van een uiterlijkprofiel dat is gedefinieerd in het veld Appearance Profiles.

Het veld heeft de vorm van een dropdown. De beheerder voert de code niet meer handmatig in, maar kiest een klaar profiel uit de lijst, meestal in het formaat code - label.

Toepassing: maakt het mogelijk een specifieke sectie een ander uiterlijk te geven dan het globale, bijvoorbeeld profiel compact, highlight of plain.

Als het veld leeg is en de optie Use global appearance is geselecteerd, gebruikt de sectie het globale uiterlijk.

Aanbevolen werkwijze:

1. definieer een profiel in Appearance Profiles,
2. sla de configuratie op,
3. ga terug naar Feature Sections,
4. kies het profiel in de kolom Appearance Profile voor de betreffende sectie.

CSS Class

Extra CSS-klasse die aan de sectie wordt toegevoegd.

Toepassing: individuele afstemming van het uiterlijk in het frontendthema, bijvoorbeeld product-features-section--technical.

Renderer Options JSON

Optionele instellingen die in JSON-formaat aan de renderer worden doorgegeven.

De toepassing hangt af van het presentatietype. Voorbeelden:

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

Voor number_with_unit:

• unit - eenheid, bijvoorbeeld cm, %, g/m2,
• precision - aantal decimalen.

Voor range_bar:

• min - minimale bereikwaarde,
• max - maximale bereikwaarde,
• low_label - label van het begin van het bereik,
• high_label - label van het einde van het bereik.

Voor rating_dots:

• steps - aantal stippen of niveaus.

Het type radial_chart vereist geen extra opties. De renderer leest de attribuutwaarde of het optielabel in de vorm x/y, bijvoorbeeld 1/6, 4/6, 7/10.

Voorbeeld voor een bereikbalk:

{'min':0,'max':100,'low_label':'Laag','high_label':'Hoog'}

Voorbeeld voor stippen:

{'steps':5}

Let op: het veld moet geldige JSON bevatten. Een ongeldige waarde wordt door de renderer genegeerd.

Appearance Profiles

Lijst met optionele uiterlijkprofielen die via het veld Appearance Profile aan secties kunnen worden toegewezen.

Code

Technische profielcode.

Voorbeelden:

• compact,
• highlight,
• plain.

Toepassing: de code identificeert het profiel intern en wordt gebruikt als optiewaarde in de dropdown Appearance Profile bij de sectie.

Label

Beschrijvende profielnaam die zichtbaar is voor de beheerder.

Toepassing: maakt het eenvoudiger het profiel in de configuratie te herkennen, bijvoorbeeld Compact, Uitgelicht, Neutraal. In combinatie met de code ontstaat zo een duidelijk label in de profiellijst in Feature Sections.

Background

Achtergrondkleur van de sectie voor het profiel.

Toepassing: markering van geselecteerde secties of afstemming op het thema.

Text

Kleur van de basistekst in de sectie.

Heading

Kleur van de sectietitel.

Accent

Kleur van het accent, bijvoorbeeld van actieve elementen, schaalstippen of highlights.

Accent Background

Achtergrondkleur van accentelementen.

Border

Kleur van lijnen, scheidingslijnen, schaalassen en randen.

Icon

Kleur van het uit- en inklapicoon van de sectie.

Radius, e.g. 18px

Afronding van de hoeken van de sectie.

Voorbeelden: 0, 8px, 18px.

Padding, e.g. 28px

Binnenruimte van de sectie.

Voorbeelden: 16px, 24px, 28px.

Label Font Size, e.g. 21px

Tekstgrootte van kenmerklabels in de sectie.

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

Product Features Appearance

Deze groep bevat het globale uiterlijk van secties. De instellingen worden omgezet in CSS-variabelen en toegepast op de wrapper van de module.

Section Background Color

Achtergrondkleur van de sectie.

Standaard: #f4f4f4.

Section Text Color

Basistekstkleur in de sectie.

Standaard: #000000.

Section Heading Color

Kleur van de sectiekop.

Standaard: #000000.

Muted Text Color

Kleur van hulpteksten en minder belangrijke tekst.

Standaard: #555555.

Accent Color

Kleur van actieve elementen en highlights.

Standaard: #000000.

Accent Background Color

Achtergrondkleur van actieve elementen, bijvoorbeeld markeringen.

Standaard: #ffffff.

Border Color

Kleur van randen, scheidingslijnen en schaalassen.

Standaard: #9b9b9b.

Icon Color

Kleur van het pictogram + / - in de sectiekop.

Standaard: #000000.

Selected Text Color

Kleur van de tekst van de geselecteerde waarde.

Standaard: #000000.

Selected Font Weight

Lettergewicht van de geselecteerde waarde.

Standaard: 700.

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

Section Border Radius

Afronding van de sectiecontainer.

Standaard: 18px.

Section Padding

Binnenruimte van de sectie.

Standaard: 28px.

Section Gap

Afstand tussen secties.

Standaard: 16px.

Heading Font Size

Lettergrootte van de sectiekop.

Standaard: 20px.

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

Label Font Size

Lettergrootte van kenmerklabels en waardelabels.

Standaard: 21px.

Body Font Size

Lettergrootte van de basisinhoud van de sectie.

Standaard: 16px.

Attribuutbeheer aan de productzijde

De module creëert geen apart systeem voor productgegevens. Hij maakt gebruik van Magento-productattributen, dus contentbeheer gebeurt hoofdzakelijk in de productbewerking.

Bewerken van een individueel product

1. Ga naar Catalog > Products.
2. Open het product om te bewerken.
3. Vul de attributen in die door de secties van de module worden gebruikt.
4. Als het product CMS-blokken moet gebruiken, ga dan naar de groep Product Features en stel het veld CMS Blocks in.
5. Sla het product op.
6. Leeg de cache als het project dat vereist.

De sectie verschijnt alleen op de frontend als:

• de module is ingeschakeld,
• de sectie is ingeschakeld in de configuratie,
• het attribuut bestaat,
• het product een attribuutwaarde heeft,
• de renderer de geselecteerde waarde kan verwerken,
• de sectie niet is verborgen via Hide Empty.

Attribuut blocks_id / CMS Blocks

Tijdens setup:upgrade voegt de module het volgende productattribuut toe:

• code: blocks_id,
• label: CMS Blocks,
• type: text,
• input: multiselect,
• source model: actieve CMS-blokken,
• backend: standaard Magento-backend voor multiselect,
• scope: Store View,
• groep: Product Features,
• zichtbaar in productbewerking,
• beschikbaar in het productgrid en voor gridfiltering.

Het veld CMS Blocks maakt het mogelijk actieve CMS-blokken aan een product toe te wijzen. Elk geselecteerd blok wordt gerenderd als een aparte sectie, als er in de moduleconfiguratie een sectie bestaat met:

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

De titel van de sectie op de frontend komt uit de titel van het CMS-blok, en de inhoud uit de blokinhoud. Inactieve blokken of blokken die niet beschikbaar zijn voor de Store View worden niet gerenderd.

Beheer van CMS-blokken

Blokken die worden gebruikt door blocks_id worden standaard in Magento aangemaakt:

Content > Elements > Blocks

Aanbevelingen:

• gebruik duidelijke bloktitels, omdat deze zichtbaar kunnen zijn als sectietitels,
• wijs blokken toe aan de juiste Store View,
• stel het blok in als actief,
• bewaar in blokken beschrijvende content die door meerdere producten gedeeld moet worden, bijvoorbeeld levering, retouren, instructies, technologieën.

Bulkbewerking van producten

Het attribuut blocks_id is voorbereid voor gebruik met bulkbewerking van producten.

1. Ga naar Catalog > Products.
2. Selecteer producten in het grid.
3. Kies de actie Update Attributes.
4. Stel de waarde van het veld CMS Blocks in.
5. Sla de wijzigingen op.

Toepassing: snel dezelfde CMS-sectie, bijvoorbeeld Levering, Retouren of Onderhoudsinstructie, tegelijkertijd aan veel producten toewijzen.

Attributen voor schaalweergave

Gebruik voor het type scale attributen van het type select met 2 of 3 actieve opties.

Voorbeeld:

• attribuut fit,
• opties: Los, Regular, Aansluitend.

Het product moet één van de opties geselecteerd hebben. De module toont alle schaalopties en markeert degene die aan het product is toegewezen.

Als het attribuut minder dan 2 of meer dan 3 opties heeft, slaat de scale renderer dit attribuut over.

Multiselect-attributen

Gebruik voor lijsten van kenmerken, toepassingen, technologieën of certificeringen attributen van het type multiselect.

Mogelijke presentatietypen:

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

Een product kan meerdere waarden geselecteerd hebben. De module rendert alleen de waarden die aan het product zijn toegewezen.

Magento-swatches

Als een multiselect-attribuut gebruikmaakt van Magento-swatches, kan het type swatch_list of swatch_grid worden gebruikt.

Toepassing:

• technologie-iconen,
• kleuren,
• toepassingspictogrammen,
• materiaalmarkeringen.

Als een optie een afbeeldingsswatch heeft, toont de module de afbeelding. Als de optie een kleur- of tekstswatch heeft, gebruikt de module de juiste variant.

Amasty-iconen

Voor het type multiselect_icon probeert de module het optie-icoon op te halen uit Amasty ShopbyBrand / ShopbyBase.

Bron van het icoon:

Shop by Brand > Option Edit > Other > Small Image

De alternatieve tekst komt uit Small Image Alt, en als die ontbreekt, uit het optielabel.

Als Amasty niet is geïnstalleerd of de optie geen icoon heeft, toont de module alleen het label.

Tekst- en HTML-attributen

Gebruik voor korte informatie text_inline, key_value of badge.

Gebruik voor langere beschrijvingen text_block, accordion_text of html_block.

Let op: html_block en accordion_text renderen HTML, dus deze mogen uitsluitend worden gebruikt voor vertrouwde administratieve content.

Numerieke attributen

Voor numerieke waarden kun je gebruiken:

• number_with_unit - wanneer het getal een eenheid vereist,
• range_bar - wanneer de waarde als voortgang binnen een bereik moet worden weergegeven,
• rating_dots - wanneer de waarde een niveau of beoordeling beschrijft.

Voorbeeld van Renderer Options JSON voor een getal met eenheid:

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

Boolean-attributen

Gebruik voor ja/nee-attributen:

• yes_no, als de klant zowel Yes als No moet zien,
• checkmark, als het kenmerk alleen zichtbaar moet zijn wanneer het product het heeft.

Afbeeldingsattributen

Voor attributen van het type afbeelding kun je gebruiken:

• image,
• image_with_label,
• image_grid.

De module bouwt de afbeeldings-URL op basis van de Magento-productmediacatalogus en gebruikt het attribuutlabel als alternatieve tekst.

Voorbeeldconfiguratie

Sectie met meerdere schalen:

Toepassingssectie met iconen:

CMS-secties:

Diagnostiek

Als een sectie niet op de frontend verschijnt, controleer dan:

• of Enabled van de module de waarde Yes heeft,
• of de betreffende sectie Enabled = Yes heeft,
• of het product een ingevuld attribuut heeft,
• of de juiste Attribute Code of Attribute Codes is gekozen,
• of Display Type past bij het attribuuttype,
• of Hide Empty de lege sectie niet verbergt,
• of het attribuut beschikbaar is voor de betreffende Store View,
• of het CMS-blok actief is en aan de juiste Store View is toegewezen,
• of de Magento-cache is ververst.