Separate Product Info (text) from Image?

[Nimbuz]

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

[gjh42]

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.

[Nimbuz]

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

[gjh42]

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.

  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 ++; 

You can edit the other centerbox files (new_products.php and specials_index.php) similarly. Save in /includes/modules/your_template/featured_products.php etc.

[Nimbuz]

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!)

[Nimbuz]

I think I figured it out:

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

Right?

[gjh42]

$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:

. $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!

[Nimbuz]

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!

[gjh42]

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...

[Nimbuz]

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.