jQuery/Ajax Fast checkout/Login/Create account/Shopping Cart/Bootstrap MATC 2.3.3

[Dr. Rolex]

If you increase o decrease a product, Comments box and MATC are reset :(

 

Hello PiLLaO,

 

Here is a solution to your disappearing comment problem:

 

In ajaxManager.js replace the ajaxPerformShippingRefresh() function with the code below:

function ajaxPerformShippingRefresh() {
submitted = false;
var orderTotalNewValue = parseFloat(getValue('orderTotalNewValue'));
var orderTotalOldValue = parseFloat(getValue('orderTotalOldValue'));

if (getElement('comments') != null)
var comments = $('#comments').val();
if (getElement('shippingselected') != null)
{
var shipping = getValue('shippingselected');
if (getElement('freeShippingOver') != null) {
var freeShippingOver = parseFloat(getValue('freeShippingOver'));
if (orderTotalOldValue > freeShippingOver && orderTotalNewValue < freeShippingOver) {
 ajaxSendRequest('ajaxAction=showShipping',ajaxUpdateContentMulti,true,'shipping_area', false);
 ajaxRefreshTotals();
} else if ( orderTotalNewValue > freeShippingOver ) {
 ajaxSendRequest('ajaxAction=PerformShippingSelection&shipping=free_free',ajaxUpdateContentMulti,true,'shipping_area', false);
} else {
 ajaxSendRequest('ajaxAction=PerformShippingSelection&shipping='+shipping,ajaxUpdateContentMulti,true,'totals_area', false);
}
} else {
ajaxSendRequest('ajaxAction=PerformShippingSelection&shipping='+shipping,ajaxUpdateContentMulti,true,'totals_area', false);
}
} else {
ajaxRefreshShipping(false);
ajaxRefreshTotals(false);
}
if ( typeof comments != 'undefined' )
document.getElementById("comments").value = comments + "\n";
return false;
}

[Dr. Rolex]

I just noticed.

 

Is it possible to extract the code which updates the price via quantity dynamically in the cart and place it in the product info page?

 

You mean the "spinning effect" of the order total in the cart infobox when product is added/removed?

 

If so, then check the the Shopping Cart Add-On. That module will make the order total count from the old to new value when product is added/removed.

[PiLLaO]

More problems :(

 

Now, when I drag a product into shopping cart box... shopping cart box update total but ajax_checkout don't (for me isn't a problem, I don't like the drag option)

 

If a delete a product pressing cross button, total doesn't update

[vampirehunter]

You mean the "spinning effect" of the order total in the cart infobox when product is added/removed?

 

If so, then check the the Shopping Cart Add-On. That module will make the order total count from the old to new value when product is added/removed.

 

hi

no,

i mean just in the Shopping cart (the actual full shopping cart) not any infoboxes.

 

the place where you can update the quantity using the small - and + icons, the price is updated automatically.

 

i would like this feature to be on the product Info page, so if i select a product option or change the quantity field, the price automatically changes.

[Dr. Rolex]

More problems :(

 

Now, when I drag a product into shopping cart box... shopping cart box update total but ajax_checkout don't (for me isn't a problem, I don't like the drag option)

 

If a delete a product pressing cross button, total doesn't update

If you don't want the drag & drop function, just remove it.

This is done easy by either removing the class="draggable" from the products

- OR -

Perhaps even easier is to remove the function in jquery-oscart.js. The function starts with:

$(".draggable").draggable({

so remove everything from that to this:

  // Explode on successful drop to basket
  //
  $(ui.helper)
   .toggle('explode', function() {

 var productID = ui.draggable.attr("id");
 var attrForm = ui.draggable.attr('data-id');
 return($(this).addBasket(productID, attrForm));
   });
 }
});

[Dr. Rolex]

hi

no,

i mean just in the Shopping cart (the actual full shopping cart) not any infoboxes.

 

the place where you can update the quantity using the small - and + icons, the price is updated automatically.

 

i would like this feature to be on the product Info page, so if i select a product option or change the quantity field, the price automatically changes.

Ah, now I think I understand. You want the products price to change after selecting a different attribute/option on the product page, right?

 

This would not be very hard to accomplish with jQuery, but you still have to write the code from start, I don't think the code from any of my Add-Ons can be reused for this purpose.

You should simply bind an event that fires when the pull down menus are changed, add a attribute to the options with price and the make jQuery calculate the new price and remove the old price and replace it with the new one.

 

Look at how the code works in jquery-oscart.js when the new product is added to the cart infobox after a product has been added. Around this area:

// Delete button in shopping cart infobox
  //
  new_button = $('#boxcart-button-remove').clone() ;
  new_button.find('button').attr('rel', products_id) ;
  // Products details in shopping cart infobox
  //
  product_name = '<li data-id="' + products_id + '" id="pc-' + products_id + '">';
  product_name += '<span class="newItemInCart">';
  product_name += '<span class="name">' + $(document.getElementById('pn-' + productID)).html() + '</span>';
  product_name += '<input class="count" id="pq-' + products_id +  '" value="' + val + '" type="text">'  ;
  product_name += new_button.html()  ;
  product_name += '<input type="hidden" name="products_id[]" value="' + products_id + '" />'  ;
  product_name += '<input type="checkbox" name="cart_delete[]" value="' + products_id + '" style="display:none;" />'  ;
  product_name += '</span>';
  product_name += '</li>';
...

// Append product to the list
  if ( count == 0 ) $("#boxcart-content").find('li').remove() ;
  if ( val > 0 ) $('#boxcart-content').append( product_name ) ;

[PiLLaO]

If you don't want the drag & drop function, just remove it.

This is done easy by either removing the class="draggable" from the products

- OR -

Perhaps even easier is to remove the function in jquery-oscart.js. The function starts with:

$(".draggable").draggable({

so remove everything from that to this:

// Explode on successful drop to basket
//
$(ui.helper)
.toggle('explode', function() {

 var productID = ui.draggable.attr("id");
 var attrForm = ui.draggable.attr('data-id');
 return($(this).addBasket(productID, attrForm));
});
}
});

The second piece of code that you posted here is part of another function, must I delete too?

[Dr. Rolex]

The second piece of code that you posted here is part of another function, must I delete too?

Everything FROM the code i posted first, everything BETWEEN and UP TIL the last code posted.

So, remove everything from around line 518 to around line 632.

Edited August 22, 2013 by Dr. Rolex

[Dr. Rolex]

To fix the state pull down bug, change this line in ./ajax/includes/checkout_new_address.php

echo tep_draw_pull_down_menu('state', $zones_array);

To this:

echo tep_draw_pull_down_menu('state', $zones_array, '', 'id="state"');

[PiLLaO]

Everything FROM the code i posted first, everything BETWEEN and UP TIL the last code posted.

So, remove everything from around line 518 to around line 632.

Sorry, I don't understand correctly the first time :blush:

 

Thanks for all :thumbsup:

[Dr. Rolex]

- Ajax Fast Checkout 2.3.3 Rev 2 -

 

Changes in Rev2:

• Guest Checkout Feature - Completely Session based Checkout Procedure without need for Customer to Login or Create Account
  
• Enhanced security - Create Account & Login form will now use the POST method instead of GET. Both Javascript and PHP code added to prevent customer from completing erroneous orders.
  
• Performance increase - Number of POST made when adding/removing product have been reduced and code somewhat optimized.
  
• Bug Fixes - Several bugs have been fixed, including an error that occured when selecting a State, Session errors when creating account/logging in, graphical design flaws, SSL/NONSSL type errors and probably more..
  
• Some Admin options added - Enable/Disable Guest Account & Telephone/Fax
  
• Buttons will now have the ui-state-hover class when hovered.
  
• Fixed so error messages are displayed correctly.
  

http://addons.oscommerce.com/info/8852

[dvale]

Hello Jonas,

 

Is this module compatible with Discount Code?

 

Regards,

Paul.

[Dr. Rolex]

Hello Jonas,

 

Is this module compatible with Discount Code?

 

Regards,

Paul.

 

No, not yet.

 

But I will start implementing the Points & Rewards Add-On/System on my own site soon and I thought I would take a look at Discount code at the same time.

So as soon as I have that running I will upload a patch for everyone else.

 

But, if you have a demo/live shop that uses the Discount code where I can take a look on how it works, I might fix it for you if it isn't to much work.

 

Best regards,

Jonas

Edited August 29, 2013 by Dr. Rolex

[dvale]

No, not yet.

 

But I will start implementing the Points & Rewards Add-On/System on my own site soon and I thought I would take a look at Discount code at the same time.

So as soon as I have that running I will upload a patch for everyone else.

 

But, if you have a demo/live shop that uses the Discount code where I can take a look on how it works, I might fix it for you if it isn't to much work.

 

Best regards,

Jonas

 

I don't have a demo site, but I will get it done for you to test on it.

 

Regards,

Paul

[FreevieW]

I installed to addon and when testing it doesn't allow me to go any further than the first screen to log your address details even though I checked on the acceptance button but it comes up with saying that no fields are filled in but all of them were , urgent help someone. :(

[Dr. Rolex]

I installed to addon and when testing it doesn't allow me to go any further than the first screen to log your address details even though I checked on the acceptance button but it comes up with saying that no fields are filled in but all of them were , urgent help someone. :(

 

That sounds weird but is probably an easy fix. What happens if you login the "regular" way (clicking the My Account button in the header), add a product to your cart and then go to the Fast Checkout, does the Add-On work then?

 

The only thing I can think of is that you for some reason isn't loading the ajaxManager.js file. Could you open your Chrome developer tools, click on "Sources" and then look to the left for "ajaxManager.js" and "requester.js". You should find them under the ./ajax/javascript directory.

 

If you want, you can send me a link to your site (send it over PM if you don't want it to be seen here) so I can take a look.

[FreevieW]

Hi there,I have tried the regular way and the add cart and that works fine. I also checked the two files location and it is in the folder as mentioned. All information is added and select terms & conditions enter password then click the create account and a popup screen comes up complaining that I haven't selected terms and conditions even though it is selected, it wont allow me to go any further?

[Dr. Rolex]

Hi there,I have tried the regular way and the add cart and that works fine. I also checked the two files location and it is in the folder as mentioned. All information is added and select terms & conditions enter password then click the create account and a popup screen comes up complaining that I haven't selected terms and conditions even though it is selected, it wont allow me to go any further?

 

Oh, I see that you are using the latest technology browser from Microsoft so I think I know what the problem is. ;)

 

Internet Explorer doesn't support DOMNodeInserted, on the last Agree to Terms box that appears just before confirming the order I fixed this by setting the submit button to always be displayed for IE browsers. At least I think I did so..

 

Anyhow, try to change this code in ajaxManagerTest.php, found around line 1943:

<span class="buttonAction" id="TheSubmitButtonCreateAcc" style="display: none; float: right; margin-top: 10px;"><?php echo draw_button(IMAGE_BUTTON_CONTINUE, 'primary', 'value="Sign-Up and Continue" onclick="ajaxPerformCreateAccount();"', 'ui-icon-person'); ?></span>

<span class="buttonAction" id="TheDisabledButtonCreateAcc" onclick="check_agree_create('<?php echo CONDITIONS_CREATE_ACCOUNT; ?>', '<?php echo htmlspecialchars(CONDITION_AGREEMENT_ERROR_CREATE_ACCOUNT); ?>');" style="float: right; margin-top: 10px;"><?php echo draw_button(IMAGE_BUTTON_CONTINUE, 'secondary', '', 'ui-icon-person'); ?></span>

To this:

<?php
$u_agent = $_SERVER['HTTP_USER_AGENT'];
if(!preg_match('/MSIE/i',$u_agent))
{ ?>
<span class="buttonAction" id="TheSubmitButtonCreateAcc" style="display: none; float: right; margin-top: 10px;"><?php echo draw_button(IMAGE_BUTTON_CONTINUE, 'primary', 'value="Sign-Up and Continue" onclick="ajaxPerformCreateAccount();"', 'ui-icon-person'); ?></span>

<span class="buttonAction" id="TheDisabledButtonCreateAcc" onclick="check_agree_create('<?php echo CONDITIONS_CREATE_ACCOUNT; ?>', '<?php echo htmlspecialchars(CONDITION_AGREEMENT_ERROR_CREATE_ACCOUNT); ?>');" style="float: right; margin-top: 10px;"><?php echo draw_button(IMAGE_BUTTON_CONTINUE, 'secondary', '', 'ui-icon-person'); ?></span>
<?php
} else { ?>
<span class="buttonAction" id="" style="float: right; margin-top: 10px;"><?php echo draw_button(IMAGE_BUTTON_CONTINUE, 'primary', 'value="Sign-Up and Continue" onclick="ajaxPerformCreateAccount();"', 'ui-icon-person'); ?></span>
<?php } ?>

 

Have you tried it in a modern browser? If this doesn't fix it for you, try it in Chrome or Firefox and see if it works there and report back how it went.

I need some sleep now, I'll check back tomorrow.

[FreevieW]

I tried Firefox and works and the other IE10 setup works too. How can I put a password strength meter, PayPal Pro onto the JQuery/Ajax ?

[FreevieW]

I have managed to get the paypal pro to work, just need help on the password strength meter

[Dr. Rolex]

I have managed to get the paypal pro to work, just need help on the password strength meter

 

Well, what you need is one coded with jQuery.

 

Take a look at this link, this shouldn't be to hard to implement:

http://www.freshdesignweb.com/10example-jqueryjavasript-password-strength-meter.html

[FreevieW]

I found the one I am looking for and the reCaptcha_99points but I cant see how to integrate them into your program

[Dr. Rolex]

I found the one I am looking for and the reCaptcha_99points but I cant see how to integrate them into your program

 

Complete the following steps if you want a captcha to verify when customer creates account

IMAGE (for some reason images can't be added..)

 

 

Step 1: Download this Add-On:

http://www.99points.info/2011/01/recaptcha-style-captcha-with-jquery-and-php/#more-1163

 

Step 2: Copy the files from the Add-On to the following directories in your catalog

 

fonts/* => ./ajax/includes/fonts/*

logos.jpg => ./ajax/css/logos.jpg

refresh.jpg => ./images/refresh.jpg

 

Step 3: Create a new file called ./ajax/includes/get_captcha.php and add the following code to it:

<?php
chdir('../../');
require('includes/application_top.php');
$word_1 = '';
$word_2 = '';
for ($i = 0; $i < 4; $i++)
{
$word_1 .= chr(rand(97, 122));
}
for ($i = 0; $i < 4; $i++)
{
$word_2 .= chr(rand(97, 122));
}
tep_session_unregister('captcha');
$_SESSION['captcha'] = $word_1.' '.$word_2;
$dir = 'ajax/includes/fonts/';
$image = imagecreatetruecolor(165, 50);
$font = "recaptchaFont.ttf"; // font style
$color = imagecolorallocate($image, 0, 0, 0);// color
$white = imagecolorallocate($image, 255, 255, 255); // background color white
imagefilledrectangle($image, 0,0, 709, 99, $white);
imagettftext ($image, 22, 0, 5, 30, $color, $dir.$font, $_SESSION['captcha']);
header("Content-type: image/png");
imagepng($image);
echo $image; ?>

 

Step 4: In ./ajax/javascript/ajaxManager.js add the following code to the end of the file:

/* reCaptcha */
// refresh captcha
$('body').on('click', '#captcha-refresh', function(){
change_captcha();
});
function change_captcha()
{
$('.captcha-box').html('<img src="ajax/includes/get_captcha.php?rnd=' + Math.random() + '" />');
}

 

Step 5: In ajax/css/ajaxManager.css add this code to the end of the file:

/*
Recaptcha Style Captcha
=======================
re-Captcha Style Captcha with php and jQuery

Created By: Zeeshan Rasool
URL : http://www.99Points.info

Get JQuery, PHP, AJAX, Codeigniter and MYSQL Tutorials and Demos on Blog
*/

#captcha-wrap{
border:solid #870500 1px;
width:307px;
-webkit-border-radius: 10px;
float:left;
-moz-border-radius: 10px;
border-radius: 10px;
background:#870500;
text-align:left;
padding:3px;
margin-top:3px;
height:100px;
}
#captcha-wrap .captcha-box{
-webkit-border-radius: 7px;
background:#fff;
-moz-border-radius: 7px;
border-radius: 7px;
text-align:center;
border:solid #fff 1px;
}
#captcha-wrap .text-box{
-webkit-border-radius: 7px;
background:#ffdc73;
-moz-border-radius: 7px;
width:140px;
height:43px;
float:left;
margin:4px;
border-radius: 7px;
text-align:center;
border:solid #ffdc73 1px;
}
#captcha-wrap .text-box input{ width:120px;}
#captcha-wrap .text-box label{
color:#000000;
font-family: helvetica,sans-serif;
font-size:12px;
width:150px;
padding-top:3px;
padding-bottom:3px;
}
#captcha-wrap .captcha-action{
float:right; width:117px;
background:url(logos.jpg) top right no-repeat;
height:44px; margin-top:3px;
}
#captcha-wrap img#captcha-refresh{
margin-top:9px;
border:solid #333333 1px;
margin-right:6px;
cursor:pointer;
}

 

In ./ajax/classes/ajaxManagerTest.class.phpfind this code around line 2086:

<div class="ui-widget-content infoBoxContents ui-corner-bottom">
<div class="contentText">
<table border="0" cellspacing="2" cellpadding="2" width="100%">
<tr>
 <td class="fieldKey"><?php echo ENTRY_PASSWORD; ?></td>
 <td class="fieldValue"><?php echo tep_draw_password_field('password', $password,'id="password"') . ' ' . (tep_not_null(ENTRY_PASSWORD_TEXT) ? '<span class="inputRequirement">' . ENTRY_PASSWORD_TEXT . '</span>': ''); ?></td>
</tr>
<tr>
 <td class="fieldKey"><?php echo ENTRY_PASSWORD_CONFIRMATION; ?></td>
 <td class="fieldValue"><?php echo tep_draw_password_field('confirmation',$confirmation,'id="confirmation"') . ' ' . (tep_not_null(ENTRY_PASSWORD_CONFIRMATION_TEXT) ? '<span class="inputRequirement">' . ENTRY_PASSWORD_CONFIRMATION_TEXT . '</span>': ''); ?></td>
</tr>
</table>
</div>
</div>

Add this code below the code you just found:

<!-- Captcha HTML Code -->
<div id="captcha-wrap">
<div class="captcha-box">
<img src="ajax/includes/get_captcha.php" alt="" id="captcha" />
</div>
<div class="text-box">
<label>Type the two words:</label>
<input name="captcha-code" type="text" id="captcha-code">
</div>
<div class="captcha-action">
<img src="images/refresh.jpg" alt="" id="captcha-refresh" />
</div>
</div>
<!-- Copy and Paste above html in any form and include CSS, get_captcha.php files to show the captcha -->

 

Still in same file, find this code around line 2926:

$this->getAndPrepare('formid', $_POST, $formid);
$error = false;
$error_message = '';

Replace with:

$this->getAndPrepare('formid', $_POST, $formid);
$this->getAndPrepare('captcha-code', $_POST, $captcha_code);
$this->getAndPrepare('captcha', $_SESSION, $captcha);
$error = false;
$error_message = '';

if ($captcha != $captcha_code) {
$error = true;
$error_message .= '<li>' . 'Wrong Captcha Code' . '</li>';
}

 

That's all & you're welcome.

Edited September 5, 2013 by Dr. Rolex

[Dr. Rolex]

Complete the following steps if you want a Password Strength Checker

IMAGE

 

This Password Strength Checker will check if the Password is:

1. At least one letter
    
   
2. At least one capital letter
    
   
3. At least one number
    
   
4. At least 8 characters
    
   
5. Confirm that the password confimation match the password
   

It will not do this in PHP, so the customer can still enter whatever password that's normally allowed and get away with it.

If you want to force the customer to follow these criteria (or your own), then you have to do this in PHP with regex in the _PerformCreateAccount function.

 

Preparar: Download these two images and put them in ./ajax/img

http://i40.tinypic.com/kbb0g7.png - Rename this one invalid.png

http://i44.tinypic.com/1oni9e.png - Rename this one valid.png

 

Step uno: In ./ajax/classes/AjaxManagerTest.class.php around line 2086, find this code:

<div class="ui-widget-content infoBoxContents ui-corner-bottom">
<div class="contentText">
<table border="0" cellspacing="2" cellpadding="2" width="100%">
<tr>
 <td class="fieldKey"><?php echo ENTRY_PASSWORD; ?></td>
 <td class="fieldValue"><?php echo tep_draw_password_field('password', $password,'id="password"') . ' ' . (tep_not_null(ENTRY_PASSWORD_TEXT) ? '<span class="inputRequirement">' . ENTRY_PASSWORD_TEXT . '</span>': ''); ?></td>
</tr>
<tr>
 <td class="fieldKey"><?php echo ENTRY_PASSWORD_CONFIRMATION; ?></td>
 <td class="fieldValue"><?php echo tep_draw_password_field('confirmation',$confirmation,'id="confirmation"') . ' ' . (tep_not_null(ENTRY_PASSWORD_CONFIRMATION_TEXT) ? '<span class="inputRequirement">' . ENTRY_PASSWORD_CONFIRMATION_TEXT . '</span>': ''); ?></td>
</tr>
</table>

Add the following code just below the code you searched for:

<!-- Password Strength Meter -->
<div id="pswd_info">
<h4>Password must meet the following requirements:</h4>
<ul>
<li id="letter" class="invalid">At least <strong>one letter</strong></li>
<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
<li id="number" class="invalid">At least <strong>one number</strong></li>
<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
</ul>
</div>
<div id="pswd_conf">
<h4 id="pswd_conf_text">The Password Confirmation must match your Password.</h4>
</div>

 

Step dos: In ./ajax/css/ajaxManager.css add the following code to the end of the file:

/* Password Strength Meter */
#pswd_info, #pswd_conf {
position: absolute;
bottom: 145px;
bottom: -115px\9;
left: 298px;
width: 250px;
padding: 15px;
background: rgb(254, 254, 254);
font-size: .875em;
border-radius: 5px;
box-shadow: 0 1px 3px rgb(204, 204, 204);
border: 1px solid rgb(221, 221, 221);
}
#pswd_info ul {
list-style-type: none;
}
#pswd_conf {
bottom: 156px;
}
#pswd_info h4 {
margin:0 0 10px 0;
padding:0;
font-weight:normal;
}
#pswd_conf h4 {
font-weight:bold;
line-height: 1.4;
}
#pswd_info::before, #pswd_conf::before {
content: "\25C0";
position: absolute;
top: 45%;
left: -13px;
font-size: 14px;
line-height: 14px;
color: rgb(221, 221, 221);
text-shadow: none;
display: block;
}
.valid, .invalid{
background: url(sprites.png) no-repeat;
}
.invalid {
background:url(../img/invalid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#ec3f41;
}
.valid {
background:url(../img/valid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#3a7d34;
}
#pswd_info, #pswd_conf {
display:none;
}

 

Step tres: In ./ajax/javascript/ajaxManager.js add this code to the end of the file:

/* Password Strength Meter */
$(function() {
$('body').on('keyup', '#password', function(){
// set password variable
var pswd = $(this).val();
//validate the length
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}

}).on('focus', '#password', function(){
$('#pswd_info').show();

}).on('blur', '#password', function(){
$('#pswd_info').hide();
});
// Validate Password Confirmation
$('body').on('keyup', '#confirmation', function(){
var pswd = $('#password').val();
var conf = $(this).val();
if ( pswd == conf ) {
$('#pswd_conf_text').removeClass('invalid').addClass('valid');
} else {
$('#pswd_conf_text').removeClass('valid').addClass('invalid');
}
}).on('focus', '#confirmation', function(){
$('#pswd_conf').show();

}).on('blur', '#confirmation', function(){
$('#pswd_conf').hide();
});
});

 

Step Quatro: ¡Celebrar!

Edited September 5, 2013 by Dr. Rolex

[FreevieW]

if you check the testing place you will see what a mean by the location. I had followed all the instructions as above. http://cotton-nappyservice.org.uk/ajax_checkout.php