장바구니 상품 개수 변경 시 자동 업데이트

기존에 생각하기론 개수 조정 시 ajax 처리로 뭔가 복잡한 준비 과정을 추가해야 할 것으로 알고 있었는데, 이미 있는 업데이트 버튼을 활용해서 간단히 trigger 이벤트를 자동 적용해도 똑같은 결과가 나오게 되는 것을 확인했습니다.

과정은 간략히 아래와 같습니다.

장바구니 업데이트 버튼을 화면에서 숨김 (완전 없애면 동작 X)
개수가 변경되는 동작이 감지되면, 일정 시간 후(0.5초) 숨겨둔 업데이트 버튼이 자동 클릭되도록 처리 (변경할때마다 처리를 하면 너무 많은 AJAX requests 발생!)

/**
 * Add styles,scripts to wp_footer()
 */
function child_theme_footer_script() {   
  if (is_cart()) {   ?>		
    <style>
      .woocommerce button[name="update_cart"],
      .woocommerce input[name="update_cart"] {
        display: none;
      }
    </style>
    <script>
      var timeout; 
      jQuery( function( $ ) {
        $('.woocommerce').on('change', 'input.qty', function(){			 
          if ( timeout !== undefined ) {
            clearTimeout( timeout );
          }			 
          timeout = setTimeout(function() {
            $("[name='update_cart']").trigger("click");
          }, 500 ); // 500 = 0.5초 			 
        });
      } );
    </script>		
<?php	}
}
add_action( 'wp_footer', 'child_theme_footer_script', 99 );

Your Cart