4

In Magento-2.2, when we click 'Add to Cart' button,
we need to show the following message as a pop-up modal:

"Product is added to cart!"

I know how to create modal outside of Magento with css.

But I failed to implement that inside Magento
by changing in this file:

app/design/frontend/MyVendor/ThemeName/Magento_Catalog/templates/product/view/addtocart.phtml

REMOVEED CODE:

<button type="submit"
        title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
        class="action primary tocart"
        id="product-addtocart-button">
    <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
</button>

ADDED CODE:

<a href="#url">

<button type="submit"
        title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
        class="action primary tocart"
        id="product-addtocart-button">
    <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
</button>

</a>
<div id="url" class="modalDialog">
  <div>
    <a href="#x" title="Close" class="close">X</a>
    <p>Product is added to cart!</p>
  </div>
</div>

Have you done this already? Please show us your experience.
Is there any other way?
Big Thanks!

0

You can use a Custom script

    <a href="#url">
<button type="submit"
        title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
        class="action primary tocart"
        id="product-addtocart-button">
    <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
</button>
    </a>

    <div id="myModal" class="modal">
       <div class="modal-content">
           <span class="close">&times;</span>
           <p>
             Your Custom Message
           </p>
        </div>
    </div>

Apply CSS to hide the custom message and modal

    .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

Apply Script

requirejs([
    'jquery'
], function($) {
    $(".action").click(function(e) {
        $(".modal").css("display","block");
    });

    $(".close").click(function(e) {
        $(".modal").css("display","none");
    });
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.