Installatie- en configuratiehandleiding voor Countdown Promotion voor Magento 2

De module Kowal_CountdownPromotion voegt aan Magento 2 een teller 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 en een ingestelde einddatum van de promotie heeft.

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 winkel 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 modulerepository.

Installatie via Composer

Ga naar de hoofdmap van het Magento-project.

Voeg voor de Git-repository de modulerepository toe aan de Composer-configuratie:

composer config --global --auth github-oauth.github.com composer config repositories.kowal-countdown-promotion vcs https://github.com/kowalco/countdown-promotioncomposer require kowal/module-countdown-promotion

Na installatie plaatst Composer de module in de map:

vendor/kowal/module-countdown-promotion

De module inschakelen in Magento

Voer de Magento-commando's uit vanuit de hoofdmap van de winkel:

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

In een productieomgeving moeten meestal ook de deploymentcommando's 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. Zet Countdown Promotion 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 opties van de module 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 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 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 aftelwaarde 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 getoond.

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 vlak 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 weergegeven 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 de uitstraling 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 color picker en slaan hex-waarden op, bijvoorbeeld:

#ffffff#333333#d32f2f

De lettergrootte wordt uit een lijst gekozen:

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

Controle na implementatie

Controleer na installatie en configuratie:

1. Eenvoudig product met actieve promotie op de productpagina.
2. Eenvoudig product met actieve promotie op de categorielisting.
3. Product zonder actieve speciale prijs.
4. Product met een datum Special Price To Date in het verleden.
5. Product met lege Special Price To Date.
6. 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 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 wijzigen, kunnen vereisen dat er 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,
• de voor de categorie ingestelde CSS-selector naar het juiste productelement verwijst.

De teller staat op de verkeerde plek

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

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