Clickable image in filtered results

[OllyBug]

Hi all.

I have hit a brick wall and I am sure I am not being stupid

I am using filtering and the layout 'Filtered Product Summary'.

However, the images displayed are not clickable. I have searched around the forum and KB and tried using the clickable image in search result fix. This did not work.

I then wrapped the images with link tags and this still didn't work: i,e:

<a href="<actinic:variable name="ProductPageName" />"><img src="<actinic:variable name="ProductThumbnailImageFileName" />"
					border="0"
					title="<actinic:variable name="ProductName" encoding="strip"/>"
					alt="<actinic:variable name="ProductName" encoding="strip"/>" /></a>

I have checked this using firebug and it clearly shows that the images are static and not linking to anything

Edit. Server issues tonight, had to delete site and upload again! if you click the link below, you can see the pages if you go to Alphabetical search - Begins with A

http://www.norfolkherbs.co.uk/shopte...est/index.html

Has anyone any ideas?

Many thanks

[Krithika]

Morning Oliver

This one is on our wish list at the moment, I have added your request to it as well.

Regards

[OllyBug]

Good morning.

Thanks for letting me know. I am glad i am not going mad!

I do think this is important to be fixed ASAP though as it does make it awkward to navigate without the option of clicking an image. Especially with smart phones and tablets. It is the 3rd issue I have found with the filtering (1st and 2nd is already with support) . Perhaps a re-write of the script??

Cheers,
Oliver

[meden]

I agree - I've just started redesigning our site from scratch and planned to make heavy use of the filtering facility, if the images are not clickable when filtered then this is a major problem! Users expect an image to take them to a product, can Sellerdeck provide a timeframe please?

[Krithika]

Hello Oliver, Mick

I am working with my colleague in development to find a workaround for this. I will post an update once our testing is successful.

Regards

[Krithika]

Workaround for Tabular filter results Layout

Hello and sorry the testing took some time. The following workaround will work with the Tabular layout for filter results.

1. Open Design | Library, and scroll down to Search Results layout type. Expand and double click to open Tabular Search Result layout. Replace the codes with the following

<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsImage%22%20%2f%3e" >
<div id="ResultImage" style="display:none">
    <Actinic:Variable Name="SearchResultLink"/><img src="<actinic:variable name="SearchResultProductImage" />" <actinic:variable 

name="SearchResultProductImageSize" /> /></a>
</div>
<Actinic:XMLTEMPLATE NAME="ImageLine">
    <p class="product-image"><Actinic:Variable Name="SearchResultLink"/><img src="<actinic:variable name="SearchResultProductImage" />" 

<actinic:variable name="SearchResultProductImageSize" /> /></p></a> 
</Actinic:XMLTEMPLATE>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsName%22%20%2f%3e">
    <Actinic:Variable Name="SearchResultLink"/><Actinic:Variable formatting="h3" Name="SearchResultProductName"/></a>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsSectionName%22%20%2f%3e">
    <p class="product-text"><Actinic:Variable Name="SearchResultSectionName"/></p>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsPrice%22%20%2f%3e">
    <p class="product-price"><br><Actinic:Variable Name="SearchResultPrice"/></p>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsDescription%22%20%2f%3e">
    <p class="product-text"><actinic:variable name="SearchResultFullDescription" /></p>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsProperties%22%20%2f%3e" >
    <p class="product-text"><actinic:variable name="SearchResultProp" /></p>
</actinic:block>

2. In the site folder, open actinicsearch.js in an editor, Notepad or Dreamweaver. Find the lines :

productLink = "<a href=\"" + pg_sCustomerAccountsCGIURL + '?' + sHostParam + 'PRODUCTPAGE=' + objProductDetails.mAnchor + "\">" + 
                            objProductDetails.mName + "</a>" + "&nbsp;";
        }
    else
        {
        productLink = "<a href=\"" + objProductDetails.mAnchor + "\">" + objProductDetails.mName + "</a>" + "&nbsp;";
        }
    var sSectionName = "(" + objProductDetails.mSection + ")" + "&nbsp;";
    var sPrice = formattedPrice + "&nbsp;";
    var sDescription = objProductDetails.mDescription + "&nbsp;";
    sResultTemplate = sResultTemplate.replace(/(<Actinic:S_PNAME><\/Actinic:S_PNAME>)/ig, productLink);
    sResultTemplate = sResultTemplate.replace(/(<Actinic:S_SNAME><\/Actinic:S_SNAME>)/ig, sSectionName);
    sResultTemplate = sResultTemplate.replace(/(<Actinic:S_LINK><\/Actinic:S_LINK>)/ig, "");

Replace the above with the following :

productLink = "<a href=\"" + pg_sCustomerAccountsCGIURL + '?' + sHostParam + 'PRODUCTPAGE=' + objProductDetails.mAnchor + "\">";
        }
    else
        {
        productLink = "<a href=\"" + objProductDetails.mAnchor + "\">";
        }
    var sSectionName = "(" + objProductDetails.mSection + ")" + "&nbsp;";
    var sPrice = formattedPrice + "&nbsp;";
    var sDescription = objProductDetails.mDescription + "&nbsp;";
    sResultTemplate = sResultTemplate.replace(/(<Actinic:S_PNAME><\/Actinic:S_PNAME>)/ig, objProductDetails.mName);
    sResultTemplate = sResultTemplate.replace(/(<Actinic:S_SNAME><\/Actinic:S_SNAME>)/ig, sSectionName);
    sResultTemplate = sResultTemplate.replace(/(<Actinic:S_LINK><\/Actinic:S_LINK>)/ig, productLink);

Save and close the file. Upload the site and you will find the images in filter search results are now clickable.

Note : If at any point you wish to undo the changes, right click the Search Results | Tabular Search Result and select 'Revert to Factory Settings' . Additionally the original copy of actinicsearch.js can be found in ProgramFiles\<SellerDeck version>\Original folder.

Hope this helps. This is a temporary workaround for now, meanwhile a more durable fix is being worked upon for a future release.

Regards

[OllyBug]

Thanks for this!

Will test tomorrow and post back.

Regards,
Oliver

[OllyBug]

Excellent! This has worked nicely.

Thank you very much.

Oliver

[Krithika]

Glad to know thank you for the update Oliver.

Regards

[dave_finlayson]

This breaks my layout (and Oliver's above although it's not so noticeable. Whilst it will wrap the image in <a href"...."> it then causes the product name <a href"...."> to wrap round the price and description, turning them all into a link, instead of just the product name.

I seem to be having issues adding any other tags, divs, spans etc into the Tabular Search Result layout without it breaking other tags too.

Any ideas?

[Krithika]

Hello Dave

Please try the following. In the Tabular search Result layout, replace the 2 instances of </a> with </a><a href=""></a> .Upload the changes and now the image and product name alone should be clickable.
Hope this helps.

Regards

[dave_finlayson]

Krithika,

That worked, although I needed to add it to the third </a> round the product title too.

Thanks for your quick response!

David

[Krithika]

Cheers and glad it worked

Regards

[eck247]

Hi Krithika,

Will this issue be addressed in the next service release ?

[Krithika]

Hello Alexander

I am afraid we dont have a set release for this fix to go in at the moment as the one being worked upon is nearing completion. That said, the fix for the above should be included in a subsequent release.

Regards