New checkout layout

brandonvd · October 23, 2009, 12:00am

Well I tried and tried to change the checkout layout the way I wanted, but unfortunately I couldn’t figure it out. So, I contacted Joe on the forum and he said he could do the mod and quoted me a very reasonable price to do it.

Here is how my checkout page now looks:

The checkout is still a one page checkout, which I like. The difference is in the billing and shipping information step. Now both the billing and shipping information are shown and there is a checkbox that allows the customer to say that the shipping information and billing information are the same.

I wish I could describe this better, but between the image above and my description, hopefully you get it.

If you want to see this mod in action go to:

http://www.saltwatertogo.com

Feel free to add a product into your cart and checkout. The site is live, so if you could be sure to purchase a product with a high profit margin I would really appreciate it.

Anyways, I am very happy with both the mod and Joe’s work.

Brandon

darius · October 23, 2009, 12:00am

Hi,

How can I have it? Also could you tell me how to change checkout button in index.php?dispatch=checkout.cart

Thanks

joe · October 23, 2009, 12:00am

Thanks for your nice comment Brandon.

This mod is available at donation 40 USD. If anyone is interested, please request here or PM me. I will send my Paypal address to you.

Regards,

Joe

hykit · October 23, 2009, 12:00am

The major problem with this is that the customer does not see the purchase total, taxes, and summary of purchase before completing the order.

Maybe add the purchase summary of top of the page?

jegesmaci · October 23, 2009, 12:00am

hykit,

How did you edit the checkout page to put the secure checkout information at the top?

Thanks,

Adam

brandonvd · October 23, 2009, 12:00am

[quote name=‘hykit’]The major problem with this is that the customer does not see the purchase total, taxes, and summary of purchase before completing the order.

Maybe add the purchase summary of top of the page?[/QUOTE]

Yeah, I agree. I didn’t realize this until after the fact.

Here is what I have so far:

The only thing is, I need to float the cart contents to the right and have the rest of the credit card stuff move up, but for the life of me I can’t figure it out. Any ideas?

As for the other questions, I’ll get to them later. It’s 12:30 am here and I’m ready for bed.

Brandon

brandonvd · October 23, 2009, 12:00am

Nevermind about the layout question, I figured it out. I’ll explain after getting some sleep.

Brandon

brandonvd · October 23, 2009, 12:00am

This looks better:

Brandon

darius · October 23, 2009, 12:00am

Everything looks ok above. Just product summary should not be there, why give a chance to remove something from cart in final steps

hykit · October 23, 2009, 12:00am

[quote name=‘jegesmaci’]hykit,

How did you edit the checkout page to put the secure checkout information at the top?

Thanks,

Adam[/QUOTE]

For the 3 step checkout, modify: progressbar.tpl

For the one step checkout, modify: checkout.tpl

Both under “views/checkout/components”

jegesmaci · October 23, 2009, 12:00am

hykit,

Can you give me some more guideance? Can you show me the code? I am really new at PHP. My previous cart was ASP so I am not quite comfortable.

Any help would be appreciated.

Thanks,

Adam

hykit · October 23, 2009, 12:00am

[quote name=‘jegesmaci’]hykit,

Can you give me some more guideance? Can you show me the code? I am really new at PHP. My previous cart was ASP so I am not quite comfortable.

Any help would be appreciated.

Thanks,

Adam[/QUOTE]

It’s not PHP. It’s an HTML template you have to modify.

brandonvd · October 23, 2009, 12:00am

Ok I did some more work.

First to answer Darius. To change the checkout button I just made a new checkout button and named it checkout.gif just like the original than I modified:

skins/basic/customer/buttons/checkout.tpl to accomodate the new size.

Here is my code:

{* $Id: checkout.tpl 5807 2008-08-26 09:27:03Z zeke $ *}

As for getting the mod, unfortunately I think you would need to get it from Joe. I would rather just be able to share it with the entire community like it was done when I first started with CS-Cart, but I understand Joe’s position and if this is how he pays his bills than I have to respect that.

I also did what you suggested and made it so that the product wasn’t removeable at the end of the process. Here is a screen shot:

Now as for making all this happen.

First I got the mod from Joe.

Then I changed this last part. I did this by:

In skins/basic/customer/views/checkout/checkout.tpl I commented out:



			

           

			

				{hook name="checkout:cart_item"}

				{if $cart_products}

					{include file="views/checkout/components/cart_items.tpl" disable_ids="button_cart" use_ajax=true}

				{/if}

				{/hook}

			


			

				{assign var="result_ids" value="cart_items,checkout_totals,checkout_steps,cart_status"}



				

				{include file="buttons/clear_cart.tpl" but_href="$index_script?dispatch=checkout.clear" but_role="text" but_meta="cm-confirm"}


				{include file="buttons/update_cart.tpl" but_id="button_cart" but_name="dispatch[checkout.update]"}


			


			



			{include file="views/checkout/components/checkout_totals.tpl" location="checkout"}

			{if $smarty.capture.checkout_column}

			

				{$smarty.capture.checkout_column}

			
	

			{/if}

2. In skins/basic/customer/views/checkout/components/checkout_steps.tpl I changed:

```php

{if $cart.shipping_required == true}{if $profile_fields.B || $profile_fields.S}4{else}3{/if}{elseif $profile_fields.B || $profile_fields.S}3{else}2{/if}.

{if $complete || $edit}

{/if}

{$lang.payment_method}

{* Payment methods form }

{include file=“views/checkout/components/payment_methods.tpl” no_mainbox=“Y”}

{ /Payment methods form *}

{if $cart|fn_allow_place_order}

{include file=“views/checkout/summary.tpl”}

{/if}

```

To:

```php

{if $cart.shipping_required == true}{if $profile_fields.B || $profile_fields.S}4{else}3{/if}{elseif $profile_fields.B || $profile_fields.S}3{else}2{/if}.
{if $complete || $edit}

{/if}

{$lang.payment_method}

{hook name="checkout:cart_item"}
{if $cart_products}
{include file="views/checkout/components/checkout_items.tpl" disable_ids="button_cart" use_ajax=true}
{/if}
{/hook}

{include file="views/checkout/components/checkout_cart_totals.tpl" location="checkout"}
{* Payment methods form *}
{include file="views/checkout/components/payment_methods.tpl" no_mainbox="Y"}
{* /Payment methods form *}

{if $cart|fn_allow_place_order}
{include file="views/checkout/summary.tpl"}
{/if}

```

3. I created a file called checkout_items.tpl and placed it in skins/basic/customer/views/checkout/components

This is the code:

```php {* $Id: cart_items.tpl 7580 2009-06-15 10:58:34Z lexa $ *}

{capture name="cartbox"}

{if $mode == "checkout"}
{if $cart.coupons|floatval}{/if}
{hook name="checkout:form_data"}
{/hook}
{/if}

{if $cart_products}

{assign var="prods" value=false}
{foreach from=$cart_products item="product" key="key" name="cart_products"}
{hook name="checkout:items_list"}
{if !$cart.products.$key.extra.parent}

{if $prods}

{else}
{assign var="prods" value=true}
{/if}
{if $mode == "cart"}

{include file="common_templates/image.tpl" image_width=$settings.Appearance.thumbnail_width obj_id=$key images=$product.main_pair object_type="product"}

{/if}

{if $use_ajax == true && $cart.amount != 1}
{assign var="ajax_class" value="cm-ajax"}
{/if}

{**}

{$product.product|unescape}

{**}

{$lang.sku}: {$product.product_code}

{if $product.exclude_from_calculate}{/if}

{$lang.qty}:
{if $product.qty_content && $product.is_edp != "Y"}

{foreach from=$product.qty_content item="var"}
{$var}
{/foreach}

{else}

{/if}
{if $product.is_edp == "Y" || $product.exclude_from_calculate}

{/if}
{if $product.is_edp == "Y"}

{/if}
x {include file="common_templates/price.tpl" value=$product.display_price span_id="product_price_`$key`" class="sub-price"}
= {include file="common_templates/price.tpl" value=$product.display_subtotal span_id="product_subtotal_`$key`" class="price"}
{if $product.zero_price_action == "A"}

{/if}

{assign var="name" value="product_options_$key"}
{capture name=$name}
{if $product.product_options}
{include file="views/products/components/product_options.tpl" product_options=$product.product_options product=$product name="cart_products" id=$key location="cart" disable_ids=$disable_ids form_name="checkout_form"}
{/if}

{hook name="checkout:product_info"}
{if $product.exclude_from_calculate}
{$lang.free}
{elseif $product.discount|floatval || $product.taxes}

{if $product.discount|floatval}{/if}
{if $product.taxes}{/if}

{if $product.discount|floatval}{/if}
{if $product.taxes}{/if}

{$lang.price}	{$lang.quantity}	{$lang.discount}	{$lang.tax}	{$lang.subtotal}
{include file="common_templates/price.tpl" value=$product.base_price span_id="original_price_`$key`" class="none"}	{$product.amount}	{include file="common_templates/price.tpl" value=$product.discount span_id="discount_subtotal_`$key`" class="none"}	{include file="common_templates/price.tpl" value=$product.tax_summary.total span_id="tax_subtotal_`$key`" class="none"}	{include file="common_templates/price.tpl" span_id="product_subtotal_2_`$key`" value=$product.display_subtotal class="none"}

{/if}
{/hook}
{/capture}

{*{if $smarty.capture.$name|trim}

{$lang.text_click_here}

{$smarty.capture.$name}

{/if}*}

{/if}
{/hook}
{/foreach}
{/if}

{hook name="checkout:extra_list"}
{/hook}

{/capture}
{if $mode == "cart"}
{assign var="class" value="mainbox-cart-body-flex"}
{else}
{assign var="class" value=""}
{/if}
{include file="common_templates/checkout_mainbox_cart.tpl" title=$lang.checkout_summary content=$smarty.capture.cartbox mainbox_body=$class}
```

4. I created a file called checkout_cart_total.tpl and placed it in skins/basic/customer/views/checkout/components

This is the code:

```php

{$lang.subtotal}:
{include file="common_templates/price.tpl" value=$cart.display_subtotal}

{$lang.shipping_cost}:
{include file="common_templates/price.tpl" value=$cart.display_shipping_cost}

{$lang.including_discount}:
{include file="common_templates/price.tpl" value=$cart.discount}

{$lang.order_discount}:
{include file="common_templates/price.tpl" value=$cart.subtotal_discount}

{$lang.coupon} "{$coupon_code}"
{assign var="_redirect_url" value=$config.current_url|escape:url}
{if $use_ajax}{assign var="_class" value="cm-ajax"}{/if}
{include file="buttons/button.tpl" but_href="$index_script?dispatch=checkout.delete_coupon&coupon_code=`$coupon_code`&redirect_url=`$_redirect_url`" but_role="delete" but_meta=$_class but_rev="checkout_totals,cart_items,cart_status,checkout_steps"}

{$tax.description} ({include file="common_templates/modifier.tpl" mod_value=$tax.rate_value mod_type=$tax.rate_type}{if $tax.price_includes_tax == "Y" && $settings.Appearance.cart_prices_w_taxes != "Y"} {$lang.included}{/if}):
{include file="common_templates/price.tpl" value=$tax.tax_subtotal}

{$lang.payment_surcharge}:
{include file="common_templates/price.tpl" value=$cart.payment_surcharge span_id="payment_surcharge_value"}

{$lang.total_charge}:{include file="common_templates/price.tpl" value=$_total|default:$cart.total span_id="cart_total" class="price valign"}

```

4. I also created a file called checkout_mainbox_cart.tpl and placed it in skins/basic/customer/common_templates

5. I added this to my style sheet: ( I used the hooks method to make my own style sheet)

```php .checkout-cart {
float:right;
}
.checkout-cart-body {
height:300px;
min-width:250px;
overflow:auto;
border: 1px solid #dddddd;
border:0 1px 1px;
}
ul.checkout-statistic-list {
background-color: none;
clear:both;
float:right;
margin-top:10px;
padding-top:9px;
}
ul.checkout-statistic-list li.total strong {
float:left;
margin-right:30px;
text-align:right;
width:163px;
}
ul.checkout-statistic-list li.total {
font-family:Arial;
font-size:18px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
white-space:nowrap;
}
ul.checkout-statistic-list li.total span {
float:none;
font-family:Arial;
font-size:18px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin-right:0;
width:auto;
text-align:right;
}
#summary {
width:50%;
} ```

6. I added two language variables:

total_charge which is Total Charge To Card

and

checkout_summary which is Product Summary

I think that might be it. As you can see I tried to make new template files instead of modifying a bunch of them. I am hoping that when 2.0.9 comes out this will make it easier for me to upgrade. I am hoping that instead of having to change a bunch of files, I only have to change one or two.

By the way if you decide to do any of these changes please be sure to backup you files before you make changes. Also I find it best to test this stuff on my localhost first so that way I know it will work before going live.

Also, be aware I might have left out something, so if there is a problem, let me know and I will do my best to help out.

Brandon

hykit · October 23, 2009, 12:00am

Brandon,

Another suggestion.

Add the “What is CVV2” popup link or just add the image of the CVV2 on the payment method step.

brandonvd · October 23, 2009, 12:00am

Yeah, I know that was discussed somewhere on the forum and I was going to take a look at it to see if I can get that in here somewhere. I’ll have to take a look in little while.

Brandon

michael · January 23, 2010, 12:00am

As I tested under firefox just now, when choose “ship to billing address”, the “state/province” selectbox won’t copy the content from “billing address”, why ?

pbannette · January 23, 2010, 12:00am

I just noticed what Michael saw. I have FF 3.5.7 and everything copied, except the state.

I have a question for brandon:

I see this modification was made in an earlier version of CS-CART. How did you make out when upgrading to more recent versions? Did you have to make further modifications?

Thanks,

Bob

brandonvd · January 23, 2010, 12:00am

Yeah, I’ve noticed the state thing not copying. I haven’t really looked into it, but I’ll contact Joe, who was the coder, and see what he can come up with.

As for upgrading, I had to do some changes when I went from 2.0.8 - 2.0.10. I used Winmerge to compare the files and the changes were pretty simple. I just went from 2.0.10 to 2.0.12 the other day and I didn’t have to do anything to make this work.

I’ll have some time in a little bit and I’ll post what I have.

Brandon

brandonvd · January 26, 2010, 12:00am

Ok, Joe fixed the State problem, thanks Joe.

I posted the entire addon at:

[url]http://forum.cs-cart.com/showthread.php?p=71708#post71708[/url]

It’s free so why not download it and take a look.

Hope it helps,

Brandon

New checkout layout

{if $cart.shipping_required == true}{if $profile_fields.B || $profile_fields.S}4{else}3{/if}{elseif $profile_fields.B || $profile_fields.S}3{else}2{/if}. {if $complete || $edit} {/if} {$lang.payment_method}

{if $cart.shipping_required == true}{if $profile_fields.B || $profile_fields.S}4{else}3{/if}{elseif $profile_fields.B || $profile_fields.S}3{else}2{/if}. {if $complete || $edit} {/if} {$lang.payment_method}

{if $cart.shipping_required == true}{if $profile_fields.B || $profile_fields.S}4{else}3{/if}{elseif $profile_fields.B || $profile_fields.S}3{else}2{/if}.

{if $complete || $edit}

{/if}

{$lang.payment_method}

{if $cart.shipping_required == true}{if $profile_fields.B || $profile_fields.S}4{else}3{/if}{elseif $profile_fields.B || $profile_fields.S}3{else}2{/if}.
{if $complete || $edit}

{/if}

{$lang.payment_method}