Attributes images shows on product listing

[ken0306]

Hi there,

I am working on a attribute images shows on listing page, but I got some coding issues don't know how to get around it. My current version of OSC is 2.2 Base

 

Here is so far I can get it work to.

 

 

First, I add a extra field under the products_attributes table, call products_attributes_images. Because it is one to one relationship with attribute and product ID, each images can be use as a attribute to shows on listing or product info page.

 

Second, in order to update the filed, I insert the products_attributes_images field on my catalog/admin/products_attributes.php to let me update the records.

 

Third, I trying to bring it out in my listing page by adding the following code under case 'PRODUCT_LIST_IMAGE':

$products_attributes_images_query = tep_db_query("select patrib.products_attributes_images, patrib.products_id, patrib.products_attributes_id from " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . $listing['products_id'] . "'"); 
				
	 
				$lc_text .= '<div class="ui-listing-items row">
				<div class="div-listing-items-box" >
				<div class="ui-listing-items-box " >
				<a class="thumbnail" href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">
				<div class="bottlesWrapper" id="' . $listing['products_id'] . '">' . tep_image_lazy(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], '/' ) . '</div></a></div>';
				$lc_text .= '<div class="thumbs row" id="' . $listing['products_id'] . '"><ul class="att_img ">';
				
			 while ($products_attributes_images = tep_db_fetch_array($products_attributes_images_query)) { 
			
			$selected = 0; 
			
         	$products_attributes_images[] = array(); 
			
if ($products_attributes_images['products_attributes_images'] != '') 
				{ 
				$lc_text .= '<li>';
				
				$lc_text .= '<img class="img-thumbnail" src="' . $products_attributes_images['products_attributes_images'] . '"/>';
				
				$lc_text .= '</li>';
			 	} 

			 } 
			 
			 
		$lc_text .= '</ul></div></div><script>
		$(\'#' . $listing['products_id'] . '.thumbs img\').click(function() {
    var thmb = this;
    var src = this.src;
    $(\'#' . $listing['products_id'] . '.bottlesWrapper img\').fadeOut(250,function(){
        thmb.src = this.src;
        $(this).fadeIn(250)[0].src = src;
    });
});	</script>';	 
			 
		
			
			
		// Multiple size note mod		

So now I have the attribute images list under the product page, and it can b switch when I click on the small attribute images.

 

Now I trying to build a carousel for the attributes image, but I don't know how to fix the following part of the code

 while ($products_attributes_images = tep_db_fetch_array($products_attributes_images_query)) { 
			
			$selected = 0; 
			
         	$products_attributes_images[] = array(); 
			
if ($products_attributes_images['products_attributes_images'] != '') 
				{ 
				$lc_text .= '<li>';
				
				$lc_text .= '<img class="img-thumbnail" src="' . $products_attributes_images['products_attributes_images'] . '"/>';
				
				$lc_text .= '</li>';
			 	} 

			 } 

so how do I insert the <ul> and </ul> within the if conditions only once.

 

thank you.

 

ken

[MrPhil]

"2.2 Base"? What is that? There is 2.2 MS2 (I don't think I've heard of anyone running anything older), 2.2 RC1, 2.2 RC2, and 2.2 RC2a. Anyway, they're all long obsolete, and if you're trying to fix them up, you'd be far, far better off to migrate your data to the current version (osC 2.3.4 or Bootstrap).

 

To directly answer your question, you want to wrap <ul> and </ul> around the list of <li>,,,</li> produced by the while() loop? If you've already confirmed that you'll have at least one list element (although there's probably no harm in having an empty list), can't you just output '<ul>' before the while() and '</ul>' after its closing }? If you don't know at that point if there are any list elements to output, you could set a flag $count_elements. Initialize it to 0. Before the element is added to $lc_text, check if $count_elements is 0. If it is, output '<ul>'. Increment $count_elements. After the while() loop closing }, if $count_elements is greater than 0, output '</ul>'.

 

Have you checked that there's no add-on already for what you want to do?

[ken0306]

"2.2 Base"? What is that? There is 2.2 MS2 (I don't think I've heard of anyone running anything older), 2.2 RC1, 2.2 RC2, and 2.2 RC2a. Anyway, they're all long obsolete, and if you're trying to fix them up, you'd be far, far better off to migrate your data to the current version (osC 2.3.4 or Bootstrap).

 

To directly answer your question, you want to wrap <ul> and </ul> around the list of <li>,,,</li> produced by the while() loop? If you've already confirmed that you'll have at least one list element (although there's probably no harm in having an empty list), can't you just output '<ul>' before the while() and '</ul>' after its closing }? If you don't know at that point if there are any list elements to output, you could set a flag $count_elements. Initialize it to 0. Before the element is added to $lc_text, check if $count_elements is 0. If it is, output '<ul>'. Increment $count_elements. After the while() loop closing }, if $count_elements is greater than 0, output '</ul>'.

 

Have you checked that there's no add-on already for what you want to do?

 

Thank you for your reply

 

I believe it is 2.2 CR2a. I think it is upgrade from 2.2MS2, The website have too many addons build on it, and it also running on bootstrap 3.4 on PHP 5.4.

 

The function I looking for is showing attributes picture in product listing, especially for colors or style for each product. I have been search and try difference addon like OPTIONS as IMAGES but most of the addon only change the images inside the product info page, it doesn't really shows on products listing. Anyway I got it works partially, here is what I got so far.

 

 

in the product attribute table, I add another field call products_attributes_image_shows to use as counter as you advice. Now the code can control the images shows or not. here is my code.

$products_attributes_images_query = tep_db_query("select patrib.products_attributes_images, patrib.products_attributes_image_shows, patrib.products_id, patrib.products_attributes_id from " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . $listing['products_id'] . "' and patrib.products_attributes_image_shows = '1'"); 
	 
				$lc_text .= '<div class="ui-listing-items row">
				<div class="div-listing-items-box" >
				<div class="ui-listing-items-box " >
				<a class="thumbnail" href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">
				<div class="bottlesWrapper" id="' . $listing['products_id'] . '">' . tep_image_lazy(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], '/' ) . '</div></a></div>
				';
				
				 $products_attributes_images_count_query = tep_db_query("select sum(patrib.products_attributes_image_shows) as total from " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . $listing['products_id'] . "'");
					  
				 $products_attributes_images_count = tep_db_fetch_array($products_attributes_images_count_query); 
	
            if ($products_attributes_images_count['total'] > 0) { 
			
		$lc_text .= '<div class="thumbs " id="' . $listing['products_id'] . '"><div class="att_img horizon-swiper ">';
			
			}
			
            $products_attributes_images_query[] = array(); 
			
			
			 while ($products_attributes_images = tep_db_fetch_array($products_attributes_images_query)) { 
			 
			
		if ($products_attributes_images['products_attributes_images'] != '') 
	
		
		
				{ 
				$lc_text .= '<div class="horizon-item ">';
				$lc_text .= '<img src="' . $products_attributes_images['products_attributes_images'] . '"/>';
				$lc_text .= '</div>';
			 	} 
				


			 } 
			 
			 	// footer of the images gallery			
			 
			 
			   if ($products_attributes_images_count['total'] > 0) { 
			
		$lc_text .= '</div></div>
		<script>
		$(\'#' . $listing['products_id'] . '.thumbs img\').click(function() {
    var thmb = this;
    var src = this.src;
    $(\'#' . $listing['products_id'] . '.bottlesWrapper img\').fadeOut(250,function(){
        thmb.src = this.src;
        $(this).fadeIn(250)[0].src = src;
    });
});	

$(\'.horizon-swiper\').horizonSwiper();
</script>';
		
			}
			
			// footer of the images gallery end	
			 
		$lc_text .= '</div>';

Thank you

ken

[Omar_one]

Hello,

Have any one make this work with osCommerce 2.3 bootstrap (EDGE).

 

@@ken0306   can you plz give more details about the SQL  and  where you put the code in products_listing.php ?

i will try to see if will work with osCommerce 2.3 bootstrap..

 

BR

Omar

[♥kymation]

There is the Options with Images Module for Modular Products Page (Bootstrap) Addon. That shows a small image in the product attribute pulldown menu. It works with any of the Bootstrap versions of osC 2.3.4.

 

Regards

Jim

[Omar_one]

Thank you @@kymation  Options with Images Module for Modular Products Page (Bootstrap) Addon will show on the products_listing or on product info page ?

if it will show on the product_listing can i change layout from pull down menu to horizontal images same as product images on the product info page?

sorry for my bad english and my bad explanation

 

here is an attach file

 BR

Omar

[♥kymation]

That Addon only shows on the Product Info page. I'm not aware of one for the Category page. Sorry I misunderstood.

 

Regards

Jim

[Omar_one]

Thank you @@kymation for your answer.

Do you think is there  any addon what will do that ? Do you think @@ken0306 code will work with osCommerce 2.3 bootstrap?

BR

Omar

[♥kymation]

I don't know of any Addon that will do what you want, but there could be something in the 9000+ Addons that I don't know about.

 

That code could be adapted, as any code designed for older versions can be, but I don't know what it would take.

 

Regards

Jim