수량 변경시 카트 수량 자동 업데이트

Magento의 기본 장바구니에서 고객이 수량을 편집 할 때 버튼을 눌러 수량을 업데이트해야합니다.

사용자가 수량 필드에 다른 번호를 입력 할 때 장바구니가 수량을 자동으로 업데이트하는 방법이 있습니까?

먼저 장바구니 템플릿을 수정하고 /app/design/frontend/{package}/{theme}/template/checkout/cart.phtml더 쉽게 액세스 할 수 있도록 양식 요소에 ID를 추가하십시오. 'id = "cart-form"'을 추가한다고 가정 해 보겠습니다.

카트 항목을 렌더링하는 템플릿을 편집하십시오.

• app / design / frontend / {package} / {theme} /template/checkout/cart/item/default.phtml
• app / design / frontend / {package} / {theme} /template/downloadable/checkout/cart/item/default.phtml

<input>이름 cart[<?php echo $_item->getId() ?>][qty]이 있는 요소에 다음을 추가하십시오.

onchange="$('cart-form').submit()"

그러나 나는 이것을하지 않는 것이 좋습니다. 사용자에게는 정말 성가신 일입니다. (적어도 나에게는).

귀하의 사이트에 충돌이없는 모드에 jQuery가 포함되어 있다고 가정하면 비동기 적으로 수행하는 방법이 있습니다 (훨씬 성가신 일이 아닙니다!).

jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
    .on(
        'change',
        'input[name$="[qty]"]',
        function(){
            var form = jQuery(jQuery(this).closest('form'));

            // we'll extract the action and method attributes out of the form

            // kick off an ajax request using the form's action and method,
            // with the form data as payload
            jQuery.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: form.serializeArray()
            });
        }
    );
});

나는 이것이 다음과 같은 가정을한다는 것을 지적해야한다.

• 귀하의 쇼핑 카트는 shopping-cart-table ID를 가진 요소 내에 있습니다
• 수량에 대한 입력 필드 에는 [qty]로 끝나는 이름 속성이 있습니다 .

상황에 맞게 2 행과 5 행의 코드에서 선택기를 쉽게 조정할 수 있어야합니다.

이 두 파일을 편집

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

이름 cart[<?php echo $_item->getId() ?>][qty]이 있는 요소에 다음을 추가하십시오.

onchange="this.form.submit()"

jQuery 버전이 오래된 경우 성공하지 못합니다. 나는 친구 Marius의 지시에 따라 다음과 같은 방법을 찾았습니다.

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtml더 쉽게 액세스 할 수 있도록 양식 요소에 ID를 추가하십시오. 추가한다고 가정 해 봅시다id="cart-form"

이제 파일을여십시오

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

그리고 파일의 끝으로 스크롤하면 수량의 증가 및 감소를 수행하는 자바 스크립트를 찾을 수 있습니다. 기능은 다음과 같습니다.

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
    }
}

이것을 위해 변경하십시오 :

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
    document.getElementById("cart-form").submit();  
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);

    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
         document.getElementById("cart-form").submit();   
    }
}

jQuery 가로 드되지 않은 경우 (아직) 이름을 가진 <input> 요소 (또는 필자의 경우 <select>드롭 다운 필드를 작성하여 금액을 선택하기 때문에 요소)를 찾아 다음 name="cart[<?php echo $_item->getId() ?>][qty]"을 추가 할 수 있습니다.

onchange="this.form.submit()"

편집해야하는 phtml 파일은 다음 위치에 있습니다.

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml