Menyembunyikan Troli WooCommerce apabila kosong dengan Enqueueing JavaScript

WooCommerce ialah pemalam eCommerce sumber terbuka yang berkuasa direka untuk WordPress yang mengubah tapak web anda menjadi kedai dalam talian yang berfungsi sepenuhnya. Antara muka mesra pengguna dan perpustakaan luas tema dan pemalam yang boleh disesuaikan menjadikannya pilihan ideal untuk perniagaan dari semua saiz, sama ada anda melancarkan butik kecil atau operasi runcit berskala besar.

Satu cabaran biasa yang dihadapi pembangun ialah menyembunyikan ikon troli apabila troli kosong. Sungguh menghairankan betapa kerap isu ini timbul, memandangkan kesederhanaannya, tetapi inilah sebabnya ia berlaku:

WooCommerce menggunakan data dinamik untuk mengawal cara ikon troli dipaparkan. Jika terdapat item dalam troli, WooCommerce mengemas kini elemen troli secara dinamik menggunakan atribut data, seperti data-cart-item-count. Walau bagaimanapun, kemas kini dinamik ini menimbulkan isu masa. Sebagai contoh, anda boleh menambah peraturan CSS seperti:

[data-cart-items-count="0"] {
paparan: tiada;
}

Tetapi ikon troli masih muncul sebentar sebelum atribut data dikemas kini, membawa kepada kelipan yang tidak diingini.

Penyelesaian: JavaScript!

Untuk menyelesaikannya, kami memerlukan JavaScript untuk mengawal keterlihatan troli secara dinamik. Memandangkan WordPress bergantung pada beratur untuk memuatkan skrip dengan betul, berikut ialah cara anda boleh melaksanakan penyelesaiannya:

Langkah 1: Enqueque JavaScript Anda

Dalam fail functions.php tema anda, tambahkan kod berikut untuk memasukkan fail JavaScript tersuai anda:

function enqueue_custom_script() {
    wp_enqueue_script(
        'custom-cart-script', // Handle name
        get_stylesheet_directory_uri() . '/path/to/js/script.js', // Path to the JS file
        array('jquery'), // Dependencies
        '1.0.0', // Version
        true // Load in the footer
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Pastikan laluan fail sepadan dengan struktur tema anda.

Langkah 2: Tambah Kod JavaScript

Dalam fail JavaScript yang baru anda masukkan dalam baris gilir, tambahkan kod berikut:

document.addEventListener('DOMContentLoaded', function () {
    const miniCart = document.querySelector('.wc-block-mini-cart'); // Update selector as needed

    if (miniCart) {
        // Initially hide the mini-cart
        miniCart.style.display = 'none';

        const updateVisibility = () => {
            const itemCount = miniCart.getAttribute('data-cart-items-count');
            miniCart.style.display = itemCount === '0' ? 'none' : 'block';
        };

        // Run the visibility check on page load
        updateVisibility();

        // Monitor changes to the mini-cart for dynamic updates
        const observer = new MutationObserver(updateVisibility);
        observer.observe(miniCart, { attributes: true, attributeFilter: ['data-cart-items-count'] });
    }
});

Bagaimana Ia Berfungsi

• Skrip menunggu sehingga DOM dimuatkan sepenuhnya.
• Ia memilih ikon troli (kemas kini pemilih agar sepadan dengan elemen troli tema anda).
• Pada mulanya, troli disembunyikan.
• Fungsi updateVisibility menyemak atribut data-cart-items-count dan menogol keterlihatan troli.
• MutationObserver melihat perubahan atribut untuk mengemas kini troli secara dinamik mengikut keperluan.
• Dengan persediaan ini, ikon troli anda hanya akan muncul apabila terdapat sekurang-kurangnya satu item dalam troli, menghapuskan isu kelipan yang disebabkan oleh kemas kini data yang tertangguh.

Beri tahu saya jika ini membantu anda! Saya juga ingin mendengar jenis tapak WooCommerce yang anda bina dan cara anda menggunakan pemalam yang hebat ini.

Atas ialah kandungan terperinci Menyembunyikan Troli WooCommerce apabila kosong dengan Enqueueing JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!