Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Product Listing to a completely different style

Product Listing to a completely different style

Locked

Views: 6,727

Results 1 to 13 of 13
This thread is locked. New replies are disabled.
15 Jan 2007, 8:51 PM
#2
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,606
Plugin Contributions:
0

Re: Product Listing to a completely different style

Columnar/grid listing mod in the downloads section

15 Jan 2007, 9:03 PM
#3
sopretty avatar

sopretty

New Zenner

Join Date:
Jan 2006
Location:
Vancouver, BC
Posts:
45
Plugin Contributions:
0

Re: Product Listing to a completely different style

Yes indeed.

You would need to add the Column Layout Grid for Product Listing
http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=77
and then, in your Admin, go to Configuration, Product Listing, Product Listing - Columns Per Row and set it to 4. To show 12 products per Product Listing page set Products Listing- Number Per Page to 12.

The thumbnails are just images, no text: http://www.uniquesettings.com/catalog/images/WB_1027.gif
so you would have to turn off everything but Configuration, Product Listing, Display Product Image. And your Small Image Width and Height are found in Configuration, Images.

To show just the Category Title, go to Configuration, Product Listing and turn off Include Product Listing Sub Categories Image and whatever else you don't want to see (like Include Product Listing Alpha Sorter Dropdown).

And so on and so forth. Hope that helps set you in the right direction.

16 Jan 2007, 12:41 PM
#4
outlawlb avatar

outlawlb

New Zenner

Join Date:
Jan 2007
Posts:
86
Plugin Contributions:
0

Re: Product Listing to a completely different style

Yes this has helped very much.

I just have a few more questions:

I can not find: Number Per Page

I have these in product listing:

Display Product Image 1
Display Product Manufacturer Name 0 Info
Display Product Model 0 Info
Display Product Name 2 Info
Display Product Price/Add to Cart 3 Info
Display Product Quantity 0 Info
Display Product Weight 0 Info
Display Product Price/Add to Cart Column Width 125 Info
Display Category/Manufacturer Filter (0=off; 1=on) 1 Info
Prev/Next Split Page Navigation (1-top, 2-bottom, 3-both) 3 Info
Display Product Listing Default Sort Order Info
Display Product Add to Cart Button (0=off; 1=on; 2=on with Qty Box per Product) 1 Info
Display Multiple Products Qty Box Status and Set Button Location 3 Info
Display Product Description 0 Info
Product Listing Ascending Sort Order + Info
Product Listing - Layout Style columns Info
Product Listing Descending Sort Order - Info
Product Listing - Columns Per Row 4 Info
Include Product Listing Alpha Sorter Dropdown true Info
Include Product Listing Sub Categories Image true Info
Include Product Listing Top Categories Image true Info
Show SubCategories on Main Page while navigating

But I also want to remove the Call for price from these listings without removing the call for price on the actual individual product page.

And I would also like to style the items and info to be boxed, where would I find that in the stylesheet?

My last question is about the popup you get when clicking on an item from Unique, how might I do that?

16 Jan 2007, 8:00 PM
#5
sopretty avatar

sopretty

New Zenner

Join Date:
Jan 2006
Location:
Vancouver, BC
Posts:
45
Plugin Contributions:
0

Re: Product Listing to a completely different style

Outlawlb:

I can not find: Number Per Page

Oh, sorry, that is in Configuration, Maximum Values.

Outlawlb:

But I also want to remove the Call for price from these listings without removing the call for price on the actual individual product page.

I'm not sure on this one... would that have to do with turning everything but Configuration, Product Listing, Display Product Image? Display Product Price/Add to Cart for instance?

Outlawlb:

And I would also like to style the items and info to be boxed, where would I find that in the stylesheet?

Not sure what you are asking...

Outlawlb:

My last question is about the popup you get when clicking on an item from Unique, how might I do that?

Well, that pop-up is like a product info page in Zen - sort of. You would probably have to add some javascript to your tpl_modules_product_listing.php page that told the browser to open product info pages in a new, smaller window. You would also have to modify the product info pages to not show any of your navigation, header, footer, etc. I imagine it could be done but I have absolutely no idea where you would even start with that... I wouldn't bother, way too much effort for something that really adds no value to the navigation of your site.

16 Jan 2007, 11:34 PM
#6
sopretty avatar

sopretty

New Zenner

Join Date:
Jan 2006
Location:
Vancouver, BC
Posts:
45
Plugin Contributions:
0

Re: Product Listing to a completely different style

Oh, and your number of columns per row (Configuration, Product Listing, Product Listing - Columns Per Row) has to divide equally into your number per page (Configuration, Maximum Values, Products Listing- Number Per Page).

So, if you want 4 small images per row, your number per page has to be 4 or 8 or 12 or 16, etc.

19 Jan 2007, 4:29 AM
#7
vivaraquel avatar

vivaraquel

Zen Follower

Join Date:
Sep 2004
Location:
Australia
Posts:
305
Plugin Contributions:
0

Re: Product Listing to a completely different style

sopretty:

Yes indeed.

You would need to add the Column Layout Grid for Product Listing
http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=77
and then, in your Admin, go to Configuration, Product Listing, Product Listing - Columns Per Row and set it to 4. To show 12 products per Product Listing page set Products Listing- Number Per Page to 12.

The thumbnails are just images, no text: http://www.uniquesettings.com/catalog/images/WB_1027.gif
so you would have to turn off everything but Configuration, Product Listing, Display Product Image. And your Small Image Width and Height are found in Configuration, Images.

To show just the Category Title, go to Configuration, Product Listing and turn off Include Product Listing Sub Categories Image and whatever else you don't want to see (like Include Product Listing Alpha Sorter Dropdown).

And so on and so forth. Hope that helps set you in the right direction.

I'd like to have 2 rows of products but I have no Product Listing - Columns Per Row anyware, not even in maximum values. Can someone give an exact location for chnaging this? I think I may go blind LOL

Thank you.

19 Jan 2007, 5:29 PM
#8
sopretty avatar

sopretty

New Zenner

Join Date:
Jan 2006
Location:
Vancouver, BC
Posts:
45
Plugin Contributions:
0

Re: Product Listing to a completely different style

Did you do the first part and follow the instructions that come with the contribution?

You would need to add the Column Layout Grid for Product Listing
http://www.zen-cart.com/index.php?ma...products_id=77
If you did, the Product Listing - Columns Per Row should be in your Maximum Values...

19 Jan 2007, 9:05 PM
#9
vivaraquel avatar

vivaraquel

Zen Follower

Join Date:
Sep 2004
Location:
Australia
Posts:
305
Plugin Contributions:
0

Re: Product Listing to a completely different style

I don't understnad what that is about. How do I add the Column Layout Grid for Product Listing?

thank you.

19 Jan 2007, 9:35 PM
#10
sopretty avatar

sopretty

New Zenner

Join Date:
Jan 2006
Location:
Vancouver, BC
Posts:
45
Plugin Contributions:
0

Re: Product Listing to a completely different style

Well, you would need to do a search for "Column Layout Grid for Product Listing" which would lead you to:
http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=77

You need to download the contribution and add it to your site with the instructions provided in the download. Once you have done that, the Product Listing - Columns Per Row will be in your Maximum Values.

You'll find all sorts of add ons for Zen in the downloads section of the site (click the downloads link at the top of this page).

20 Jan 2007, 11:45 PM
#11
outlawlb avatar

outlawlb

New Zenner

Join Date:
Jan 2007
Posts:
86
Plugin Contributions:
0

Re: Product Listing to a completely different style

sopretty:

Oh, sorry, that is in Configuration, Maximum Values.

I'm not sure on this one... would that have to do with turning everything but Configuration, Product Listing, Display Product Image? Display Product Price/Add to Cart for instance?

Not sure what you are asking...

Well, that pop-up is like a product info page in Zen - sort of. You would probably have to add some javascript to your tpl_modules_product_listing.php page that told the browser to open product info pages in a new, smaller window. You would also have to modify the product info pages to not show any of your navigation, header, footer, etc. I imagine it could be done but I have absolutely no idea where you would even start with that... I wouldn't bother, way too much effort for something that really adds no value to the navigation of your site.

The boxed is basically having a little border around each of the items in the main listing.

The call for price image I believe I have removed from listing (though not 100%, which combo of switches did it).

Oh on the product popup I meant something such as when they click on the image to see a larger one that that popup has data displayed in that window.

21 Jan 2007, 1:23 AM
#12
sopretty avatar

sopretty

New Zenner

Join Date:
Jan 2006
Location:
Vancouver, BC
Posts:
45
Plugin Contributions:
0

Re: Product Listing to a completely different style

On your example site, the white border on the images on both the product listing page and the product info pop up pages is actually part of the image so you would add that in Photoshop (or whatever image editing software you use).
http://www.uniquesettings.com/catalog/images/WB_1027.gif
http://www.uniquesettings.com/catalog/images/WB_1027D.gif

You could do something similar in Zen's stylesheet but it would surround the whole image. Say you wanted to put a 1px black border around your images in your product listing, you would add this to your stylesheet:

.centerBoxContentsProducts img {border: 1px solid #000;}

so that any images within the centerBoxContentsProduct class will have a black border. To do the same on your Product Info pages:

#productMainImage img {border: 1px solid #000}

I'm still confused as to what you are asking about the pop up... the only pop up I see on your example site is when you click on a thumbnail image, a pop up comes with the image and product description.
http://www.uniquesettings.com/detail.php?product_id=3399
If that is what you mean, as I explained before, that would be the equivalent of your Product Info page in Zen...

21 Jan 2007, 9:52 PM
#13
outlawlb avatar

outlawlb

New Zenner

Join Date:
Jan 2007
Posts:
86
Plugin Contributions:
0

Re: Product Listing to a completely different style

Thank you.

I do agree with that as well, as it is the same.