Adding FeeFo to to Version 5

Post Reply
graphicz
Posts: 31
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Adding FeeFo to to Version 5

Post by graphicz » Tue Jan 09, 2018 11:36 am

In version 4 a FeeFo tab was added to the Tabbed Product Description by adding this:
<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowFeefoTab%22%20%2f%3e%20%3d%3d%20true">
&#123;Reviews<img src="http://www.feefo.com/feefo/feefologo.js ... nzero=true" border="0" alt="Feefo logo" title="See what our customers say about us"/>
&#125;
<actinic:block if="%3cactinic%3avariable%20name%3d%22CustomerFeedbackEnabled%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22EnableFeefoContentForProducts%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
<div id="FeefoFeedback_<actinic:variable name="ProductReference" selectable="false" />"></div>
<script language="javascript" type="text/javascript">
DisplayFeefoFeedback(<actinic:variable name="FeefoProductCommentMax" selectable="false" />, "<actinic:variable name="CatalogURL" selectable="false" />", "<actinic:variable name="CartPageURL" selectable="false" />", "<actinic:variable name="FeefoLogon" />", "<actinic:variable name="ProductReference" selectable="false" />", "<actinic:variable name="ShopID" />");
</script>
</actinic:block>
</actinic:block>
How may I add a FeeFo tab to Version 5?

Thank you.

graphicz
Posts: 31
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz » Tue Jan 09, 2018 12:01 pm

This does not seem to be working:
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDescriptionLength%22%20%2f%3e%20%3e%200" ><div class="product-text"><actinic:variable name="TabbedDescription" /></div></actinic:block>
<div class="dp_extra_tab" data-tabid="Unique-ID" data-tabname="Tab Name">
SELLERDECK CONTENT HERE
</div>
Also can I add an image to: data-tabname="Tab Name" ?
data-tabname="Reviews<img src="http://www.feefo.com/feefo/feefologo.js ... nzero=true" border="0" alt="Feefo logo" title="See what our customers say about us"/>"

graphicz
Posts: 31
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz » Tue Jan 09, 2018 2:43 pm

The problem was an additional div:
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDescriptionLength%22%20%2f%3e%20%3e%200" ><div class="product-text"><actinic:variable name="TabbedDescription" value="TabbedProductDescription" /></div></actinic:block>
<div class="dp_extra_tab" data-tabid="<actinic:variable name="EncodedProductAnchor" selectable="false" />" data-tabname="Tab Name">
SELLERDECK CONTENT HERE
</div>
The need to remove <div class="product-text"> and its closing </div> - it works fine then:
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDescriptionLength%22%20%2f%3e%20%3e%200" ><actinic:variable name="TabbedDescription" value="TabbedProductDescription" /></actinic:block>
<div class="dp_extra_tab" data-tabid="<actinic:variable name="EncodedProductAnchor" selectable="false" />" data-tabname="Tab Name">
SELLERDECK CONTENT HERE
</div>

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Adding FeeFo to to Version 5

Post by norman » Tue Jan 09, 2018 5:21 pm

In Tabber V5, you don't need to use TabbedProductDescription, or to patch any product layouts. The usual ProductDescription works (because standard SD layouts puts the necessary class="product-text" around it). This class is all that SD needs to locate text that may contain tabs.

You may have been using an site upgraded from Tabber V4 (which did require you to replace ProductDescription with TabbedProductDescription).

Anyway, as you deduced, having a description within nested tags with class "product-text" confuses Tabber. Removing one of the tags fixes it as you discovered.
Norman

graphicz
Posts: 31
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz » Tue Jan 09, 2018 5:29 pm

Thank you Norman, please may I also ask about adding an image to: data-tabname="Tab Name" ?

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Adding FeeFo to to Version 5

Post by norman » Tue Jan 09, 2018 10:27 pm

For normal tabs in the product descriptions, just use SD's embedded HTML capability to have HTML in the tab names.
E.g.

Code: Select all

{Tab 1}Tab 1 content...
{!!<<img src="button_login.gif" style="height:10px;" />>!!}Tab with image content here...
Inline style used for readability.
It may be better to add a class name to such images and use some CSS to override any styles that SD may have set.

If using data-tabname you don't need embedded HTML tags. Just use the image HTML but use single quotes for the attributes:

Code: Select all

data-tabname="<img src='button_login.gif' style='height:10px;' />"
Norman

graphicz
Posts: 31
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz » Wed Jan 10, 2018 10:48 am

Another way if you want the same image for all tabs with the data-tabname="Reviews" (for example)

In the site folder right click on tabberv5support.js Copy and Paste so you have a backup.

Open tabberv5support.js in Notepad++ or any text editor.

Line 67:

Code: Select all

    // output current tab
    html += '<li><a href="#tab_' + anc + '_' + panecount + '"><span>' + tabname + '</span></a></li>';
Change to:

Code: Select all

    // output current tab
    html += '<li><a href="#tab_' + anc + '_' + panecount + '"><span id="' + tabname + '">' + tabname + '</span></a></li>';
In the product layout just above the product description layout/variable add:

Code: Select all

    <script>$(document).ready(function() {
    $("#Reviews").append("<img id='theImg' src='fivestar.png'/>");
    });</script>
Where Reviews is the data-tabname and fivestar.png is your image (saved in the site folder) so it looks like:

Code: Select all

		<script>$(document).ready(function() {
$("#Reviews").append("<img id='theImg' src='fivestar.png'/>");
});</script>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDescriptionLength%22%20%2f%3e%20%3e%200" ><actinic:variable name="TabbedDescription" value="TabbedProductDescription" /></actinic:block>
	<div id="theDiv" class="dp_extra_tab" data-tabid="<actinic:variable name="EncodedProductAnchor" selectable="false" />" data-tabname="Reviews">
	   <actinic:block if="%3cactinic%3avariable%20name%3d%22StaticCustomerFeedbackEnabled%22%20%2f%3e" >
	   <div id="FeefoFeedback_<actinic:variable name="ProductReference" selectable="false" />"><!--"Feefo Standard Product Feedback Table" Layout goes here--><actinic:variable name="FeefoProductFeedback" value="Standard Product Feedback Table" /></div>
   </actinic:block>
	
Finally at the bottom of the stylesheet add:

Code: Select all

.ui-state-default a span img {vertical-align:middle;}
Test site: http://www.webeg.co.uk/tabber/acatalog/ ... ng-47.html

To use a dynamic image based on your actuall rating you can use:

Code: Select all

https://www.feefo.com/feefo/feefologo.jsp?logon=www.feefo.com&template=product-table-dark-165x15.png&nocache=true
Replacing logon=www.feefo.com with your own logon.

Please edit if ay mistakes - thank you.

Post Reply