Swift product list corner image

[AdamKing]

Hi everyone

I am trying to set up a layout and variable in Sellerdeck so that i can choose to add a 'corner image' to draw attention to a certain product or two. See the image below, yellow triangle.



I played around with some code and have got something to work as i would hope it would look using firefox developer tools, and whilst i have tried to recreate this in sellerdeck, i am strggling to locate the exact place to put my code! I can only assume it has something to do with the filtering being default view?

When i place my layout in Filtered Product Summary, it shows in the preview, and in offline page preview, but is then not uploaded when i publish the changes. See below.



I have created a layout that defaults to no value, and a variable set to product level to allow me to choose an image to show in the top left corner.

<div style="z-index:200; position:absolute; float:left; clear:both; width:50%;">
<img src="<actinic:variable name="ProductListCornerImage" />">
</div>

Can anyone suggest something that I have not thought of?

Thank you in advance! Adam

[graphicz]

When i place my layout in Filtered Product Summary

Herein lies the key. Filtered results are javascript generated so usual coding will not work.

I had a similar problem trying to add a 'Hot Seller' to Filtered Results. Things are easier in v18 than they were though:

Firstly have a read of: 'Help | Help Topics | Contents | Step by Step Guides | Online Store - Other Features | How do I add my own variables to the search results page?'
Secondly BlockIfs work off line and will not work in filtered results on a live site

This from Gary in Support:

go to 'Design | Library | Variables' and open the variable 'ShowHotSeller'.

Ensure that the following options are selected: -

• Searchable (Site, Section and Product variables only)
• Upload

Go to the 'Layouts' tab and take a backup copy of the 'Standard Javascript Header Functions' layout.

Then open the 'Standard Javascript Header Functions' layout and add the following code to the end of the template : -

<script type="text/javascript"> function ShowHotSellerImg(bShow) { if (bShow) { return('<p><img class="__mce_add_custom__" src="hot_seller.jpg" width="146" height="56" /></p>'); } return (''); } </script>

and click 'OK' to apply the changes.

Then scroll down to the group 'Search Results' and expand it, and make a copy of 'Standard Search Result'.

Then open the layout 'Standard Search Result' and add

<Actinic:ScriptFunctionCall>ShowHotSellerImg(<actinic:variable searchresultvariable="true" name="ShowHotSeller" />)</Actinic:ScriptFunctionCall>

Click 'OK' and upload the site and check the behaviour of the filtered search results.

(Apply your same styling)


I have duplicated the code to be able to select different images:

<script type="text/javascript"> function ShowHotSellerImg(bShow) { if (bShow)    {    return('<p><img class="__mce_add_custom__"  src="<actinic:variable name="HotSellerImage" />" /></p>');    }return ('');} </script><script type="text/javascript"> function ShowBestSellerImg(bShow) { if (bShow)    {    return('<p><img class="__mce_add_custom__"  src="<actinic:variable name="BestSellerImage" />" /></p>');    }return ('');} </script>


 <Actinic:ScriptFunctionCall>ShowHotSellerImg(<actinic:variable searchresultvariable="true" name="ShowHotSeller" />)</Actinic:ScriptFunctionCall> <Actinic:ScriptFunctionCall>ShowBestSellerImg(<actinic:variable searchresultvariable="true" name="ShowBestSeller" />)</Actinic:ScriptFunctionCall>

It's a while since I did this and I have not retested but this might put you in the right direction.

[AdamKing]

Thanks Jonathan, that's really useful. I'll take a look at the resources you suggest and have a go at the code changes above.

[AdamKing]

Hi Jonathan, I wonder if you could help a little further with this one. I am struggling to understand the steps after updating the 'Standard Javascript Header Functions' layout and the 'Search Results' layout.

I have changed the code to be the following, so it is relevant:

<script type="text/javascript"> function MapOfMonthImg(bShow) { if (bShow) { return('<p><img class="cornerimage" src="map_of_month.png" width="100" height="100" /></p>'); } return (''); } </script>

and:

<Actinic:ScriptFunctionCall>MapOfMonthImg(<actinic:variable searchresultvariable="true" name="MapOfMonth" />)</Actinic:ScriptFunctionCall>

I think i need a bit of help to understand what to do next. How does the image get placed/called to the relevant product?

My variable, MapOfMonth, is set to product level and is a true/false variable. So, I can choose what product(s) to be map of the month. But how is the .png placed on these products?

Would you be able to offer a bit of a guide to what i should do next? To my mind, there has to be something in the Filtered Product Summary layout that is populated by an image if True is selected?

Thanks

[AdamKing]

Hi, i have managed to get this to work now which I am pleased with. I was basically there but needed to relocate the Search Results piece of code to Standard Search Result List layout and then apply the styling I had used in my first attempt.

Next up, tweaking to allow a choice of image when required.

Thanks

[graphicz]

Hi Adam

I was just about to reply when I see that you have resolved it. Search results and Filtered search results in Sellerdeck take some getting used to!

Well done!

[AdamKing]

Yes, it sure does, and im almost certain my result was in some part luck based!

I am moving on to the second part shortly, being able to show a different image if a variable criteria is met. Do you know if the variable has to be a true/false variable? Or can it be a variable that uses a list of choices?

So, in practice, we sell map sets, and i would like to display a map set with a black corner triangle. I already have a property called Product Type, of which there is Map, Map Set, Tee Shirt, etc etc. Could I use that property instead of another true/false one? and if so, how would the code change?

This would save me duplicating information that a product already has.

Just a thought!

[graphicz]

TBH I don't know. You will have to try!