SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face I need to populate a form based on automatically detected geographic variables..

    Hey guys! Been a lurker here for quite some time, as I'm good at learning without asking questions.

    Today though, I am stumped. I know it's possible, and probably with just a few lines of code, but I just can't quite figure this one out.

    Here's what I need to do..

    I have three javascript variables that I need to populate my PayPal forms with, to make their shopping experience a little easier. While not the best solution, and hopefully not a permanent one, I have to settle for this script because I can't even begin to comprehend what a custom, field-updating country drop-down menu with exchange rate lookup would be like to code, and I just don't have that kind of brain power yet!

    In the mean time, I have these three variables.. which I get via these scripts (the second script is just an example of how to use the variables in their own right)..

    Code:
    <script type="text/javascript" src="http://gd.geobytes.com/gd?&variables=GeobytesCountry,GeobytesIso2,GeobytesCurrencyCode"></script>
    <script type="text/javascript">document.write(sGeobytesCountry+","+sGeobytesIso2+","+sGeobytesCurrencyCode);</script>
    Okay, so what I'd like to do is populate the three values marked with a "__" here..

    Code:
    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="pp">
    	<input type="image" src="images/atc.png" name="submit" alt="">
    	<input type="hidden" name="add" value="1">
    	<input type="hidden" name="cmd" value="_cart">
    	<input type="hidden" name="business" value="john@doe.com">
    	<input type="hidden" name="item_name" value="Product">
    	<input type="hidden" name="amount" value="__">
    	<input type="hidden" name="no_shipping" value="2">
    	<input type="hidden" name="currency_code" value="__">
    	<input type="hidden" name="lc" value="__">
    	<input type="hidden" name="bn" value="PP-ShopCartBF">
    </form>
    The last two variables are pretty straightforward, where the "currency_code" value refers to the (sGeobytesCurrencyCode) variable, and the "lc" value refers to the (sGeobytesIso2) variable.

    The "amount" value is where it unfortunately gets ugly though. I need it to be derived from the (sGeobytesCurrencyCode) variable and follow some conditioning, like:

    if (sGeobytesCurrencyCode) is USD / then "amount" value is $37
    else
    if (sGeobytesCurrencyCode) is CAD / then "amount" value is $36
    else
    if (sGeobytesCurrencyCode) is EUR / then "amount" value is $24
    else
    if (sGeobytesCurrencyCode) is GBP / then "amount" value is $19
    else
    if (sGeobytesCurrencyCode) is AUD / then "amount" value is $40
    else
    if (sGeobytesCurrencyCode) is XXX / then "amount" value is $37 USD

    ..all remaining currencies are converted to USD upon checkout.. I just need that last rule as a catch-all. PayPal fortunately ignores any currency code it does not support or recognize.

    Also, now that I think about it, it would be nice to have each currency code dynamically load the appropriate image -- to show as the add-to-cart button. I was thinking something like:

    Code:
    <input type="image" src="images/atc__.png" name="submit" alt="">
    
    where "__" refers to the (sGeobytesCurrencyCode) variable.
    ----------------------------------

    So what kind of script could I use to perform this kind of action with? I hope it's a simple one! Lemme know if there's still not enough information to go off of though, kay.

    ----------------------------------

    Well thank you very much for reading this lengthy post, and I look forward to learning a thing or two from you guys today! Hopefully someday I can learn enough to be in your position, and return the favor to some other newbie.

    Sincerely,
    William
    Last edited by zoinbergs; Mar 4, 2008 at 13:48.
    There once was a limerick sig,
    that really was not very big.
    It was going quite fine,
    till it reached the fourth line.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    A function with the values stored in an object array sounds like a viable solution.

    Code javascript:
    function amount(countryCode) {
        var price = {
            'USD': 37,
            'CAD': 36,
            ...
            'AUD': 40
        };
        // if no countryCode has been defined, return as a default the USD value
        return price[countryCode] || price['USD'];
    }

    As far as the image goes, use atcUSD.png as the default image, and place an identifier on it, perhaps "currencyImage" and update that with

    Code javascript:
    document.getElementById('currencyImage').src = 'atc' + sGeobytesCurrencyCode + '.png';
    Last edited by paul_wilkins; Mar 4, 2008 at 15:43.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh you are awesome pmw57!

    Thanks to your help regarding the image, I think I figured out how to update a few other values as well.

    Could you let me know if this will work?

    Code HTML4Strict:
    <img alt="" id="curimg" src="images/cart/cu/USD.png">
    <input type="hidden" name="currency_code" id="cuco" value="USD">
    <input type="hidden" name="lc" id="iso2" value="US">
    Code JavaScript:
    document.getElementById('curimg').src='images/cart/cu/'+sGeobytesCurrencyCode+'.png';
    document.getElementById('cuco').value=sGeobytesCurrencyCode;
    document.getElementById('iso2').value=sGeobytesIso2;

    (The image I decided to keep separate from the add-to-cart button.)


    Now I admit, I'm still having trouble wrapping my mind around the pricing though. The array looks beautiful! Sounds to me like it could work. I just haven't the slightest idea on how to implement it. Where do I refer to this function? Where does the 'sGeobytesCurrencyCode' variable go?

    Also, do you think it's possible to link the dynamically loaded image to the pricing array? That way only images relating to the currencies I support will be loaded, saving me the trouble of building an image collection for every currency on earth! Maybe an if/else argument?

    Thanks so much for the help my good sir!
    There once was a limerick sig,
    that really was not very big.
    It was going quite fine,
    till it reached the fourth line.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zoinbergs View Post
    Oh you are awesome pmw57!

    Thanks to your help regarding the image, I think I figured out how to update a few other values as well.

    Could you let me know if this will work?

    Code HTML4Strict:
    <img alt="" id="curimg" src="images/cart/cu/USD.png">
    <input type="hidden" name="currency_code" id="cuco" value="USD">
    <input type="hidden" name="lc" id="iso2" value="US">
    Code JavaScript:
    document.getElementById('curimg').src='images/cart/cu/'+sGeobytesCurrencyCode+'.png';
    document.getElementById('cuco').value=sGeobytesCurrencyCode;
    document.getElementById('iso2').value=sGeobytesIso2;
    I see no major issues with that. We are beginning to acquire quite a few identifiers, but techniques for dealing with that can be covered at some later time.

    Quote Originally Posted by zoinbergs View Post
    Now I admit, I'm still having trouble wrapping my mind around the pricing though. The array looks beautiful! Sounds to me like it could work. I just haven't the slightest idea on how to implement it.
    Thanks, instead of being an array, it is an object, so price.USD and price.CAD are ways of accessing it. It's also possible to access them as price['USD'] and price['CAD'] which is more useful to us in our current situation.

    Quote Originally Posted by zoinbergs View Post
    Where do I refer to this function? Where does the 'sGeobytesCurrencyCode' variable go?
    The function would be called with

    Code javascript:
    amount(sGeobytesCurrencyCode);

    So when you have access to the form, you could update the amount field with

    Code javascript:
    myForm.amount = amount(sGeobytesCurrencyCode);

    Quote Originally Posted by zoinbergs View Post
    Also, do you think it's possible to link the dynamically loaded image to the pricing array? That way only images relating to the currencies I support will be loaded, saving me the trouble of building an image collection for every currency on earth! Maybe an if/else argument?
    I wouldn't add it to the amount function because that would be stretching things too far, so instead we can have the amount function return an object that contains both the value and the type of currancy.

    There are two ways to do that. One way is to return an object that has a currency property and an amount property. The trouble with this is that it will require special handling to retrieve the amount.

    Another option is to return an object with a currency property, but which has a default value that contains the amount you require. I'll use that second option here.

    When we set the currency we should give it a default value of 'USD', then change it only if an entry exists for that currency type.

    The amount can be stored so that it's returned as a default value. This is done by creating a valueOf function that returns the default value.

    Code javascript:
    function amount(countryCode) {
        var price = {
            'USD': 37,
            'CAD': 36,
            'AUD': 40
        };
        var value = {};
    	value.currency = 'USD';
    	value.currency = (price[countryCode]) ? countryCode : value.currency;
    	value.valueOf = function() {
    		return price[value.currency];
    	};
    	return value;
    }

    So this lets us obtain the amount just as before, but also with an attached currency property.

    Now you can make use of the amount function fro somewhere else

    Code javascript:
    var value = amount(sGeobytesCurrencyCode);
    myForm.amount = value;
    document.getElementById('curimg').src='images/cart/cu/'+value.currency+'.png';
    ...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aww, thank you so much for the help Paul!

    It took me a second to understand that inserting 'sGeobytesCurrencyCode' into the function changes how it is computed.. but a quick W3Schools tutorial or two did the trick! It all totally, completely makes sense now. Man it feels good to successfully code!

    So your script works perfectly, and I owe you a heap of gratitude. This is one of my first hand-written scripts too, so what you've done is really graduate my learning curve to a bearable level! I finally know how functions and variables work, and that valueOf term will be quite handy in the future as well, I'm sure.

    Say though, you wouldn't be able to help me out with just one more thing, would you? I'd be forever in your debt for this one!

    You see, I'm trying to finish this venture off with a drop down country menu -- kinda like what I was talking about earlier. This one can be quite simple however: just something to let customers change the automatically detected (default) variables/values in case they want to.

    Here's what I got so far, including a blueprint script I think I can mold:


    Code HTML4Strict:
    <script type="text/javascript">function dropdown(country) { var number = country.selectedIndex; var value = country.options[number].value; if(value!=""){ location.href = value; } }</script>
     
    <select onchange="dropdown(this);">
    <option value="" selected="selected"><script type="text/javascript">document.write(sGeobytesCountry);</script></option>
    <option value="AR">Argentina</option>
    <option value="AU">Australia</option>
    ...
    <option value="VE">Venezuela</option>
    What I can't figure out how to do though, is refer to a script instead of the 'location.href' term. In this script I think I need redefine the three variables we mentioned earlier.

    Do you know how I can set up a modification like that? I believe some sort of manually created list would need to be used, right? Something like:

    if value = AR , then sGeobytesIso2:AR , sGeobytesCountry:Argentina , sGeobytesCurrencyCode:USD
    if value = AU , then sGeobytesIso2:AU , sGeobytesCountry:Australia , sGeobytesCurrencyCode:AUD

    ..and so forth.

    I hope this all makes sense. While quite easy to dream about, sometimes putting things into words other people can understand can be quite a task! Please let me know if there's any more information I should provide.

    If you're up to the challenge (probably not a hard one either, I bet!) I could sure use the help.

    Thank you!

    In the mean time, I'll be over in W3Schools taking some more tutorials. I wonder if learning a new computer language is the equivalent of learning a new spoken language..
    There once was a limerick sig,
    that really was not very big.
    It was going quite fine,
    till it reached the fourth line.

  6. #6
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh oh.. I just realized something.

    If I were to change those three variables, wouldn't the entire page have to reload in order to update the document.getElementById().value modifications?

    Hmm.. maybe this can't work while retaining the definition "simple."
    There once was a limerick sig,
    that really was not very big.
    It was going quite fine,
    till it reached the fourth line.


Bookmarks

Posting Permissions

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