장바구니에 상품을 추가하면 미니 카트가 나타납니다.

magento 2.0.7을 사용하고 있는데 제품을 추가 할 때 카트 (오른쪽 상단 카트 아약스 미니 카트)를 팝업으로 만드는 것이 기본적으로 트리거됩니다. 장바구니에 추가 버튼 클래스에 "showcart"클래스를 추가하려고했지만 그렇게하면 버튼이 장바구니를 열고 더 이상 제품을 추가하지 않습니다.

이것이이 사이트의 첫 번째 답변입니다. 나는 지난 이틀 동안이 작품을 만들기 위해 노력하고 있었고 마침내 그것을 만들 수 있었기 때문에 공유하는 것이 좋을 것입니다.

우선 모듈을 만들어야합니다 :

• registration.php
• etc / module.xml
• view / frontend / layout / default.xml
• view / frontend / templates / minicart_open.phtml
• view / frontend / web / js / view / minicart_open.js

1 단계. 사이트에 템플릿을 추가해야합니다. 이를 수행하는 방법은 default.xml을 사용하는 것입니다.

<referenceContainer name="content">
  <block class="Magento\Framework\View\Element\Template" name="minicart.autoopen" template="Company_ModuleName::minicart_open.phtml"/>
</referenceContainer>

2 단계. 그런 다음 minicart_open.phtml 내부에서 js 파일 (컴포넌트)을 미니 카트의 상위 div에 첨부하여 호출해야합니다. 이 경우 [data-block = 'minicart']입니다. 자세한 내용은 이 링크 를 참조하십시오.

<script type="text/x-magento-init">
{
     "[data-block='minicart']" : {
        "Company_ModuleName/js/view/minicart_open" : {}
     }
}
</script>

3 단계. 마지막으로 minicart_open.js에서 매직 코드는 다음과 같습니다.

define(["jquery/ui","jquery"], function(Component, $){
    return function(config, element){
        var minicart = $(element);
        minicart.on('contentLoading', function () {
            minicart.on('contentUpdated', function () {
                minicart.find('[data-role="dropdownDialog"]').dropdownDialog("open");
            });
        });
    }
});

기본적 으로이 코드는 파일의 기능을 확장하며 vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jsAJAX 호출이 완료되면 (contentUpdated) 미니 카트를 열어야한다고 말합니다.

그리고 그것은 많은 이론 뒤에 숨겨진 간단한 작업입니다. 도움이 되길 바랍니다.

간단히 minicart.js 파일을 수정하여 수행 할 수 있습니다.

로 이동 vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

초기화 : 기능 아래에 표시됩니다

$('[data-block="minicart"]').on('contentLoading', function (event) {

이 코드로 기능을 교체하십시오.

$('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
            $('[data-block="minicart"]').on('contentUpdated', function ()  {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");       
                setTimeout(function() {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
            }, 4000);
            });
        });

요구 사항에 따라 시간 초과를 변경할 수 있습니다.

명령을 실행하여 파일을 업로드하고 캐시를 정리하십시오.

php bin/magento cache:clean

건배!

대체 솔루션 : 체크 vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js라인 : 100

$(document).trigger('ajax:addToCart', form.data().productSku);

커스텀 js 파일을 추가 할 수 있습니다 :

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Catalog/js/view/minicart-open": {}
    }
}

js에서 :

$(document).on('ajax:addToCart', function () {#code here...}

이 코드를 템플릿 코드 아래의 minicart.phtml에서 사용할 수 있습니다. 이 코드를 사용하고 있으며 더 잘 작동합니다. 당신은 그것을 시도 할 수 있습니다. 감사.

<script type="text/javascript">
    require(['jquery'], function ($) {
        $('.minicart-wrapper').on('contentLoading', function (event) {
            $('[data-block="minicart"]').on('contentUpdated', function () {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");
                setTimeout(function () {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 4000);
            });
        });
    });
</script>

위의 답변은 효과가 있지만 닫는 괄호가 없습니다.

            $('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
                $('[data-block="minicart"]').on('contentUpdated', function ()  {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");

                setTimeout(function() {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 4000);
            });
        });