Community Forums 

Main Content

Help with nocart feature and custom popup

    Jul 16 2010 07:05:40

    #1

    Gil Sery

    Join date : 2010-04-27      Posts : 141

    I am using the nocart feature on my site, but I want to create a custom popup, whose formatting I can control to tell users when they click on my "Buy" button (aka my "add to cart" button) that their item has been added to their cart and that if they want to check out, to click the "View Cart" button at the top of the page.

    I found some script to help me do that, but the popup loads the wrong page -- it loads the page in the return field (prices.html), not the page I want it to load (popup.html)

    Here is the code I'm using in the <head> of the "add to cart" page:

    <script type="text/javascript">
    var win = null;
    function NewWindow(formName,w,h) {
    var form = document.forms[formName];
    var LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    var TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    var settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars,resizable'
    win = window.open('',form.target,settings);
    setTimeout('document.forms["'+formName+'"].submit()',300); // give the window time to open
    return false; // cancel link
    }
    </script>

    and here is the code I'm using in the body:

    <FORM name="purchaseForm" target="purchaseWin" action="http://ww5.aitsafe.com/cf/add.cfm"; method="post">
    <INPUT type="hidden" name="userid" value="71226549">
    <INPUT type="hidden" name="product" value="Tungsten Bucking Bar #01" />
    <INPUT type="hidden" name="price" value="69.95" />
    <INPUT type="hidden" name="scode" value="ETBB01" />
    <INPUT type="hidden" name="nocart" />
    <INPUT type="hidden" name="units" value="1" />
    <INPUT type="hidden" name="return" value="http://www.tungstenheavypowder.com/store/prices.html"; />
    <noscript>
    <INPUT type="image" name="submit" src="http://www.tungstenbuckingbars.com/buy_button.jpg"; alt="Buy this tungsten

    bucking bar now" />
    </noscript>
    </form>
    <script>
    document.write('<a href="#" onclick="return NewWindow(\'purchaseForm\',358,144)"><img

    src="http://www.tungstenbuckingbars.com/buy_button.jpg"; alt="Buy" border="0" /></a>');
    </script>

    How do I change the code so that it opens the popup.html file in the popup window instead of the current "prices.html" file (which is also the URL of the return field)?

    Thanks so much for any help I can get with this.



    Jul 16 2010 10:32:53

    #2

    GT

    Join date : 2008-09-18      Posts : 3207

    Instead of that, why not use this:
    http://www.tne.co.uk/mals/send-to-cart.html

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Jul 16 2010 16:32:30

    #3

    Gil Sery

    Join date : 2010-04-27      Posts : 141

    GT said Instead of that, why not use this:
    http://www.tne.co.uk/mals/send-to-cart.html


    Tried that originally, but my boss almost had a heart attack when I clicked on the "Buy" button, and a javascript alert with a yellow exclamation point popped up. He told me to replace it with a green checkmark and green text stating that the item has been added to the cart.

    I do have a version of that here:

    http://www.tungstenheavypowder.com/store/prices.html

    but the darn popup won't stay open long enough to be read. If you could help me with that problem, I'd appreciate it. It's written in javascript and CSS.

    Thanks.



    Jul 17 2010 16:21:02

    #4

    GT

    Join date : 2008-09-18      Posts : 3207

    Try changing this line:
    setTimeout('document.forms["'+formName+'"].submit()',300); // give the window time to open

    To:
    setTimeout('document.forms["'+formName+'"].submit()',3000); // give the window time to open

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Jul 19 2010 19:35:10

    #5

    Gil Sery

    Join date : 2010-04-27      Posts : 141

    GT said Try changing this line:
    setTimeout('document.forms["'+formName+'"].submit()',300); // give the window time to open

    To:
    setTimeout('document.forms["'+formName+'"].submit()',3000); // give the window time to open


    Thanks but the version with the green checkmark that I mentioned above has different code than the one that I initally posted.

    The code for that version (the one where I can't get the window to stay open long enough) is this:

    In the head:

    <script type="text/javascript">

    function ShowAlert()
    {
    document.getElementById('alert').style.display = 'block';
    }

    function HideAlert()
    {
    document.getElementById('alert').style.display = 'none';
    }

    </script>

    <style type="text/css">

    #alert
    {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 358px;
    height: 144px;
    border: 1px solid #000000;
    padding: 0px 7px 0px 7px;
    background: #ECE9D8;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: none
    }
    </style>

    In the <body>
    <FORM action="http://ww5.aitsafe.com/cf/add.cfm"; method="post">
    <INPUT type="hidden" name="userid" value="71226549">
    <INPUT type="hidden" name="product" value="Tungsten Bucking Bar #01">
    <INPUT type="hidden" name="price" value="69.95">
    <INPUT type="hidden" name="scode" value="ETBB01">
    <INPUT type="hidden" name="nocart">
    <INPUT type="hidden" name="units" value="1">
    <INPUT type="hidden" name="return" value="http://www.tungstenheavypowder.com/store/prices.html">;
    <INPUT type="image" name="submit" value="Open the pop up window" target="_blank" src="http://www.tungstenbuckingbars.com/buy_button.jpg"; alt="Buy" onclick="javascript:ShowAlert()(this.href,this.target,'358','144')">
    </FORM>

    How do I modify this code to the the popup, which activates via the onclick, to stay open long enough to be read?

    Thanks.



    Jul 20 2010 07:36:50

    #6

    GT

    Join date : 2008-09-18      Posts : 3207

    Try adding:

    setTimeout("ShowAlert.close();", 5000);

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Jul 20 2010 17:06:19

    #7

    Gil Sery

    Join date : 2010-04-27      Posts : 141

    GT said Try adding:

    setTimeout("ShowAlert.close();", 5000);


    Thanks, but where do I add that? Do I add it to the head script or do I add it to the body code?



    Jul 20 2010 17:50:42

    #8

    Geoff

    Join date : 2008-09-18      Posts : 415

    As far as my testing goes, it would seem that you can delay a form submission by attaching an event handler to a standard link (It does not appear to work with input type submit or input type image). Try it here -

    http://www.tucker24.fsnet.co.uk/tungstenheavypowder.html

    (3000 is a 3 second delay)

    I personally don't think you need the "close" link in your message div as the page reloads after the delay - which of course resets the div to hidden.



    Jul 20 2010 19:17:00

    #9

    Gil Sery

    Join date : 2010-04-27      Posts : 141

    Geoff said As far as my testing goes, it would seem that you can delay a form submission by attaching an event handler to a standard link (It does not appear to work with input type submit or input type image). Try it here -

    http://www.tucker24.fsnet.co.uk/tungstenheavypowder.html

    (3000 is a 3 second delay)

    I personally don't think you need the "close" link in your message div as the page reloads after the delay - which of course resets the div to hidden.


    THANK YOU SO MUCH, GEOFF!!!

    I have been trying to find a way to solve problem this since last Friday!

    My only issue now is that, because I will be using this 32 times on 1 page for 32 different products (although, only one popup will appear at a time), I need a way to keep the alert centered on the screen when the user scrolls down the page.

    At the moment, if the user chooses ETBB26, the popup still displays, but you need to scroll up the page to see it.

    Is there a way to keep the popup centered even when the user scrolls down?

    Thanks again so very much!



    Jul 20 2010 19:39:09

    #10

    Geoff

    Join date : 2008-09-18      Posts : 415

    In your style declaration for #alert, use position:fixed

    Also increment the form name and event handler javascript for each form on the page e.g. F1, F2, ... F32



       1   |   2      »