Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Need help making an imagemap hotspot act like a Paypal 'add to cart' button!!!

    I have a website in which all the pages are imagemaps. What I want to do is have a hotspot on each page act as though it's a paypal 'add to cart' button. Is this possible? Does anybody know how to convert the paypal code to work within the hotspot?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    The Paypal docs (either a downloadable pdf or their actual website) will have the javascript and/or html you need for the "Add to cart" button. I assume you have that.

    Then "in theory", since I can't see your actual code, all you should need to do is add an onclick event handler on the relevant <map> elements in your image map to run a function that executes the "Add to cart" code. This function would need a return false; at the end to stop the default <map> action of going to the url specified in it's href attribute.

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks for your reply. I only have limited html/css experience so I'm not familiar with onclick event handlers. But if it helps at all, here's the code for my hotspot:

    <area href="contact.htm" shape="rect" coords="332, 534, 366, 560">

    ...and here's the code from Paypal that I need to integrate into the hotspot:

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="DHMMZ7Y8DCBUU">
    <input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal" width="147" height="47">
    </form>

    Of course the last input tag would, I think, be omitted since it is an image which I don't want.

    Seems like such a simple/common thing to do but all the research I've done tells me otherwise...at least with simple html.

    Any help would be appriciated!

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    ok, it looks like that is a button to add the item with a prodId = "DHMMZ7Y8DCBUU" to a Paypal shopping cart. I'm not sure how the user is then returned to your page but that is another issue. Are you sure that is not actually a 'Buy now" button? but it doesn't really matter as the concept of how to do it is the same.

    Assuming that is the correct html, then I would try something like this where I create the form dynamically whenever a hot spot is clicked.

    I am assuming each hot spot will have a different prodId.

    In your html try an area tag like this

    Code:
    <area href="" onclick="add2cart('DHMMZ7Y8DCBUU'); return false;" shape="rect" coords="332, 534, 366, 560" />
    which will call a function called add2cart() and pass to it the hotspot's prodId.

    add2cart() then creates your paypal html form dynamically and submits it.

    I can't test this code and so hopefully there is no error/bug in it.
    Code:
    <script type="text/javascript">
            function add2cart(prodId){
                var oForm = document.createElement('form');
                oForm.action = "https://www.paypal.com/cgi-bin/webscr";
                oForm.method = 'post';
                var newInp1 = createInpElem('hidden',"cmd","_s-xclick");
                var newInp2 = createInpElem('hidden','hosted_button_id',prodId);
                oForm.appendChild(newInp1);
                oForm.appendChild(newInp2);
                oForm.submit();
            }
            function createInpElem(inpType,inpName,val){
                var oInp = document.createElement('input');
                oInp.type = inpType;
                oInp.name = inpName;
                oInp.value = val;
                return oInp;
            }
            </script>
    Put this javascript either in the <head> of your web page or an external javascript file if you have one.

    Edit:
    What I want to do is have a hotspot on each page act as though it's a paypal 'add to cart' button.
    I just typed the url in the paypal's image submit input into my browser and it's actually a "Buy now" button and not "add to cart".

    The above code should still work "in theory" as I can't test it. It might be appropriate to rename add2cart to buyNow or something similar.
    Last edited by bullant; 04-06-2011 at 02:44 AM.

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Yikes! You're so right. I had the 'Buy Now' code instead of the 'Add to Cart' code. Thanks for pointing that out. I added your script to the <head> section of my page and then went to Paypal and copied the right code. I then replaced the prodID value in your code with the new one:

    <area href="" onclick="add2cart('KU5G4QHG47K6S'); return false;" shape="rect" coords="332, 534, 366, 560">

    ...but unfortunately it didn't seem to work. Dang, I really had high hopes. Maybe I could have done something wrong but I don't think so. Here's my page if you care to see:

    http://www.jewellikeit.com/necklace_item010.htm

    If you would, could you take a look and see if it's something easy I can tweak to make work? Otherwise, thank you very much for your time and effort. I really appriciate it! :-)

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    I added your script to the <head> section of my page and then went to Paypal and copied the right code.
    but I see in your code html file that the function in your <head> is what I posted. It really needs to reflect the "right code" you copied, so I'm not surprised it currently doesn't work.

    If you post the now "right code", I can have a look at it for you and see what changes need to be made to my original function.

    btw - I really like the bg image on your site

    Also, can you post exactly what needs to be clicked on your web page for the onclick to fire? It's not obvious from the image map and I couldn't find it by moving my mouse around on your page.

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts
    What needs to be clicked on for the onclick to fire is the red "Buy" button to the right of the item image and directly under the price. That's the one that I added the code to:

    <area href="" onclick="add2cart('KU5G4QHG47K6S'); return false;" shape="rect" coords="332, 534, 366, 560">

    And here's the new code that I copied from Paypal:

    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="KU5G4QHG47K6S">
    <input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/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.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Code:
    <area href="" onclick="add2cart('KU5G4QHG47K6S'); return false;" shape="rect" coords="332, 534, 366, 560">
    I don't think the onclick is on the correct <area> element (hotspot).

    The above line of code is from your web page by 'view source" in my browser.

    You can see there is no value for href, but when I hover over the "Buy" button, in the status bar of my browser I see the target url for the button as ........./necklace_item010.html. If the onclick was on the 'buy' button's hotspot I should not see a url in the browser status bar when I hover on the 'buy' button.

    As a test, you can comment out everything in the add2cart() function and just have a single line of alert('Buy button clicked'); in the function. That means that alert message will pop up whenever the hotspot attached to the function is clicked. When you have the onclick on the correct hotspot, remove the alert statement and uncomment the rest of the code.
    Last edited by bullant; 04-06-2011 at 04:59 AM.

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Just had a closer look at your html

    Code:
              
    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">         
        </map>     
    <img border="0" src="images/necklace_item010.jpg" usemap="#FPMap0" width="740" height="820">
    </td>   
    </tr> 
    </table>  
    </body>  
    </html>
    The <form> element should not be there and so it can be removed.

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    oh dear, another error with your html
    Code:
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="100%">
      <tr>
        <td width="100%" height="100%" align="center">
        <p align="center"><map name="FPMap0">
       <map name="FPMap0">
        <area href="index.htm" shape="rect" coords="7, 763, 49, 780">
        <area href="necklace_item011.htm" shape="circle" coords="622, 324, 117">
    You don't have an opening <map> tag.

    Insert the red tag.

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #11
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I'm pretty sure that I have the right <area> element. As a test I took the href="" competely out, but then nothing happens when you mouse-over the buy button. I lose the link completely.

    I noticed also that when you mouse-over the buy button on the page, that my home page 'jewellikeit.com' appears in the status bar, but when you click on it nothing happens...wierd.

  • #12
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Ooops, I left that <form> tag in there when I had Paypal's code pasted in there. Forgot to take that one out. Thx.

    Btw, I do have the <map> tag in my code. It was attached to the end of the line right above the new one you wrote ;-)

    Any other ideas???

  • #13
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Did you add the opening <map>?

    If not, your image map won't work even if the onclick is on the correct <area>

    Here is a demo of how an image map can work using onclicks. I have also uploaded the test image I used (regionMap.jpg). It's just a 200px x 200px image with 4 coloured quadrants red, blue, purple, green

    When you click on a quadrant, a message pops up telling you which coloured quadrant you clicked.

    In this demo, the showAreaClicked(val) simulates the add2cart() function from earlier posts.

    If you like, copy and paste this demo and download the attached image and have a play with it to get a feel for how your image map will work. Once you have your 'Buy' hotspot working then we can play with the paypal code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                function showAreaClicked(val){
                    alert('Area clicked is '+val);
                }
            </script>
        </head>
        <body>
            <div>
                <img src="regionMap.jpg" alt="" usemap="#myMap" />
            </div>
            <map name="myMap" id="myMap">
                <area onclick="showAreaClicked('red');return false;" shape="rect" coords="0,0,100,100" href="" alt="" />
                <area onclick="showAreaClicked('blue');return false;" shape="rect" coords="100,0,200,100" href="" alt="" />
                <area onclick="showAreaClicked('purple');return false;" shape="rect" coords="0,100,100,200" href="" alt="" />
                <area onclick="showAreaClicked('green');return false;" shape="rect" coords="100,100,200,200" href="" alt="" />
            </map>
        </body>
    </html>
    Attached Thumbnails Attached Thumbnails Need help making an imagemap hotspot act like a Paypal 'add to cart' button!!!-regionmap.jpg  

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #14
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    I've done a bit of experimenting and it looks like you can't submit dynamically generated forms, well at least to paypal. But that's not a deal breaker.

    What I have done in this demo, is insert your paypal form into the actual html and when I click the red quadrant, simulating your 'buy' button, the paypal form, now in the html, is successfully submitted to the paypal processing page in my browser.

    So now, all you have to do is get your 'buy' hotspot working, using this demo as a guide, and then make sure you have the correct code in the paypal html form for the product.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                function showAreaClicked(){
                   document.forms[0].submit();
                }
            </script>
        </head>
        <body>
            <div>
                <img src="regionMap.jpg" alt="" usemap="#myMap" />
            </div>
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_s-xclick" />
                <input type="hidden" name="hosted_button_id" value="DHMMZ7Y8DCBUU" />
            </form>
            <map name="myMap" id="myMap">
                <area onclick="showAreaClicked();return false;" shape="rect" coords="0,0,100,100" href="" alt="" />
                <area shape="rect" coords="100,0,200,100" href="" alt="" />
                <area shape="rect" coords="0,100,100,200" href="" alt="" />
                <area shape="rect" coords="100,100,200,200" href="" alt="" />
            </map>
        </body>
    </html>
    Last edited by bullant; 04-06-2011 at 07:22 AM.

  • Users who have thanked bullant for this post:

    drlwyk (04-06-2011)

  • #15
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Alright, thanks mucho for your help! I'll try to play around with it and see if I can get it to work. Very cool...at least now I know that it's possible! Some people said it just couldn't be done.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •