Wiele sklepów internetowych mają licznik, który pokazuje czas pozostały do końca promocji lub dyskonta . W tym krótkim tutorialu chcielibyśmy pokazać, jak wdrożyć taki licznik na stronie Magento. Jest to bardzo proste, i na pewno nie będzieś mial żadnych trudności z tym licznikiem.
Oto jak wygląda ten licznik.
W sieci można znaleźć kilka skryptów JS, ale wybraliśmy FlipClickJS . Ten skrypt dobrze wygląda, jest lekki i bardzo elastyczny.
Aby wdrożyć licznik trzeba wykonać trzy proste kroki:
Dowiedz się termin promocji. Odejmij czas obecny:
1
< span style= "color: #339933;" > $counter_time </ span> < span style= "color: #339933;" >=</ span> < span style= "color: #990000;" > strtotime</ span>< span style= "color: #009900;" > ( </ span> czas_deadline< span style= "color: #009900;" > ) </ span> < span style= "color: #339933;" >-</ span> < span style= "color: #990000;" > strtotime</ span>< span style= "color: #009900;" > ( </ span>< span style= "color: #0000ff;" > "teraz" </ span>< span style= "color: #009900;" > ) </ span>< span style= "color: #339933;" >;</ span>
<span style="color: #339933;">$counter_time</span> <span style="color: #339933;">=</span> <span style="color: #990000;">strtotime</span><span style="color: #009900;">(</span>czas_deadline<span style="color: #009900;">)</span> <span style="color: #339933;">-</span> <span style="color: #990000;">strtotime</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"teraz"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
Dodaj div licznika:
1
< span style= "color: #339933;" >& lt;</ span> div id< span style= "color: #339933;" >=</ span>< span style= "color: #0000ff;" > "special_countdown" </ span>< span style= "color: #339933;" >& gt;& lt;/</ span> div< span style= "color: #339933;" >& gt;</ span>
<span style="color: #339933;"><</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">"special_countdown"</span><span style="color: #339933;">></</span>div<span style="color: #339933;">></span>
Zainicjalizuj skrypt:
1
2
3
4
1
2
3
4
< span style= "color: #000000; font-weight: bold;" > var</ span> clock < span style= "color: #339933;" >=</ span> jQuery< span style= "color: #009900;" > ( </ span>< span style= "color: #0000ff;" > '#special_countdown' </ span>< span style= "color: #009900;" > ) </ span>< span style= "color: #339933;" >.</ span> FlipClock< span style= "color: #009900;" > ( </ span>< span style= "color: #339933;" >& lt;</ span> php < span style= "color: #b1b100;" > echo</ span> < span style= "color: #000088;" > $counter_time </ span>< span style= "color: #339933;" >;</ span> < span style= "color: #000000; font-weight: bold;" > ?& gt;</ span>< span style= "color: #339933;" >,</ span> < span style= "color: #009900;" > { </ span>
clockFace< span style= "color: #339933;" >:</ span> < span style= "color: #0000ff;" > 'DailyCounter' </ span>< span style= "color: #339933;" >,</ span>
countdown< span style= "color: #339933;" >:</ span> < span style= "color: #009900; font-weight: bold;" > true</ span>
< span style= "color: #009900;" > } </ span>< span style= "color: #009900;" > ) </ span>< span style= "color: #339933;" >;</ span>
<span style="color: #000000; font-weight: bold;">var</span> clock <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">(</span><span style="color: #0000ff;">'#special_countdown'</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span>FlipClock<span style="color: #009900;">(</span><span style="color: #339933;"><</span>php <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$counter_time</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?></span><span style="color: #339933;">,</span> <span style="color: #009900;">{</span>
clockFace<span style="color: #339933;">:</span> <span style="color: #0000ff;">'DailyCounter'</span><span style="color: #339933;">,</span>
countdown<span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">true</span>
<span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
Jeśli chcesz nastroić ten skrypt, znajdziesz wszystkie niezbędne informacje na oficjalnej stronie internetowej.
Jako bonus tutaj możesz pobrać plik z mniejszą ilością stylów w których można zmienić rozmiar liczników.
Oto archiwum z w pełni funkcjonalny modułem Magento .
Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to Create Special Price Counter in Magento Store
