AddShoppers Installation Guide

1. Social Analytics and Floating Button Installation

Copy and paste this code into your global footer template:

<!-- Start AddShoppers Floating Buttons -->
<div class="share-buttons share-buttons-tab" data-buttons="twitter,facebook,pinterest" data-style="medium" data-counter="true" data-hover="false" data-promo-callout="true" data-float="left"></div>
<!-- End AddShoppers Floating Buttons -->

<!-- Start AddShoppers Social Analytics -->
<script type="text/javascript">
var js = document.createElement('script'); js.type = 'text/javascript'; js.async = true; js.id = 'AddShoppers';
js.src = ('https:' == document.location.protocol ? 'https://shop.pe/widget/' : 'http://cdn.shop.pe/widget/') + 'widget_async.js#52f2b872a387646c20a74f5d';
document.getElementsByTagName("head")[0].appendChild(js);
</script>
<!-- End AddShoppers Social Analytics -->

2. ROI Tracking Installation

Copy and paste the following code into your checkout success template, then replace <order id> and <order value> with the correct order variables. 

<script type="text/javascript">
AddShoppersConversion = {
order_id: <order id>, // replace <order id> with your Order ID variable
value: <order value> // replace <order value with your Order Value variable
};
var js = document.createElement('script'); js.type = 'text/javascript'; js.async = true; js.id = 'AddShoppers';
js.src = ('https:' == document.location.protocol ? 'https://shop.pe/widget/' : 'http://cdn.shop.pe/widget/') + 'widget_async.js#52f2b872a387646c20a74f5d';
document.getElementsByTagName("head")[0].appendChild(js);
</script>

3. Share for Coupon Button Installation

Copy and paste the following code into the cart page template below the coupon code field:

<div class="share-buttons share-buttons-panel" data-style="coupon"></div>

4. Specifying Shared Data on Non-Product Pages

This allows you to control which data is shared on pages other than product pages, such as the home page, category pages, or the cart page. Just include the following Javascript snippet and customize with the information that you want shared:

<script type="text/javascript">
AddShoppersTracking = {
    image: "",
    url: "",
    name: "",
    description: ""
}
</script>

5. Social Login

a. Social login js to call on the page you want the login buttons to appear.

this is all javascript and html which will pass variables via the url to the create.asp file in part B

<script type="text/javascript"> 
var mydomain = 'http://www.superjeweler.com';

// Init code                                
function init() {
   AddShoppersWidget.API.Event.bind("sign_in", createAccount);      
};
// Create Account 
function createAccount(params) {        
   if (params.source == "social_login") {               
      services = ['facebook', 'google', 'linkedin', 'twitter', 'paypal'];
      var data = AddShoppersWidget.API.User.signed_data(); 
      for( var i=0; i < services.length; i++ ) {                
         service = services[i];
         if (AddShoppersWidget.API.User.signed(service)) {
           var email = data[service + '_email']; 
           if (service == 'twitter') {
              //alert('popup get email'); 
           };
           if (email) {
             if (service !='twitter' ) {                   
              var name = data[service + '_firstname'] + '_' + data[service + '_lastname']; 
             } else {
           var name = data[service + '_name']; 
             };
          name = name.replace(/ /g, '­-');
             var loc = mydomain + "/create.asp?asusrnm=" + name + "&aseml=" + email + "&data=" + JSON.stringify(data);
          document.getElementById("createme").src = loc;
          break; 
          };
       }; 
     }; 
   }                
}
                    
// Bind events
if (window.addEventListener) {          
   window.addEventListener("load", init, false); 
} else {
   document.onreadystatechange = function() { 
    if(document.readyState in {loaded: 1, complete: 1}) {
    document.onreadystatechange = null; 
       init();          
    } 
  }                 
} 
</script>
<!-- declare iframe which will link back to your http://www.superjewler.com/create.asp script in part B. -->                    
<iframe id="createme" src="about:blank" width="0" height="0" frameborder="0" scrolling="no"></iframe>
<!-- choose which social login buttons you wish to use -->
<div class="social-commerce-signin-facebook" data-style="logoandtext" data-size="medium"></div>
<div class="social-commerce-signin-google" data-style="logoandtext" data-size="medium"></div>
<div class="social-commerce-signin-paypal" data-style="logoandtext" data-size="medium"></div>
<div class="social-commerce-signin-linkedin" data-style="logoandtext" data-size="medium"></div>
<br>
<div>Please click the sign in with any social button above and login to your account.</div>

b. c# code (please read all notes and double check syntax as I have not used c# in a while :) ~ Mario)

please make a file called "create.asp" in your main store directory, the way part A works is it will pass all the parameters through the url to http://www.superjeweler.com/create.asp (please note you can change this url to whatever you like in part A so that your create.asp file can be placed in another location if you wish.)

//declare all variables, mostly strings and 2 dictionary variables
string AddShoppersSecret;
string params;
string signature;
string urluser;
string urlemail;
string query;
strong hashed;
var params = new Dictionary<string, string>();
var p = new Dictionary<string, string>();


//1. TODO: Set your AddShoppers API Secret Key below (found in https://www.addshoppers.com/merchants under Settings -> API)

AddShoppersSecret = 'PUT YOUR ADDSHOPPERS SECRET KEY HERE';

/* 2.
*** validate signature, assign params dictionary to the decoded json, when data is decoded it should return an array which will convert to params disctionary in c#
I am not sure if this is correct, please revise if needed.
*/

params = json_decode(Request.QueryString("data"));

//3. set signature to null, then walk through the params disctionary and assign signatire as well as all values received from data.

signature = null;
foreach(KeyValuePair<string, string> entry in params)
{
    if(entry.Key == "signature"){
        signature = entry.Value;

    } else {
        p[entry.Key] = entry.Value;
    |
}

//4. sort the dictionary P, then add the addshopper secret to the beginning of the p dictionary which is split into a string

ASORT(p);
query = AddShoppersSecret + String.Split(p);

//5. calculate the md5 hased value of the query string created

hashed = CalculateMD5Hash(query);

//6. check to see if the signature matches the hashed value
if(signature !== hashed){
        //stop processing and do not continue.
}
        
// signature validated, this is a valid request... continue on
//7. get the username an email from the url and use this info to create the account.

urluser = Request.QueryString("asusrnm") 
urlemail = Request.QueryString("aseml") 


//8. this is where you guys can take over on your platform and create the user with the email and name provided.
/* there are multiple ways to go about the creation of an account from here, for example some shops like magento we are able to create a user password as well as sign them in and refresh the page they are on to log in the user. Other shops don't give us such low level access to the account creation process so you may have to use the information provided and auto fill in a username / password box on the page itself and submit all using javascript. */