WooCommerce에서 fragment를 강제로 업데이트

WooCommerce에서 fragment를 강제로 업데이트

WooCommerce fragments를 사용하여 사용자에게 포인트 수를 보여주는 플러그인을 만들었습니다.사용자가 몇 가지 포인트를 사용하면(제품을 카트에 추가함으로써) 모든 것이 정상적으로 작동합니다.

단, admin 인터페이스가 사용자에게 포인트를 추가하는 경우 사용자가 새 제품을 카트에 추가할 때까지 fragment는 갱신되지 않습니다.

다음은 코드 샘플입니다.

function create_points_widget_content() {
    $usersPoints = esc_attr( get_user_meta( get_current_user_id(), USERS_POINTS, true ));
    if (!isset($userPoints) || $userPoints == "") $userPoints = 0;
    $usedPoints = get_current_points_in_cart('', 0);

    ?>
        <div class="points-widget-v2">
            <div><?php echo __("Your points", "plugin-domain"); ?>:<span class="users-points"><?php echo $usersPoints; ?></span></div>
            <div><?php echo __("Actually used", "plugin-domain"); ?>:<span class="used-points"><?php echo $usedPoints; ?></span></div>
        </div>
    <?php
}

// Update top right price
function add_points_widget_to_fragment( $fragments ) {
    global $woocommerce;
    ob_start();

    create_points_widget_content();

    $fragments['div.points-widget-v2'] = ob_get_clean();
    return $fragments;
}
add_filter('add_to_cart_fragments', 'add_points_widget_to_fragment');

fragment를 강제로 새로 고치는 방법이 있나요?

Woocommerce에서 발견된 코어 핸들러를 트리거하여 Ajax를 통해 fragment를 새로 고치는 것으로 응답 시간을 단축할 수 있습니다.

function refresh_fragments() {
    console.log('fragments refreshed!');
    $( document.body ).trigger( 'wc_fragment_refresh' );
}

refresh_fragments();
setInterval(refresh_fragments, 60000);

이 코드는 cart-fragments.js에 있는 'wc_fragment_refresh'에 바인딩된 다음 함수를 트리거해야 합니다.

function refresh_cart_fragment() {
    $.ajax( $fragment_refresh );
}

몇 시간 동안 파헤친 후, 최종적으로는 왜 이런 일이 일어나는지 알아냈죠.

가장 중요한 것:Woocommerce는 조각의 내용을 브라우저 내부의 sessionStorage에 저장하고 새 제품을 카트에 삽입할 때까지 업데이트하지 않습니다.한편, sessionStorage는 변경 여부를 모니터링하기 때문에 모든 탭(있는 경우)에서 fragment가 동시에 업데이트됩니다.

이를 바탕으로 페이지 새로고침 후 fragment를 갱신하고 1분마다 fragment를 갱신하는 간단한 솔루션을 만들었습니다.

새로고침에 필요한 Javascript:

jQuery( function ($) {
    var cart_hash_key = substitutions.cart_hash_key;

    function refresh_fragments() {
        // Better to put there 'blank' string then empty string
        window.sessionStorage.setItem(cart_hash_key, 'blank'); 
        var e = $.Event("storage");

        e.originalEvent = {
            key: cart_hash_key,
        };

        $(window).trigger(e);
    }

    refresh_fragments();
    setInterval(refresh_fragments, 60000);
});

마지막 비트는 올바른 치환으로 스크립트를 페이지에 삽입하는 것입니다.

function register_load_fragments_script() {
    // Register the script
    wp_register_script( 'load-fragments-script', get_template_directory_uri() . '/js/load-fragments.js', array(), '20170121', true  );

    // Substitustions in script
    $translation_array = array(
        'cart_hash_key' => WC()->ajax_url() . '-wc_cart_hash'
    );
    wp_localize_script( 'load-fragments-script', 'substitutions', $translation_array );

    wp_enqueue_script( 'load-fragments-script' );
}

하루 종일 문제를 해결하려고 애쓰지 않는 사람에게 도움이 되었으면 합니다;-)

저 같은 경우에는 카트 아이템의 표시 방법을 대폭 변경했기 때문에 모든 사용자를 위해 카트를 한 번 새로 고치고 싶었습니다.스크립트를 사용하는 경우는, (대부분의 유저가 카트를 갱신했다고 생각되는 경우) 시간이 경과한 후에 스크립트를 삭제할 필요가 있습니다.기존 Woocommerce 세션을 모두 클리어하려면 Woocommerce -> Tools로 이동하여Clear내 사용 사례에 더 적합하도록 고객 세션을 클리어합니다.

언급URL : https://stackoverflow.com/questions/41782403/force-woocommerce-to-update-fragment