You are currently viewing Script Diskon Waktu Mundur di WooCommerce

Script Diskon Waktu Mundur di WooCommerce

Artikel ini membahas cara kerja dua script yang digunakan dalam pengelolaan harga dinamis dan penghitung waktu mundur pada halaman produk dalam situs e-commerce berbasis WordPress dengan WooCommerce.

Kedua script ini bertujuan untuk memberikan pengalaman yang lebih menarik dan interaktif bagi pengguna dengan memberikan diskon berbasis waktu dan tampilan penghitung waktu mundur.

 

Script 1: Diskon jangka waktu

Script

// Hook into WordPress init to set cookies
add_action('init', 'set_product_view_cookies');

function set_product_view_cookies() {
    if (is_product()) {
        // Check if the product is being viewed for the first time
        if (!isset($_COOKIE['view_session'])) {
            setcookie('view_session', '1', time() + 180, '/'); // Cookie expires in 3 minutes
            setcookie('initial_view_time', time(), time() + 180, '/'); // Track initial view time
            setcookie('original_price', get_the_ID(), time() + 180, '/'); // Store product ID
        }
    }
}

// Hook into the single product page
add_action('woocommerce_before_single_product', 'set_dynamic_product_price');

function set_dynamic_product_price() {
    global $product;

    if (!isset($_COOKIE['view_session'])) {
        // Apply initial discount if the cookie was just set
        apply_price_discount($product, 0.2); // Apply 20% discount
    } else {
        $initial_view_time = $_COOKIE['initial_view_time'];
        $current_time = time();
        $elapsed_time = $current_time - $initial_view_time;

        if ($elapsed_time < 60) {
            // Session 1: First minute
            apply_price_discount($product, 0.2); // 20% discount
        } elseif ($elapsed_time < 120) {
            // Session 2: Second minute
            apply_price_discount($product, 0.1); // 10% discount
        } elseif ($elapsed_time < 180) {
            // Session 3: Third minute
            restore_original_price($product); // Restore original price
        } else {
            // Reset session and start over
            setcookie('view_session', '', time() - 3600, '/');
            setcookie('initial_view_time', '', time() - 3600, '/');
            setcookie('original_price', '', time() - 3600, '/');
            setcookie('view_session', '1', time() + 180, '/'); // Reset session cookie
            setcookie('initial_view_time', time(), time() + 180, '/'); // Reset initial view time
            apply_price_discount($product, 0.2); // Apply 20% discount again
        }
    }
}

// Apply price discount
function apply_price_discount($product, $discount_percentage) {
    if ($product->is_type('variable')) {
        // For variable products, apply discount to each variation
        $available_variations = $product->get_available_variations();
        foreach ($available_variations as $variation) {
            $variation_id = $variation['variation_id'];
            $regular_price = floatval(get_post_meta($variation_id, '_regular_price', true));
            $discounted_price = $regular_price * (1 - $discount_percentage);
            update_post_meta($variation_id, '_price', $discounted_price);
            clear_product_price_cache($variation_id);
        }
    } else {
        // For simple products, apply discount to the product directly
        $regular_price = floatval($product->get_regular_price());
        $discounted_price = $regular_price * (1 - $discount_percentage);
        update_post_meta($product->get_id(), '_price', $discounted_price);
        clear_product_price_cache($product->get_id());
    }
}

// Restore original price
function restore_original_price($product) {
    if (isset($_COOKIE['original_price'])) {
        $original_product_id = $_COOKIE['original_price'];
        if ($product->is_type('variable')) {
            // For variable products, restore original price for each variation
            $available_variations = $product->get_available_variations();
            foreach ($available_variations as $variation) {
                $variation_id = $variation['variation_id'];
                $original_price = get_post_meta($variation_id, '_regular_price', true);
                update_post_meta($variation_id, '_price', $original_price);
                clear_product_price_cache($variation_id);
            }
        } else {
            // For simple products, restore original price directly
            $original_price = get_post_meta($original_product_id, '_regular_price', true);
            update_post_meta($product->get_id(), '_price', $original_price);
            clear_product_price_cache($product->get_id());
        }
    }
}

// Clear product price cache
if (!function_exists('clear_product_price_cache')) {
    function clear_product_price_cache($product_id) {
        if ($product_id) {
            wc_delete_product_transients($product_id);
            clean_post_cache($product_id);
        }
    }
}

// Add JavaScript to refresh the page
add_action('wp_footer', 'add_auto_refresh_script');

function add_auto_refresh_script() {
    if (is_product()) {
        ?>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                // Refresh the page every 60 seconds
                setTimeout(function() {
                    location.reload();
                }, 60000); // 60000 milliseconds = 60 seconds
            });
        </script>
        <?php
    }
}

Cara Kerja Script Diskon Jangka Waktu (Script 1)

Script pertama ini bertujuan untuk memberikan diskon pada produk berdasarkan durasi waktu yang telah berlalu sejak pengguna pertama kali melihat produk tersebut. Berikut adalah cara kerja dan efek yang dihasilkan:

  1. Penetapan Cookie Awal:
    • Ketika pengguna mengunjungi halaman produk untuk pertama kalinya, fungsi set_product_view_cookies() menetapkan beberapa cookie:
      • view_session: Menandakan bahwa sesi tampilan telah dimulai, berlaku selama 3 menit.
      • initial_view_time: Mencatat waktu awal kunjungan pengguna.
      • original_price: Menyimpan ID produk untuk referensi harga asli.
  2. Penyesuaian Harga Dinamis:
    • Fungsi set_dynamic_product_price() mengatur harga produk secara dinamis berdasarkan waktu yang telah berlalu sejak kunjungan awal:
      • Menit Pertama (0-60 detik): Diskon 20% diterapkan pada harga produk.
      • Menit Kedua (60-120 detik): Diskon 10% diterapkan.
      • Menit Ketiga (120-180 detik): Harga asli dikembalikan.
  3. Penyegaran Halaman Otomatis:
    • JavaScript ditambahkan untuk menyegarkan halaman setiap 60 detik. Hal ini memastikan bahwa diskon diperbarui secara real-time sesuai dengan durasi waktu kunjungan pengguna.
  4. Efek yang Muncul:
    • Pengguna akan melihat harga produk yang berubah sesuai dengan waktu yang berlalu. Misalnya, dalam menit pertama, mereka akan melihat diskon 20%. Pada menit kedua, diskon akan berkurang menjadi 10%, dan pada menit ketiga, harga kembali ke harga asli. Setelah 3 menit, jika pengguna tetap berada di halaman, sesi akan direset dan diskon 20% akan diterapkan kembali.

 

Script 2: Countdown

Script

// Gunakan buffer output untuk menunda pengiriman header sampai semua header siap
ob_start();

function set_initial_view_time_cookie() {
    if (!isset($_COOKIE['initial_view_time'])) {
        setcookie('initial_view_time', time(), time() + 3600, "/"); // Cookie expires in 1 hour
    }
}
add_action('init', 'set_initial_view_time_cookie');

function add_custom_text_above_add_to_cart_button() {
    ?>
    <style>
        #countdown-timer {
            font-size: 18px; /* Ukuran font */
            color: #FF0000; /* Warna font merah */
            font-weight: bold; /* Mengatur teks menjadi tebal */
            margin-bottom: 10px; /* Jarak bawah */
        }
        #countdown {
            font-size: 24px; /* Ukuran font untuk countdown */
            color: #FF0000; /* Warna font untuk countdown */
        }
    </style>
    <div id="countdown-timer">
        <p>Diskon berakhir dalam: <span id="countdown"></span></p>
    </div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var initialViewTime = <?php echo isset($_COOKIE['initial_view_time']) ? $_COOKIE['initial_view_time'] : 'null'; ?>;
            if (initialViewTime !== null) {
                var currentTime = Math.floor(Date.now() / 1000);
                var elapsedTime = currentTime - initialViewTime;

                function startCountdown(duration, display) {
                    var timer = duration, minutes, seconds;
                    var countdownInterval = setInterval(function () {
                        minutes = parseInt(timer / 60, 10);
                        seconds = parseInt(timer % 60, 10);

                        minutes = minutes < 10 ? "0" + minutes : minutes;
                        seconds = seconds < 10 ? "0" + seconds : seconds;

                        display.textContent = minutes + ":" + seconds;

                        if (--timer < 0) {
                            clearInterval(countdownInterval);
                            location.reload(); // Refresh the page when countdown ends
                        }
                    }, 1000);
                }

                var display = document.querySelector('#countdown');
                if (elapsedTime < 60) {
                    startCountdown(60 - elapsedTime, display); // Session 1 countdown
                } else if (elapsedTime < 120) {
                    startCountdown(120 - elapsedTime, display); // Session 2 countdown
                } else if (elapsedTime < 180) {
                    startCountdown(180 - elapsedTime, display); // Session 3 countdown
                } else {
                    display.textContent = "Diskon telah berakhir"; // Countdown has ended
                }
            }
        });
    </script>
    <?php
}
add_action('woocommerce_before_add_to_cart_button', 'add_custom_text_above_add_to_cart_button');

// Akhiri buffer output dan kirim ke browser
ob_end_flush();

Cara Kerja Script Penghitung Waktu Mundur (Script 2)

Script kedua melengkapi pengalaman pengguna dengan menambahkan penghitung waktu mundur yang menunjukkan sisa waktu diskon. Berikut adalah cara kerja dan efek yang dihasilkan:

  1. Penetapan Cookie Waktu Tampilan Awal:
    • Fungsi set_initial_view_time_cookie() menetapkan cookie initial_view_time saat pengguna pertama kali mengunjungi halaman produk. Cookie ini berlaku selama satu jam.
  2. Penambahan Elemen Penghitung Waktu Mundur:
    • Fungsi add_custom_text_above_add_to_cart_button() menambahkan elemen HTML dan CSS yang menampilkan penghitung waktu mundur di atas tombol “Add to Cart”.
  3. Pengelolaan Penghitung Waktu:
    • JavaScript digunakan untuk menghitung waktu yang tersisa dan menampilkan penghitung waktu mundur yang diperbarui setiap detik:
      • Menit Pertama (0-60 detik): Menghitung mundur dari 60 detik.
      • Menit Kedua (60-120 detik): Menghitung mundur dari 120 detik.
      • Menit Ketiga (120-180 detik): Menghitung mundur dari 180 detik.
      • Setelah 3 menit, teks akan menunjukkan bahwa diskon telah berakhir.
  4. Efek yang Muncul:
    • Pengguna akan melihat penghitung waktu mundur yang menunjukkan sisa waktu diskon. Ini memberikan urgensi bagi pengguna untuk segera melakukan pembelian. Jika waktu diskon habis, penghitung waktu akan memperbarui halaman untuk menampilkan kondisi terbaru atau menunjukkan bahwa diskon telah berakhir.

Catatan Penting: Perlunya Uji Coba dan Pengembangan Lebih Lanjut

Meskipun script yang dijelaskan dalam artikel ini menawarkan solusi menarik untuk pengelolaan diskon berbasis waktu dan penghitung waktu mundur, ada beberapa catatan penting yang perlu diperhatikan terkait implementasi dan pengembangan lebih lanjut:

  1. Ketergantungan pada Cookie:
    • Script ini sangat bergantung pada cookie untuk melacak waktu kunjungan pengguna dan status diskon. Hal ini dapat menyebabkan masalah jika pengguna menghapus cookie mereka, menggunakan mode penyamaran, atau berpindah perangkat. Pengujian harus mencakup skenario ini untuk memastikan konsistensi pengalaman pengguna.
  2. Kinerja dan Skalabilitas:
    • Penyegaran halaman setiap 60 detik dapat membebani server dan mempengaruhi kinerja situs, terutama jika banyak pengguna mengunjungi halaman produk secara bersamaan. Solusi caching dan optimasi server mungkin diperlukan untuk mengatasi potensi masalah ini.
  3. Keamanan dan Penipuan Harga:
    • Penggunaan cookie untuk menetapkan harga bisa rentan terhadap manipulasi oleh pengguna yang berpengetahuan teknis. Uji coba keamanan harus dilakukan untuk memastikan bahwa harga tidak dapat dimanipulasi oleh perubahan manual pada cookie.
  4. Kompatibilitas dengan Plugin dan Tema Lain:
    • Script ini perlu diuji dengan berbagai plugin dan tema WooCommerce lainnya untuk memastikan kompatibilitas. Konflik antara script ini dan fitur lain pada situs dapat menyebabkan masalah fungsionalitas.
  5. Pengalaman Pengguna:
    • Meskipun tujuan script adalah untuk meningkatkan konversi melalui urgensi diskon, penting untuk menguji apakah pendekatan ini benar-benar meningkatkan pengalaman pengguna. Pengujian A/B dapat dilakukan untuk membandingkan efektivitas script ini dengan metode promosi lainnya.

 

Kesimpulan

Kedua script ini bekerja bersama-sama untuk meningkatkan pengalaman pengguna di situs e-commerce. Script pertama memberikan diskon berbasis waktu yang dinamis, sementara script kedua menambahkan elemen visual yang menunjukkan sisa waktu diskon. Dengan memberikan diskon yang berubah-ubah dan penghitung waktu mundur yang jelas, pengguna didorong untuk segera melakukan pembelian, meningkatkan konversi dan penjualan di situs e-commerce.

Leave a Reply