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


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Social Media Buttons
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Andy
Administrator

95440 Posts

Posted - 07/06/2017 :  09:42:35  
We introduced the social media buttons in Version 6.6 and the set up details were added here https://www.ecommercetemplates.com/help/social-media.asp

Gary from ITZAP - https://itzap.com.au - has very kindly sent us on more information to add regarding Open graph meta tags, which we have added here

https://www.ecommercetemplates.com/help/social-media.asp#opengraph

This is just a small part of all the information he provided - the set up is pretty straightforward but feel free to ask any questions.

Andy

Please feel free to review / rate our software

Andy
Administrator

95440 Posts

Posted - 09/25/2017 :  03:40:03  
This tip is true for any of the store buttons really but here's how to add icons to the Ask A Question / Email A Friend button using FontAwesome so they match the other social media buttons with their logo icons

Add this to your proddetail.asp / .php <HEAD> section (You can add it to other pages if you are going to use icons on other buttons)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Add font-family:FontAwesome, sans-serif; to the input.askaquestion / input.emailfriend class in your main css file eg

input.askaquestion, input.emailfriend{
background:#2868B2;
color:#fff;
height:21px;
border:0;
border-radius:4px;
font-size:12px;
cursor:pointer;
margin-top:8px;
font-family:FontAwesome, sans-serif;
}

In proddetail.php, just before

<?php include "vsadmin/inc/incproddetail.php" ?>

add

<?php
$xxAskQue="#xf27a;   Ask A Question";
$xxEmFrnd="#xf0e0;   Email A Friend";
?>

or for the ASP version

In proddetail.asp, just before

<!--#include file="vsadmin/inc/incproddetail.asp"-->

add

<%
xxAskQue="#xf27a;   Ask A Question"
xxEmFrnd="#xf0e0;   Email A Friend"
%>

You can see an example on our demo store here http://www.ectdemostore.com/blue-jeans-straight.asp

All the FontAwesome icons are listed here http://fontawesome.io/cheatsheet/

Andy

Please feel free to review / rate our software

midvalleydrifter001
Ecommerce Template Expert

USA
523 Posts

Posted - 09/29/2017 :  14:17:26  
Hi Andy,

I followed the above and this is what I get:

Any clue what I did wrong?

Patrick




Edited by - midvalleydrifter001 on 09/29/2017 14:18:09

midvalleydrifter001
Ecommerce Template Expert

USA
523 Posts

Posted - 09/29/2017 :  14:54:26  
I figured it out.

You left off the & sign in front of the Font Awesome tag.

Should read like this:

<?php
$xxAskQue="&#xf27a; Ask A Question";
$xxEmFrnd="&#xf0e0; Email A Friend";
?>

ITZAP
Ecommerce Template Expert

Australia
757 Posts

Posted - 10/03/2017 :  16:55:36  
Like that FontAwesome icon trick

If you simply enter this in your includes.php config file ...

$xxAskQue='&#xf059; Ask a Question';
$xxEmFrnd='&#xf27a; Recommend to a Friend';


In that case, when you click the "Ask A Question" button, notice the Heading in the Pop-Up Window has an [X] where the Icon should be. So just add something like this to your CSS ...

td.cobhl.emfhl {
font-family: 'FontAwesome', 'Roboto', sans-serif;
box-sizing: border-box;
font-weight: normal;
font-size: 105%;
color: #ffffff;
background-color: #003366;
padding: 0;
}

Or whatever other Font and Hex Color Scheme suits your website.
Now the specified FontAwesome Icon also appears in the Pop-Up Window.

Gary

Edited by - ITZAP on 10/07/2017 22:56:56

midvalleydrifter001
Ecommerce Template Expert

USA
523 Posts

Posted - 10/06/2017 :  19:59:18  
Works great Gary, but we still need the & symbol for it to work.

$xxAskQue='&#xf059; Ask a Question';
$xxEmFrnd='&#xf27a; Recommend to a Friend';

Edited by - midvalleydrifter001 on 10/06/2017 20:06:12

ITZAP
Ecommerce Template Expert

Australia
757 Posts

Posted - 10/07/2017 :  23:10:28  
Goodaye Patrick,
Yes you are right, we need the ampersand up front in that Unicode to get the FontAwesome Icon to appear. I actually did type that in. But when you click "Post", this forum editor strips out the ampersand symbol. And I bet that happened to Andy also.

Finally discovered that you need to type the HTML Character Code for the Ampersand & a m p ; (without spaces) to make it print here, which is what I guess you did.

My post above edited accordingly.

Gary

Edited by - ITZAP on 10/07/2017 23:12:12
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000