Jump to content

Category Layout fix


SentiJB
 Share

Recommended Posts

Using : e-Sharp Skin 

Php code for categories : 

<h1>{$category.cat_name}</h1>

{$category.cat_desc}

{if $SUBCATS}
<div id="subcategories">
	{foreach from=$SUBCATS item=subcat}
	<div class="subcategory">
		<a href="{$subcat.url}" title="{$subcat.cat_name}">
			<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" />
			{$subcat.cat_name}
		</a>
	</div>
	{/foreach}
</div>
{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}
<form action="{$VAL_SELF}" method="post" class="control">
	<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>
	{if isset($SORTING)}
	<span class="sort">
	{$LANG.form.sort_by}
	<select name="sort" class="auto_submit">
		<option value="">{$LANG.form.please_select}</option>
		{foreach from=$SORTING item=sort}
		<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>
		{/foreach}
	</select>
	<input type="submit" value="{$LANG.form.sort}" />
	</span>
	{/if}
</form>
{/if}

{if isset($PRODUCTS)}
<div class="product-list">
	{foreach from=$PRODUCTS item=product}
	<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="product addForm" id="P{$product.product_id}">
		<p class="image">
			<a href="{$product.url}" title="{$product.name}">
	  			<img src="{$product.thumbnail}" alt="{$product.name}" />
			</a>
			{if $product.review_score}
			<span class="rating">
				{for $i = 1; $i <= 5; $i++}
				{if $product.review_score >= $i}
				<span class="icon icon-star3"></span>
				{elseif $product.review_score > ($i - 1) && $product.review_score < $i}
				<span class="icon icon-star2"></span>
				{else}
				<span class="icon icon-star"></span>
				{/if}
				{/for}
			</span>
			{/if}
		</p>
		<div class="info">
			<p class="title"><a href="{$product.url}" title="{$product.name}">{$product.name|truncate:40:"&hellip;"}</a></p>
			
			{if $product.ctrl_sale}
			<p class="price"><span class="price_previous">{$product.price}</span> <span class="price_sale">{$product.sale_price}</span></p>
			{else}
			<p class="price">{$product.price}</p>
			{/if}
			
			<p class="actions">
				<a href="{$product.url}" title="{$product.name}">{$LANG.common.info}</a>
				{if $product.ctrl_purchase && !$CATALOGUE_MODE}
				<input type="hidden" name="add[{$product.product_id}][quantity]" value="1" class="quantity" />
				<input type="submit" value="{$LANG.catalogue.buy}" class="btn button_add_basket" onclick="$.add2cart('P{$product.product_id}')" />
				{elseif $product.out}
				<input type="button" value="{$LANG.catalogue.out_of_stock_short}" class="btn disabled" disabled="disabled" />
				{/if}
			</p>
		</div>
	</form>
	{/foreach}
</div>
{else}
{if !$SUBCATS}<p>{$LANG.category.no_products}</p>{/if}
{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}
<form action="{$VAL_SELF}" method="post" class="control">
	<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>
	{if isset($SORTING)}
	<span class="sort">
	{$LANG.form.sort_by}
	<select name="sort" class="auto_submit">
	  <option value="">{$LANG.form.please_select}</option>
	  {foreach from=$SORTING item=sort}
	  <option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>
	  {/foreach}
	</select>
	<input type="submit" value="{$LANG.form.sort}" />
	</span>
	{/if}
</form>
{/if}

How can i fix the layout so its nice

eg : http://www.allesvooruwhuisdier.com/garnalen

 

Link to comment
Share on other sites

Try this:

	{foreach from=$SUBCATS item=subcat}
	<div class="subcategory product-list">
		<a class="image" href="{$subcat.url}" title="{$subcat.cat_name}"><img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /></a>
		<p><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></p>
	</div>
	{/foreach}

This evens out the sub-cat listing, except for a category name that takes two lines.

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.

 Share

×
×
  • Create New...