Jump to content

[Resolved] Improving layout of product page


Will Shaman

Recommended Posts

I'm running CC6 with Minimizer Skin (which is based on Foundation) and want to improve the layout of the product page. At present, there's essentially a two-column layout, with the product title and picture(s) on the left, and the description followed by the price, quantity and Add to Basket button. When I have long descriptions — longer than the height of the picture — which is often the case, I end up with a tall thin column of text (my description) wasting a whole load of space beneath the picture. Furthermore, the price and Add to Basket button are then inevitably shoved right to the bottom of the page, well out of anyone's easy sight. A rough mock-up is attached (Layout-1)

What I'd like to do is edit the template (presumably box.product.php) such that the description goes the full width of the page beneath my picture(s) and the price/Add to Basket button stuff is moved to the top right (see Layout-2). This would mean that, no matter how long my description, the picture, price and Add to Basket elements are always within easy reach for the customer and, importantly, my pages aren't wasted with lots of unhelpful white space.

Given that Cubecart seems to have no documentation and I can't work out from the template how the various divs work together, I'm at a loss as to how to make this edit. I'd be ok if the divs were just divs, but it seems to break the page if I just use my common html sense.

Any clues anybody, pretty please?

Thanks in advance.

layout-1.jpg

layout-2.jpg

Link to comment
Share on other sites

Please realize the right column can get quite tall, even without the product description.

In the template content.product.php, near line 32, find:

{if !empty($PRODUCT.description)} {$PRODUCT.description}{/if}

Change to:

{* {if !empty($PRODUCT.description)} {$PRODUCT.description}{/if} *}

Near lines 188-198, find:

                  {if $PRODUCT.product_weight > 0}
                  <tr>
                     <td>{$LANG.common.weight}</td>
                     <td>{$PRODUCT.product_weight}{$CONFIG.product_weight_unit}</td>
                  </tr>
                  {/if}
               </tbody>
            </table>
         </div>
         </div>
      </div>

After that, add:

<div class="row">
  <div class="small-12 columns">
{if !empty($PRODUCT.description)} {$PRODUCT.description}{/if}
  </div>
</div>

 

Link to comment
Share on other sites

The product description position falls to the lower of the gallery or the extra info and Buy Button.

This is what your suggested image shows, although, as I said, the extra info can still be quite long with having options, bulk pricing, and the product details table.

But, as you surmised, taking the description out of that column makes that column just that much shorter.

Link to comment
Share on other sites

  • 1 year later...

In the Mican skin template content.product.php:

Find near line 56:

	<h2>{$LANG.catalogue.product_description}</h2>
  		<div class="product_description">
		{$PRODUCT.description}

Change to:

{*	  <h2>{$LANG.catalogue.product_description}</h2>  *}
  		<div class="product_description">
{*			{$PRODUCT.description}  *}


Then, near line 118, find:

{if isset($PRODUCT.discounts)}

On a new blank line ABOVE that, add:

{* NEW PLACEMENT *}
	  <h2>{$LANG.catalogue.product_description}</h2>
			{$PRODUCT.description}
{*  *}

Because you edited a skin template, you may need to have CubeCart clear its cache (admin, Maintenance, Rebulid tab, Cear Cache).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...