Adding FeeFo to to Version 5

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

Adding FeeFo to to Version 5

Post by graphicz »

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: 35
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz »

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: 35
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Adding FeeFo to to Version 5

Post by norman »

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: 35
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz »

Thank you Norman, please may I also ask about adding an image to: data-tabname="Tab Name" ?
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Adding FeeFo to to Version 5

Post by norman »

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: 35
Joined: Wed Oct 20, 2010 2:43 pm
Contact:

Re: Adding FeeFo to to Version 5

Post by graphicz »

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