Reset order number and add in an accept terms and conditions

Posted by Community Admin on 17-Jan-2012 00:00

I am just setting up our e-commerce module - I have 2 questions

1. How can I set the order number (or reset it) after testing so that it doesn't start at 1.
2. I need to add an accept terms and conditions button (part of the Sagepay terms of use) prior to submitting the order for payment to Sagepay.

Looking forward to a reply on this

Thanks

Erick

Posted by Community Admin on 17-Jan-2012 00:00

Hey Erick,

I'm not sure if there's an 'official' way to reset or alter the order number, but the quick-and-dirty way is to open up SQL Manager and find the [sf_ec_next_order_number] table. The first column [nxt] is the next available order number. Change that and the frontend will pick it up.

Secondly, to have an 'I agree with bla-di-bla' you can edit the Checkout widget (v4.4) the third dropdown is 'Payment options' and you can click on Edit template. (see screenshot).

This will take you to the template editor of the 'payment' step in the checkout. Inside this template you can add a checkbox with text or link to external page and the necessary validation you'd like...

P.S.
Be sure to have a backup copy of the original template in case you mess up, otherwise you'll find yourself re-installing a new sf project just to copy-paste the template back.

Jochem.

Posted by Community Admin on 18-Jan-2012 00:00

Hi Jochem

Thanks for the help

I can do that ok for the order number but I'm not sure how to add the checkbox into the template - are there any examples of that anywhere?

Regards

Erick

Posted by Community Admin on 18-Jan-2012 00:00

Hey Erick,

When you're in the template editor you need to add a bit of ASP and some Javascript to get things going.

Near the bottom of the template you should see the following lines...

01. </asp:CustomValidator>

02. </li>

03.</asp:placeholder>

04.<li class="sfcheckoutFormItm sfnoHide">

05. <orders:couponcodeentryview id="couponCodeEntryView" runat="server" />

06.</li>

07.// we'll place our code here

08.</ul>

09.</fieldset>

By pasting it on line 7 we'll make sure that it shows up under the coupon code and is always visible. If you'd like it to only show up when someone's using a creditcard to checkout (a non offline payment) than place it between line 2 and 3 (before the placeholder closes).

01.<li class="sfcheckoutFormItm sfnoHide">

02. <asp:label id="AcceptTermsLabel" runat="server"

03. text='Please '

04. associatedcontrolid="AcceptTermsCheckBox"

05. cssclass="sfTxtLbl" />

06.

07. <asp:checkbox id="AcceptTermsCheckBox" runat="server"

08. text=" accept Terms before proceeding" />

09.

10. <asp:customvalidator id="ValTerms" runat="server"

11. clientvalidationfunction="ValidateTerms"

12. enableclientscript="true">

13.

14. <span class="sfError">

15. <asp:Literal runat="server" ID="lAcceptTermsIsRequired"

16. Text="Error: You need to accept our terms of use before you can proceed..." />

17. </span>

18. </asp:customvalidator>

19.</li>

That's the bits and pieces for the label, checkbox and the validator. Now to add the validation logic we need to add some javascript at the bottom of the template:

01.<script type="text/javascript">

02. function ValidateTerms(sender, args)

03. var myCheckBox = document.getElementById('C001_ctl00_ctl00_paymentStep_ctl00_ctl00_AcceptTermsCheckBox');

04. if (!myCheckBox.checked)

05. args.IsValid = false;

06.

07. else

08. args.IsValid = true;

09.

10. return

11.

12.</script>

And that should do it...
For production you should probably use a cleaner way than " C001_ctl00_...." but this will get you through development at least :)

Jochem

Posted by Community Admin on 23-Jan-2012 00:00

HI Jochem

Many thanks for all your help on this

Regards

Erick

Posted by Community Admin on 25-Jan-2012 00:00

HI Jochem

I put in the code and it displays the check box no problem but it does not do the validation - I can go straight to the next page even if the box isn't ticked. Any ideas?

The code I have entered is attached.

Regards

Erick

Posted by Community Admin on 25-Jan-2012 00:00

Hey Erick,

Out of the blue, I'd say the javascript getElementById doesn't match what's being rendered... did you verify that with view source/inspect element?

I dropped all the stuff onto the payment step in a test project and just ran it and it works smoothly. Checkbox gets rendered and error message appears when I try to continue without checking the box.

I've attached a screenshot where you can see it in place, I just put an extra <hr> and <br> around it to single it out...

I'll copy paste the entire template (without editing) in a new reply, it'll probably look messy here on the forums with the tabs but it's the full template. If you want, I'd be happy to send it by mail as well (jbokkers at live dot nl).

Jochem

Posted by Community Admin on 25-Jan-2012 00:00

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI" TagPrefix="orders" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<div class="sfClearfix">

<orders:OrderSummary id="orderSummary" runat="server" />

<h2 class="sfcheckoutStepTitle">

<asp:Literal ID="paymentOptions" runat="server" Text='<%$Resources:OrdersResources, PaymentOptions %>' />

</h2>

<fieldset class="sfcheckoutFormWrp sfcheckoutPaymentFormWrp">

<ul class="sfcheckoutFormList">

<li class="sfcheckoutFormItm sfcheckoutFormItmCheckboxList">

<asp:RadioButtonList ID="paymentMethodList" CssClass="sfPaymentMethodList" runat="server" DataTextField="Title" DataValueField="Id" AutoPostBack="true" RepeatLayout="OrderedList" />

</li>

<asp:PlaceHolder runat="server" ID="nonOfflinePlaceholder">

<li class="sfcheckoutFormItm sfcheckoutFormItmDdl">

<telerik:RadComboBox id="creditCardTypeComboBox" runat="server" Skin="Sitefinity" CollapseAnimation-Type="None" ExpandAnimation-Type="None" CssClass="sfCreditCardType" />

<asp:CustomValidator runat="server"

ID="cardTypeValidator"

ValidateEmptyText="true"

ControlToValidate="creditCardTypeComboBox"

CssClass="sfErrorWrp"

Display="Dynamic"

EnableClientScript="true"

ClientValidationFunction="CheckCreditCardNumber">

</asp:CustomValidator>

</li>

<li class="sfcheckoutFormItm sfcheckoutFormItmTxt sfcheckoutFormItmSep">

<asp:Label ID="cardNumberLabel" runat="server" Text='<%$Resources:OrdersResources, CardNumber %>' AssociatedControlID="creditCardNumber" CssClass="sfTxtLbl" />

<asp:TextBox ID="creditCardNumber" runat="server" CssClass="sfTxt sfCreditCardNumber" autocomplete="off" />

<asp:RequiredFieldValidator ID="cardNumberRequiredFieldValidator" runat="server"

Display="Dynamic"

ControlToValidate="creditCardNumber"

CssClass="sfErrorWrp">

<span class="sfError"><asp:Literal runat="server" ID="lCardNumberIsRequired" Text="<%$Resources: OrdersResources, CardNumberIsRequired %>" /></span>

</asp:RequiredFieldValidator>

<asp:CustomValidator runat="server"

ID="creditCardNumberCheck"

ValidateEmptyText="true"

ControlToValidate="creditCardNumber"

CssClass="sfErrorWrp"

Display="Dynamic"

EnableClientScript="true"

ClientValidationFunction="CheckCreditCardNumber">

</asp:CustomValidator>

<span class="sfError sfCreditCardNumberIsInvalid" style="display: none"><asp:Literal ID="lCreditCardNumberIsInvalid" runat="server" Text="<%$Resources: OrdersResources, CreditCardNumberIsInvalid %>" /></span>

</li>

<li class="sfcheckoutFormItm sfcheckoutFormItmTxt">

<asp:Label ID="cardholderNameLabel" runat="server" Text='<%$Resources:OrdersResources, CardholderName %>' AssociatedControlID="cardholderName" CssClass="sfTxtLbl" />

<asp:TextBox ID="cardholderName" runat="server" CssClass="sfTxt" />

<asp:RequiredFieldValidator ID="cardholderNameRequiredFieldValidator" runat="server"

ControlToValidate="cardholderName"

Display="Dynamic"

CssClass="sfErrorWrp">

<span class="sfError"><asp:Literal runat="server" ID="lCardholderNameIsRequired" Text="<%$Resources: OrdersResources, CardholderNameIsRequired %>" /></span>

</asp:RequiredFieldValidator>

</li>

<li class="sfcheckoutFormItm sfcheckoutFormItmDdl">

<asp:Label ID="expirationDateLabel" runat="server" Text='<%$Resources:OrdersResources, ExpirationDate %>' CssClass="sfTxtLbl" />

<telerik:RadComboBox id="cardExpirationMonth" CssClass="sfCreditCardExpirationMonth" runat="server" Skin="Sitefinity" Width="50" CollapseAnimation-Type="None" ExpandAnimation-Type="None">

<Items>

<telerik:RadComboBoxItem runat="server" Text="1" Value="1" />

<telerik:RadComboBoxItem runat="server" Text="2" Value="2" />

<telerik:RadComboBoxItem runat="server" Text="3" Value="3" />

<telerik:RadComboBoxItem runat="server" Text="4" Value="4" />

<telerik:RadComboBoxItem runat="server" Text="5" Value="5" />

<telerik:RadComboBoxItem runat="server" Text="6" Value="6" />

<telerik:RadComboBoxItem runat="server" Text="7" Value="7" />

<telerik:RadComboBoxItem runat="server" Text="8" Value="8" />

<telerik:RadComboBoxITem runat="server" Text="9" Value="9" />

<telerik:RadComboBoxItem runat="server" Text="10" Value="10" />

<telerik:RadComboBoxItem runat="server" Text="11" Value="11" />

<telerik:RadComboBoxItem runat="server" Text="12" Value="12" />

</Items>

</telerik:RadComboBox>

<telerik:RadComboBox id="cardExpirationYear" CssClass="sfCreditCardExpirationYear" runat="server" Skin="Sitefinity" Width="80" CollapseAnimation-Type="None" ExpandAnimation-Type="None" />

<asp:CustomValidator runat="server"

ID="creditCardExpirationInFutureValidator"

ValidateEmptyText="true"

ControlToValidate="cardholderName"

CssClass="sfErrorWrp"

Display="Dynamic"

EnableClientScript="true"

ClientValidationFunction="CheckCreditCardExpiration">

<span class="sfError"><asp:Literal runat="server" Text="<%$Resources: OrdersResources, ExpirationDateExceeded %>" /></span>

</asp:CustomValidator>

</li>

<li class="sfcheckoutFormItm sfcheckoutFormItmTxt sfcheckoutFormItmCodeTxt">

<asp:Label ID="securityCodeLabel" runat="server" Text='<%$Resources:OrdersResources, SecurityCode %>' AssociatedControlID="securityCode" CssClass="sfTxtLbl" />

<asp:TextBox ID="securityCode" runat="server" CssClass="sfTxt" autocomplete="off" />

<asp:RequiredFieldValidator ID="securityCodeRequiredFieldValidator" runat="server"

ControlToValidate="securityCode"

Display="Dynamic"

CssClass="sfErrorWrp">

<span class="sfError"><asp:Literal runat="server" ID="lSecurityCodeIsRequired" Text="<%$Resources: OrdersResources, SecurityCodeIsRequired %>" /></span>

</asp:RequiredFieldValidator>

<asp:CustomValidator ID="creditCardSecurityCodeValidator" runat="server"

ControlToValidate="securityCode"

Display="Dynamic"

CssClass="sfErrorWrp"

ClientValidationFunction="ValidateSecurityCode"

EnableClientScript="true">

<span class="sfError">

<asp:Literal runat="server" Text="<%$Resources: OrdersResources, CreditCardVerificationCodeIsInvalid %>" />

</span>

</asp:CustomValidator>

</li>

</asp:PlaceHolder>

<li class="sfcheckoutFormItm sfnoHide">

<orders:CouponCodeEntryView ID="couponCodeEntryView" runat="server" />

</li>

<hr><br />

<li class="sfcheckoutFormItm sfnoHide">

<asp:Label ID="AcceptTermsLabel" runat="server" Text='Please ' AssociatedControlID="AcceptTermsCheckBox" CssClass="sfTxtLbl" />

<asp:CheckBox ID="AcceptTermsCheckBox" runat="server" Text=" accept Terms before proceeding" />

<asp:CustomValidator ID="ValTerms" runat="server" ClientValidationFunction="ValidateTerms" EnableClientScript="true">

<span class="sfError"><asp:Literal runat="server" ID="lAcceptTermsIsRequired" Text="Error: You need to accept our terms of use before you can proceed..." /></span>

</asp:CustomValidator>

</li>

<br /><hr>

</ul>

</fieldset>

</div>

<div class="sfcheckoutBtnsWrp">

<asp:Button ID="continueButton" runat="server" Text='<%$Resources:OrdersResources, Continue %>' CssClass="sfcheckoutContinueBtn" />

</div>

<script type="text/javascript">

function ValidateTerms(sender, args)

var myCheckBox = document.getElementById('C001_ctl00_ctl00_paymentStep_ctl00_ctl00_AcceptTermsCheckBox');

if(!myCheckBox.checked)

args.IsValid = false;

else

args.IsValid = true;

</script>

This thread is closed

All Replies