I’m in the process of trying to integrate Mals’ e-commerce cart with my Freeway Pro5 webstore.
I’m currently using an E-Buy Form [into which a Menu/List (E-product Variant Action) has been inserted].
The products that we are selling are available in various sizes and we need to ensure that the customer selects a size [from the Menu/List (E-product Variant Action) dropdown selections] prior to the order going to Mal’s cart.
I have attempted to use Freeway’s Validate and Validate Extras Actions, but get a recurring JavaScript error. Freeway’s Support has indicated that the Validate and Validate Extras Actions won’t work with the E-Buy Form. They currently do not have a work around.
Using Crowbar, I have tried to get some of the validation forms posted on Web design Sheffield: The Net Effect for web design that works! to work. However, since all of the code needs to be modified to suit my requirements and I have little, (i.e., no) experience with code, I haven’t been able to get any of these forms to work. I only need the customer to choose a size with each article Ordered.
Does anyone have any suggestions on how I can validate an Order before it goes to the cart?
You could try to hand-roll some validations with JavaScript, but that’s just a band-aid on the problem. Have you tested what happens in the Mal’s cart when the order arrives without a size? Does it throw an error there?
You could try to hand-roll some validations with JavaScript, but that’s just a band-aid on the problem. Have you tested what happens in the Mal’s cart when the order arrives without a size? Does it throw an error there?
Walter
If the person doesn’t select a size, the cart will show the product without the size. I can add some text after the product description to indicate that a size has not been selected such as “PLEASE SELECT A SIZE”, but they can still put the Order through without doing so. Given previous experience this will happen quite often, which is why I want to force (Validate) the selection, before it goes to the cart if possible.
Try this. Add this block of code to the Page / HTML Markup (Before /
HEAD) section of your order page:
<script type="text/javascript">
function checkQuantityPickers(){
var selects = document.getElementsByTagName('select');
for(i = 0; i < var selects.length; i++){
if(selects[i]['class'].indexOf('quantity') > -1){
if( ! selects[i].options[selects[i].options.selectedIndex].value){
alert('Please choose a size!');
return false;
}
}
}
return true;
}
</script>
Now add a classname to each of your quantity pickers. Click once on
the picker, then choose Item / Extended from the main menu. Click New,
then enter ‘class’ in the Name field and ‘quantity’ in the Value
field. (Both without the quotes). Okay that dialog.
In the Page / Form Setup dialog, click the Extended form tab, and add
this pair: ‘onsubmit’ for the Name and ‘return checkQuantityPickers()’
for the Value. (Again, without the quotes.)
This should pick out all of the quantity pickers (the ones you have
tagged with that class) and if any of them are without any value, you
should get an alert and the form submission should stop.
Walter
On Jun 16, 2010, at 3:19 PM, Roy Gardiner wrote:
On 16 Jun 2010, 5:20 pm, waltd wrote:
You could try to hand-roll some validations with JavaScript, but
that’s just a band-aid on the problem. Have you tested what happens
in the Mal’s cart when the order arrives without a size? Does it
throw an error there?
Walter
If the person doesn’t select a size, the cart will show the product
without the size. I can add some text after the product description
to indicate that a size has not been selected such as “PLEASE SELECT
A SIZE”, but they can still put the Order through without doing so.
Given previous experience this will happen quite often, which is why
I want to force (Validate) the selection, before it goes to the cart
if possible.
That’s because your default field has a value, so it doesn’t trigger
the alarm. You need to change the value to nothing. Leave the label
the same as you have it, but make sure the value is set to nothing at
all.
Walter
On Jun 16, 2010, at 5:40 PM, Roy Gardiner wrote:
Hi Walt,
Thanks for your efforts, but I’m having no luck when I add your code
to the Page / HYML Markup (Before / Head) section.
The Value in the default Choices or Initially Selected Choices (i.e., “- Click on your shoe size -”) are already empty.
The Values of the various Size Choices contain the product codes - these are listed in the Cart when the size is selected and are required to process the order.
Ah, that is a problem with Freeway. When you don’t enter a value, it doesn’t output value=“”, it just drops the value property altogether. Unfortunately, that leaves it up to the browser to decide what to do, and the browser will often decide that the value = whatever the text is in the visible part of the picker.
So all you need to do is to change the value of that option (the “instructions” option) to 0, and then this should work.
If you’re viewing this on the Web, the second version of the code got a little messed up. Here it is again:
I have added “0” to each of the Menu/List default Values. Just to be clear each Menu/List (with E-Product Variant Actions attached) is inserted into a E-Buy Form, which is inserted into a cell of a table. The other cell in the table contains the Go to Cart Button and text.
I have entered ‘class’ in the Name field and ‘quantity’ in the Value field in the Item / Extended Menu (without quotes).
I have entered ‘onsubmit’ for the Name and ‘return checkQuantityPickers()’ for the Value in the the Extended form tab, in the Page / Form Setup dialog (without quotes).
I have copied the code from the pastie site and inserted it into the Page / HTML Markup (Before / HEAD) section of the order page.
You will note that the Order still goes through to the cart without a size being selected and that the carts shows the “0” Value that was entered into the Menu/List default.
I’m wondering if the Names and Values in the Item / Extended Menu and/or Page / Form Setup dialog are not matching the code in the Page / HTML Markup (Before / HEAD) section???
You seem to be missing the bottom half of the script I posted. Please do go to Pastie and get that version and replace what you have in your page head.
The script is missing a bunch of closing braces and the closing tag. It’s a wonder anything JavaScript on your page runs at all with that missing. My apologies if the formatter here ate part of the script, but Pastie doesn’t suffer in that way, so you should not have any trouble using that code.
Oh, and a closer inspection of your source code shows me that the form is not getting the onsubmit handler added to it, probably because each of these buy now buttons is creating its own form and not inheriting the form setup from the page.
What method are you using to create these individual forms for each product? Let’s start there, because it’s not going to work until the form calls the onsubmit handler.
As per Freeway’s instructions, for each product offering I created a table with two cells.
In the first cell I inserted a CSS layout HTML Item, to which I applied the E-Buy Form Action.
I then inserted a Menu/List into the HTML Item, to which I applied the E-Product Variant Action.
After the Menu/List I then inserted a Button into the HTML Item. The Button’s Value is: “Add to Cart”, Type is set at: Button, and the Access Key is empty. I then applied the E-Buy Button Action to the Button.
As I mentioned the other cell in the table contains the Go to Cart Button and text.
Okay, then we need to take more drastic measures to do this, because
you aren’t going to be able to get the handler onto each form in the
usual manner.
Time for plan B.
Delete the previous script entirely from the Before /HEAD section of
Page / HTML Markup.
Move to the Before /BODY section, and paste in this:
What this does is “hook” all of the forms in the page, and set them to
run the function when the form is submitted. Because we are running
this on a form-by-form basis, the previous checkQuantityPickers()
function has been modified slightly to run only on the form it’s
called from; this keeps the customer from having to order more than
one of everything on the page!
Walter
On Jun 17, 2010, at 12:20 PM, Roy Gardiner wrote:
As per Freeway’s instructions, for each product offering I created a
table with two cells.
In the first cell I inserted a CSS layout HTML Item, to which I
applied the E-Buy Form Action.
I then inserted a Menu/List into the HTML Item, to which I applied
the E-Product Variant Action.
After the Menu/List I then inserted a Button into the HTML Item. The
Button’s Value is: “Add to Cart”, Type is set at: Button, and the
Access Key is empty. I then applied the E-Buy Button Action to the
Button.
As I mentioned the other cell in the table contains the Go to Cart
Button and text.
I have re inserted the code from your last link and uploaded the page so yo can view the change.
Further to your last reply, I also removed one of the “Custom” Add to Cart Buttons to see if the default E-Form button would work. However, there was no difference. I haven’t uploaded this change.
Okay, it needs to go from the Before BODY to the Before /BODY (before
END body is what that slash means) and then it might work. Right where
it is, it runs, but never hooks onto anything, because those elements
don’t exist yet. (JavaScript interprets the page in the order of its
source code, and as of the moment that the script loads and runs,
those form elements are not in the page.
I do realize that I left off one line at the end, before the closing
script tag:
prepareForms();
…put that on a line between the closing brace and the closing script
tag. Here’s an updated Pastie: http://pastie.org/1008902
Walter
On Jun 17, 2010, at 2:10 PM, Roy Gardiner wrote:
I checked and the new code is showing in the Page HTML Markup Before