JavaScript를 대기열에 추가하여 비어 있을 때 WooCommerce 장바구니 숨기기

WooCommerce는 귀하의 웹사이트를 모든 기능을 갖춘 온라인 상점으로 바꿔주는 WordPress용으로 설계된 강력한 오픈 소스 전자상거래 플러그인입니다. 사용자 친화적인 인터페이스와 사용자 정의 가능한 테마 및 플러그인의 광범위한 라이브러리는 소규모 부티크를 시작하든 대규모 소매 운영을 시작하든 상관없이 모든 규모의 비즈니스에 이상적인 선택입니다.

개발자가 직면하는 일반적인 문제 중 하나는 장바구니가 비어 있을 때 장바구니 아이콘을 숨기는 것입니다. 단순함을 고려하면 이 문제가 얼마나 자주 발생하는지 놀랍습니다. 하지만 문제가 발생하는 이유는 다음과 같습니다.

WooCommerce는 동적 데이터를 사용하여 장바구니 아이콘 표시 방식을 제어합니다. 장바구니에 항목이 있는 경우 WooCommerce는 data-cart-items-count와 같은 데이터 속성을 사용하여 장바구니 요소를 동적으로 업데이트합니다. 그러나 이 동적 업데이트로 인해 타이밍 문제가 발생합니다. 예를 들어 다음과 같은 CSS 규칙을 추가할 수 있습니다.

[data-cart-items-count="0"] {
표시: 없음;
}

그러나 데이터 속성이 업데이트되기 전에 장바구니 아이콘이 잠시 나타나서 원하지 않는 깜박임이 발생합니다.

해결책: 자바스크립트!

이 문제를 해결하려면 장바구니의 가시성을 동적으로 제어하는 ​​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는 필요에 따라 카트를 동적으로 업데이트하기 위해 속성 변경을 감시합니다.
• 이 설정을 사용하면 장바구니에 항목이 하나 이상 있을 때만 장바구니 아이콘이 표시되므로 데이터 업데이트 지연으로 인해 발생하는 깜박임 문제가 해결됩니다.

도움이 되었다면 알려주세요! 또한 어떤 종류의 WooCommerce 사이트를 구축하고 있으며 이 환상적인 플러그인을 어떻게 사용하고 있는지 듣고 싶습니다.

위 내용은 JavaScript를 대기열에 추가하여 비어 있을 때 WooCommerce 장바구니 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!