Thread: Products Layout

Results 1 to 9 of 9
  1. #1
    Join Date
    Sep 2008
    Location
    Cleethorpes
    Posts
    1,229
    Plugin Contributions
    6

    red flag Products Layout

    Hi I'm trying to change the layout of the products listing table.

    This is what I would like the code to look like, or something similar:

    <table width="700" border="0" cellspacing="0" cellpadding="10">
    <tr>
    <td><table width="700" border="0" cellspacing="0" cellpadding="10">
    <tr>
    <td width="500">PRODUCT INFORMATION </td>
    <td width="200"><div align="center">PRODUCT IMAGE </div></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><table width="700" border="0" cellspacing="0" cellpadding="10">
    <tr>
    <td width="200">PRODUCT IMAGE </td>
    <td width="500"><div align="center">PRODUCT INFORMATION</div></td>
    </tr>
    </table></td>
    </tr>
    </table>


    I would like to us this sort of layout rather than the standard three column layout.

    Please can somebody help me with this?

    Many Thanks

    Nick
    Attached Images Attached Images  

  2. #2
    Join Date
    Feb 2009
    Posts
    95
    Plugin Contributions
    0

    Default Re: Products Layout

    You should be able to achieve this layout fairly easy by turning off both left and right side boxes in admin. Then you will want to set the number of product to display per row to 1. Then set a size for your images.
    The rest of the look can be accomplished with css styling.
    However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
    And then assign some style for example:
    .div1 img {
    float: right;
    border-left: 2px solid brown;
    }
    .div2 img {
    float: left;
    border-right: 2px solid brown;
    }

  3. #3
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Products Layout

    You're not going to get the size/weight attribute to work on the product listing page without some advanced PHP coding. It has been done, but is complex.

  4. #4
    Join Date
    Sep 2008
    Location
    Cleethorpes
    Posts
    1,229
    Plugin Contributions
    6

    red flag Re: Products Layout

    Quote Originally Posted by jwitt98 View Post
    You should be able to achieve this layout fairly easy by turning off both left and right side boxes in admin. Then you will want to set the number of product to display per row to 1. Then set a size for your images.
    The rest of the look can be accomplished with css styling.
    However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
    And then assign some style for example:
    .div1 img {
    float: right;
    border-left: 2px solid brown;
    }
    .div2 img {
    float: left;
    border-right: 2px solid brown;
    }
    Ok only just got this. Do you know the code I will need to put in place?

  5. #5
    Join Date
    Sep 2008
    Location
    Cleethorpes
    Posts
    1,229
    Plugin Contributions
    6

    red flag Re: Products Layout

    Quote Originally Posted by jwitt98 View Post
    You should be able to achieve this layout fairly easy by turning off both left and right side boxes in admin. Then you will want to set the number of product to display per row to 1. Then set a size for your images.
    The rest of the look can be accomplished with css styling.
    However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
    And then assign some style for example:
    .div1 img {
    float: right;
    border-left: 2px solid brown;
    }
    .div2 img {
    float: left;
    border-right: 2px solid brown;
    }

    Ok all my left and right sideboxes are turned off so how do where do I go to set the number of products to display to 1?

  6. #6
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: Products Layout

    Quote Originally Posted by jwitt98 View Post
    ... However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
    And then assign some style for example:
    .div1 img {
    float: right;
    border-left: 2px solid brown;
    }
    .div2 img {
    float: left;
    border-right: 2px solid brown;
    }
    Actually the Zen Cart code already contains classes for doing this. They're not in the stylesheet, but there's lots of classes that are not in the stylesheet but ready for use in the code if you need them. So add these two elements to your stylesheet.css and edit as suggested above.

    .productListing-odd { }
    .productListing-even { }

    I use them for setting an alternate colour for each row, but I'm going to look into doing something similar to what you're trying to do. I like that look a lot.

    Rob

  7. #7
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Products Layout

    Unless you have installed the Column Grid mod, you will only have one product per row - no resetting needed.

    Come to think of it, you will need to install Column Grid (from Free Addons) and set to "columns" and 1 per row, so that you can have the flexibility to move elements - you can't float a table cell. You might be able to float the image inside the cell, but I don't think the rest of the content will move to fit it.
    You will need to edit /includes/modules/your_template/product_listing.php to give classes to all of the listing elements so they can be addressed individually.

    Your best bet may be to look for the Flexible Product Listing mod I posted in the forum (not in Free Addons yet), and install that (includes Column Grid). With some guidance, I think you can use that to get the layout you want without having to add more than a line or two of code, and possibly all just in the stylesheet.

    I'll be back late this evening to answer any more questions.

  8. #8
    Join Date
    Sep 2008
    Location
    Cleethorpes
    Posts
    1,229
    Plugin Contributions
    6

    red flag Re: Products Layout

    Quote Originally Posted by rstevenson View Post
    Actually the Zen Cart code already contains classes for doing this. They're not in the stylesheet, but there's lots of classes that are not in the stylesheet but ready for use in the code if you need them. So add these two elements to your stylesheet.css and edit as suggested above.

    .productListing-odd { }
    .productListing-even { }

    I use them for setting an alternate colour for each row, but I'm going to look into doing something similar to what you're trying to do. I like that look a lot.

    Rob
    Go for it Rob, I'd already worked out the classes and have managed to do this anyway. The bit I'm struggling with is the actual layouts of the product listings. Not so much the background of them.

    Thanks Though

    Nick

  9. #9
    Join Date
    Feb 2009
    Posts
    95
    Plugin Contributions
    0

    Default Re: Products Layout

    Nick,
    Please ignore what I said in my first post.
    I was thinking you were referring to the products listings on the main page, shopping cart page etc. where the featured products, new products etc. are listed. Those are laid out using divs and css.

    It's obvious to me now that you are trying to change the layout of the actual products listing page. That page is laid out using tables.

    Sorry, my bad. I should have read your post more clearly. What the others are saying seems to be the route to go.

 

 

Similar Threads

  1. Replies: 2
    Last Post: 23 Mar 2012, 03:28 PM
  2. change search results layout and all products layout
    By gfcordnance in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 1 Mar 2010, 04:50 AM
  3. Change Category Page Layout to New Products Layout
    By tonemap in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 22 Jan 2010, 11:30 PM
  4. Major issues with Column Layout / Grid Layout for Products Listing
    By kinget in forum All Other Contributions/Addons
    Replies: 5
    Last Post: 27 Jul 2007, 10:11 PM
  5. New Products Layout vs. Product Listing layout
    By tcschmit in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 25 Apr 2007, 05:07 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg