+1-888-365-2779
Try Now
More in this section

Forums / Ecommerce / Reset order number and add in an accept terms and conditions button

Reset order number and add in an accept terms and conditions button

8 posts, 0 answered
  1. Erick
    Erick avatar
    4 posts
    Registered:
    26 Nov 2010
    17 Jan 2012
    Link to this post
    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
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    17 Jan 2012
    Link to this post
    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.
  3. Erick
    Erick avatar
    4 posts
    Registered:
    26 Nov 2010
    18 Jan 2012
    Link to this post
    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
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    18 Jan 2012
    Link to this post
    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

  5. Erick
    Erick avatar
    4 posts
    Registered:
    26 Nov 2010
    23 Jan 2012
    Link to this post
    HI Jochem

    Many thanks for all your help on this

    Regards

    Erick
  6. Erick
    Erick avatar
    4 posts
    Registered:
    26 Nov 2010
    25 Jan 2012
    Link to this post
    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


  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    25 Jan 2012
    Link to this post
    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

  8. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    25 Jan 2012
    Link to this post
    <%@ 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>
8 posts, 0 answered