Parent section image for products in search results

[graphicz]

Client site has products grouped by parent section and the parent section for each group of products displays the image for the section.



https://www.graphicz.solutions/stcv1...30_2886%2Ehtml (Login user: graphicz - pass: testtest)

Is there a way for products in search results to display the parent section image? I realise this may involve script changes but I do not know what to do in this respect.

Thank you!

[NormanRouxel]

Try this:
In layout Standard Search Result, place where you want the image to display:

<span class="srsectionimage" data-sid="<actinic:variable name="SearchResultSectionID" />" data-title="<actinic:variable name="SearchResultProductName" />"></span>

And in layout Search Results Page Bulk Area RWD at the very bottom append:

<script type="text/javascript">
var sectimages = {
<actinic:block type="entiresectionlist">
	<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageFileNameRaw%22%20%2f%3e%20%21%3d%20%3cactinic%3avariable%20name%3d%22DefaultSectionImage%22%20%2f%3e"><actinic:variable name="SectionID" selectable="false" />:'<actinic:variable name="SectionImageFileNameRaw" encoding="perl" selectable="false" />',</actinic:block>
</actinic:block>
	};
$( ".srsectionimage" ).not( "[data-sid='']" ).each(function(){
	var simage = sectimages[$(this).attr('data-sid')];
	if ( simage && ($(this).closest( "div.std-product-details" ).has( "img" ).length == 0) )
		{
		var link = $(this).closest( "div.std-product-details" ).find( "a:first" ).prop('href');
		$(this).html('<a href="' + link + '"><img class="srsectimage" src="' + simage + '" title="' + $(this).attr('data-title') + '" /></a>');
		}
});
</script>

This works by building a list of all Sections that have images and adding it to the Search Results page. After the results are displayed that list is looked up and used to replace the results image marker with the Section image (but only if there's no image shown for that product).

NOTE THAT THIS IS FOR NON-SWIFT SITES

[graphicz]

Genius. Thank you so much Norman.

[NormanRouxel]

Hi, Jonathan

I was tinkering with the above so double-check that you're using the latest version.

[graphicz]

Thank you!

[NormanRouxel]

Another little edit to post #2 to add a title to the image and make it clickable.

[graphicz]

Just to be clear, in Swift, the placeholder code goes within the <script> tags of 'Standard Search Result'

And the larger code goes at the bottom of 'Filtered search results page bulk area Swift'

Thank you.

[graphicz]

The array of images is produced but I am not geting the image in the search result:

https://www.graphicz.solutions/stcv18single/

Login graphicz testtest

Search for vase, or rustic.

It also takes a little time as it is very large site, could it be 'invariant' on an outer page layout perhaps?

Thank you

[graphicz]

Product image has to be selected in Search and Filering settings - results.

In Swift, however, if the priduct image is empty the site shows 'invisible_image.jpg'

Could

has( "img" ).length == 0) )

be written as somthing like

has( "img" ).name == 'invisible_image.jpg') )

I am trying by removing the content of the src/data-src tags:

<script type="text/template"><div class="sb-product-image w-100 text-center"><Actinic:Variable Name="SearchResultLink"/><img class="lazyload sb-thumbnail img-responsive" src="" data-src="" title="<actinic:variable name="SearchResultProductName" />" border="0"/></a></div></script>

[graphicz]

Another choice is to untick Product image in Search and Filering settings - results and add this to the search result layout.

<actinic:block if="%21%3cactinic%3avariable%20name%3d%22SearchResultShowsImage%22%20%2f%3e" >
<img src="" alt="" />
</actinic:block>

It displays <img src="" alt="" /> but the script above is not triggered - .has( "img" ).length == 0

[NormanRouxel]

Swift does things completely differently. It uses pagination and filtering on the search results.
Remove any code from above and start with a clean slate.
Then add this to the bottom of Standard JavaScript Header Functions:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Search%20Results%22">
	<actinic:block php="true">
		$sr = fopen('sectionimages.js', 'w');
		fwrite($sr, 'var sectimages = {');
		<actinic:block type="entiresectionlist"><actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageFileNameRaw%22%20%2f%3e%20%21%3d%20%3cactinic%3avariable%20name%3d%22DefaultSectionImage%22%20%2f%3e">fwrite($sr, "<actinic:variable name="SectionID" selectable="false" />:'<actinic:variable name="SectionImageFileNameRaw" encoding="perl" selectable="false" />',");</actinic:block></actinic:block>
		fwrite($sr, "};");
		fclose($sr);
	</actinic:block>
</actinic:block>
<script type="text/javascript" src="sectionimages.js"></script>

This creates a helper file containing a list of Section images against the Section Id.

Edit actinicsearch.js and look for the line:

			objProductDetails.m_sImage = pg_sDefaultProductImage;	// hope it has the real image

Replace it with:

			objProductDetails.m_sImage = sectimages[sSectionID] ? sectimages[sSectionID] : pg_sDefaultProductImage;	// hope it has the real image

That's it. Update the site twice to initialise the helper file writer.

You'll need to re-edit actinicsearch.js if you update SellerDeck to a new version.

[graphicz]

Thank you so much again Norman

[graphicz]

Uploaded and tested and brilliantly perfect. Thank you again Norman.