WooCommerce は、WordPress 用に設計された強力なオープンソース e コマース プラグインで、Web サイトを完全に機能するオンライン ストアに変換します。ユーザーフレンドリーなインターフェイスと、カスタマイズ可能なテーマとプラグインの広範なライブラリにより、小規(guī)模なブティックを立ち上げる場合でも大規(guī)模な小売業(yè)を立ち上げる場合でも、あらゆる規(guī)模の企業(yè)にとって理想的な選択肢となります。

開発者が直面する一般的な課題の 1 つは、カートが空のときにカート アイコンを非表示にすることです。その単純さを考えると、この問題がどれほど頻繁に起こるかは驚くべきことですが、それが起こる理由は次のとおりです:

WooCommerce は動的データを使用して、カート アイコンの表示方法を制御します。カート內に商品がある場合、WooCommerce は data-cart-items-count などのデータ屬性を使用してカート要素を動的に更新します。ただし、この動的更新によりタイミングの問題が発生します。たとえば、次のような CSS ルールを追加できます:

[data-cart-items-count="0"] {
表示: なし;
}

しかし、データ屬性が更新される前にカート アイコンがまだ短時間表示され、望ましくないちらつきが発生します。

解決策: JavaScript!

これを解決するには、カートの表示を動的に制御する JavaScript が必要です。 WordPress はスクリプトを適切にロードするためにエンキューに依存しているため、解決策を実裝する方法は次のとおりです:

ステップ 1: JavaScript をキューに入れる

テーマの function.php ファイルに次のコードを追加して、カスタム JavaScript ファイルをキューに追加します。

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');

ファイル パスがテーマの構造と一致していることを確認してください。

ステップ 2: JavaScript コードを追加する

キューに追加した JavaScript ファイルに、次のコードを追加します。

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'] });
    }
});

仕組み

• スクリプトは DOM が完全にロードされるまで待機します。
• カート アイコンを選択します (テーマのカート要素に一致するようにセレクターを更新します)。
• 最初はカートは非表示になっています。
• updateVisibility 関數(shù)は、data-cart-items-count 屬性をチェックし、カートの表示/非表示を切り替えます。
• MutationObserver は屬性の変更を監(jiān)視し、必要に応じてカートを動的に更新します。
• この設定では、カートに少なくとも 1 つのアイテムがある場合にのみカート アイコンが表示されるため、データ更新の遅延によって引き起こされるちらつきの問題が解消されます。

これが役に立ったかどうかお知らせください。また、どのような種類の WooCommerce サイトを構築しているのか、この素晴らしいプラグインをどのように使用しているのかもぜひ聞きたいです。

以上がJavaScript をキューに入れることで空のときに WooCommerce カートを非表示にするの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。