1

I have a Magento CE-1.9.2.4 installation and I am trying to add a modal popup when someone clicks on Add To Cart in product's page.

I edited the /app/design/frontend/mytheme/template/catalog/product/view.phtml file by adding

// Get the modal
var modal = document.getElementById('ordersAugust');

// Get the button that opens the modal
var btn = document.getElementById("btnOrdersAugust");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

between

if (this.validator.validate()) {
...
  }
}.bind(productAddToCartForm);

and

<div id="ordersAugust" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>HEADER</h2>
    </div>
    <div class="modal-body">
      <p>Thank you!</p>
    </div>
    <div class="modal-footer">
      <h3>Footer</h3>
    </div>
  </div>
</div>

just outside the script tag of

var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {

the javascript code is taken from http://www.w3schools.com/howto/howto_css_modals.asp

I have also edited the file /app/design/frontend/mytheme/template/catalog/product/view/addtocart.phtml by adding id="btnOrdersAugust" in

<button type="button" title="<?php echo $buttonTitle ?>" id="btnOrdersAugust" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
    <span>
        <span class="view-cart"><?php echo $buttonTitle ?></span>
    </span>
</button>

The javascript code is completely ignored and the product is added in cart (no javascript errors in console).

What I want is when clicking on Add To Cart, open a popup modal with info and when closing the modal to continue by adding the product to cart.

  • Of course, if there is another way by using jQuery (!? maybe) I would love to see the code. – kanenas Aug 3 '16 at 13:41
1

So the problem is in,

onclick="productAddToCartForm.submit(this)"

Better to do is to remove it and add:

<script>
    //Guarantee that $ is used in context of jQuery and not of Prototype library
    (function($){
        //Shorthand for document ready
        $(function(){
            //Other click handler are removed and added one custom
            $('#btnOrdersAugust').off().on('click',function(e){
                //Prevent default browser action = go where href is point or submit/reset action
                e.preventDefault();

                //Show modal box
                $('#ordersAugust').show();

            });
            $('#cartSubmit').off().on('click',function(e){
                //Prevent default browser action = go where href is point or submit/reset action
                e.preventDefault();

                //Hide modal box
                $('#ordersAugust').hide();

                //Submit action trigger
                productAddToCartForm.submit(this);

            });

            //Hide modal if clicked outside of window
            $('body').on('click', function (e) {
                if (!$(e.target).is('#ordersAugust') && $('#ordersAugust').has(e.target).length === 0) {
                    $('#ordersAugust').each(function () {
                        $(this).hide();
            //Submit action trigger
                productAddToCartForm.submit(this);
                    });
                }
            });
        })
    })(jQuery);
</script>

And html of popup:

<div id="ordersAugust" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span id="cartSubmit" class="close">×</span>
            <h2>HEADER</h2>
        </div>
        <div class="modal-body">
            <p>Thank you!</p>
        </div>
        <div class="modal-footer">
            <h3>Footer</h3>
        </div>
    </div>
</div>

To clarify: I added jQuery script to show/hide modal box and button inside a modal box to trigger default action. Need more info to help better in this question.

Edited: because I check one more time question and there is about closing modal trigger adding the product to cart.

  • Patryk, thank you for your answer. Do you mean to completely remove the block of productAddToCartForm.submit = function(button, url) { and use your script instead? – kanenas Aug 4 '16 at 8:22
  • Remove from button attribute onclick: productAddToCartForm.submit(this) Don't touch the block. It is used when close button is clicked – Patryk Padus Aug 4 '16 at 8:30
  • jQuery script add additional, under script block with productAddToCartForm.submit = function(button, url) { – Patryk Padus Aug 4 '16 at 8:35
  • Patryk, unfortunately I can't make it work :( – kanenas Aug 4 '16 at 9:01
  • I think the jQuery code is ignored for some reason (no javascript errors). The modal is not displayed and when the button is clicked the product is added to cart. – kanenas Aug 4 '16 at 9:39

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.