Jump to content

Show Product Rows like Latest Products


Guest

Recommended Posts

Hello All;

I have searched but couldn't find an answer, please direct me to a link if this already exists.

I would like to make the main product rows look more like the Latest Products (images with a price and url under). I am using Killer skins, sorry but no link for now.

Now, the default products in each category are shown in rows with alternating colors. I know how to change and remove the column names and tags, but I am stuck there.

Thanks,

Link to comment
Share on other sites

well, sorry but no link for now here either, and no specific instructions - but I will encourage you :)

This is easliy done. Just compare the latest products layout code from styleTemplates/content/index.tpl with the product list code in styleTemplates/content/viewCat.tpl

You need to re-code viewCat.tpl to do away with thae table, and use floating divisions instead as with latest products.

Link to comment
Share on other sites

Guest malcolmord

cool :)

You could add exactly what you done, then when others earch for it in the future they'll get the coded answer!

(Only cos I'm looking for it lol)

Mally

Link to comment
Share on other sites

Ok, what I did was open the ViewCat.tpl file in /skins/MySkin/styleTemplates/content.

I then just compared the structure from the Latest Products coding, as Markscarts mentioned earlier. Here's my code for ViewCat.tpl. I kept the original code (in red and commented out) and entered new code (in green).

<!-- BEGIN: view_cat -->

<div class="boxContent">

<span class="txtContentTitle">{TXT_CAT_TITLE}</span>

<br clear="all" />

<!-- BEGIN: sub_cats -->

<div id="subCats">

<!-- BEGIN: sub_cats_loop -->

<span class="subCat">

<a href="index.php?act=viewCat&catId={TXT_LINK_CATID}" class="txtDefault"><img src="{IMG_CATEGORY}" alt="{TXT_CATEGORY}" border="0" title="{TXT_CATEGORY}" /></a><br />

<a href="index.php?act=viewCat&catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a>

</span>

<!-- END: sub_cats_loop -->

</div>

<!-- END: sub_cats -->

<br clear="left" />

<!-- BEGIN: cat_img -->

<img src="{IMG_CURENT_CATEGORY}" alt="{TXT_CURENT_CATEGORY}" border="0" title="{TXT_CURENT_CATEGORY}" />

<!-- END: cat_img -->

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>

<div class="pagination">{PAGINATION}</div>

<!-- BEGIN: productTable -->

<!--table border="0" width="100%" cellspacing="0" cellpadding="0" class="tblList"-->

<!--tr-->

<!--td class="tdListTitle"><strong>{LANG_IMAGE}</strong></td-->

<!--td class="tdListTitle"><strong>{LANG_DESC}</strong></td-->

<!--td class="tdListTitle"><strong>{LANG_PRICE}</strong></td-->

<!--td class="tdListTitle"> </td-->

<!--/tr-->

<!--/table-->

<!-- BEGIN: products -->

<!--*****MOD start: Steve R Dec 23 2006 Replaced product tables with images**************************-->

<div style="float: left; text-align: center; width: 145px; height: 150px;">

<a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" alt="{TXT_TITLE}" title="{TXT_TITLE}" border="0"></a>

<br>

<a href="index.php?act=viewProd&productId={PRODUCT_ID}" class="txtDefault"><strong>{TXT_TITLE}</strong></a>

<br>

<class="(CLASS)">{TXT_PRICE}

<class="txtSale"><strong>{TXT_SALE_PRICE}</strong></a>

</div>

<!-- <tr>-->

<!-- <td align="center" class="{CLASS}"><a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" border="0" title="{TXT_TITLE}" /></a></td-->

<!-- <td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br /-->

<!-- {TXT_DESC}<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div></td-->

<!-- <td align="center" class="{CLASS}">{TXT_PRICE}-->

<!-- <div class="txtSale">{TXT_SALE_PRICE}</div></td-->

<!-- <td align="right" nowrap='nowrap' class="{CLASS}"-->

<!-- <form action="{CURRENT_URL}" method="post" name="prod{PRODUCT_ID}"-->

<!-- BEGIN: buy_btn -->

<!-- <input type="hidden" name="add" value="{PRODUCT_ID}" />-->

<!-- <input type="hidden" name="quan" value="1" /><a href="java script:submitDoc('prod{PRODUCT_ID}');" target="_self" class="txtButton">{BTN_BUY}</a><!-- END: buy_btn --> <a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td-->

<!--/tr-->

<!--******MOD end***********************-->

<!-- END: products -->

<!--/table-->

<!-- END: productTable -->

<!-- BEGIN: noProducts -->

<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->

<!--div class="pagination">{PAGINATION}</div-->

</div>

<!-- END: view_cat -->

I haven't cleaned up the code as of yet, but it works great. I also changed the width and added a height (see: <div style="float: left; text-align: center; width: 145px; height: 150px;">) to better control how the images line up in the page.

See what it looks like here. I also changed the amount of products to show from the Admin settings. Here, I am showing 8 products (4 per row).

Link to comment
Share on other sites

  • 2 weeks later...

I love this, looks great! But I have a glitch that I can't quite figure out. I need to know how to get a border around the products as a whole not individually, like it is on the front page for latest products (see image 1 below). That's the way I'd prefer to go but failing that how can I just move the products down some so they are below the border and better aligned (image 2 below)?

I'm okay with making small changes to things here and there but major coding is way over my head so please help if you can. I'm sure it's probably a very simple fix.

viewprod.jpg

Image 1

viewcat-2.jpg

Image 2

I'm using a slightly modified Legend skin if that helps. Thanks.

Link to comment
Share on other sites

  • 1 month later...
Guest lauriex

Thanks to these postings I successfully changed my product listing on my category page to the gallery style. RIght now I have one column of 8 products on the category page when I want 2 rows of 3 or 4 (if there is room) products. What settings/code do I change to obtain this?

Link to comment
Share on other sites

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Link to comment
Share on other sites

Guest lauriex

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Thanks!

I did use your width and I specified 8 products per page in the store setting. Here is the link to the page. http://www.misskriki.com/TEST_CubeCart/Cub...Cat&catId=2

I have altered the left/mid/right col widths in the layout CSS to be 165/460/120 px respectively so there should be enough room for 3 across.

I am also sending you link to live static site's current page which I am trying to emulate: http://www.misskriki.com/CategoryView/shop..._skirts_pg1.htm

Link to comment
Share on other sites

Lauriex,

I just realized your links where OK here. They were bad only in the PM. Thanks.

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Thanks!

I did use your width and I specified 8 products per page in the store setting. Here is the link to the page. http://www.misskriki.com/TEST_CubeCart/Cub...Cat&catId=2

I have altered the left/mid/right col widths in the layout CSS to be 165/460/120 px respectively so there should be enough room for 3 across.

I am also sending you link to live static site's current page which I am trying to emulate: http://www.misskriki.com/CategoryView/shop..._skirts_pg1.htm

Link to comment
Share on other sites

I noticed that you forgot to add the comment out text at the end of certain lines. You start with a <!-- but dont end with the required -->.

Check the script below and add the --> text (I put it in red)

****this is from your site*************

<!-- I DONT THINK THIS IS NEEDED: LINE BREAK ONLY? <br clear="left" /> -->

<img src="images/uploads/categname1.jpg" alt="Skirts" border="0" title="Skirts" />

<!--<table border="0" width="100%" cellspacing="0" cellpadding="3" class="tblList"-->

<!-- <tr-->

<!-- <td class="tdListTitle"><strong>Image</strong></td-->

<!-- <td class="tdListTitle"><strong>Description</strong></td-->

<!-- <td class="tdListTitle"><strong>Price</strong></td-->

<!-- <td class="tdListTitle"> </td-->

<!-- </tr>

<!--MOD start: Steve R Dec 23 2006 Replaced product tables with images-->

**********end of your script*********************

<div style="float: left; text-align: center; width: 145px; height: 150px;">

<a href="index.php?act=viewProd&productId=9" target="_self"><img src="/TEST_CubeCart/Cube/images/uploads/thumbs/thumb_Kriki_0157_detail.jpg" alt="Rich Champagne Stretch Velour Skirt" title="Rich Champagne Stretch Velour Skirt" border="0"></a>

<br>

<a href="index.php?act=viewProd&productId=9" class="txtDefault"><strong>Rich Champagne Stretch Velour Skirt</strong></a>

<br>

<div class="(CLASS)">$0.00

<div class="txtSale"><strong></strong></a>

</div>

*************************

Lauriex,

I just realized your links where OK here. They were bad only in the PM. Thanks.

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Thanks!

I did use your width and I specified 8 products per page in the store setting. Here is the link to the page. http://www.misskriki.com/TEST_CubeCart/Cub...Cat&catId=2

I have altered the left/mid/right col widths in the layout CSS to be 165/460/120 px respectively so there should be enough room for 3 across.

I am also sending you link to live static site's current page which I am trying to emulate: http://www.misskriki.com/CategoryView/shop..._skirts_pg1.htm

Link to comment
Share on other sites

Stever,

I just added this mod last nite to help clear up a product alignment issue and it worked beautifully! Very easy to do and easily adjustable....and it looks real nice too!

The only change I made was to add a little padding on each side to get my products placed exactly how I want:

<div style="float: left; text-align: center; width: 200px; height: 150px; padding-top: 30px; padding-left: 15px; padding-right: 15px;">

Thanks for posting it up! ;)

Link to comment
Share on other sites

Glad it worked out for you!

Stever,

I just added this mod last nite to help clear up a product alignment issue and it worked beautifully! Very easy to do and easily adjustable....and it looks real nice too!

The only change I made was to add a little padding on each side to get my products placed exactly how I want:

<div style="float: left; text-align: center; width: 200px; height: 150px; padding-top: 30px; padding-left: 15px; padding-right: 15px;">

Thanks for posting it up! :huh:

Link to comment
Share on other sites

Guest lauriex

Glad it worked out for you!

Stever,

I just added this mod last nite to help clear up a product alignment issue and it worked beautifully! Very easy to do and easily adjustable....and it looks real nice too!

The only change I made was to add a little padding on each side to get my products placed exactly how I want:

<div style="float: left; text-align: center; width: 200px; height: 150px; padding-top: 30px; padding-left: 15px; padding-right: 15px;">

Thanks for posting it up! :D

Thanks to all who successfully helped me out on this!

Link to comment
Share on other sites

  • 2 weeks later...
Guest gizzip

Ok, what I did was open the ViewCat.tpl file in /skins/MySkin/styleTemplates/content.

I then just compared the structure from the Latest Products coding, as Markscarts mentioned earlier. Here's my code for ViewCat.tpl. I kept the original code (in red and commented out) and entered new code (in green).

<!-- BEGIN: view_cat -->

<div class="boxContent">

<span class="txtContentTitle">{TXT_CAT_TITLE}</span>

<br clear="all" />

<!-- BEGIN: sub_cats -->

<div id="subCats">

<!-- BEGIN: sub_cats_loop -->

<span class="subCat">

<a href="index.php?act=viewCat&catId={TXT_LINK_CATID}" class="txtDefault"><img src="{IMG_CATEGORY}" alt="{TXT_CATEGORY}" border="0" title="{TXT_CATEGORY}" /></a><br />

<a href="index.php?act=viewCat&catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a>

</span>

<!-- END: sub_cats_loop -->

</div>

<!-- END: sub_cats -->

<br clear="left" />

<!-- BEGIN: cat_img -->

<img src="{IMG_CURENT_CATEGORY}" alt="{TXT_CURENT_CATEGORY}" border="0" title="{TXT_CURENT_CATEGORY}" />

<!-- END: cat_img -->

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>

<div class="pagination">{PAGINATION}</div>

<!-- BEGIN: productTable -->

<!--table border="0" width="100%" cellspacing="0" cellpadding="0" class="tblList"-->

<!--tr-->

<!--td class="tdListTitle"><strong>{LANG_IMAGE}</strong></td-->

<!--td class="tdListTitle"><strong>{LANG_DESC}</strong></td-->

<!--td class="tdListTitle"><strong>{LANG_PRICE}</strong></td-->

<!--td class="tdListTitle"> </td-->

<!--/tr-->

<!--/table-->

<!-- BEGIN: products -->

<!--*****MOD start: Steve R Dec 23 2006 Replaced product tables with images**************************-->

<div style="float: left; text-align: center; width: 145px; height: 150px;">

<a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" alt="{TXT_TITLE}" title="{TXT_TITLE}" border="0"></a>

<br>

<a href="index.php?act=viewProd&productId={PRODUCT_ID}" class="txtDefault"><strong>{TXT_TITLE}</strong></a>

<br>

<class="(CLASS)">{TXT_PRICE}

<class="txtSale"><strong>{TXT_SALE_PRICE}</strong></a>

</div>

<!-- <tr>-->

<!-- <td align="center" class="{CLASS}"><a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" border="0" title="{TXT_TITLE}" /></a></td-->

<!-- <td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br /-->

<!-- {TXT_DESC}<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div></td-->

<!-- <td align="center" class="{CLASS}">{TXT_PRICE}-->

<!-- <div class="txtSale">{TXT_SALE_PRICE}</div></td-->

<!-- <td align="right" nowrap='nowrap' class="{CLASS}"-->

<!-- <form action="{CURRENT_URL}" method="post" name="prod{PRODUCT_ID}"-->

<!-- BEGIN: buy_btn -->

<!-- <input type="hidden" name="add" value="{PRODUCT_ID}" />-->

<!-- <input type="hidden" name="quan" value="1" /><a href="java script:submitDoc('prod{PRODUCT_ID}');" target="_self" class="txtButton">{BTN_BUY}</a><!-- END: buy_btn --> <a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td-->

<!--/tr-->

<!--******MOD end***********************-->

<!-- END: products -->

<!--/table-->

<!-- END: productTable -->

<!-- BEGIN: noProducts -->

<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->

<!--div class="pagination">{PAGINATION}</div-->

</div>

<!-- END: view_cat -->

I haven't cleaned up the code as of yet, but it works great. I also changed the width and added a height (see: <div style="float: left; text-align: center; width: 145px; height: 150px;">) to better control how the images line up in the page.

See what it looks like here. I also changed the amount of products to show from the Admin settings. Here, I am showing 8 products (4 per row).

Link to comment
Share on other sites

Guest gizzip

Ok, what I did was open the ViewCat.tpl file in /skins/MySkin/styleTemplates/content.

I then just compared the structure from the Latest Products coding, as Markscarts mentioned earlier. Here's my code for ViewCat.tpl. I kept the original code (in red and commented out) and entered new code (in green).

<!-- BEGIN: view_cat -->

<div class="boxContent">

<span class="txtContentTitle">{TXT_CAT_TITLE}</span>

<br clear="all" />

<!-- BEGIN: sub_cats -->

<div id="subCats">

<!-- BEGIN: sub_cats_loop -->

<span class="subCat">

<a href="index.php?act=viewCat&catId={TXT_LINK_CATID}" class="txtDefault"><img src="{IMG_CATEGORY}" alt="{TXT_CATEGORY}" border="0" title="{TXT_CATEGORY}" /></a><br />

<a href="index.php?act=viewCat&catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a>

</span>

<!-- END: sub_cats_loop -->

</div>

<!-- END: sub_cats -->

<br clear="left" />

<!-- BEGIN: cat_img -->

<img src="{IMG_CURENT_CATEGORY}" alt="{TXT_CURENT_CATEGORY}" border="0" title="{TXT_CURENT_CATEGORY}" />

<!-- END: cat_img -->

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>

<div class="pagination">{PAGINATION}</div>

<!-- BEGIN: productTable -->

<!--table border="0" width="100%" cellspacing="0" cellpadding="0" class="tblList"-->

<!--tr-->

<!--td class="tdListTitle"><strong>{LANG_IMAGE}</strong></td-->

<!--td class="tdListTitle"><strong>{LANG_DESC}</strong></td-->

<!--td class="tdListTitle"><strong>{LANG_PRICE}</strong></td-->

<!--td class="tdListTitle"> </td-->

<!--/tr-->

<!--/table-->

<!-- BEGIN: products -->

<!--*****MOD start: Steve R Dec 23 2006 Replaced product tables with images**************************-->

<div style="float: left; text-align: center; width: 145px; height: 150px;">

<a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" alt="{TXT_TITLE}" title="{TXT_TITLE}" border="0"></a>

<br>

<a href="index.php?act=viewProd&productId={PRODUCT_ID}" class="txtDefault"><strong>{TXT_TITLE}</strong></a>

<br>

<class="(CLASS)">{TXT_PRICE}

<class="txtSale"><strong>{TXT_SALE_PRICE}</strong></a>

</div>

<!-- <tr>-->

<!-- <td align="center" class="{CLASS}"><a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" border="0" title="{TXT_TITLE}" /></a></td-->

<!-- <td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br /-->

<!-- {TXT_DESC}<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div></td-->

<!-- <td align="center" class="{CLASS}">{TXT_PRICE}-->

<!-- <div class="txtSale">{TXT_SALE_PRICE}</div></td-->

<!-- <td align="right" nowrap='nowrap' class="{CLASS}"-->

<!-- <form action="{CURRENT_URL}" method="post" name="prod{PRODUCT_ID}"-->

<!-- BEGIN: buy_btn -->

<!-- <input type="hidden" name="add" value="{PRODUCT_ID}" />-->

<!-- <input type="hidden" name="quan" value="1" /><a href="java script:submitDoc('prod{PRODUCT_ID}');" target="_self" class="txtButton">{BTN_BUY}</a><!-- END: buy_btn --> <a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td-->

<!--/tr-->

<!--******MOD end***********************-->

<!-- END: products -->

<!--/table-->

<!-- END: productTable -->

<!-- BEGIN: noProducts -->

<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->

<!--div class="pagination">{PAGINATION}</div-->

</div>

<!-- END: view_cat -->

I haven't cleaned up the code as of yet, but it works great. I also changed the width and added a height (see: <div style="float: left; text-align: center; width: 145px; height: 150px;">) to better control how the images line up in the page.

See what it looks like here. I also changed the amount of products to show from the Admin settings. Here, I am showing 8 products (4 per row).

Link to comment
Share on other sites

Guest angeland

I got the same problem and confused ....

I read through the thread for dozen times,

and couldn't find any solutions regarding this.

I tried every possible ways, but still can't make it.... :)

Can anyone give me a helping hand?

Thanks!

I love this, looks great! But I have a glitch that I can't quite figure out. I need to know how to get a border around the products as a whole not individually, like it is on the front page for latest products (see image 1 below). That's the way I'd prefer to go but failing that how can I just move the products down some so they are below the border and better aligned (image 2 below)?

I'm okay with making small changes to things here and there but major coding is way over my head so please help if you can. I'm sure it's probably a very simple fix.

viewprod.jpg

Image 1

viewcat-2.jpg

Image 2

I'm using a slightly modified Legend skin if that helps. Thanks.

Link to comment
Share on other sites

  • 4 weeks later...

Great code, but I'm having a bit of a problem I cannnot figure out. My background of the division wants to end on the row above the last one for some reason. I made the product boxes have a white background to get around it for now, but need to correct. Happening in both IE7 and Firefox.

Take a look at http://www.jewelrygemshop.com/index.php?ac...at&catId=29 and you can see, the final item, the wolf head pendant, sticks out below the background. Same on every page and cannot figure out why?

Also would love a small gap between the item borders, but haven't figure that one out either :)

Link to comment
Share on other sites

I'll have a look at it tonight (1pm now). Did you copy the code as indicated in RED/GREEN in the earlier posts? Sometimes the width of the images and spacing is wider than the page box remaining after the side baoxes are added. Just check this value and see if it is good.

Just a guide (for others reading), take the overall page width (say 800) and remove each left and/or right side box (2 x 175, or 1 x 175) and divide by the number of thumbnails you want to put in a row. Dont forget to include any cell padding or spacing as well.

My grade 8 teacher was right that I would need algebra one day!!

Link to comment
Share on other sites

Yes, I corrected for the width/height of my images and added a bit of padding to center it better. Still some work to do on that, but the last one sticking out over the background division is the annoying thing. Cannot seem to find a reason for it either in styles or viewcat. Must be missing something :)

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