overlay soldout image help needed

[tony_sar]

hello.
I need to add a overlay sold out ribbon on top of listings images.
I can not find a code or any specific section to modify for this reason

Any info would be greatly appreciated.

Thanks.

[tony_sar]

ok got it figured out ..

[Ajeh]

What was the secret that worked for you?

[tony_sar]

part of the secret will work for everyone , the other part is site design specific and need CSS work.

need to modify , functions_general.php . around line 1141 or 1142
i added two div to following function .

$return_button =zen_image_button(BUTTON_IMAGE_SOLD_OUT_SMALL, BUTTON_SOLD_OUT_SMALL_ALT)

after , using CSS positioned sold out ribbon over product image.
so far so good. is working , this might not be the good way to go as i can not override functions_general.php .

but after looking at all files , this was the only way for me to go .

[rbarbour]

why not just wrap the product listing image with a div

$lc_text = '<div id="listingPImage">' . '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ? zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>' . '</div>';

then right below id add an if statement so it knows to place the sold out overlay image over product image if the products quantity is 0 like this:

if ($listing->fields['products_quantity'] == 0) {
$lc_text .= zen_image(DIR_WS_IMAGES . 'button_sold_out_sm.gif', 'Sold Out', '51','18', 'class="soldOutOverlay"');
}

using the default sold out image as an example - simply replace with your overlay image and upload to YOUR_TEMPLATES button file

then add this to your stylesheet

.listingPImage {
position:absolute;
}

.soldOutOverlay {
position:relative;
top:-80px;
}

again top:-80px moves the overlay image over the product image (set the -XXpx to the height of product image) or change as needed

[tony_sar]

Thanks

Your solution will work, however, after applying your solution , i ended up with lots of layout issue so i had to revert back to my original solution .

however, i will keep working with your solution when i have time , but right now , i think what i got is working properly .
I am moving to different shopping cart like ubbercart .. and the site i just built will be converted to that ,so i guess i will have to put all my effort on learning new cart .

[rbarbour]