Installatie- en configuratiehandleiding voor Countdown Promotion voor Magento 2

De module Kowal_CountdownPromotion voegt aan Magento 2 een teller voor het einde van een actie toe. De teller kan zichtbaar zijn op de categorielisting en op de productpagina wanneer het product een actieve speciale prijs en een ingestelde einddatum van de actie heeft.

De zichtbare teller wordt na het laden van de pagina door JavaScript gemaakt. De backend geeft alleen technische gegevens door aan de frontend, waaronder de product-ID en de timestamp van het einde van de actie.

Vereisten

Controleer vóór de installatie of de webshop aan de vereisten voldoet:

• Magento Open Source of Adobe Commerce 2.4.x,
• PHP 7.4 of PHP 8.1+ volgens de Magento-versie,
• mogelijkheid om Composer-pakketten van het type magento2-module te installeren,
• toegang tot Magento CLI,
• toegang tot de module-repository.

Installatie via Composer

Ga naar de hoofdmap van het Magento-project.

Voeg de Kowal Composer-repository toe aan de projectconfiguratie:

De toegangsgegevens voor de Composer-repository, het e-mailadres van de klant en de licentietoken, ontvangt u per e-mail na aankoop. Ze zijn ook beschikbaar in het klantpaneel na inloggen op kowal.store. Vervang TWOJ_EMAIL_KLIENTA door het e-mailadres van uw account en TWOJ_TOKEN door de ontvangen token. Voer de opdrachten uit in de Magento-hoofdmap.

composer config repositories.kowal composer https://repo.kowal.storecomposer config http-basic.repo.kowal.store 'TWOJ_EMAIL_KLIENTA' 'TWOJ_TOKEN'composer require kowal/module-countdown-promotion

Na installatie plaatst Composer de module in de map:

vendor/kowal/module-countdown-promotion

Module inschakelen in Magento

Voer de Magento-opdrachten uit vanuit de hoofdmap van de webshop:

bin/magento module:enable Kowal_CountdownPromotionbin/magento setup:upgradebin/magento cache:flush

In een productieomgeving moet u meestal ook de deployment-opdrachten uitvoeren die in het project worden gebruikt:

bin/magento setup:di:compilebin/magento setup:static-content:deploy -fbin/magento indexer:reindexbin/magento cache:flush

Productconfiguratie

Voor elk product waarbij de teller moet verschijnen:

1. Stel Countdown Promotion in op Yes.
2. Stel Special Price in.
3. Stel Special Price To Date in.
4. Stel optioneel Special Price From Date in.

De teller verschijnt alleen wanneer aan alle voorwaarden is voldaan:

• het attribuut countdown_promotion is ingeschakeld,
• special_price is ingesteld,
• de speciale prijs is lager dan de reguliere prijs,
• special_from_date is leeg of de actie is al begonnen,
• special_to_date is ingesteld in de toekomst.

Schakel voor configureerbare producten Countdown Promotion in op het bovenliggende product. De module kan de actiedatum van het bovenliggende product gebruiken of actieve actiedatums van gekoppelde simple producten wanneer de actie op varianten is ingesteld.

Moduleconfiguratie

De module-opties zijn beschikbaar in het Magento-beheerpaneel:

Stores > Configuration > Catalog > Countdown Promotion > Appearance

Leeg na het wijzigen van de configuratie de cache:

bin/magento cache:flush

Instellingen voor de positie van de teller

Het veld Category Placement bepaalt de positie van de teller op de categorielisting.

Beschikbare opties:

• Below price - teller onder de prijs,
• Bottom of product image - teller onderaan de productafbeelding,
• Top of product image - teller bovenaan de productafbeelding,
• Custom CSS selector - teller bij een element dat met een eigen CSS-selector is aangegeven.

Wanneer u Custom CSS selector kiest, vult u het veld Category Custom CSS Selector in. Het gekozen element moet data-product-id hebben of zich bevinden in de producttegel die .price-box[data-product-id] bevat.

Voorbeeldselectors:

.price-box[data-product-id].product-item-info .price-box[data-product-id].product-item-details .price-box[data-product-id]

Het veld Product Page Custom CSS Selector geldt alleen voor de productpagina. Voer de selector in van het element waarna de teller moet worden toegevoegd.

Voorbeelden:

.product-info-main .product-info-price#custom-price-target

Als het veld leeg is, gebruikt de module de standaardselector:

.product-info-main .price-box

Instellingen voor teksten en tijdnotatie

Het veld Text Before Countdown stelt de tekst vóór de teller in, bijvoorbeeld:

Promocja kończy się za:

Als het veld leeg is, wordt het label vóór de teller niet weergegeven en wordt alleen de countdownwaarde gecentreerd.

Het veld Text Before End Date stelt de tekst vóór de einddatum van de actie in, bijvoorbeeld:

Promocja do:

Als het veld leeg is, wordt alleen de datum onder de teller weergegeven.

Met het veld Displayed Time Template kunt u het bereik van tijdseenheden kiezen dat in de teller wordt getoond.

Beschikbare templates:

• 00d 00g 00m 00s,
• 00d 00g 00m,
• 00d 00g,
• 00d,
• 00g 00m 00s,
• 00m 00s.

De symbolen van tijdseenheden kunnen met aparte velden worden gewijzigd:

• Days Symbol, standaard d,
• Hours Symbol, standaard g,
• Minutes Symbol, standaard m,
• Seconds Symbol, standaard s.

Voorbeeld: als u Hours Symbol instelt op h, kan de teller 02d 05h 30m 10s weergeven in plaats van 02d 05g 30m 10s.

De teller pas vóór het einde van de actie tonen

Het veld Show Countdown Days Before End bepaalt hoeveel dagen vóór het einde van de actie de teller zichtbaar moet worden.

Voorbeelden:

• leeg veld - de teller wordt direct weergegeven zodra aan de actievoorwaarden is voldaan,
• 1 - de teller verschijnt op de laatste dag van de actie,
• 3 - de teller verschijnt in de laatste 3 dagen van de actie,
• 7 - de teller verschijnt in de laatste 7 dagen van de actie.

Het veld accepteert gehele getallen. Een lege waarde betekent geen beperking.

Instellingen voor de uitstraling

Met de module kunt u de uitstraling van de teller configureren zonder wijzigingen in de code.

Beschikbare velden:

• Background Color - achtergrondkleur,
• Text Color - basiskleur van de tekst,
• Label Color - kleur van het label vóór de teller,
• Timer Color - kleur van de countdownwaarde,
• Border Color - kleur van de rand,
• Font Size - lettergrootte.

De kleurvelden gebruiken een color picker en slaan hex-waarden op, bijvoorbeeld:

#ffffff#333333#d32f2f

De lettergrootte wordt gekozen uit een lijst:

• 12px,
• 14px,
• 16px,
• 18px.

Controle na implementatie

Controleer na installatie en configuratie:

1. Simple product met een actieve actie op de productpagina.
2. Simple product met een actieve actie op de categorielisting.
3. Product zonder actieve speciale prijs.
4. Product met de datum Special Price To Date in het verleden.
5. Product met een lege Special Price To Date.
6. Product met een speciale prijs die gelijk is aan of hoger is dan de reguliere prijs.
7. Configuratie Show Countdown Days Before End.
8. Verschillende templates Displayed Time Template.
9. Wijziging van symbolen voor tijdseenheden.
10. Wijziging van kleuren en lettergrootte na het legen van de cache.
11. Browserconsole om te controleren of er geen JavaScript-fouten zijn.
12. Ruwe HTML-bron om te controleren of deze geen kant-en-klaar element .countdown-promotion bevat.

Bekende beperkingen

De module gebruikt acties op basis van standaard Magento-velden:

• special_price,
• special_from_date,
• special_to_date.

Catalogusregels, Adobe Commerce Scheduled Updates en varianten van configureerbare producten met volledig onafhankelijke actiedatums kunnen een aparte integratie vereisen.

Thema's die de prijsweergave of de structuur van de producttegel sterk wijzigen, kunnen vereisen dat eigen CSS-selectors worden ingesteld.

Veelvoorkomende problemen

De teller is niet zichtbaar

Controleer of:

• het product Countdown Promotion = Yes heeft,
• het product Special Price heeft ingesteld,
• de speciale prijs lager is dan de reguliere prijs,
• Special Price To Date in de toekomst is ingesteld,
• Special Price From Date geen toekomstige datum aangeeft,
• de Magento-cache is geleegd,
• de voor de categorie ingestelde CSS-selector naar het juiste productelement verwijst.

De teller staat op de verkeerde plaats

Wijzig Category Placement of stel een eigen Category Custom CSS Selector in. Gebruik op de productpagina Product Page Custom CSS Selector.

Wijzigingen in de uitstraling zijn niet zichtbaar

Leeg de Magento-cache:

bin/magento cache:flush

In productie kan het ook nodig zijn om statische assets te vernieuwen volgens het deploymentproces van de webshop.