JavaScript をキューに入れることで空のときに WooCommerce カートを非表示にする

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

開発者が直面する一般的な課題の 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 関数は、data-cart-items-count 属性をチェックし、カートの表示/非表示を切り替えます。
• MutationObserver は属性の変更を監視し、必要に応じてカートを動的に更新します。
• この設定では、カートに少なくとも 1 つのアイテムがある場合にのみカート アイコンが表示されるため、データ更新の遅延によって引き起こされるちらつきの問題が解消されます。

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

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