ShopSite Forums

by **SheriC** » Wed Sep 22, 2010 6:17 am

Hi,

Is there a way to persist the data entered into the custom checkout fields?

With some of the custom checkout fields set to required and the user doesn't fill them in all of the required data, they get an error message (telling them the missing data) and all of the data in the custom checkout fields is lost. The user is required to type in all of the custom checkout field data over again. I am collecting almost 30 custom fields.

I tried using cookies with JavaScript to persist the data. In order to do so you need to add code to the shopping cart's code.

-- add the onLoad event to the BODY tag

<BODY onload="cookieForms('open', 'yourform')" onunload=>

-- add the save_field(this.fieldname) to the onSubmit submit handler

If there is another way to create custom cookies or persist the data please let me know. Last year I spoke to a third party consultant and he checked with the ShopSite developers and there was no way to do this. Wanted to check to see if any changes have been made to the newer releases to provide this functionality.

Thank you,
Sheri

by **BFChris** » Wed Sep 22, 2010 6:31 am

You should have access to the <body> tag to add the "onload" if you modify the cart template.

The OnSubmit event handler may be a bit trickier, as it is sort of "built-in" to a Shopsite tag. However, you could probably cheat it by attaching the event to the action beforehand using Javascript, perhaps some JQuery.

by **Jim** » Wed Sep 22, 2010 7:22 am

If I understand what you are trying to do correctly, you should be able to add code for the OnSubmit by putting it in the Commerce Setup > Order System > Checkout > "Javascript added at start of built-in CheckIt function:" field.

by **SheriC** » Wed Sep 22, 2010 8:18 am

Thanks BFChris and Jim,

I forgot, I did add to the <body onLoad "cookieForms('open', 'billing')" onUnload="cookieForms('save', 'billing')"> in my shopping cart custom template.

What I was missing is how and where to add the onsubmit to the javascript checkit.

What I need to add is the save_field(this.field01, this.field02, ...this.field28) to the onSubmit handler.

I wasn't aware that you can override whatever the ShopSite has defined for the FORM tag? If I can, I'm not sure what value to use for the ACTION.

<FORM METHOD="POST" ACTION="yourfile.php" onSubmit="return save_field(this.field01, this.field02, n)">

Thanks,
Sheri

by **SheriC** » Wed Sep 22, 2010 9:15 am

First:
At the top of my custom shopping cart template in the [-- SC_JAVASCRIPT extras --] section I added the two functions save_field(form.field, form.field...) and retrieve_field(form.field, form.field...)

Second:
Then added this code to my custom shopping cart template in the [-- INCLUDE Modern_sc_cart.css PROCESS --] section

<body onLoad= retrieve_field(document.billing.field01,document.billing.field02, document.billing.field03,document.billing.field04,document.billing.field05,document.billing.field06,document.billing.field07,document.billing.field08,document.billing.field09,document.billing.field10,document.billing.field11,document.billing.field12,document.billing.field13,document.billing.field14,document.billing.field15,document.billing.field17,document.billing.field18,,document.billing.field20,document.billing.field21,document.billing.field22,document.billing.field23,document.billing.field24,document.billing.field25,document.billing.field26,document.billing.field27,document.billing.field28);">

Third:

This is where I am stuck:

The <FORM> tag and is HTML, I need to add my javascript function to the onSubmit() method called by the FORM. I am guessing that I have been using "billing" as the from that I am using.

So my question is how to I add a method to the onSubmit?

Would I add something like this to the Javascript added at start of built-in CheckIt function:

billing.onSubmit="return save_field(this.field01, this.field02,this.field03,this.field04,this.field05,this.field06,this.field07,this.field08,this.field09,this.field10,this.field11,this.field12,this.field13,this.field14,this.field15,this.field17,this.field18,this.field20,this.field21,this.field22,this.field23,this.field24,this.field25,this.field26,this.field27,this.field28,)";

If the form already has an onSubmit() function called, will this overwrite it?

by **Jim** » Wed Sep 22, 2010 12:21 pm

Have you tried adding the code to the field I suggested?

Commerce Setup > Order System > Checkout > "Javascript added at start of built-in CheckIt function:" field.

The purpose of that field is to allow the merchant to add functionality to the Checkit function that does the submit.

by **SheriC** » Wed Sep 22, 2010 12:26 pm

Yes I did. It does not work. But I'm not sure how the code needs to be entered.

When I added the entire piece of javascript code that says it needs to be added to the head tag it acts like a document.write and you see all of the built in fields values at the top of the checkout form. Or if you put part of it, the desired results are not achieved. I've been trying different combinations of this all morning with no luck.

by **SheriC** » Wed Sep 22, 2010 1:43 pm

If you know how to make this work, could you please provide a simple case of what to put where in ShopSite for two Custom Checkout Form Fields to be saved to cookies and retrieved. I've tried various methods and have not had any luck.

You would think that you would be able to do this from within a custom template for the shopping cart and/or then within the checkout.
The trick is figuring out what goes where.

Thank you.

by **SheriC** » Thu Sep 23, 2010 5:31 am

My question boils down to:

Is there a way to change the Checkout page via a template or other method?

For the checkout page / billing form is there a way to add a call to a javascript function to the system generated HTML:

1. The <BODY> tag
2. The <FORM> tag

If so, how?

Here are the gory details of what I've tried:

Looking at the source of *billing.cgi?*
---------------------------------------

1) putting javascript in Checkit function on checkout page inserts the javascript code as desired

2) Editing the template 
These changes update the Shopping Cart Page and does not impact the Checkout (Billing.cgi) page
It merges the existing body tag with the one I created on the Shopping Cart page.

[-- INCLUDE Modern_sc_cart.css PROCESS --]
</head>

<body onLoad="cookieForms('open', 'billing')" onUnLoad="cookieForms('save', 'billing')">

<div id="header">

Body tag generated within ShopSite: <body onunload="button_clicked=0;" ><script type="text/javascript">

---> If you insert the BODY tag by Adding it to Checkout HTML adds it the second copy of the body
Problem is, HTML doesn't allow you to have two body tags. Not sure which one it uses.

I added: <body onLoad="cookieForms('open', 'billing')" onUnLoad="cookieForms('save', 'billing')">

Snippet of source code generated by ShopSite (to demonstrate where it puts the two <body> tags

Editing the modern-cart.sst to add the body onload and unload shows up in the code - but unfortunately there are two body tags in the code, which isn't allowed

</head>

<body onunload="button_clicked=0;" ><script type="text/javascript"> // body tag added by ShopSite
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '18665780-1']);
_gaq.push(['_setDomainName', 'nope']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
</script>
<script type="text/javascript">
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
function __utmLinker(param) {
return(_gaq.push(['_link',param]))
}
function __utmLinkPost(param) {
return(_gaq.push(['_linkByPost',param]));
}
</script>

<div id="header">
<body onLoad="cookieForms('open', 'billing')" onUnLoad="cookieForms('save', 'billing')"> // body tag added by me in HTML

3: Form auto generated by ShopSite:
<form name="billing" class="billing" action="thankyou.cgi" method=post onSubmit="_gaq.push(['_linkByPost', this]);" >

Open Questions
1. ??? How to influence the onSubmit to save form cookies
Need it to call something like this: onSubmit ="cookieForms('save', 'billing'), gaq.push(['_linkByPost', this]);"

2. How to get the BODY to call: retrieve and save cookies

<body onLoad="cookieForms('open', 'billing')" onUnLoad="cookieForms('save', 'billing')">

Tried workaround to call save_field() with onChange() event. This did not work. Still need to figure out how to retrieving cookies for the form.

<input type="textbox" onchange="save_field(this);" name="field01" id="D1FirstName" size="30" />

If anyone has been able to get custom cookies to save and retrieve cookies on the checkout page, I'd certainly appreciate how you did it.

Thank in advance for your time.

by **Jim** » Thu Sep 23, 2010 7:37 am

The shopping cart template has multiple sections, one for shopping cart screen, billing screen, confirmation screen, thankyou screen, email receipt, global cross sell, etc. If you only added your code in the [-- Define shoppingcart --] section then it will not be used on the other screens. You need to add it to each section (in this case probably just [-- DEFINE Shipping --]) where the code is needed. Is that where you added it?

by **SheriC** » Thu Sep 23, 2010 8:26 am

Thank you, I did not know that the Shipping section was the Checkout form.
I added the <BODY> tag as I needed and now it is showing up.

Still need to determine how to do the <FORM> onsubmit.

Any ideas on how I can work around that?

I forgot to mention, that although the code is in the BODY tab, it isn't working yet. Still need to add the code to the onSubmit(), and I don't see how or where to do that.

thanks for your help.

ShopSite Forums

How to: Persist Custom Checkout Fields???

How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Re: How to: Persist Custom Checkout Fields???

Who is online