Show Product Rows like Latest Products

December 23, 2006

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,

markscarts · December 23, 2006

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.

December 23, 2006

It's exactly what I was doing just after I send the post, and it seems to work great. Just need to add the code to get multiple rows showing. Thanks for your help!! :)

December 23, 2006

Doooh!!

I just needed to change the amount of products per page in the Admin section. All works great now, thanks!!

markscarts · December 24, 2006

cool :)

December 24, 2006

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

December 24, 2006

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

<div class="boxContent">
<span class="txtContentTitle">{TXT_CAT_TITLE}</span>
<br clear="all" />

<div id="subCats">

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

</div>

<br clear="left" />

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

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>
<div class="pagination">{PAGINATION}</div>












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











 <a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td-->







<div>{TXT_NO_PRODUCTS}</div>



</div>

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

markscarts · December 24, 2006

Looks great, Stever

This is the "Gallery Style" product list :D

January 1, 2007

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.

Image 1

Image 2

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

February 27, 2007

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?

March 1, 2007

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.

March 2, 2007

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

March 5, 2007

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

March 5, 2007

I noticed that you forgot to add the comment out text at the end of certain lines. You start with a .

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

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

<!-- </tr>

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

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

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

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

March 8, 2007

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! ;)

March 12, 2007

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!

March 15, 2007

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!

Thanks to all who successfully helped me out on this!

March 30, 2007

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


<div class="boxContent">
<span class="txtContentTitle">{TXT_CAT_TITLE}</span>
<br clear="all" />

<div id="subCats">

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

</div>

<br clear="left" />

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

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>
<div class="pagination">{PAGINATION}</div>












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











 <a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td-->







<div>{TXT_NO_PRODUCTS}</div>



</div>


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

April 1, 2007

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


<div class="boxContent">
<span class="txtContentTitle">{TXT_CAT_TITLE}</span>
<br clear="all" />

<div id="subCats">

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

</div>

<br clear="left" />

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

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>
<div class="pagination">{PAGINATION}</div>












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











 <a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td-->







<div>{TXT_NO_PRODUCTS}</div>



</div>


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

April 6, 2007

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.

Image 1

Image 2

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

April 30, 2007

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

April 30, 2007

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

April 30, 2007

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

April 30, 2007

solved my second problem by adding margin: 4px into the division attributes. puts some spacing between each item. See http://www.jewelrygemshop.com/index.php?ac...Cat&catId=8 for an example. Still trying to solve the bottom background problem, but 1 out of 2 fixed at least!

markscarts · April 30, 2007

Mysty, there may be more than one problem there. For the first problem, look for the place that this text is generated and place a <br clear="all" /> just above it:

Usually Ships in 5-10 days

Archived

Show Product Rows like Latest Products

Recommended Posts

Guest

Share this post

Link to post

Share on other sites

markscarts 3

Share this post

Link to post

Share on other sites

Guest

Share this post

Link to post

Share on other sites

Guest

Share this post

Link to post

Share on other sites

markscarts 3

Share this post

Link to post

Share on other sites

Guest malcolmord

Share this post

Link to post

Share on other sites

Guest

Share this post

Link to post

Share on other sites

markscarts 3

Share this post

Link to post

Share on other sites

Guest Raimy

Share this post

Link to post

Share on other sites

Guest lauriex

Share this post

Link to post

Share on other sites

Guest

Share this post

Link to post

Share on other sites

Guest lauriex

Share this post

Link to post

Share on other sites

Guest

Share this post

Link to post

Share on other sites

Guest

Share this post

Link to post

Share on other sites

Guest TEL

Share this post

Link to post

Share on other sites

Guest

Share this post

Link to post

Share on other sites

Guest lauriex

Share this post

Link to post

Share on other sites

Guest gizzip

Share this post

Link to post

Share on other sites

Guest gizzip

Share this post

Link to post

Share on other sites

Guest angeland