minicart js - add to cart opening on new tab

1.8k views Asked by At

I am trying to add minicart js to the website I am building but I appear to be having some issue.

With reference to this question, the accepted answer links a demo which opens a mini cart GUI when the add to cart button is pressed.

However, when I inspect element and copy the exact code used in the demo into my editor and run the page, when I press add to cart, paypal opens on another page, rather than displaying the mini cart.

I have been trying different versions to see if it mattered (3.0.6 is the latest) but having the same issue.

I would just like the mini cart to display on my page.

EDIT

I've found another post which said to remove the code protection which apparently worked for another user but unfortunately did not work for me, I'm at a loss as to why the minicart window won't display.

This is the code I am using which works for the demo but not for my page:

<html>
<body>

<form target="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" >
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="test Add to Cart">
    <input type="hidden" name="amount" value="12.00">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="return" value="https://www.paypaltech.com/vimal/test.php">
    <input type="hidden" name="add" value="1">
    <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
    <input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.3/minicart.min.js"></script>
<script>
    paypal.minicart.render();
</script>

</body>
</html>
1

There are 1 answers

0
user2757842 On

I finally got it working, instead of using the link provided in the documentation, I downloaded the source code instead and included the link to the minicart.js file which i put into my project structure.

Everything worked after that :)

Final code:

<html>
<body>

    <form target="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_cart">
        <input type="hidden" name="business" value="[email protected]">
        <input type="hidden" name="lc" value="US">
        <input type="hidden" name="item_name" value="test Add to Cart">
        <input type="hidden" name="amount" value="12.00">
        <input type="hidden" name="currency_code" value="EUR">
        <input type="hidden" name="return" value="https://www.paypaltech.com/vimal/test.php">
        <input type="hidden" name="add" value="1">
        <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
        <input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

    <script src="minicart.js"></script>
    <script>
        paypal.minicart.render();   
    </script>
</body>
</html>