Changing order_info.tpl to reduce scrolling

HWT · #1 12-20-2006, 07:06 AM

Code is working in 4.0.15

This Christmas season I got sick of scrolling down, down, down to enter tracking numbers and submit changes. So, I changed the main/order_info.tpl to get rid of some of the long list display that x-cart so loves. Here's a tscreenshot of the results:

http://www.heirloomwoodentoys.com/files/images/order_info.jpg

In short, I simply put the order info into a tabular form rather than the list, and got the billing and shipping addresses into an Americanized format. The later process got rid of a lot of {if} {/if} statements that allowed you to turn on and off the various elements of the address. eg. first name, last name, etc. Basically, if you use this, you will be stuck with displaying all of the elements shown here (but including address line 2 which wasn't filled in here). I figured that this would not be much of an issue for most, as most of these elements are basic information.

This was all done fairly quickly, so there is lots of room for improvement, but it should make a great starting point if you want to reduce your scrolling through the order info.

HWT · #2 12-20-2006, 07:08 AM

heres the code:

main/order_info.tpl

Code:

{* $Id: order_info.tpl,v 1.15.2.11 2005/06/16 10:05:37 max Exp $ *}
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<TR> 
  <TD valign="top" class="ProductDetailsTitle" colspan="3">{$lng.lbl_products_info}</TD>
  <TD valign="top" class="ProductDetailsTitle"></TD>
</TR>
<TR> 
  <TD class="Line" height="1" colspan="3"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0"></TD>
  <TD class="Line" height="1"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1"></TD>
</TR>
<TR> 
  <TD valign="top" class="ProductDetails" height="10" colspan="3">&nbsp;</TD>
  <TD valign="top" class="ProductPriceSmall" height="10">&nbsp;</TD>
</TR>
<TR> 
  <TD valign="top" class="ProductTitle" width="10%" bgcolor="#F5F5F5">{$lng.lbl_sku}</TD>
  <TD valign="top" class="ProductTitle" width="60%" bgcolor="#F5F5F5">Product</TD>
  <TD valign="top" class="ProductTitle" nowrap width="10%" bgcolor="#F5F5F5">{$lng.lbl_quantity}&nbsp; </TD>
  <TD valign="top" class="ProductTitle" nowrap width="10%" bgcolor="#F5F5F5">{$lng.lbl_price}</TD>
</TR>
<TR> 
  <TD valign="top" class="ProductTitle" width="10%">&nbsp;</TD>
  <TD valign="top" class="ProductTitle" width="60%">&nbsp;</TD>
  <TD valign="top" class="ProductTitle" nowrap width="10%">&nbsp;&nbsp; </TD>
  <TD valign="top" class="ProductTitle" nowrap width="10%">&nbsp;</TD>
</TR>
{section name=prod_num loop=$products}
{if $products[prod_num].deleted eq "" and ($active_modules.Product_Configurator eq "" or $products[prod_num].extra_data.pconf.parent eq "")}
<TR> 
  <TD valign="top" class="OrderProductInfo" nowrap bgcolor="#F5F5F5">{$products[prod_num].productcode|default:"-"}
  </TD>
  <TD valign="top" class="OrderProductInfo" width="60%" bgcolor="#F5F5F5">{$products[prod_num].product}{* === commented out product number ==== #{$products[prod_num].productid} ==== *}
 {if $products[prod_num].product_options ne "" && $active_modules.Product_Options ne ''}<br>{$lng.lbl_selected_options}: {include file="modules/Product_Options/display_options.tpl" options=$products[prod_num].product_options options_txt=$products[prod_num].product_options_txt force_product_options_txt=$products[prod_num].force_product_options_txt}{/if} 
 {if $active_modules.Product_Configurator ne "" and $products[prod_num].extra_data.pconf.cartid ne ""}
<BR> 
/ {$lng.lbl_pconf_composite_product} /
{/if}</TD>
  <TD valign="top" class="OrderProductInfo" bgcolor="#F5F5F5">{$products[prod_num].amount} item(s)</TD>
  <TD valign="top" class="OrderProductInfo" nowrap bgcolor="#F5F5F5">
 <p align="right">{include file="currency.tpl" value=$products[prod_num].display_price}<br>
 {if $order.extra.tax_info.display_cart_products_tax_rates eq "Y" and ($products[prod_num].product_type ne "C" or $products[prod_num].display_price gt 0)}{$lng.lbl_including}:{/if}&nbsp; {foreach from=$products[prod_num].extra_data.taxes key=tax_name item=tax}
{if $tax.tax_value gt 0}
{if $cart.product_tax_name eq ""}<NOBR>{$tax.tax_display_name}:</NOBR>{/if}
{if $tax.rate_type eq "%"}{$tax.rate_value}%{else}{include file="currency.tpl" value=$tax.rate_value}{/if}<BR>
{/if}
{/foreach}</TD>
</TR>
{if $active_modules.Egoods and $products[prod_num].download_key and ($order.status eq "P" or $order.status eq "C")}
<TR>
  <TD colspan="4">{$lng.lbl_download_link}:<BR><A href="{$catalogs.customer}/download.php?id={$products[prod_num].download_key}" target="_blank">{$catalogs.customer}/download.php?id={$products[prod_num].download_key}</A></TD>
</TR>
<TR>
  <TD colspan="3">{$lng.lbl_download_link_expires}:</TD>
  <TD>{$products[prod_num].expires|date_format:$config.Appearance.datetime_format}</TD>
</TR>
</TABLE>
{/if}
{if $active_modules.RMA}
{include file="modules/RMA/item_returns.tpl" product=$products[prod_num]}
{/if}
{/if}
{if $active_modules.Product_Configurator ne "" and $products[prod_num].extra_data.pconf.cartid ne ""}
{include file="modules/Product_Configurator/pconf_order_info.tpl" cartid=$products[prod_num].extra_data.pconf.cartid}
{/if}
{/section}
{section name=giftcert loop=$giftcerts}
{if $giftcerts[giftcert].deleted eq ""}
<TR> 
  <TD colspan="5" valign="top" class="ProductTitle">{$lng.lbl_gift_certificate}</TD>
</TR>
<TR> 
  <TD valign="top" colspan="3">&nbsp;</TD>
  <TD valign="top" colspan="2">&nbsp;</TD>
</TR>
<TR> 
  <TD valign="top" colspan="3">{$lng.lbl_gc_id}</TD>
  <TD valign="top" colspan="2">{$giftcerts[giftcert].gcid}</TD>
</TR>
<TR>
  <TD valign="top" colspan="3">{$lng.lbl_amount}</TD>
  <TD valign="top" colspan="2">{include file="currency.tpl" value=$giftcerts[giftcert].amount}</TD>
</TR>
<TR> 
  <TD valign="top" colspan="3">{$lng.lbl_recipient}</TD>
  <TD valign="top" colspan="2">{$giftcerts[giftcert].recipient}</TD>
</TR>
{if $giftcerts[giftcert].send_via eq "P"}
<TR>
  <TD colspan="5">{$lng.lbl_gc_send_via_postal_mail}</TD>
</TR>
<TR>
  <TD valign="top" class="LabelStyle" colspan="3">{$lng.lbl_mail_address}</TD>
  <TD valign="top" colspan="2">
{$giftcerts[giftcert].recipient_firstname} {$giftcerts[giftcert].recipient_lastname}<BR>
{$giftcerts[giftcert].recipient_address} {$giftcerts[giftcert].recipient_address_2}, {$giftcerts[giftcert].recipient_city},<BR>
{$giftcerts[giftcert].recipient_state} {$giftcerts[giftcert].recipient_country}, {$giftcerts[giftcert].recipient_zipcode}
</TD>
</TR>
<TR>
  <TD valign="top" class="LabelStyle" colspan="3">{$lng.lbl_phone}</TD>
  <TD valign="top" colspan="2">{$giftcerts[giftcert].recipient_phone}</TD>
</TR>
{else}
<TR> 
  <TD valign="top" colspan="3">{$lng.lbl_recipient_email}</TD>
  <TD valign="top" colspan="2">{$giftcerts[giftcert].recipient_email}</TD>
</TR>
{/if}
<TR> 
  <TD valign="top" class="ProductDetails" height="14" colspan="3">&nbsp;</TD>
  <TD valign="top" class="ProductDetails" height="14" colspan="2">&nbsp;</TD>
</TR>
{/if}
{/section}

HWT · #3 12-20-2006, 07:09 AM

Here's the rest of the code. Simply put this right under the end of the last section. The complete code is too long for the forum to handle in one post. Sorry.

Code:

<TABLE width="100%" cellspacing="0" cellpadding="0">
<TR> 
  <TD valign="top" class="ProductDetailsTitle">{$lng.lbl_order_info}</TD>
  <TD valign="top" class="ProductDetailsTitle"></TD>
</TR>
<TR> 
  <TD class="Line" height="1" colspan="2"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0"></TD>
</TR>
<TR> 
  <TD valign="top" class="ProductDetails" height="14">&nbsp;</TD>
  <TD valign="top" class="ProductDetails" height="14">&nbsp;</TD>
</TR>
<TR> 
  <TD valign="top">{$lng.lbl_payment_method}</TD>
  <TD valign="top">{$order.payment_method}</TD>
</TR>
<TR> 
  <TD valign="top">{$lng.lbl_delivery}</TD>
  <TD valign="top">{$order.shipping|trademark}</TD>
</TR>
<TR>
  <TD valign="top">{$lng.lbl_subtotal}</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.display_subtotal}</TD>
</TR>
<TR>
  <TD valign="top">{$lng.lbl_discount}</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.discount}</TD>
</TR>
{if $order.coupon_type ne "free_ship"}
<TR>
  <TD valign="top">{$lng.lbl_coupon_saving}</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.coupon_discount} ({$order.coupon})</TD>
</TR>
{/if}
{if $order.discounted_subtotal ne $order.subtotal}
<TR>
  <TD valign="top">{$lng.lbl_discounted_subtotal}</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.display_discounted_subtotal}</TD>
</TR>
{/if}
{if $order.coupon and $order.coupon_type eq "free_ship"}
{assign var="shipping_cost" value=$order.coupon_discount}
{/if}
<TR>
  <TD valign="top">{$lng.lbl_shipping_cost}</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.display_shipping_cost}</TD>
</TR>
{if $order.coupon and $order.coupon_type eq "free_ship"}
<TR>
  <TD valign="top">{$lng.lbl_coupon_saving}</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.coupon_discount} ({$order.coupon})</TD>
</TR>
{/if}
{if $order.applied_taxes and $order.extra.tax_info.display_taxed_order_totals ne "Y"}
{foreach key=tax_name item=tax from=$order.applied_taxes}
<TR>
  <TD valign="top">{$tax.tax_display_name}</TD>
  <TD valign="top">{include file="currency.tpl" value=$tax.tax_cost}</TD>
</TR>
{/foreach}
{/if}
{if $order.giftcert_discount gt 0}
<TR>
  <TD valign="top" class="LabelStyle" nowrap>{$lng.lbl_giftcert_discount}</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.giftcert_discount}</TD>
</TR>
{/if}
<TR>
  <TD valign="top"><B>{$lng.lbl_total|upper}</B></TD>
  <TD valign="top"><B>{include file="currency.tpl" value=$order.total}</B></TD>
</TR>
{if $order.applied_taxes and $order.extra.tax_info.display_taxed_order_totals eq "Y"}
{foreach key=tax_name item=tax from=$order.applied_taxes}
<TR>
  <TD valign="top">{$lng.lbl_including_tax|substitute:"tax":$tax.tax_display_name}</TD>
  <TD valign="top">{include file="currency.tpl" value=$tax.tax_cost}</TD>
</TR>
{/foreach}
{/if}
{section name=rn loop=$order.reg_numbers}
{if %rn.first%}
<TR>
<TD valign="top" colspan="2" class="LabelStyle" nowrap>{$lng.lbl_registration_number}:</TD>
</TR>
{/if}
<TR>
<TD valign="top" colspan="2" nowrap>&nbsp;&nbsp;{$order.reg_numbers[rn]}</TD>
</TR>
{/section}
<TR> 
  <TD valign="top" class="ProductDetails" height="14">&nbsp;</TD>
  <TD valign="top" class="ProductDetails" height="14">&nbsp;</TD>
</TR>
{if $order.applied_giftcerts}
<TR>
  <TD colspan="2" class="LabelStyle">{$lng.lbl_applied_giftcerts}:</TD>
</TR>
{section name=gc loop=$order.applied_giftcerts}
<TR>
  <TD valign="top">&nbsp;&nbsp;{$order.applied_giftcerts[gc].giftcert_id}:</TD>
  <TD valign="top">{include file="currency.tpl" value=$order.applied_giftcerts[gc].giftcert_cost}</TD>
</TR>
{/section}
<TR>
  <TD colspan="2" height="10">&nbsp;</TD>
</TR>
{/if}
{if $order.extra.special_bonuses ne ""}
{include file="modules/Special_Offers/order_bonuses.tpl" bonuses=$order.extra.special_bonuses}
{/if}
</TABLE>
<TABLE cellspacing="0" cellpadding="0" width="100%">
<TR> 
  <TD valign="top" class="ProductDetailsTitle">{$lng.lbl_customer_info}</TD>
  <TD valign="top" class="ProductDetailsTitle" colspan="5">&nbsp;</TD>
</TR>
<TR> 
  <TD class="Line" height="1"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0"></TD>
  <TD class="Line" height="1" colspan="5"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1"></TD>
</TR>
<TR> 
  <TD valign="top" class="ProductDetails"></TD>
  <TD valign="top" class="ProductPriceSmall" colspan="5"></TD>
</TR>
<TR> 
  <TD valign="top" class="ProductDetails" height="10">&nbsp;</TD>
  <TD valign="top" class="ProductPriceSmall" height="10" colspan="5">&nbsp;</TD>
</TR>
<TR valign="top">
  <TD colspan="6"><I>{$lng.lbl_personal_information}:</I></A></TD>
</TR>
{if $customer.default_fields.title}
<TR valign="top"> 
  <TD>&nbsp;&nbsp;{$lng.lbl_title}</TD>
  <TD colspan="5">{$customer.title}</TD>
</TR>
{/if}
{if $customer.default_fields.firstname}
<TR valign="top"> 
  <TD>&nbsp;&nbsp;{$lng.lbl_first_name}</TD>
  <TD colspan="5">{$customer.firstname}</TD>
</TR>
{/if}
{if $customer.default_fields.lastname}
<TR valign="top"> 
  <TD>&nbsp;&nbsp;{$lng.lbl_last_name}</TD>
  <TD colspan="5">{$customer.lastname}</TD>
</TR>
{/if} 
{if $customer.default_fields.company}
<TR valign="top"> 
  <TD>&nbsp;&nbsp;{$lng.lbl_company}</TD>
  <TD colspan="5">{$customer.company}</TD>
</TR>
{/if}
{foreach from=$customer.additional_fields item=v}
{if $v.section eq 'P'}
<TR valign="top">
 <TD>&nbsp;&nbsp;{$v.title}</TD>
    <TD colspan="5">{$v.value}</TD>
</TR>
 {/if}
{/foreach}
{if $customer.default_fields.phone}
<TR> 
  <TD valign="top">&nbsp;&nbsp;{$lng.lbl_phone}</TD>
  <TD valign="top" colspan="5">{$customer.phone}</TD>
</TR>
{/if} 
{if $customer.default_fields.fax}
<TR> 
  <TD valign="top">&nbsp;&nbsp;{$lng.lbl_fax}</TD>
  <TD valign="top" colspan="5">{$customer.fax}</TD>
</TR>
{/if} 
{if $customer.default_fields.url}
<TR> 
  <TD valign="top">&nbsp;&nbsp;{$lng.lbl_web_site}</TD>
  <TD valign="top" colspan="5"><A href="{$customer.url}">{$customer.url}</A></TD>
</TR>
{/if} 
{if $customer.default_fields.email}
<TR> 
  <TD valign="top">&nbsp;&nbsp;{$lng.lbl_email}</TD>
  <TD valign="top" colspan="5"><A href="<A href="<A href="mailto:{$customer.email}">{$customer.email}</A></TD">mailto:{$customer.email}">{$customer.email}</A></TD">mailto:{$customer.email}">{$customer.email}</A></TD">mailto:{$customer.email}">{$customer.email}</A></TD>
</TR>
{/if}
{foreach from=$customer.additional_fields item=v}
{if $v.section eq 'C'}
<TR valign="top">
 <TD>&nbsp;&nbsp;{$v.title}</TD>
    <TD colspan="5">{$v.value}</TD>
</TR>
 {/if}
{/foreach}
{assign var="is_header" value=""}
{foreach from=$customer.additional_fields item=v}
{if $v.section eq 'A'}
{if $is_header ne 'Y'}
<TR valign="top">
 <TD colspan="6"><I>{$lng.lbl_additional_information}:</I></A></TD>
</TR>
{assign var="is_header" value="Y"}
{/if}
<TR valign="top">
 <TD>&nbsp;&nbsp;{$v.title}</TD>
    <TD colspan="5">{$v.value}</TD>
</TR>
{/if}
{/foreach}
{if $usertype eq "A" or $usertype eq "P"} 
<TR> 
<TD valign="top">&nbsp;&nbsp;{$lng.lbl_referred_by}</TD> 
<TD colspan="5"> 
{if $customer.referer} 
<A href="{$customer.referer}">{$customer.referer}</A> 
{else} 
{$lng.lbl_unknown} 
{/if} 
</TD> 
</TR> 
{/if}
</table>
<table width="100%" cellspacing="0" cellpadding="0">
<TR> 
  <TD colspan="4" valign="top" height="10" bgcolor="#F5F5F5">&nbsp;</TD>
</TR>
<TR valign="top">
  <TD colspan="2" width="50%" bgcolor="#F5F5F5"><I>{$lng.lbl_billing_address}:</I></A></TD>
  <TD colspan="2" width="50%" bgcolor="#F5F5F5"><I>{$lng.lbl_shipping_address}:</I></A></TD>
</TR>
 
<TR valign="top"> 
  <TD colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp;{$customer.b_firstname} {$customer.b_lastname}</TD>
  <TD colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp; {$customer.s_firstname} {$customer.s_lastname}</TD>
</TR>
<TR> 
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp;{$customer.b_address}</TD>
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp; {$customer.s_address}</TD>
</TR>
<TR> 
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp;{$customer.b_address_2}</TD>
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp; {$customer.s_address_2}</TD>
</TR>
<TR> 
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp;{$customer.b_city}, {$customer.b_statename}&nbsp; {$customer.b_zipcode}</TD>
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp; {$customer.s_city}, {$customer.s_statename}&nbsp; {$customer.s_zipcode}</TD>
</TR>
{if $customer.default_fields.b_county && $config.General.use_counties eq 'Y'}
<TR> 
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp;{$lng.lbl_county}: {$customer.b_countyname}</TD>
  {/if} 
{if $customer.default_fields.s_county && $config.General.use_counties eq 'Y'}
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp; {$lng.lbl_county}: {$customer.s_countyname}</TD>
</TR>
{/if} 
 
 
{if $customer.default_fields.b_country}
<TR> 
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp;{$lng.lbl_country}: {$customer.b_countryname}</TD>
  {/if}
{if $customer.default_fields.s_country}
  <TD valign="top" colspan="2" bgcolor="#F5F5F5">&nbsp;&nbsp; {$lng.lbl_country}: {$customer.s_countryname}</TD>
</TR>
{/if}
 
{foreach from=$customer.additional_fields item=v}
{if $v.section eq 'B'}
<TR valign="top">
 <TD bgcolor="#F5F5F5">&nbsp;&nbsp;{$v.title}</TD>
    <TD bgcolor="#F5F5F5">{$v.value}</TD>
    {/if}
{/foreach}
    {foreach from=$customer.additional_fields item=v}
{if $v.section eq 'S'}
 <TD bgcolor="#F5F5F5">&nbsp;&nbsp;{$v.title}</TD>
    <TD bgcolor="#F5F5F5">{$v.value}</TD>
</TR>
 {/if}
{/foreach} 
<TR valign="top">
  <TD colspan="4" bgcolor="#F5F5F5">&nbsp;</TD>
</TR>
</TABLE>



	X-Cart forums © 2001-2020