X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   Common sense Product Layout modification (4.3) (https://forum.x-cart.com/showthread.php?t=51819)

acidon 01-16-2010 02:45 PM

Common sense Product Layout modification (4.3)
 
2 Attachment(s)
I bet 90% of x-cart owners sooner or later decide to place full product description under product picture(s)/product options area and make it use full page width instead of shy little corner on the right.

I searched forum for an easy solution, but was only able to find the tutorial for 4.2. After looking into code i realized that 4.2 solution is NOT going to work for 4.3 ....

An hour later I came up with this solution which I am more then happy to share with all of you guys ;) :

1) Go to /customer/main/product_details.tpl and edit out next piece of code with {* *} :
Code:

<table cellspacing="0" cellpadding="0" summary="{$lng.lbl_description|escape}">
    <tr>
      <td class="descr">{$product.fulldescr|default:$product.descr}</td>
      {if $active_modules.Special_Offers}
        {include file="modules/Special_Offers/customer/product_bp_icon.tpl"}
      {/if}
      {if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0}
        <td align="right" valign="top">
          <div class="save-percent-container">
            <div class="save" id="save_percent_box">
              <span id="save_percent">{$product.appearance.market_price_discount}</span>%
            </div>
          </div>
        </td>
      {/if}
    </tr>
  </table>


2) in the same template, right after the first piece of code you just edited out, find:
Code:

<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">
    <tr>
      <td class="property-name">{$lng.lbl_sku}</td>
      <td class="property-value" id="product_code" colspan="2">{$product.productcode|escape}</td>
    </tr>
    {if $config.Appearance.show_in_stock eq "Y" && $config.General.unlimited_products ne "Y" && $product.distribution eq ""}
      <tr>
        <td class="property-name">{$lng.lbl_in_stock}</td>
        <td class="property-value product-quantity-text" colspan="2">
          {if $product.avail gt 0}
            {$lng.txt_items_available|substitute:"items":$product.avail}
          {else}
            {$lng.lbl_no_items_available}
          {/if}
        </td>
      </tr>
    {/if}
    {if $product.weight ne "0.00" || $variants ne ''}
      <tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}>
        <td class="property-name">{$lng.lbl_weight}</td>
        <td class="property-value" colspan="2">
          <span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}
        </td>
      </tr>


and replace it with :

Code:

<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">
  <tr>
      <td class="property-name">{$lng.lbl_sku}</td>
      <td class="property-value" id="product_code">{$product.productcode|escape}</td><td rowspan="3" align="right" valign="top">{if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0} <div class="save-percent-container">
            <div class="save" id="save_percent_box">
              <span id="save_percent">{$product.appearance.market_price_discount}</span>%
            </div>
          </div>{/if}</td>
    </tr>
    {if $config.Appearance.show_in_stock eq "Y" && $config.General.unlimited_products ne "Y" && $product.distribution eq ""}
      <tr>
        <td class="property-name">{$lng.lbl_in_stock}</td>
        <td class="property-value product-quantity-text">
          {if $product.avail gt 0}
            {$lng.txt_items_available|substitute:"items":$product.avail}
          {else}
            {$lng.lbl_no_items_available}
          {/if}        </td>
      </tr>
    {/if}
    {if $product.weight ne "0.00" || $variants ne ''}
      <tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}>
        <td class="property-name">{$lng.lbl_weight}</td>
        <td class="property-value">
          <span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}        </td>
      </tr>


3) Go to /customer/main/product.tpl and find :
Code:

<div class="details"{if $max_image_width gt 0} style="margin-left: {$max_image_width}px;"{/if}>
      {include file="customer/main/product_details.tpl"}
      {if $active_modules.Feature_Comparison ne ""}
        {include file="modules/Feature_Comparison/product_buttons.tpl"}
      {/if}
    </div>
    <div class="clearing"></div>


right after it add :

Code:

<p class="descr">{$product.fulldescr|default:$product.descr}</p>
      {if $active_modules.Special_Offers}
        {include file="modules/Special_Offers/customer/product_bp_icon.tpl"}
      {/if}


This should do it :)

P.S: In order to modify/adjust the product options layout after modification (if neccessary), go to /main.css and find :

table.product-properties .property-name {
width: 30px;
white-space: nowrap;
}
table.product-properties .property-value {
white-space: normal;
}

Play around with this CSS to get the desired look ;)

Shiftlocked 01-16-2010 04:18 PM

Re: Common sense Product Layout modification (4.3)
 
nice work there, I think I get what you are at but do you have a before and after screenie of this?

acidon 01-16-2010 06:51 PM

Re: Common sense Product Layout modification (4.3)
 
Ok updated original post with screenshots :D

hoosierglass 01-16-2010 07:31 PM

Re: Common sense Product Layout modification (4.3)
 
For a long time had our hardware site set up like this. At that time we did not have many product options or variables set set it seemed like the way to diplay our wares. The only real draw back to this was categories that had dozens of prodcuts and several pages or product listings. Because of this we switched to a two column listing with no discription and a text under the image to click for more information. When we switched to this type of layout our sales increased by 20% and more in the first five months after switching to the two column layout. Personally I like the one column layout but cannot argue with the change in sales since switching to two column. I am working with 4.3 and have that set to a three column look. It will be interesting to see what kind of sales change we will see with this change.

amy2203 01-17-2010 07:32 AM

Re: Common sense Product Layout modification (4.3)
 
Quote:

Because of this we switched to a two column listing with no discription and a text under the image to click for more information


Which page did you do this on? the category listing page, or the individual product page?

jburba2000 01-25-2010 06:49 PM

Re: Common sense Product Layout modification (4.3)
 
Beautiful, quick and easy mod. Looks great and like almost every other site on the Internet now.

hoosierglass 01-26-2010 05:13 AM

Re: Common sense Product Layout modification (4.3)
 
Quote:

Originally Posted by amy2203
Which page did you do this on? the category listing page, or the individual product page?


We did this in the products.tpl, so basically the listing of the products in the categories. This is done in the admin general settings area of the back end.

tam10 01-29-2010 08:57 PM

Re: Common sense Product Layout modification (4.3)
 
Perfect. Thank you.
Just one question -how do hide the SKU from customer side.

acidon 01-30-2010 10:52 AM

Re: Common sense Product Layout modification (4.3)
 
Quote:

Originally Posted by tam10
...how do hide the SKU from customer side.


In /customer/main/product_details.tpl find:

Code:


<td class="property-name">{$lng.lbl_sku}</td>
<td class="property-value" id="product_code">{$product.productcode|escape}</td>


and replace it with:


Code:


<td class="property-name">{* {$lng.lbl_sku} *}</td>
<td class="property-value" {* id="product_code" *}>{* {$product.productcode|escape} *}</td>


CODE UPDATED TO REFLECT PRODUCT VARIANTS SKUs AS WELL

tam10 01-30-2010 01:34 PM

Re: Common sense Product Layout modification (4.3)
 
Thanks :D


All times are GMT -8. The time now is 03:31 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.