Wtyczka Discount Rules for WooCommerce (oraz wersja PRO) to jedno z najbardziej rozbudowanych narzędzi do zarządzania promocjami w sklepach działających na WooCommerce. Dzięki niej możemy tworzyć zniżki oparte na wielu różnych kryteriach, takich jak wartość koszyka, liczba produktów w koszyku czy indywidualne reguły dla produktów. Jednak, podobnie jak w przypadku wielu innych rozwiązań, wtyczka ta nie oferuje wbudowanego timera odliczającego czas do końca promocji. W tym artykule pokażemy, jak w prosty sposób dodać funkcję odliczania do końca promocji, aby zwiększyć skuteczność Twoich ofert.
Problem – Brak timera dla promocji w Discount Rules for WooCommerce
Jednym z wyzwań, z którym spotykają się właściciele sklepów WooCommerce korzystający z wtyczki Discount Rules od Flycart, jest brak opcji wyświetlania timera wskazującego, ile czasu pozostało do zakończenia aktualnej promocji. Dodatkowo, jeśli promocje są ograniczone czasowo, brak takiego timera może sprawić, że klienci nie będą w pełni świadomi zbliżającego się końca oferty, co może wpłynąć na ich decyzje zakupowe.
Rozwiązanie – Dodanie timera odliczającego
Rozwiązaniem tego problemu jest dodanie kodu snippet, który wyświetli timer na stronie produktu oraz na stronach archiwum produktów, informując klientów o końcu promocji. Poniżej znajdziesz kompletny kod, który rozwiązuje ten problem.
1. Funkcja generująca timer
Zaczniemy od stworzenia funkcji, która będzie odpowiedzialna za generowanie timera, wyświetlającego pozostały czas do końca promocji. Funkcja ta sprawdza, czy produkt ma przypisaną promocję i jeśli tak, pobiera datę zakończenia oferty.
// Funkcja generująca timer dla Flycart Advanced Woo Discount Rules
function flycart_discount_timer() {
global $product;
if (!$product) return '';
// Pobieramy cenę i ewentualną zniżkę z Flycart
$price = $product->get_price();
$discount = apply_filters('advanced_woo_discount_rules_get_product_discount_price_from_custom_price', $price, $product, 1, 0, 'all', true, false);
if ($discount !== false && class_exists('\Wdr\App\Controllers\DiscountCalculator')) {
$rules = \Wdr\App\Controllers\DiscountCalculator::$rules;
$rule_ids = array_keys($discount['total_discount_details']);
foreach ($rule_ids as $rule_id) {
if (isset($rules[$rule_id])) {
$matched_rule = $rules[$rule_id]->rule;
$end_time = $matched_rule->date_to;
if ($end_time && $end_time > time()) {
$formatted_end_time = date('Y-m-d H:i:s', $end_time);
ob_start();
echo "<div class='flycart-countdown' data-endtime='{$formatted_end_time}'>⏳ Sale ends in: <span class='flycart-timer'></span></div>";
return ob_get_clean();
}
}
}
}
return '';
}
// Shortcode do wyświetlania timera na stronie produktu
add_shortcode('flycart_discount_timer', 'flycart_discount_timer');
// Wyświetlanie timera na stronie archiwum produktów
function flycart_timer_archive_display() {
global $product;
echo flycart_discount_timer();
}
add_action('woocommerce_after_shop_loop_item', 'flycart_timer_archive_display', 15);
// Skrypt JavaScript obsługujący odliczanie
function flycart_countdown_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.flycart-countdown').forEach(function(timerContainer) {
const endTime = new Date(timerContainer.getAttribute('data-endtime')).getTime();
const timerDisplay = timerContainer.querySelector('.flycart-timer');
function updateCountdown() {
const now = new Date().getTime();
const timeLeft = endTime - now;
if (timeLeft <= 0) {
timerContainer.style.display = 'none';
return;
}
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
timerDisplay.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
}
updateCountdown();
setInterval(updateCountdown, 1000);
});
});
</script>
<style>
.flycart-countdown {
font-size: 14px;
font-weight: bold;
color: #e74c3c;
text-align: center;
background: #fef3c7;
padding: 5px;
border-radius: 5px;
margin-top: 5px;
}
</style>
<?php
}
add_action('wp_footer', 'flycart_countdown_script');
Funkcja flycart_discount_timer() sprawdza, czy produkt ma aktywną promocję i jeśli tak, wyświetla czas pozostały do jej zakończenia. Datę zakończenia promocji pobieramy z reguł Discount Rules for WooCommerce. Funkcja zwraca kod HTML, który zawiera dane o czasie końca promocji.
2. Shortcode do wyświetlania timera
Aby timer pojawiał się na stronach produktów, musisz dodać odpowiedni shortcode, który można umieścić w dowolnym miejscu na stronie, np. w opisie produktu.
// Shortcode do wyświetlania timera na stronie produktu
add_shortcode('flycart_discount_timer', 'flycart_discount_timer');
Dzięki temu będziesz mógł umieścić timer na stronie produktu w miejscu, w którym będzie to najbardziej widoczne dla użytkowników. Wystarczy, że wstawisz shortcode [flycart_discount_timer] w edytorze treści produktu.
3. Wyświetlanie timera na stronie archiwum produktów
Jeśli chcesz, aby timer wyświetlał się również na stronach archiwum produktów, np. na stronie sklepu, należy dodać kod, który będzie renderował timer przy każdym produkcie.
// Wyświetlanie timera na stronie archiwum produktów
function flycart_timer_archive_display() {
global $product;
echo flycart_discount_timer();
}
add_action('woocommerce_after_shop_loop_item', 'flycart_timer_archive_display', 15);
Dzięki temu kodowi, timer będzie pojawiał się obok produktów na stronach kategorii oraz w wynikach wyszukiwania.
4. Skrypt JavaScript obsługujący odliczanie
Ostatnim krokiem jest dodanie skryptu JavaScript, który będzie odpowiedzialny za aktualizowanie timera w czasie rzeczywistym. Skrypt oblicza czas pozostały do końca promocji i wyświetla go w odpowiednim formacie: dni, godziny, minuty, sekundy.
// Skrypt JavaScript obsługujący odliczanie
function flycart_countdown_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.flycart-countdown').forEach(function(timerContainer) {
const endTime = new Date(timerContainer.getAttribute('data-endtime')).getTime();
const timerDisplay = timerContainer.querySelector('.flycart-timer');
function updateCountdown() {
const now = new Date().getTime();
const timeLeft = endTime - now;
if (timeLeft <= 0) {
timerContainer.style.display = 'none';
return;
}
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
timerDisplay.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
}
updateCountdown();
setInterval(updateCountdown, 1000);
});
});
</script>
<style>
.flycart-countdown {
font-size: 14px;
font-weight: bold;
color: #e74c3c;
text-align: center;
background: #fef3c7;
padding: 5px;
border-radius: 5px;
margin-top: 5px;
}
</style>
<?php
}
add_action('wp_footer', 'flycart_countdown_script');
Skrypt ten jest odpowiedzialny za dynamiczne aktualizowanie timera co sekundę. Gdy czas do końca promocji minie, timer zniknie.
Podsumowanie
Dodanie timera odliczającego czas do końca promocji w Discount Rules for WooCommerce to świetny sposób na zwiększenie zaangażowania klientów i poprawienie wyników sprzedaży. Dzięki powyższemu rozwiązaniu, Twoi klienci będą na bieżąco informowani o końcu promocji, co może zachęcić ich do szybszego podjęcia decyzji zakupowych. Implementacja timera jest prosta, a korzyści z jej zastosowania mogą być znaczące!
Potrzebujesz pomocy przy wdrożeniu kodu? Skontaktuj się ze mną!
Jeśli napotkałeś jakiekolwiek trudności podczas implementacji timera w Discount Rules od FlyCart, chętnie Ci pomogę. Skontaktuj się ze mną pod adresem projekt@crisbrand.pl.
