Purpose Of The Document
The purpose of this document is to provide the guidelines for the client to integrate the Annex Cloud modules on the Shopify platform.
Who Can Use This Document?
This document is most useful for the client or site admin who wants to integrate the Annex Cloud modules on the Shopify platform.
Add universal.js file
- Follow the steps below to add the universal.js file to Shopify.
- The user needs to Log in to the Shopify account using their login credentials. The URL for logging in is: https://www.shopify.com/login
- After logging in, the user is redirected to the Shopify account dashboard.
- Click Online Store on the dashboard, and the Online Store section is displayed.
- In the Online Store section, click Themes, and the Themes window is displayed.
- Within the Themes window, the option to customize the theme is available. Click Customize for the theme that needs to be edited.
- In the Customize window, click the (...) (ellipsis) icon. A drop-down menu appears. Select Edit code, and the code editor window appears.
- In the code editor window, locate and click the Assets folder. A list of all files within the Assets folder is displayed, as shown in the image.
- Click Add a new asset. A popup window appears.
- In the popup window, click Create a blank file to create the universal.js file, Choose js as the extension from the drop-down list, to create a JavaScript file.
The user can choose the Extension from the drop-down list. In this case, choose js.
- Follow the steps shown in the screenshot to create the universal.js file.
- After clicking Done, it will create the universal.js file.
- After creating the file, add the below code to the universal.js file.
Code:
var sa_uni = sa_uni || [];
sa_uni.push(['sa_pg', sa_page]);
(function () {
function sa_async_load() {
var sa = document.createElement('script');
sa.type = 'text/javascript';
sa.async = true;
sa.src = '//cdn.socialannex.com/partner/ENTER_SITE_ID/universal.js'; var sax = document.getElementsByTagName ('script')[0]; sax.parentNode.insertBefore(sa, sax);}
if (window.attachEvent) {
window.attachEvent('onload', sa_async_load); }
else {
window.addEventListener ('load', sa_async_load, false);}
})();- Click Save to save the code added to the universal.js file.
The universal.js file is added to the Assets file list.
If the user wants to delete any file, in the Assets folder, locate the file you want to delete and click the Delete icon (represented by a trash can).
- A popup window appears for confirmation to delete the file, Click Delete file in the popup to delete the file.
Social Login Shopify Integration
- Navigate to Online Store> Themes> Customize>Theme options> Edit code link.
- After clicking on the Edit code, the user is redirected to the following window.
- In the code editor window, the user gets the available pages in the Templates.
- The user needs to locate the target page where the social login buttons are to be added i.e. Login, Registration, or Checkout page.
- Once the target pages are determined, the user needs to add the following code.
Code:
<script>
window.S13AsyncInit = function(){
SAS13Obj.init({siteid:ENTER_SITE_ID,buttonType:["regular","small"]},"https://ENTER_YOUR_DOMAIN_NAME/pages/handle-login");
};
(function(d){
var js, id = 'socialannex-s13', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script'); = id; js.async = true;
js.src = "//cdn.socialannex.com/s13/v2/s13-main.min.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="show_provider"></div>In the above code, replace ‘ENTER_YOUR_DOMAIN_NAME’ with your domain name.
- Navigate to Online Stores> Pages, as shown in the following image.
- To add the handle login file, follow the steps below:
- Click on the Pages link and the Pages window is displayed.
- In the Pages window click the Add Page button, to add the new pages.
- In the Add Page window, the following options are available.
- Title: Add the specific title of the page.
- Click Show HTML.
- Provide the given code in the content area only after clicking Show HTML.
Code:
<script type="text/javascript">// <![CDATA[
var $_GET = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
function decode(s) {
return decodeURIComponent(s.split("+").join(" "));
}
$_GET[decode(arguments[1])] = decode(arguments[2]);
});
var msg=$_GET['msgcode'];
if(msg!='' && typeof msg !='undefined'){
(function pmsg(winObj,msg){
winObj.SAS13Obj.receiveMessageFromBc(msg);
window.open('', '_self', ''); self.close();
})(window.opener,msg);
}
var SAS13={};
SAS13.getScript = function(url, callback) {
var timestamp = new Date().getTime();
var selfcallback = "s13callback_"+timestamp;
url = url+"&callback="+selfcallback;
window[selfcallback] = callback;
var head = document.getElementsByTagName("head")[0];
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.src = url;
newScript.async = true;
head.appendChild(newScript);
};
var msg=$_GET['bigmsgcode'];
var Base64 = {
// private property
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encoding
encode: function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) +
Base64._keyStr.charAt(enc3) + Base64._keyStr.charAt(enc4);
}
return output;
},
// public method for decoding
decode: function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = Base64._keyStr.indexOf(input.charAt(i++));
enc2 = Base64._keyStr.indexOf(input.charAt(i++));
enc3 = Base64._keyStr.indexOf(input.charAt(i++));
enc4 = Base64._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
// private method for UTF-8 encoding
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
// private method for UTF-8 decoding
_utf8_decode: function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
if(typeof msg!="undefined"){
//rishi here
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
if (isIE () && isIE () <= 9) {
msg = Base64.decode(msg);
console.log("message="+msg);
}
else
{
msg = atob(msg);
console.log("message1="+msg);
}
var msgData = JSON.parse(msg);
if(msg.length < 1) //this means the cookie is not set and postMessage returns no data
{
console.log("bigmsgcode is empty, cannot redirect, Aborting",'err');
}}
var token=msgData.oauthToken;
var redirectUrl=msgData.oauthToken;
var siteid=msgData.extraParams.siteid;
var redirectUrl=msgData.Location;
var client_secret="CLIENT_SECRET_KEY"; //Annex Cloud will provide you with a client's secret key
var emailid=null;
var password=null;
SAS13.getScript("//api.socialannex.com/s13/v2/service/getuserinfo_bycode.php?client_secret="+client_secret+"&oauth_code="+token+"&siteid="+siteid+"&redirect_url="+encodeURIComponent(redirectUrl),function(data)
{
emailid=data.email;
password=data.password;
document.getElementById("CustomerEmail").value=emailid;
document.getElementById("CustomerPassword").value=password;
document.forms["customer_login"].submit();
});
// ]]></script></p>
<h2>You will be redirected to My Account page shortly.....</h2>
</div>
<div id="CustomerLoginForm">
<form method="post" id="customer_login" accept-charset="UTF-8" action=" ">
<input value="customer_login" name="form_type" type="hidden" />
<input name="utf8" value="✓" type="hidden" />
<input name="customer[email]" id="CustomerEmail" type="hidden" />
<input value="" name="customer[password]" id="CustomerPassword" type="hidden" />
</form>
</div>In the above code, the “CLIENT_SECERT_KEY” will be provided by Annex Cloud.
- After adding the above code, click Save to save all the changes. Annex Cloud’s Social Login Module will be displayed on a specific page.
Refer A Friend Shopify Integration
To Display Refer a Friend sharing page
Navigate to Online Stores > Pages, as shown in the following image.
- Click Add Page to create a new page Refer a Friend.
- In the Add Page window, the following options are available.
- Title: Add the specific title of the page.
- Click Show HTML.
- Provide the given code in the content area only after clicking Show HTML.
- Add the specific page title for Refer A Friend sharing page. After that, add the following div in the content section (after clicking on the view HTML button) to display the Refer a Friend sharing section:
<div id="sa_refer_friend"></div>- Now, click Save to save all the changes.
- After that, navigate to the Pages> page. liquid & add the following line at the end of the file, as shown in the following image.
{{ 'universal.js' | asset_url | script_tag }}NOTE: If the above line is already present on the page. liquid file, then do not add it to that file.
To display Refer a Friend invite/coupon code landing page
Navigate to Online Stores> Pages, as shown in the following image.
- Click Add Page to create a new page for the coupon code landing page.
- After clicking Add Page, it redirects to the following page.
- Now, follow the steps from the following image.
- Title: Add the specific title of the page.
- Click Show HTML.
- Provide the given code in the content area only after clicking Show HTML.
- As shown in the above image, add the specific page title for the coupon code landing page. After that, add the following div in the content section (after clicking on Show HTML) to display the Refer a Friend coupon code landing page:
<script>// <![CDATA[
var sa_page;
// ]]></script>
<div id="sa_refer_friend"></div>- Now, click Save to save all the changes.
- After that, navigate to the Pages> page. liquid & add the following line at the end of the file, as shown in the following image.
{{ 'universal.js' | asset_url | script_tag }}
NOTE: If the above code line is already present on the page. liquid file, then DO NOT add it again for the second time in that file.
Trackable Buttons Shopify Integration
- Click Online Store on the dashboard, and the Online Store section is displayed.
In the Online Store section, click Themes, and the Themes window is displayed.
- Within the Themes window, the option to customize the theme is available. Click Customize for the theme that needs to be edited.
- In the Customize window, click on the (...) (ellipsis) icon. A drop-down menu appears, From the dropdown menu, select Edit code, and the code editor window appears.
- In the code editor window, locate and click on the Template folder, a list of all files within the Template folder is displayed, as shown in the image.
- Click the specific page where you want to display the trackable buttons and add the tags below on that page.
- The user needs to locate the target page where the trackable buttons are to be added to the page.
- Once the target pages are determined, the user needs to add the following code.
<div id="socialannex-fblike"></div>
<div id="socialannex-s15-twfollow"></div>
<div id="sa_s22_instagram_follow"></div>
<div id="sa_pinit"></div>- After that, navigate to the Pages> page. liquid & add the following line at the end of the file, as shown in the following image.
{{ 'universal.js' | asset_url | script_tag }}
NOTE: If the above line is already present on the page. liquid file, then DO NOT add it again.
Loyalty Program Shopify Integration
To Add a Loyalty dashboard link
- Follow the below steps to add the loyalty dashboard link (which the user can access the My Store section after logging into the retailer’s website):
- Click Online Store on the dashboard, and the Online Store section is displayed.
- In the Online Store section, click Themes, and the Themes window is displayed.
- Within the Themes window, the option to customize the theme is available. Click Customize for the theme that needs to be edited.
- In the Customize window, click on the (...) (ellipsis) icon. A drop-down menu appears, From the dropdown menu, select Edit code, and the code editor window appears.
- In the code editor window, locate and click on the Template folder, a list of all files within the Template folder is displayed, as shown in the image.
- In the above image, all the available pages in the Template are listed.
- Click on the customers/account. liquid page, as shown in the image below.
- Add the following line at the end of the file.
<p><a href="/pages/my-rewards">My Rewards</a></p>- In the above code, update the value for the ‘href’ tag with the path of the loyalty dashboard page.
- Click Save to save all the changes.
To display the Loyalty Dashboard
- Follow the below steps to add the loyalty dashboard link (which the user will see in the My Store section after login to the retailer’s website):
- Click Online Store on the dashboard, and the Online Store section is displayed.
- Click Add Page to create a new page for the loyalty dashboard.
- After clicking Add Page, it redirects to the following page.
- Now, follow the steps from the following image.
- Title: Add the specific title of the page.
- Click Show HTML.
- Provide the given code in the content area only after clicking Show HTML.
- In the above image, add the specific page title (i.e. My Reward) for the loyalty dashboard. After that, add the following code in the content section (after clicking View HTML) to display the Customer Loyalty Dashboard page:
My Rewards
<div id="socialannex_dashboard"></div>
<script>
var sa_page=5;
</script>>- Now, click Save to save all the changes.
To get the end user’s email address
- Follow the below steps to get the end user’s email address (which we will use to display the user’s loyalty dashboard):
- Click Online Store on the dashboard, and the Online Store section is displayed.
- In the Online Store section, click Themes, and the Themes window is displayed.
- Within the Themes window, the option to customize the theme is available. Click Customize for the theme that needs to be edited.
- In the Customize window, click on the (...) (ellipsis) icon. A drop-down menu appears, From the dropdown menu, select Edit code, and the code editor window appears.
- In the code editor window, locate and click the Template folder, a list of all files within the Template folder is displayed, as shown in the image.
- In the above image, all the available pages in the Template are listed.
- Click the "page.liquid" page, and add the following code at the end of that file.
{% if customer %}
<input type="hidden" id="sa_cust_email" value="{{ customer.email }}" >
{% endif %}- Add the following line, if it’s not added previously:
{{ 'universal.js' | asset_url | script_tag }}- To assign Create an Account & Newsletter Signup points, follow the steps below to assign the loyalty points for Create an Account & Newsletter Signup loyalty actions:
- In the Shopify account dashboard, click Settings, and the Settings window is displayed.
- Within the Settings window, click on Notifications.
- In the Notifications window, scroll down to the section Create a webhook, as shown in the following image.
- Click Create a Webhook. A popup window appears.
- Select the Event as Customer creation and choose JSON as the Format from the drop-down list, Add the following URL in the URL section.
- In the above URL, update the value for the last parameter (i.e. value for secret) with the secret key, which is obtained after the creation of the webhook.
- Now, click the Save Webhook button to save all the changes.
- Click Create a webhook to update the customer, A popup window appears.
- In that popup, select the Customer updation option from the Event drop-down list. Add the following URL in the URL section.
- The required values of different parameters (from the above URL) are provided by Annex Cloud.
- Update the value for the last parameter (i.e. value for secret) with the secret key, which is obtained after the creation of the webhook, as shown in the image below.
- Now, click Save Webhook to save all the changes.
Share And Save Shopify Integration
- Click Online Store on the dashboard, and the Online Store section is displayed.
- In the Online Store section, click Themes, and the Themes window is displayed.
- Within the Themes window, the option to customize the theme is available. Click Customize for the theme that needs to be edited.
- In the Customize window, click on the (...) (ellipsis) icon. A drop-down menu appears, From the dropdown menu, select Edit code, and the code editor window appears.
- In the above image, all the available pages in the Template are listed.
- Click the “index.liquid” page & add the following code to that page:
Code:
<script type="text/javascript">
var sa_page = "1";
</script>
{{ 'universal.js' | asset_url | script_tag }}If the last line from the above code (i.e. {{ 'universal.js' | asset_url | script_tag }}) is already present in the index.liquid page, then do not add that line again.
Questions & Answers to Shopify Integration
Follow the below steps to integrate the Question & Answers module at the Shopify platform.
- Navigate to Online Store> Themes> Customize theme> Theme options> Edit code
- In the code editor window, locate and click the Template folder, a list of all files within the Template folder is displayed, as shown in the image.
In the above image, all the available pages in the Template are listed.
- Click the Product. liquid page to add the Question & Answers module.
- After clicking the page, the user is redirected to the following window.
- On the Product. liquid page, you have to add the following code for the Question & Answers module.
Code:
{% if product.id!='' %}
<!-----------Annex Cloud Q&A code------------>
<script type="text/javascript">
var sa_p_img_url = "{{ featured_image | img_url: '1024x1024' }}";
var sa_p_url = "{{ shop.url | append:product.url}}";
var sa_p_price = "{{ product.price | money_without_currency | strip_html | escape }}";
var sa_p_name = "{{ product.title }}";
var sa_p_id = "{{ product.id }}";
</script>
<div id="socialannex"></div>
<!----------------end----------------------->
{% endif %}- Now, add the line below at the end of the product. liquid file, as shown in the following image.
{{ 'universal.js' | asset_url | script_tag }}
Note: If the above line is already present in the product. liquid file, DO NOT add it again in that file.
- Now, click Save, to save all the changes.
Ratings And Reviews Shopify Integration
- Follow the below steps to integrate the Ratings & Reviews module steps below the Shopify platform.
- Click Online Store on the dashboard, and the Online Store section is displayed.
- In the Online Store section, click Themes, and the Themes window is displayed.
- Within the Themes window, the option to customize the theme is available. Click Customize for the theme that needs to be edited.
- In the Customize window, click on the (...) (ellipsis) icon. A drop-down menu appears, From the dropdown menu, select Edit code, and the code editor window appears.
- In the code editor window, locate and click the Template folder, a list of all files within the Template folder is displayed, as shown in the image.
- In the above image, all the available pages in the Template are listed.
- Click the Product. liquid page to add the Ratings and Reviews module.
- Click the Product. liquid page to add the Ratings and Reviews module.
- After clicking the Product. liquid page, the user is redirected to the following window.
- On the Product. liquid page, add the following Ratings and Review code.
Code:
<!-----------Annex Cloud RNR code------------>
<script type="text/javascript">
var sa_page="2";
var sa_p_img_url ="https:{{ featured_image | img_url}}";
var sa_p_url = "{{ shop.url | append:product.url}}";
var sa_p_price = "{{ product.price | money_without_currency | strip_html | escape }}";
var sa_p_name = "{{ product.title }}";
var sa_p_id = "{{ product.id }}";
var sa_p_description= "{{ product.description }}";
var sa_s28_review_form = "0";
var sa_s28_email ="{{ customer.email }}"; // Pass by Client [If user logged];
var sa_s28_first_name = "{{ customer.first_name }}"; // Pass by Client [If user logged];
var sa_s28_last_name = "{{ customer.last_name }}"; // Pass by Client [If user logged];
var sa_s28_user_location = ""; // Pass by Client [If user logged];
var sa_s28_location = window.location.href;
var sa_s28_product_url=sa_p_url; // Pass by client [Mandatory]
var sa_s28_template_id = "ENTER_R&R_TEMPLATE_ID"; // Pass by client [Provide by Annex Cloud]
var sa_s28_site_id = "ENTER_SITE_ID"; // Pass by client [ Provided by Annex Cloud]
var sa_s28_product_id = sa_p_id; // Pass by client [Mandatory]
var sa_s28_product_name =sa_p_name; // Pass by client [Mandatory]
var sa_s28_product_desc =sa_p_description; // Pass by client [Mandatory]
var sa_s28_product_image_url =sa_p_img_url; // Pass by client [Mandatory]
var sa_s28_product_price =sa_p_price;
</script>
{% assign sa_s28_site_id = "ENTER_SITE_ID" %}
{% assign sa_s28_template_id = "ENTER_R&R_TEMPLATE_ID" %} //provided by Annex Cloud
<link rel="stylesheet" type="text/css" media="screen" href="//s28.socialannex.com/s28-curl-css.php?
site_id={{ sa_s28_site_id }}&template_id={{ sa_s28_template_id }}">
<div id="socialannex-reviewrating-bottom"></div>
<!----------------end----------------------->
- Add the following lines to the product.liquid page, display at the top section of the Ratings and Reviews module.
<! -----------Annex Cloud RNR TOP code------------>
<div id="socialannex-reviewrating-top">
</div>
<! ----------------end----------------------->
- The following div is used to display the bottom section of the Ratings and Reviews page, which is added earlier in the product. liquid file.
<div id="socialannex-reviewrating-bottom" ></div>- Now, add the code below at the end of the product. liquid file.
{{ 'universal.js' | asset_url | script_tag }}NOTE: If the above line is already present in the product. liquid file, then DO NOT add it again in that file.
- Click Save to save all the changes.
Add Sale tracking script
- Follow the steps below to add the sales tracking script.
- In the Shopify account dashboard, click Settings, and the Settings window is displayed.
- After that, click the Checkout option, as shown in the following image.
- Scroll down to the Order status page section and find the Additional Scripts text box, as shown in the following image.
- In that text box, add the following script.
Script:
<script type="text/javascript">
var excludeProductArray = new Array();
var finalArray = new Array();
var i =1;
{% for line_item in line_ items %}
excludeProductArray[i] = {"id":"{{ line_item.id }}",
"product_name":"{{ line_item.title| url_encode }}",
"price":"{{ line_item.line_price | money_without_currency }}",
"qty":"{{ line_item.quantity }}",
"product_url":"{{ shop.secure_url| url_encode }}{{ line_item.variant.url| url_encode}}",
"product_image_url":"{{ line_item.image | img_url: 'small'| url_encode }}",
"category_id":"{{ line_item.product.category_id}}",
"category_name":"{{ line_item.product.type}}"};
finalArray[i] = i;
i++;
{% endfor %}
function satoObject(keys, vals, ref)
{
return keys.length === vals.length ? keys.reduce(function(obj, key, index) {
obj[key] = vals[index];
return obj;
}, ref || {}) : null;
}
var site_id= "ENTER_SITE_ID";
var excludeProductData = JSON.stringify(satoObject(finalArray, excludeProductArray));
var order_id= "{{ order_number }}";
var sale_amount= "{{ total_price | money_without_currency }}";
var email_id= "{{ customer.email }}";
var firstName="{{ customer.first_name }}";
var lastName="{{ customer.last_name }}";
var name="{{ }}";
var purchase_date="{{ order.created_at }}";
var coupon="{{ discount.title }}";
var datatString = 'site_id='+site_id+'&order_id='+order_id+'&sale_amount='+sale_amount+'&email_id='+email_id+'&name='+name+'&firstName='+firstName+'&firstName='+lastName+'&purchase_date='+purchase_date+'&coupon='+coupon+'&exclude_products='+excludeProductData;
var sa = document.createElement('script');
sa.type = 'text/javascript';
sa.async = true;
sa.src='//c.socialannex.com/c-sale-track/?'+datatString;
var sax = document.getElementsByTagName('script')[0];
sax.parentNode.insertBefore(sa, sax);
</script>After adding the above sales tracking script, click Save to save all the changes.