Item Name to live underneath picture in product listing display

Hi,

I'd like the item name to be listed underneath the picture in the product listing.

Is there a way to break up the table row display from this:

To be grouped like this?

Product Listing Link:
http://ozwhistles.com/ozshop/index.php?main_page=index&cPath=2

Tell us what version of ZenCart you are using and provide a url so we can provide specific guidance.

Or look to your tpl_product_listing.php and rearrange as you want.

Hi Kobra,

I'm on version 1.3.0.2

Here's a link to one product listing page:
http://ozwhistles.com/ozshop/index.php?main_page=index&cPath=2

I installed the column layout grid mod, tried experimenting by setting it to display 1 column:

There's progress with the title appearing underneath the picture, however i still need to split the display for the price to always live on the right:

... another example if i wished to turn on the product description with the price box display always on the right:

I've reset the column layout feature display via admin to return back to the plain old rows again.

tpl_product_listing.php

I couldn’t find this file, only these ones:

tpl_modules_product_listing.php
product_listing.php

Maybe that's why i'm lost? My brain can see how the break up of the table row would work if i was working in html, I’m not great with being able to understand it in PHP yet. I've looked through various php files. The only one which makes vague sense to me is tpl_modules_products_all_listing.php where i can see some kind of reference to a table being set up.

I've spent 14hrs trying to nut it out but I'm not giving up. Enjoying the learning curve, though i do need to get up off my bottom and cook dinner for my family now. :laugh:

TIA

I apologize for the mis-lead on the file and it is the module....file that you found. I am terrible at php, and only muddle through it at best. I generally follow the calls and try to unravel the logic.

The product listing is a partial carrier over from the old table based version. There are 3 tables that display the info, all with the class of productListing-data.

In the tpl_module_product_listing.php file, this is called: tpl_tabular_display.php and these seems to define the contents tpl_list_box_contents.php and tpl_columnar_display.php. Now I have not looked at if these are changed or added to by the column-grid mod.

But these are places to begin to ferret this out.

You might get lucky and have another who is good at this post??

To get handles with which to manipulate the different pieces, you may want to look at this thread.

It is a very simple (two-line) edit to /templates/modules/product_listing.php. I don't know exactly how much power it gives, but I think it will help you.

Thanks Kobra & Glenn,

The product listing is a partial carrier over from the old table based version. There are 3 tables that display the info, all with the class of productListing-data.

I tried Glenn’s suggestion with the link above, that adds CSS Classes for the Table Columns. Some progress there as it breaks up the single grouping of the productListing-data boxes into individual groups;

productListing-data col1
productListing-data col2
productListing-data col3

for the headings too;

productListing-heading col1
productListing-heading col2
productListing-heading col3

I haven’t had luck trying to address the individual boxes at my end via CSS, though the

.col 1{
}

call in the stylesheet can help with the alignment of the columns. It was bloody hard to tweak the alignment of the table columns via CSS before this cool mod by dweingart.

I don’t think I’ll be able to address the issue of breaking up the display of the table via CSS, only via the PHP(whatever) stuff, though I sense having this single productListing group broken up into 3 different names, is bound to help in some fashion.

In the tpl_module_product_listing.php file, this is called: tpl_tabular_display.php and these seems to define the contents tpl_list_box_contents.php and tpl_columnar_display.php. Now I have not looked at if these are changed or added to by the column-grid mod.

Yeah… relative layman logic at this end can see how

tpl_modules_product_listing makes a call for the tpl_tabular_display.php

as I’m dealing with rows atm, **tpl_tabular_display.php **looks like where the action of creating a table lives within this loop. As for this file making a call to the **tpl_list_box_contents.php **– that makes vague sense too, though the name of the file is tpl_list_box_content.php (without an “s” after the word ‘content’). I’ve tried tweaking numbers and fooling around with trying to put various statements within tables. No luck via muddling about there. Perhaps the column layout grid mod did change things which has made things more difficult to nut out.

When I view the source code of the product listing page from the browser, I can see the formation of the table in the html, but I can’t understand where or how this table is generated within the php files I’ve looked at.

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="cat1Table" class="tabTable">
  <tr  class="productListing-rowheading">
   <th class="productListing-heading col1" center scope="col" id="listCell0-0">   Product Image   </th>
   
   <th class="productListing-heading col2"  scope="col" id="listCell0-1">   <a href="http://ozwhistles.com/ozshop/index.php?main_page=index&cPath=1&page=1&sort=2a" title="Sort products descendingly by Item Name" class="productListing-heading">Item Name</a>   </th>
   
   <th class="productListing-heading col3" right" width="80 scope="col" id="listCell0-2">   <a href="http://ozwhistles.com/ozshop/index.php?main_page=index&cPath=1&page=1&sort=3a" title="Sort products ascendingly by Price" class="productListing-heading">Price</a>   </th>
   
  </tr>
	  <tr  class="productListing-odd">
   <td class="productListing-data col1" center>   <a href="http://ozwhistles.com/ozshop/index.php?main_page=product_info&cPath=1&products_id=11"><img src="images/synD.jpg" alt="SYN D" title=" SYN D " width="175" height="27.7126099707" /></a>   </td>
   
   <td class="productListing-data col2" >   <h3 class="itemTitle"><a href="http://ozwhistles.com/ozshop/index.php?main_page=product_info&cPath=1&products_id=11">SYN D</a></h3><div class="listingDescription"></div>   </td>
   
   <td class="productListing-data col3" right>   $75.00<br /><br />Add: <input type="text" name="products_id[11]" value="0" size="4" /><br /><br />   </td>
   
  </tr>

If I can work out where the code generates the (x?)html table like this, so I can then have a stab at asking it to restructure the span of the 1st column to split into 2 rows etc, like I’ve done numerous times with website design via html, then maybe I have a chance to muddle my way there.

I can see how the **tpl_tabular_display.php **file contains the beginning of a table here that resembles the html one:

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="cat1Table(does some php echo thing here)" class="tabTable">

As for all the PHP stuff that lives underneath it all – I’m rather lost. With PHP things like row/col/params/$list_box_contents stuff, it’s over my head. Ask me what an array means and I bound to think it’s a ray of sunshine here! :D

You might get lucky and have another who is good at this post??

Yeah, I think that’s my only hope. After spending 4 days trying to nut it out – it’s time for me to back off and get on with productively addressing other parts of the shop, then search the forum for answers that might emerge out there later. I’m a very experienced designer, so yeah, this need to delve into the PHP for me to change the look of things is beyond my limit of rather basic programming skills. Signing off with:

10 Print “help!”
20 Goto 10

run

:laugh: :lol: :laugh:

LOL... Reminds me of college days playing with Fortran 4, conning other students into running our macro that simulated the command prompt, trapped a ^C and ignored it.... I guess hacking has gotten a bit more sophisticated since then :smartass:

/includes/modules/your_template/product_listing.php is the file that builds the array of product elements (model, name, description, image, price, etc.) to be displayed according to admin settings, and their class callouts. (This is where dweingart's mod works.) The header row and all data rows, distinguished as odd or even, are put in $list-box-contents. Table-cell contents alignment is hard-coded into several elements here, which may be overriding CSS declarations.