programing

Wordpress 무한 스크롤로 제품을 로드한 후 Woocommerce 스크립트를 다시 초기화합니다.

css3 2023. 6. 9. 22:16

Wordpress 무한 스크롤로 제품을 로드한 후 Woocommerce 스크립트를 다시 초기화합니다.

저는 제 샵 페이지에 다음 제품 세트를 자동으로 로드하기 위해 무한 스크롤 플러그인이 있는 워드프레스 Woocommerce-Shop을 실행하고 있습니다.

속성(기본 우커머스 기능)을 선택한 후 가격을 표시하는 드롭다운 메뉴가 있는 가변 제품이 있습니다.

여기에 이미지 설명 입력

유감스럽게도 이 기능은 초기 페이지 Load에서만 작동하며 스크롤 다운 후 무한 스크롤이 로드된 제품에서는 중단됩니다.

그래서 나는 각 무한 페이지 스크롤 후에 기능을 담당하는 js 스크립트를 다시 초기화해야 한다고 생각합니다.무한 스크롤 플러그인에는 다음 부분이 있습니다.(function(newElements)..)새 요소를 로드한 후 기능을 초기화합니다.아이디어(가능한 경우 업데이트 안전) 변수 제품에 대한 woocommerce 스크립트를 다시 초기화하는 방법은 무엇입니까?나는 적어도 그것이 그렇다고 생각합니다.add-to-cart-variation.min.js

    if (obj_nes.infinitescroll != 'disable') {
    nextSelector = obj_nes.nextselector;
    nextSelector = '#navigation #navigation-next a';
    
    $masonry.infinitescroll({
        navSelector : '#navigation',
        nextSelector : nextSelector,
        itemSelector : '.product',
        prefill: true,
        bufferPx : 900,
        loading: {
            msgText: '', 
            img: '',
            finished: function() {}
        }
    }, function(newElements) {
        
        // Initialize again
                                
    });
}

그래서 저는 그 문제를 해결했습니다.이것이 다른 사람들에게 도움이 되기를 바랍니다.

변수 제품 드롭다운 메뉴를 작동시키는 가장 안전하고 거의 "업데이트 저장" 방법은 로드하는 것입니다.add-to-cart-variation.min.js새 제품 한 쌍을 다시 적재한 후.집중해주세요.// Initialize again부품:

if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';

$masonry.infinitescroll({
    navSelector : '#navigation',
    nextSelector : nextSelector,
    itemSelector : '.product',
    prefill: true,
    bufferPx : 900,
    loading: {
        msgText: '', 
        img: '',
        finished: function() {}
    }
    }, function(newElements) {

        // Initialize again

        // if wp is installed in a subfolder
        // $.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

        $.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

    });
}

갱신하다

스크립트 파일을 캐싱하는 더 좋은 방법도 있습니다!getScript()가 jQuery.get() 마녀를 호출하는 것은 다음의 속기 Ajax 함수입니다.

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

따라서 getScript()를 호출하면 Ajax 호출을 수행할 수 있으며, jQuery는 파일의 어떤 종류의 캐시도 보관하지 않습니다.파일도 캐시하려면 다음을 사용합니다.

if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';

$masonry.infinitescroll({
    navSelector : '#navigation',
    nextSelector : nextSelector,
    itemSelector : '.product',
    prefill: true,
    bufferPx : 900,
    loading: {
        msgText: '', 
        img: '',
        finished: function() {}
    }
    }, function(newElements) {

      // Initialize again

      $.ajax({
          type: "GET",

          // if wp is installed in a subfolder   
          // url: "../sichere-anwendung/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js",

          url: "/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js"),
          cache: true
            });

    });
}

언급URL : https://stackoverflow.com/questions/48328797/reinitialise-woocommerce-scripts-again-after-loading-products-with-wordpress-inf