Installatie- en configuratiehandleiding voor Countdown Promotion voor Magento 2

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

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

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 na aankoop per e-mail. 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 hoofdmap van 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-countdown-promotion

Na de installatie plaatst Composer de module in de map:

vendor/kowal/module-countdown-promotion

De 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 moeten meestal ook de deployment-opdrachten worden uitgevoerd 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 promotie is al begonnen,
• special_to_date is ingesteld op een datum in de toekomst.

Schakel voor configureerbare producten Countdown Promotion in op het bovenliggende product. De module kan de promotiedatum van het bovenliggende product gebruiken of de actieve promotiedatums van gekoppelde eenvoudige producten wanneer de promotie op varianten is ingesteld.

Moduleconfiguratie

De moduleopties zijn beschikbaar in het Magento-beheerpaneel:

Stores > Configuration > Catalog > Countdown Promotion > Appearance

Maak na een configuratiewijziging de cache leeg:

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 het 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 geselecteerde 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 de aftelwaarde zelf gecentreerd.

Het veld Text Before End Date stelt de tekst vóór de einddatum van de promotie 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 weergegeven.

Beschikbare templates:

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

De symbolen van tijdseenheden kunnen met afzonderlijke 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 kort voor het einde van de promotie tonen

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

Voorbeelden:

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

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

Weergave-instellingen

Met de module kunt u het uiterlijk van de teller configureren zonder codewijzigingen.

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 aftelwaarde,
• Border Color - randkleur,
• Font Size - lettergrootte.

De kleurvelden gebruiken een colorpicker 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. Een eenvoudig product met een actieve promotie op de productpagina.
2. Een eenvoudig product met een actieve promotie op de categorielisting.
3. Een product zonder actieve speciale prijs.
4. Een product met een datum Special Price To Date in het verleden.
5. Een product met een lege Special Price To Date.
6. Een product met een speciale prijs die gelijk is aan of hoger is dan de reguliere prijs.
7. De configuratie Show Countdown Days Before End.
8. Verschillende templates voor Displayed Time Template.
9. Wijziging van de symbolen voor tijdseenheden.
10. Wijziging van kleuren en lettergrootte na het legen van de cache.
11. De browserconsole om te controleren of er geen JavaScript-fouten zijn.
12. De ruwe HTML-bron om te controleren of deze geen kant-en-klaar element .countdown-promotion bevat.

Bekende beperkingen

De module gebruikt promoties 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 promotiedatums kunnen een aparte integratie vereisen.

Thema’s die de prijsweergave of de structuur van de producttegel sterk aanpassen, 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 is ingesteld op een datum in de toekomst,
• Special Price From Date niet naar een toekomstige datum verwijst,
• de Magento-cache is geleegd,
• voor de categorie de 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 weergave zijn niet zichtbaar

Maak de Magento-cache leeg:

bin/magento cache:flush

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