Product Listing Display > Insert Granular Markup

Goal: Add markup to each product in the product listing (aka catalog) display.

Problem: Currently the product price and other details are dumped in as raw text with break tags making it problematic to style individually via CSS.

<div class="centerBoxContentsProducts centeredContent back">

     <a href="#"><img class="listingProductImage" /></a>
     <br/>

     $19.00
     <br/>
     <br/>

     <a href="#"><img class="listingBuyNowButton" /></a>
     <br/>
     <br/>
     <br/>

     <h3 class="itemTitle"><a href="#">Item Title</a></h3>

     <div class="listingDescription"/>

</div>

I currently understand the product details to be loaded by "tpl_columnar_display.php". Unfortunately, the template file contains a loop of functions and no HTML to modify.

How can I separate out the various content that is being pulled from the database by the function so that I can insert additional HTML elements (tags) and properties ("id", "class").

Ideally the resulting code might look something like:

<div class="productItem">

     <a href="#">
          <img class="listingProductImage" />

          <h3 class="itemTitle">Item Name</h3>

          <p class="itemPrice">$0.00</p>
     </a>

     <a href="#" class="listingBuyNow">
          <img class="listingBuyNowButton" />
     </a>

</div>

By modifying a copy of "product_listing.php" as a custom module, I was able to add the markup I wanted and remove the break elements (<br/>).

However, I still have not identified what controls the order of the product details. This is probablt done in the Admin using a Sort Order configuration. I'll keep looking.

Finally figured out how to swap the order of the product details. I would feel foolish except that the reason it was not obvious how to do this is due to the poor interface design of the Admin panel.

I confused the on/off state (0/1) with the sort order (0, 1, 2, 3, etc.). This is why it is terrible that binary programmer speak is used in what should be a user-friendly, non-programmer, admin interface.

The Admin should be redesigned to use radio buttons for on/off states in all instances. This would remove the confusion I mentioned above.

And on items that need both an on/off state and a sort order assignment, the interface should include both settings as separate inputs in one form. So if you need to adjust the Product Item Name, you select it and are offered a form in the sidebar with two options, a radio button pair for on/off and a input field for the sort order.

Simplicity is great unless it so severely compromises clarity as to render an interface useless.

hi,

so how did you finally manage to change the order of product details.

I would like to achieve a similar result in my product listings.

Thanks

Admin > Configuration > Product Listing >
Display Product Image
Display Product Manufacturer Name
Display Product Model
Display Product Name
Display Product Price/Add to Cart
Display Product Quantity
Display Product Weight

and a few others in the same page. These can be set to 0 for "off" or a number for the display order.

Hi,

I thought so but even after changing their order, its not getting effected on my product listing page. But by making them 0, the elements don't get displayed on the product listing page.

So only the sort order is not working that means. Any particular code i should check in my product_listing.php. I have modified it and put in my templates folder's module folder.

thanks

Post a link to your site so we can see how it displays.
What happens if you switch back to the Classic template? Does it work then?

hi gjh42,

thanks for your reply. Unfortunately I'm unable to post a link since its on local server.

What I have done is attached the screenshot of the product listing for one of the categories.

As you can see the product listing has been customised with the required clients color choice and requirements.

What I would like to do is shift the data up or down, ie- move the 3rd line which is the manufacturer's name to the first line, then the product's name and then the model no followed by pricing as shown and end with the add to cart button.

I just wanna set the order in which the data is displayed. I wanted to play around with the product_listing.php by reordering the code as in call the Manufacturer case first and then the product name and so on. But i'm not sure if this causes problems on any other pages.

thank you for your kind help.

-- Also I forgot to add that by switching into the classic template, i don't see anything...i mean not even the homepage. So i'm not going to worry about that because the site works fine with the customised template.

Changing the order of element "case" blocks in product_listing.php will not accomplish anything, as the order of display is set by the admin switches. This info is retrieved and used in product_listing.php to output the elements in the correct order.

It is possible that your template has eliminated the standard code and hard-coded the elements. If you post your product_listing.php (in ```
[php] and [/php]

thanks for your reply. Yes i realised that moving them around was not going to help.

I then compared my product_listing file with the original one in template_default and found that one of the most important line was missing - the 'asort' command just before the switch.

So I put in the command and everything is working now. Thank you for your guidance.

thanks