Separate Product Info (text) from Image?

Hi there,

One more help request... Currently it seems the product info (text) is included below the product image directly. How do I wrap is around a DIV to be able to design it through CSS?

Many Thanks

Which page are you talking about? The product info page has plenty of divs to control all the elements. The product listing page has fewer options, and a bit of added code may be required, depending on what you want to do.

You say the text is below the image; are you using the column grid mod? That will take some different treatment than the standard listing format.

On the hompage, a product listing has the following structure:

<div style="width: 100%;" class="centerBoxContentsFeatured centeredContent back">
<a href="http://localhost/zen/index.php?main_page=product_music_info&products_id=169">
<img width="100" height="75" title=" Sample of Product Music Type " alt="Sample of Product Music Type" src="images/samples/abram_games_2.jpg"/>
</a>
<br/>
<a href="http://localhost/zen/index.php?main_page=product_music_info&products_id=169">Sample of Product Music Type</a>
<br/>
$3.95
</div>

Do you see how Product Image (Blue), Description (Green) and Price (Orange) are structured?

I want to wrap the title and price (description too, missing in this case) into DIV tags.

Edited to add: Not using any Mods.

Many thanks

Ok, you're talking about a centerbox, which is not the same as a listing page. That will be a different file to edit.

In /includes/modules/featured_products.php, this section (around line 53) creates the content for each product. You can add spans or add classes to link elements as required.```php
while (!$featured_products->EOF) {

$products_price = zen_get_products_display_price($featured_products->fields['products_id']);

$list_box_contents[$row][$col] = array('params' =>'class="centerBoxContentsFeatured centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => (($featured_products->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'products_id=' . $featured_products->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], $featured_products->fields['products_name'], IMAGE_FEATURED_PRODUCTS_LISTING_WIDTH, IMAGE_FEATURED_PRODUCTS_LISTING_HEIGHT) . '</a><br />') . '<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'products_id=' . $featured_products->fields['products_id']) . '">' . $featured_products->fields['products_name'] . '</a><br />' . $products_price);

$col ++;

Yep, I figured that part, but I just don't know how wrap "products_name" and "$products_price" with DIV tags without breaking the php function.

(Sorry for being PHP dumb!)

I think I figured it out:

. '</a><br /><div>' . $products_price . '</div>');

Right?

$list_box_contents[$row][$col] = array('params' =>'class="centerBoxContentsFeatured centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => (($featured_products->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'products_id=' . $featured_products->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], $featured_products->fields['products_name'], IMAGE_FEATURED_PRODUCTS_LISTING_WIDTH, IMAGE_FEATURED_PRODUCTS_LISTING_HEIGHT) . '</a><br />') . '<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'products_id=' . $featured_products->fields['products_id']) . '">' . $featured_products->fields['products_name'] . '</a><br />' . $products_price);
```Change the last part of this line to:```php
. $featured_products->fields['products_id']) . '"><div class="boxProductName">' . $featured_products->fields['products_name'] . '</div></a><br /><div class="boxProductPrice">' . $products_price . '</div>');
```Now you can style
.boxProductName {}
and
.boxProductPrice {}.


...Yep, you've got the idea!

Yea, I wrapped the image, title and price this way:

    $list_box_contents[$row][$col] = array('params' =>'class="centerBoxContentsFeatured centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => (($featured_products->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'products_id=' . $featured_products->fields['products_id']) . '"><div class="featured_main_image">' . zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], $featured_products->fields['products_name'], IMAGE_FEATURED_PRODUCTS_LISTING_WIDTH, IMAGE_FEATURED_PRODUCTS_LISTING_HEIGHT) . '</div></a>') . '<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'products_id=' . $featured_products->fields['products_id']) . '"><div class="featured_main_right"><div class="featured_main_title">' . $featured_products->fields['products_name'] . '</div></a><div class="featured_main_price">' . $products_price . '</div></div><div class="clear"><!-- --></div>');

Thanks anyway Glenn!

Within the essentials, there are any number of ways you can identify the elements based on your organizational desires, though you really didn't need the <div class="featured_main_image"> unless you want some complex layout - there is already .centerBoxContentsFeatured a img {} to hang styling on...

Yep, I understand, I do want a complex layout. :-)

Large Image of left and Product info on right as a bar, not at the bottom.