X-Cart forums - Common sense Product Layout modification (4.3)

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

tam10

01-30-2010 04:58 PM

Re: Common sense Product Layout modification (4.3)

Did you noticed that the "SAVE" image appears as o% even when market price = your price?

acidon

01-30-2010 09:11 PM

Re: Common sense Product Layout modification (4.3)

If market price = your price , leave market price field blank ;)

tam10

01-31-2010 08:41 AM

Re: Common sense Product Layout modification (4.3)

Maybe i did not explain my self clearly...Sure i leave it blank BUT the image of discount, that colored star still appears on the product page with the 0 %. It should not be there if you give no discount or maybe i am wrong ? 8O

acidon

01-31-2010 09:48 AM

Re: Common sense Product Layout modification (4.3)

OMG , tam10, thx for pointing this problem out to me!!

It appears I made final corrections to code in product_details.tpl directly in my x-cart template editor, yet provided the forum with the piece of code from the Notepad I used to make the adjustments. :oops: This explains how I could left out that vital IF statement you pointed out for me so kindly 8)

To get the star work properly, please find next code in your /customer/main/product_details.tpl :

Code:

<td rowspan="3" 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>

and replace it with :

Code:

<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>

P.S: I am going to update the original post with correct code right after this message. (DONE)

.

tam10

01-31-2010 10:10 AM

Re: Common sense Product Layout modification (4.3)

Nice Job :D/

Now... :wink: for some reason i get the SKU on customer side -product page BUT not on all pages. I followed your instruction to eliminate the SKU but as i said -work only for some pages and for other not. Any thoughts?

acidon

01-31-2010 10:22 AM

Re: Common sense Product Layout modification (4.3)

Now this one is strange..

Try clearing templates cache first, also you may want to try to delete SKU variables in template rather then edit it out like I suggested earlier. To be more specific:

1) Go to http://yourdomain.com/cleanup.php . If it didn't solve the case, try:

2) In your /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 with:

Code:

 

<td class="property-name"></td>

<td class="property-value" id="product_code"></td>

Please let me know if it worked for you;)

tam10

01-31-2010 10:36 AM

Re: Common sense Product Layout modification (4.3)

Nothing changed.

And yes - many strange things in my xcart.

acidon

01-31-2010 12:45 PM

Re: Common sense Product Layout modification (4.3)

Ok, the reason SKU showing on some pages and not on others is because I initially didn't count on paroduct variant's SKUs.

To remove all SKUs from customer side (including product variants one), right after you initially modified your /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>

Enjoy :D

aitek

08-11-2010 01:31 PM

Re: Common sense Product Layout modification (4.3)

Is there a work around for this in the fashion_mosaic skin? This would help me out as I totally am looking to do this. I looked in product_details.tpl but it is completely different ;(

Whenever I try and make max image size in the admin tool larger it just kicks my text out to the right of the page.

ScrapProfessor

08-16-2010 05:37 PM

Re: Common sense Product Layout modification (4.3)

Quote:

Originally Posted by aitek

Oh... I would love to know the answer to this as well.

And, how would you go ahead and put the price, add to cart/wishlist buttons, etc., down below the description of the product? I'd like my layout to be:

PRODUCT IMAGE
PRODUCT DESCRIPTION
OTHER PRODUCT DETAILS (cost, add to cart, etc.)

Thanks to acidon for this great post!

kgoel

08-20-2010 07:35 PM

Re: Common sense Product Layout modification (4.3)

This is a nice mod but it has caused some changes in our backend. Now we cannot edit the product description or any other field in the admin.

clicking on the product link just shows the product price, SKU etc but all other description fields are gone !.
I am getting the following text in the admin

"The group product editing mode is enabled. Now you can assign same attributes to all products in the list.
To extend an attribute to many products, simply select the check box for the corresponding field".

How can we disable the group product editing for the admin module.

ScrapProfessor

08-20-2010 07:43 PM

Re: Common sense Product Layout modification (4.3)

Quote:

Originally Posted by kgoel

Hi there... I actually had problems getting this to work right too, for whatever reason, and I ended up starting my own thread for it. I got an immediate response from a nice person here and the suggestion I received worked PERFECTLY!!!! :D/

Here's the link to that thread so you can see it all. I'm not sure if it's exactlly what you're looking for, but Good luck just the same. I hope it helps. (:

http://forum.x-cart.com/showthread.php?t=55153

digiscrap

10-26-2010 04:17 AM

Re: Common sense Product Layout modification (4.3)

2 Attachment(s)

Hello,

Thank you for reading! And thanks for this modification and I put this into 4.4.1 pro. Works fine but now I have 2 small issues with the visualization:

Please see next screenshot. The text Home :: Word Art :: etc... isn't correct displayed. It used to be 10px (present in the altskin.css).

http://centani.nl/images/css1.jpg

And when adding a price discount to a product is the second issue. Normally there appears a star behind the discount percent. It now only displayed "15%" without the background 'star'. Please see:

http://centani.nl/images/css2.jpg

Can someone please look at these 2 issues? I'll attach product.tpl and product_details.tpl

Thanks in advance,

Digiscrap.nl
Vincent Volmer

skontakt

10-30-2010 12:38 PM

Re: Common sense Product Layout modification (4.3)

Thanks a lot!! :D

How could I make Product class options under full product description and make it use full page width too.

kurv	01-12-2011 07:30 PM

Re: Common sense Product Layout modification (4.3)

acidon, thanks for the awesome code!!

Can you tell me if the code on the first post is final, or if it is still in the works? Will it work for 4.2.2?

Thank you for your time!

Shehzad

01-15-2011 07:22 AM

Re: Common sense Product Layout modification (4.3)

kurv,

Did you mean 4.4.2? I have tried the acidon's original post on x-cart pro 4.4.2 and it worked fine.

kurv	01-15-2011 08:39 AM

Re: Common sense Product Layout modification (4.3)

Quote:

Originally Posted by Shehzad

kurv,

Did you mean 4.4.2? I have tried the acidon's original post on x-cart pro 4.4.2 and it worked fine.

Yes, thank you!! :D 4.4.2.

xtech

01-18-2011 09:40 PM

Re: Common sense Product Layout modification (4.3)

Hi acidon,
Thanks for the code!!

I want to modify product details page which contains product details only no any other things that is no category no left panel only contents header and footer and centralized or left aligned product detail page with large image.

My purpose is to focus the product details only no other things.Actually I have a 2 column fashion store to sell different kind of fashion related product.I want to display product detail page with larger display.

I want to display in this manner --http://www.thefashiontree.com/screen.JPG

How to achieve that in 4.4 1 2 column??

fioppy

01-19-2011 09:04 PM

Re: Common sense Product Layout modification (4.3)

Quote:

Originally Posted by digiscrap

Hello,

Thank you for reading! And thanks for this modification and I put this into 4.4.1 pro. Works fine but now I have 2 small issues with the visualization:

Please see next screenshot. The text Home :: Word Art :: etc... isn't correct displayed. It used to be 10px (present in the altskin.css).

http://centani.nl/images/css1.jpg

And when adding a price discount to a product is the second issue. Normally there appears a star behind the discount percent. It now only displayed "15%" without the background 'star'. Please see:

http://centani.nl/images/css2.jpg

Can someone please look at these 2 issues? I'll attach product.tpl and product_details.tpl

Thanks in advance,

Digiscrap.nl
Vincent Volmer

Hello Vincet, I have looked if you got solution for this script. please tell me how did you Solve this issue?

Also in replace the codes I found that the secritps in our templates are different. please can you just translate this mod to 4.4 Verson so we all can benefit from it.

Regards
Amer

Cello123

02-03-2011 11:07 AM

Re: Common sense Product Layout modification (4.3)

Does anyone have the code and or css to make this change in V4.4.2
im using vivid dreams chromo and i only see skin/chromo/customer/main/product_details.tpl
there is no skin/chromo/customer/main/product.tpl other ones are products.tpl, products_t.tpl, products_list.tpl
*there is a product.tpl and product_details.tpl located skin/common_files/customer/main

please if someone can help me out with step by step instructions
i would like all the product description, variants/options, price etc under the main image and thumbnails, such like this:
MAIN IMAGE
THUMBNAILS
PRODUCT VARIANTS/OPTIONS
PRICE, CART
DESCRIPTION
etc....

Thanks i would appreciate it, as im going crazy on this.

cherie

02-03-2011 12:31 PM

Re: Common sense Product Layout modification (4.3)

I don't have the specific changes for you, but if you want to edit product_details.tpl, copy it from common_files into the same location under chromo then make your changes there. :)

xtech

02-10-2011 08:54 AM

Re: Common sense Product Layout modification (4.3)

Quote:

Originally Posted by xtech

Any solution to achieve my requirement..?? I really want to solve it...

Waiting for someone to reply...

Thanks to all...

mizNRG

03-30-2011 05:28 AM

Re: Common sense Product Layout modification (4.3)

I had applied this mod a while back and recently added the Easy Variant View mod by BCSE. Since then my descriptions have dissapeared. I re-installed my backup files to remove the variant mod and the descriptions are still missing. Any ideas how I can fix this? Has anyone had this issue before?

kgoel

04-24-2011 01:32 PM

Re: Common sense Product Layout modification (4.3)

Quote:

Originally Posted by acidon

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}

What changes you need to make in the admin files so that you can edit the product description. This MOD is only changing the custome front end. It is nice MOD.

All times are GMT -8. The time now is 09:53 PM.