Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
 All Forums
 Technical
 PHP (Unix / Linux / Apache) versions
 Spry Tabs with Font Awesome Icons
Next Page
Author « Topic »
Page: of 3

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/09/2019 :  03:34:54  
Hi,

I'm using the PHP version v7.0.5 on MySQL and am trying to use additional tabs to hold e.g. Videos on a separate tab. Andy did an example for us by entering the hex code for the relevant Font Awesome icon, but I'm using Froala, now, and I can't edit that product's Long Description. It displays, in Froala, as a binary-looking blob, and is not escaped into distinct HTML.

If I go into the HTML view, it won't allow me to paste the HTML from the example Andy did into another product. I've tried several ways of encoding the hex and also using the icon name in a tag, such as:
<ecttab title="Tech <i class="fa fa-video-camera">">
but either I get an error saving the string data when I try saving the change in the Admin, or it simply renders the text part and not the actual Font Awesome icon.

The icons do display, however, for the Reviews and Related tabs, which are defined in includes.php, as:

$defaultdescriptiontab='<ecttab title="#xf036;   Info">';

$ecttabsspecials='%tabs%<ecttab title="#xf123;    Reviews" special="reviews"><ecttab title="#xf0a9;

(I tried using the same hex syntax in Froala in my Long Description:
<ecttab title="#xf123;    Reviews">
but it rejects the string value when trying to save to the database.)

Do you have any suggestions, please? It does appear that Froala gets quite confused with various of these things, when using the HTML editor, and having to use HTML does somewhat undermine the idea of using a WYSIWYG editor even if I can get it to work.

Pragmasis Limited
http://SecurityForBikes.com

Sinbad
ECT Moderator

USA
65936 Posts

Posted - 10/09/2019 :  07:19:37  
Hi have you tried it like this?

<ecttab title="Tech"><i class="fa fa-video-camera"></i>

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/09/2019 :  09:52:34  
Just tried that and it shows the icon at the top of the content within the tab, rather than in the tab header itself.

Thanks. That gets past the syntax issues, but it's not taking it as part of the definition of the tab itself.

Pragmasis Limited
http://SecurityForBikes.com

Sinbad
ECT Moderator

USA
65936 Posts

Posted - 10/09/2019 :  12:52:59  
Hi can you try it like this, if that does not work can you post the exact error message.

<ecttab title='Tech <i class="fa fa-video-camera">'>

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/09/2019 :  13:38:23  
Hi,

Thanks again. That format is accepted through the Admin (no syntax error), but it doesn't actually honour the icon in the tab and just has the text part showing (fa fa-video-camera), with an odd '> showing at the top of the tab's text content. I've got a screen shot of the result - Is there somewhere I can upload it? Or perhaps you can reproduce it quite easily yourself?

Pragmasis Limited
http://SecurityForBikes.com

Sinbad
ECT Moderator

USA
65936 Posts

Posted - 10/09/2019 :  14:22:31  
I use font awesome but not with spry tabs sorry, the site in your signature has tabs can you take a look at this item P22EEL-x.x-SS80CS-NW4 to see how it was setup and copy it onto the item you want to use it on.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/09/2019 :  15:05:41  
Thanks for looking at the live site.

That product page you mention doesn't have any tabs defined through the Product Admin - it only has the default Info tab, which has the Font Awesome icon set through the PHP parameter I mentioned originally, plus the Reviews tab, which is added (also via parameter, below).

The only one that works is the one that Andy set up on our test site, that I can't get to successfully copy 'n' paste into another product - that's where I started with all this!

Doh, the test site is where I'm playing with what you've suggested, so if you go to:

https://test.securityforbikes.com/proddetail.php?prod=DDAnchor

you should see the result of what you suggested last.

And on:

https://test.securityforbikes.com/proddetail.php?prod=TorcAnchor

...you'll see the one that Andy set up (before we switched to Froala). I don't actually want to change that product antry and then try to save it as I may not be able to put it back! It's the only page that is working how I want, but Froala can't cope with displaying the HTML view in a form that can be copied. Indeed, Froala gets quite confused with (perhaps) a Unicode binary character in the LongDescription field.

Pragmasis Limited
http://SecurityForBikes.com

midvalleydrifter001
Ecommerce Template Expert

USA
912 Posts

Posted - 10/09/2019 :  16:44:25  
Try this with the Ampersand symbol:

This would be in your vsadmin/includes file.

$ecttabsspecials='<ecttab title="&#xf03d;  Video" special="video">';

Patrick

Edited by - midvalleydrifter001 on 10/09/2019 20:37:04

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/09/2019 :  23:03:18  
HI Patrick,

Thanks, but I am already using the $ecttabsspecials parameter (see my OP) and the same syntax as a complete tag in the product Admin:
<ecttab title="#xf03d; Video">
...gives a MySQL error when I submit the change:
Incorrect string value \xEF\x80\xBD V... at pLongDescription at row1
(I think - It is only displayed for less than a second before the Admin display refreshes)
This seems weird, as the hex codes represent bizarre characters that are nothing to do with what I'm trying to save.

Apologies, my OP truncated the definition in the includes file. It should be:
$ecttabsspecials='%tabs%<ecttab title="#xf123;    Reviews" special="reviews"><ecttab title="#xf0a9;  Related" special="related">';

I've spent a while longer playing with this, trying various PHP formats to express Unicode values, and I couldn't get anything to work through Froala's HTML view.

If I try to just use plain text for additional tabs through the Admin then I lose the Font Awesome icon that is defined for the Info tab (but I keep the FA icon for the dynamically-added Reviews tab).

Pragmasis Limited
https://SecurityForBikes.com

Vince
Administrator

42428 Posts

Posted - 10/10/2019 :  01:21:56  
quote:
<ecttab title="#xf03d; Video">
...gives a MySQL error when I submit the change:
Incorrect string value \xEF\x80\xBD V... at pLongDescription at row1
I've tried that here and I don't get an error and it really shouldn't give an error. If you want to send me the site FTP login details to my email (vince AT ecommercetemplates DOT com) I could investigate this for you. Could you include in the email exactly what you are trying to save in the long description as sometimes the forum software messes with code.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/10/2019 :  03:21:38  
Yes, the forum is stripping out some of the characters.

I've e-mailed admin details to our test site, which shows the tabs correctly with the LongDescription Andy set for our Torc Anchor product, but I can't paste that into another product and Froala gets very confused with Unicode characters in the string field, and all other ways of encoding it have failed so far, either to save the value or to display it in HTML view in Froala or to display the FA icons in the tabs themselves. I'd be very happy if anyone can suggest a way of getting the FA icons to show using their text name for them, such as the "fa fa-video-camera" class reference, but I can't get it through Froala/the database/to render properly on the tabs

Pragmasis Limited
https://SecurityForBikes.com

Vince
Administrator

42428 Posts

Posted - 10/14/2019 :  04:10:30  
Hi Steve
Sorry this was waiting for a few days but I've been having a look at what is going on today. It really does look like Froala is causing the problem and Andy probably entered the details for the product that works before you were using the HTML editor. Could you give it a go to see if you can create a product with Froala turned off?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/14/2019 :  10:55:59  
Hi Vince,

I've just turned off Froala on the Test site and I still get the Incorrect string value error when trying to save the same <ecttab... tag value that Andy used, with the wide character binary value included.

If I rty the syntax you suggested: <ecttab title="#xf03d; Video"> then the save to the d/b works OK but I just get a tab with the #xf03d; text label on the tab.

But, following on from the suggestion from midvalleydrifter001, below, of using an amersand in the hex value, #xf03d; that appears to work OK for getting the correct *binary* value into the d/b. That is in the LongDescription field and entered with Froala *turned off*, but the Admin shows it the same as the one Andy entered and you can't then edit another part of the LongDescription text as you get the Incorrect string Value error when you save the change.

I've left the DDAnchor product (aka Double Doofer) set with that as the first tab on the test site. You can only edit the LongDecription throuh the Admin if you replace the binary value with the #xf03d; string value, and you would have to do that every time you need to make any edit to the value in that LongDescription field. That is obviously unworkable. It appears that Froala gets in the way, as well, but the underlying d/b interface for read and write is getting upset by this approach. I.e. we are kind of fooling it to let a value through and then it is biting us when it is retrieved from the d/b subsequently. It works for the 'user' side, but not for the Admin.

Feel free to play with the DDAnchor LongDescription on the Test site. (Froala is still disabled.)

How about adding a benign encoding syntax that your Admin code and Froala will both pass through as the text entered, but converting it to the Unicode binary value when the value is retrieved from the d/b to send to the browser outside the Admin?

...And if it was possible to also have the code pick up the ShortDescription field for Spry Tabs display when there is no LongDescription set, that would be more consistent with the rest of the proddetail behaviour, avoiding the need to duplicate Short... into Long... just to get tabs to display?

Thanks,

Steve.

Pragmasis Limited
https://SecurityForBikes.com

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/14/2019 :  10:59:20  
Clarification to my post, above: The forum is stripping-put the ampersand & character at the front of the #xf03d value. Apologies. I don;t know how to get it to let me enter & #xf03d; without the space ...he says, wondering if this will work with a space added

Pragmasis Limited
https://SecurityForBikes.com

midvalleydrifter001
Ecommerce Template Expert

USA
912 Posts

Posted - 10/14/2019 :  12:09:14  
Maybe try it this way?

Without the space.

<ecttab title="& amp;#xf03d; Video">


Edited by - midvalleydrifter001 on 10/14/2019 16:43:19

Vince
Administrator

42428 Posts

Posted - 10/15/2019 :  00:58:05  
Hi Steve
I just tried entering a product with &#xf03d; for the 3 icons and it seems to be ok. So I think it's possible to create the product description but what is probably happening is as you are copying from the product that Andy set up, this has the HTML Entities already converted to the Unicode equivalent and copying and pasting that will cause an error. I think a change has to be made to stop the entities being converted so, can you open incfunctions.php in notepad and search for...
function htmlspecialsucode
You will see a function that looks like this...
function htmlspecialsucode($thestr){
return(str_replace(array(... will get converted by forum code)
}

Can you comment the current return value out and add...
function htmlspecialsucode($thestr){
//return(str_replace(array(... will get converted by forum code)
return htmlspecialchars($thestr);
}

Then can you let me know how it goes.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/16/2019 :  09:22:10  
Hi Vince,

Yes, the & #xf03d; (without the space) was allowing the value to be entered, but you couldn't then edit it as it was being converted to Unicode and trying to save that back into the same product or into another gave the Incorrect string value error, so you could get the value into the d/b, but only once. You couldn't then edit the product text, at all, unless you re-entered the & #xf03d; value by hand, every time.

I made the code change you suggested and that fixes it, in that the & #xf03d; value is retrieved and displayed without being converted, as you said.

However, if you turn on Froala, it causes the error again. E.g. if I've got the & #xf03d; in the d/b and then try editing that product through Froala, it is retrieved and displayed immediately as a Unicode value instead of as the & #xf03d; entity, that you can't save even immediately with no change to the value. Your code change stops the Admin code interpreting and converting that sequence, but Froala will do it if it's enabled and we get the error again

As I said before, I think it needs to be encoded in a different way that the Admin code, as such, _and_ Froala, don't recognise, but that the 'user' side of the ECT code converts to Unicode in proddetail.php. That would allow it to be handled for editing and cut 'n' paste etc in the Admin, with/without Froala, as if it was an ordinary text string, but that gets converted to Unicode in the one place where it needs to be: when it's being displayed through the browser to the user.

I've left it with your code change in place on our Test site, but with Froala disabled. The DDAnchor product has a couple of tabs defined. This is workable in that I can edit and paste product entries around with tabs included, or tabs not included, but it's not WYSIWYG on any products as I can't use Froala without it breaking again.

How about we use a value like &_#xf03d; (with an "_" inserted) but you only do the 'runtime' Unicode conversion in proddetail? If that avoids the 'intelligence' where we don't want it, but triggers the Unicode conversion in the display side, that should allow Froala to be used, or not, in the Admin without the problem we're getting at the moment. It is a bit of a hack, but it seems like incompatible requirements unless Froala can be persuaded to avoid the conversion within the Admin side of things.

What do you think?

Pragmasis Limited
https://SecurityForBikes.com

SBriggs
New Member

United Kingdom
79 Posts

Posted - 10/30/2019 :  22:34:45  
Hi Vince,

Have you had any thoughts on what I suggested, please (i.e. a different way of encoding these character sequences to avoid database save/retrieve errors)?

I appreciate there is a reasonable workaround (by using the code change you suggetsed in incfunctions.php and disabling Froala). It will be a little tedious to be blending that incfunctions change into every updater, and being unable to use Froala is a bit of a shame as it's a nicve feature, but if realistically that is the way it is for now then I will get on with using it that way.

Cheers,

Steve.

Pragmasis Limited
https://SecurityForBikes.com

Vince
Administrator

42428 Posts

Posted - 10/31/2019 :  03:13:15  
Hi Steve
The change for the incfunctions.php file is a good fix I believe and I'm going to add that to the updater. However I'll only make the change in the v7.1 line as the v7.0 line is the stability version. But in any case, before long you won't need to change anything.
There is another thing I noticed that will help in general with HTML Entities and that is to open the file vsadmin/inc/incloginfunctions.php and remove the line...
<script type="text/javascript" src="froala/js/plugins/entities.min.js"></script>
This line converts HTML entities to their character equivalents but unfortunately has no effect on Font Awesome entities.
But there is something that may help. Can you go to the Database Utility admin page (in the first menu tab) and click Database Collation. If the majority of your tables are not using a UTF8 collation could you (back up the database first) change it to one like utf8_general_ci. This should hopefully stop the error and even if Froala converts the entity to the character, it should be saved and display properly anyway.
If you don't have the site in UTF8 already that may also help.

Vince


Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

GRN
Advanced Member

158 Posts

Pre-sales questions only
(More Details...)

Posted - 11/04/2019 :  13:09:03  
Hi there,

Wordpress and ECT 7.1.6

I too am looking into using a Font Awesome icon on the Spry Tabs but no luck so far.

So I am NOT using Froala, I noticed the incfunctions.php was changed, I did change the database collation, and Font Awesome is working OK with the menus.

Thus can you create a generic tab in the product long description and add a Font Awesome icon? If so, what is actually needed, barring some major modification? I have tried combining the ecttab title and Font Awesome i class code, but obviously am not doing it correctly.

Thanks.

Glenn

Vince
Administrator

42428 Posts

Posted - 11/05/2019 :  00:01:25  
Hi Glenn
Are you including the style sheet with the font awesome glyphs? For example, this is the minimum you should need to display a font awesome glyph...

<head>
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body >
<i class="fa fa-video-camera"></i>
</body>
</html>

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater
Page: of 3 « Topic »  
Next Page
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.05 seconds. Snitz Forums 2000