Page MenuHomeIn-Portal Phabricator
Files F847476

modern-store
No OneTemporary
Actions

File Metadata

Created
Fri, Apr 18, 6:00 PM

modern-store
View Options

Index: branches/1.0.x/checkout.tpl
===================================================================
--- branches/1.0.x/checkout.tpl (revision 14813)
+++ branches/1.0.x/checkout.tpl (revision 14814)
@@ -1,255 +1,364 @@
<!--##
<NAME>One Step Checkout</NAME>
<DESC></DESC>
<SECTION>Pages||Checkout</SECTION>
##-->
<inp2:m_DefineElement name="page_title">One Step Checkout</inp2:m_DefineElement>
<!--## MAIN CONTENT ##-->
<inp2:m_DefineElement name="content">
<ul class="steps">
<li class="step1"><a href="<inp2:m_Link template='cart'/>"><i></i>Shopping Cart</a></li>
<li class="step2 active"><a href="#"><i></i>One-step Checkout</a></li>
<li class="step3"><span><i></i>Receipt</span></li>
</ul>
<div class="clear"></div>
<div class="cart-detail">
<h1>One-Step Checkout</h1>
<form method="post" action="<inp2:m_FormAction/>" id="checkout-form" class="form checkout-form">
<script type="text/javascript">
FormManager.resetFields('ord');
</script>
<inp2:ord_ShowDefaultAddress type="billing"/>
<inp2:ord_ShowDefaultAddress type="shipping"/>
<div class="halfcol">
<fieldset class="firstline">
<inp2:m_ifnot check="m_LoggedIn">
<div class="login-alt">
Continue as Guest or
<div class="login">
<a href="" id="login-alt">Log In</a>
</div>
</div>
</inp2:m_ifnot>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingEmail" title="lu_fld_YourEmail"/>
</fieldset>
<fieldset>
<div class="fieldset">
Billing Address
</div>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingTo" title="lu_fld_FullName"/>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingCompany" title="lu_fld_Company"/>
<inp2:m_RenderElement name="inp_edit_address" prefix="ord" field="BillingAddress1" field2="BillingAddress2" title="lu_fld_Address"/>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingCity" title="lu_fld_City"/>
<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="BillingCountry" title="lu_fld_Country" has_empty="1" empty_label="lu_opt_SelectCountry"/>
<!-- TODO: preload states by country -->
<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="BillingState" title="lu_fld_State" has_empty="1" row_class="alt1"/>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingZip" title="lu_fld_Zip" row_class="alt2"/>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingPhone" title="lu_fld_Phone"/>
</fieldset>
<fieldset class="creditcard">
<div class="fieldset">
Payment Information
</div>
<div class="creditcards">
<span><img src="<inp2:m_TemplatesBase/>img/creditcards.jpg" width="245" height="39" alt="" /></span>
<span class="paypal"><img src="<inp2:m_TemplatesBase/>img/paypal.jpg" width="98" height="45" alt="" /></span>
</div>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="PaymentAccount" title="lu_fld_CreditCardNumber"/>
<inp2:m_RenderElement design="form_row" prefix="ord" field="PaymentCCExpDate" title="lu_fld_ExpirationDate" row_class="alt1 expdate" field_type="cc_expiration">
<select class="field" name="<inp2:ord_InputName field='PaymentCCExpMonth'/>" id="<inp2:ord_InputName field='PaymentCCExpMonth'/>">
<inp2:ord_PredefinedOptions field="PaymentCCExpMonth" render_as="inp_option_item" selected="selected"/>
</select> /
<select class="field" name="<inp2:ord_InputName field='PaymentCCExpYear'/>" id="<inp2:ord_InputName field='PaymentCCExpYear'/>">
<option value=''></option>
<inp2:ord_PrintYearOptions field="PaymentCCExpYear" render_as="inp_option_item" selected="selected"/>
</select>
</inp2:m_RenderElement>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="PaymentCVV2" title="lu_fld_SecurityCode" row_class="alt2"/>
</fieldset>
</div>
<div class="halfcol halfcol-last">
<inp2:m_ifnot check="m_LoggedIn">
<div class="badge-optional"></div>
<fieldset class="firstline" id="create-account-password">
<p>
<label><input type="checkbox" id="create_account" name="create_account" value="1"<inp2:m_if check="m_Get" name="create_account"> checked</inp2:m_if>/> Create account for easy purchases and order tracking</label>
</p>
<inp2:m_RenderElement name="inp_edit_password" prefix="ord" field="UserPassword" title="lu_fld_Password" verify_title="lu_fld_VerifyPassword"/>
</fieldset>
</inp2:m_ifnot>
<fieldset>
<div class="fieldset">
<label>
- <input type="checkbox" id="same_as_billing" name="same_as_billing" value="1"<inp2:m_if check="m_Get" name="same_as_billing"> checked</inp2:m_if>/> Ship To Address is the same as Billing
+ <input type="checkbox" id="same_as_billing" name="same_as_billing" value="1"<inp2:m_if check="ord_AddressesTheSame"> checked</inp2:m_if>/> Ship To Address is the same as Billing
</label>
</div>
- <div id="shipping-address"<inp2:m_if check="m_Get" name="same_as_billing"> style="display: none;"</inp2:m_if>>
+ <div id="shipping-address"<inp2:m_if check="ord_AddressesTheSame"> style="display: none;"</inp2:m_if>>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="ShippingTo" title="lu_fld_FullName"/>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="ShippingCompany" title="lu_fld_Company"/>
<inp2:m_RenderElement name="inp_edit_address" prefix="ord" field="ShippingAddress1" field2="ShippingAddress2" title="lu_fld_Address"/>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="ShippingCity" title="lu_fld_City"/>
<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="ShippingCountry" title="lu_fld_Country" has_empty="1" empty_label="lu_opt_SelectCountry"/>
<!-- TODO: preload states by country -->
<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="ShippingState" title="lu_fld_State" has_empty="1" row_class="alt1"/>
<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="ShippingZip" title="lu_fld_Zip" row_class="alt2"/>
</div>
- <p>
- <label for="ship">How would you like the items shipped? <span class="star">*</span></label>
- <select id="ship" class="field">
- <option value="" selected="selected">FedEx Ground (Next Day) $14.00</option>
- <option value="">USA</option>
- <option value="">Russia</option>
- </select>
+ <p id="shipping-type-container">
+ <inp2:m_include template="elements/ajax/shipping_type"/>
</p>
- <div class="safe-shop" id="shipping-address-placeholder"<inp2:m_ifnot check="m_Get" name="same_as_billing"> style="display: none;"</inp2:m_ifnot>>
+ <div class="safe-shop" id="shipping-address-placeholder"<inp2:m_ifnot check="ord_AddressesTheSame"> style="display: none;"</inp2:m_ifnot>>
<p class="title">100% Safe & Secure Shopping</p>
<ul class="list">
<li>All Transactions are Encrypted</li>
<li>Your Information is Protected</li>
<li>No Hidden Charges</li>
<li>Satisfaction Guaranteed</li>
</ul>
</div>
</fieldset>
<fieldset>
<div class="fieldset">
- Your Order Summary (18 Items)
+ Your Order Summary (<inp2:orditems_TotalRecords/> Items)
<a href="#" class="link">View Order Details</a>
</div>
<dl class="total">
<dt>Subtotal</dt>
<dd>$1,759.99</dd>
<dt class="discount">Discount:</dt>
<dd class="price2">- $10.00</dd>
<dt>Shipping</dt>
<dd class="price3">$100.00</dd>
<dt>Tax</dt>
<dd class="price3">$100.00</dd>
<dt>Order Total</dt>
<dd class="price4">$1,959.99</dd>
</dl>
<div class="clear"></div>
<div class="terms">
<label><input type="checkbox" id="terms" name="terms" value="yes" checked="true" />&nbsp;I Agree to Terms and Conditions</label>
</div>
<p class="buttons">
<a href="#" class="place-button"><span>Place Order</span></a>
</p>
</fieldset>
</div>
<div class="clear"></div>
<inp2:m_RenderElement name="inp_edit_hidden" prefix="ord" field="PaymentType" db="db"/>
<input type="hidden" name="check_billing_address" id="check_billing_address" value="true"/>
<input type="hidden" name="check_shipping_address" id="check_shipping_address" value="true"/>
<input type="hidden" name="check_credit_card" id="check_credit_card" value="true"/>
</form>
</div>
<script type="text/javascript">
- $(document).ready(
- function () {
- $('#same_as_billing').click(
- function ($e) {
- var $checked = $(this).is(':checked');
+ function CheckoutManager() {}
+
+ CheckoutManager.sameAsBilling = <inp2:m_if check="ord_AddressesTheSame">true<inp2:m_else/>false</inp2:m_if>;
+ CheckoutManager.addressFields = ['To', 'Company', 'Address1', 'Address2', 'City', 'Country', 'State', 'Zip'];
- $('#shipping-address').toggle(!$checked);
- $('#shipping-address-placeholder').toggle($checked);
+ CheckoutManager.initAddressFields = function () {
+ var $me = this;
+
+ $(this.addressFields).each(
+ function () {
+ var $field = this.toString();
+
+ $( FormManager.getField('ord', 'Billing' + $field) ).change(
+ function ($e) {
+ if ( $me.sameAsBilling ) {
+ $( FormManager.getField('ord', 'Shipping' + $field) ).val( $(this).val() ).change();
+ }
+ }
+ );
+
+ $( FormManager.getField('ord', 'Shipping' + $field) ).change(
+ function ($e) {
+ if ( $me.isAddressValid('Shipping') ) {
+ $me.updateOrder(
+ 'elements/ajax/shipping_type',
+ function ($data) {
+ $('#shipping-type-container').html($data);
+ }
+ );
+ }
+ }
+ );
+ }
+ );
+ }
+
+ CheckoutManager.isAddressValid = function ($type) {
+ var $status = true;
+
+ $(this.addressFields).each(
+ function () {
+ var $field = this.toString(),
+ $input = $( FormManager.getField('ord', $type + $field) );
+
+ if ( $field == 'Address2' || ($input.is('select') && $('option', $input).length <= 2 ) ) {
+ // 2nd address line or empty state dropdown
+ return true;
}
- );
- $('#create_account').click(
- function ($e) {
- $('.password-block').toggle( $(this).is(':checked') );
+ if ( $input.val() == '' ) {
+ $status = false;
+
+ return false;
}
- );
+ }
+ );
+
+ return $status;
+ }
+
+ CheckoutManager.updateOrder = function ($return_template, $callback) {
+ var $me = this,
+ $params = $('#checkout-form').serializeArray(),
+ $remove_fields = ['check_billing_address', 'check_shipping_address', 'check_credit_card'];
+
+ for (var $i in $params) {
+ if ( in_array($params[$i].name, $remove_fields) ) {
+ delete $params[$i];
+ }
+ }
+
+ $.post(
+ FormManager.getURL('ord', $return_template, 'OnUpdate'),
+ $params,
+ function ($data) {
+ var $redirect = TB.parseRedirect($data);
+
+ if ( $redirect !== false ) {
+ window.location.href = $redirect;
+
+ return ;
+ }
+
+ $callback.apply($me, [$data]);
+ }
+ )
+ }
+
+ CheckoutManager.copyAddress = function () {
+ $(this.addressFields).each(
+ function () {
+ var $field = this.toString();
+
+ $( FormManager.getField('ord', 'Shipping' + $field) ).val( $( FormManager.getField('ord', 'Billing' + $field) ).val() );
+ }
+ );
+
+ $( FormManager.getField('ord', 'ShippingAddress1') ).change();
+ }
+
+ CheckoutManager.init = function () {
+ var $me = this;
+
+ this.sameAsBilling = $('#same_as_billing').is(':checked');
+
+ $('#same_as_billing').click(
+ function ($e) {
+ $me.sameAsBilling = $(this).is(':checked');
+
+ if ($me.sameAsBilling) {
+ $me.copyAddress();
+ }
+
+ $('#shipping-address').toggle(!$me.sameAsBilling);
+ $('#shipping-address-placeholder').toggle($me.sameAsBilling);
+ }
+ );
+
+ $('#create_account').click(
+ function ($e) {
+ $('.password-block').toggle( $(this).is(':checked') );
+ }
+ );
+
+ $('#login-alt').click(
+ function ($e) {
+ var $login_link = $('#login');
+ if ( !$login_link.parents('.login:first').hasClass('plashka-sel') ) {
+ $login_link.click();
+ }
+
+ return false;
+ }
+ );
+
+ $('body').bind(
+ 'OnAfterLogin',
+ function ($e, $params) {
+ // 1. remove login button
+ $('.login-alt').remove();
+
+ // 2. remove user password controls
+ $('#create-account-password, .badge-optional').remove();
+ FormManager.unregisterField('ord', 'UserPassword');
+ FormManager.unregisterField('ord', 'VerifyUserPassword');
+
+ // 3. put user e-mail into the form
+ FormManager.setFieldStatus('ord', 'BillingEmail');
+ FormManager.getField('ord', 'BillingEmail').value = $params['user_email'];
+ }
+ )
+
+ this.initAddressFields();
+ }
+
+ $(document).ready(
+ function () {
FormManager.registerForm(
{
prefix: 'ord',
save_event: 'OnCombinedPlaceOrder',
id: '<inp2:ord_Field name="OrderId"/>',
form_id: 'checkout-form'
}
);
$('.place-button').click(
function ($e) {
FormManager.submitForm('ord');
return false;
}
);
$('#checkout-form').submit(
function ($e) {
FormManager.submitForm('ord');
return false;
}
);
- $('#login-alt').click(
- function ($e) {
- var $login_link = $('#login');
-
- if ( !$login_link.parents('.login:first').hasClass('plashka-sel') ) {
- $login_link.click();
- }
-
- return false;
- }
- );
-
- $('body').bind(
- 'OnAfterLogin',
- function ($e, $params) {
- // 1. remove login button
- $('.login-alt').remove();
-
- // 2. remove user password controls
- $('#create-account-password, .badge-optional').remove();
- FormManager.unregisterField('ord', 'UserPassword');
- FormManager.unregisterField('ord', 'VerifyUserPassword');
-
- // 3. put user e-mail into the form
- FormManager.setFieldStatus('ord', 'BillingEmail');
- FormManager.getField('ord', 'BillingEmail').value = $params['user_email'];
- }
- )
+ CheckoutManager.init();
}
);
$('.password-block').toggle( $('#create_account').is(':checked') );
</script>
</inp2:m_DefineElement>
<!--## /MAIN CONTENT ##-->
<!--## DESIGN TEMPLATE ##-->
<inp2:m_Set check_credit_card="true"/>
<inp2:m_include template="designs/default_design.des" pass_params="1"/>
<!--## /DESIGN TEMPLATE ##-->
\ No newline at end of file
Index: branches/1.0.x/elements/ajax/shipping_type.tpl
===================================================================
--- branches/1.0.x/elements/ajax/shipping_type.tpl (nonexistent)
+++ branches/1.0.x/elements/ajax/shipping_type.tpl (revision 14814)
@@ -0,0 +1,10 @@
+<inp2:m_if check="m_Get" name="ajax" equals_to="yes">
+ shipping types here: <inp2:ord_Field name="OrderId"/>
+</inp2:m_if>
+
+<label for="ship">How would you like the items shipped? <span class="star">*</span></label>
+<select id="ship" class="field">
+ <option value="" selected="selected">FedEx Ground (Next Day) $14.00</option>
+ <option value="">USA</option>
+ <option value="">Russia</option>
+</select>
\ No newline at end of file

Event Timeline

In-Portal CMS · In-Portal Community Pages · In-Portal Issue Tracker · In-Portal Repository Browser · Quality Assurance · In-Portal CI Server