To activate ShopSocially Apps on your Demandware store, you will need to integrate ShopSocially tags with your Demandware Store.


You can download ShopSocially Demandware cartridge on ShopSocially website ShopSocially Demandware. 


ShopSocially cartridge for integration with Demandware


ShopSocially is a Certified LINK Technology Partner of Demandware. The certified ShopSocially cartridge for integration with Demandware store can be accessed at ShopSocially Cartridge. Please check the section 'Download Information' towards the end of the page. You will need to login into Marketplace section of Xchange portal of Demandware to access this page. Unzip the file and follow instruction in this document to install the cartridge.


Setup instructions for installing ShopSocially cartridge on Demandware store


Steps to integrate ShopSocially tag into Demandware store are given in sections below. Please follow the steps in the same order, section wise.


1. Installing ShopSocially Cartridge

2. Setting up ShopSocially Tag

3. Setting up the Codes


1. Installing ShopSocially Cartridge


Please follow the steps given below:


1. Login to your Demandware console with your Administrator Account.

2. In Administration, in Site Development, go to Import & Export.

3. In Import & Export Files section, click Upload. Upload the shop-socially-site-preference.xml under the “.\metadata” folder of int_shopsocially cartridge.

4. After uploading the xml file, click Administration. In Site Development, in Import & Export, in Meta Data section, click the Import button.

5. Select shop-socially-site-preference.xml from the list and click Next button. If required, repeat this step until you’ve successfully imported the xml file.

6. In Administration, in Sites, in Manage Sites, select the site from the list (Demandware store site in which you want to integrate ShopSocially tag).

7. In Settings tab, in Cartridges path, add int_shopsocially cartridge.


Go to top


2. Setting up ShopSocially Tag


Please follow the steps given below:


1. In Admin Panel, click Custom Preferences.  

2. Browse through the following path “Site >> Site Preferences >> Custom Preferences”, and click ShopSocially. Refer to Figure: Custom Site Preference Groups.


Figure: Custom Site Preference Groups

3. Please enter the parameters for your store to complete the custom site preferences as per given below:
  • ShopSocially Partner ID: Your unique partner ID of 32 characters, also known as Account ID. If you do not have a unique partner ID, please contact sales@shopsocially.com.
  • ShopSocially Product ID Type: Your default product type (For example, books generally have a product ID type of ISBN. For most e-commerce sites, UPC11 works).  
  • Enable ShopSocially: Use this to enable or disable the ShopSocially tag integration with your Demandware store.  
  • Enable Advanced Integration: Select this check box if you want to do advanced integration of ShopSocially tag with your Demandware store. It is mandatory for Post-Purchase Apps like Share-A-Purchase and for awarding loyalty points for purchase activity.  
  • Enable Loyalty: Select this check box if you want to enable loyalty program for your Demandware Store. For loyalty program to work, you will also have to make changes in Loyalty, in Merchant Center console. For more information refer Loyalty Merchant Center Changes at the end of this document.  
  • Enable Customer Q and A: Select this check box if you want to enable ShopSocially’s Customer Q and A App on all the product pages.  
  • Enable Social Login: Select this check box this if you want to enable ShopSocially’s Social Login App for your Demandware Store. For more information please refer to Configuring and Using Social Login.
  • Click Apply to save settings. You can also edit your settings. Refer to Figure: Input Parameters.

Figure: Input Parameters


Go to top
Setting up the Codes

Shop socially is encouraged to be called inside the footer, in our case, footer.isml. This is one of the practices in improving page load times where JavaScripts should be in the footer. 

Please note: Though the ShopSocially JavaScript codes are very lightweight, it is your choice on whether to put it in footer or in the <head> tag.

Please follow the steps given below:
1. In UX Studio, in File, in Import, in General folder, click the Existing Projects into Workspace and in the Select root directory, browse the location of the int_shopsocially cartridge.  
2. Select int_shopsocially cartridge and select Copy projects into workspace checkbox and click Finish button. 
3. Select at which part you are going to call ShopSocially Code. We recommend to put the scripts in the footer. In order to do this, go to footer.isml and add this line of code:

<isinclude template="shopsocially/shopsocially"/>

Refer to Figure: UX Studio.

 

Figure: UX Studio


Please note:

  • In case if you want to put the ShopSocially script in the header, then add the line of code above in htmlhead.isml.  
  • It is important to note that for integrating ShopSocially tag in your Demandware store, template chosen for the store should on all pages call either the footer.isml (in case if you want to put the scripts in the footer.isml) or htmlhead.isml (in case you want to put the script in htmlhead.isml). It is implicitly assumed that all your pages call these two files:

footer.isml or htmlhead.isml.

  • By standard Demandware practice, all template pages in Demandware e-commerce sites calls htmlhead.isml or footer.isml so when you put the ShopSocially script in either of these two files, allows the script to be called in all pages of the site. ShopSocially tag needs to be put either in footer or in header, and not in both the sections.

4. In Business Manager, open Merchant Tools. In Site URLs, in URL Rules, in Pipeline URLs, add the following rules:
1. shopsocially-loyalty-login resolves to ShopSocially-Loyalty
2. loyalty-dashboard resolves to ShopSocially-LoyaltyDashboard
5. For Social Login App, go to accountlogin.isml and add the following lines at the place where you want the social login buttons to appear.
<isif condition="${dw.system.Site.current.preferences.custom.shopSociallyIsEnable && dw.system.Site.current.preferences.custom.enableSocialLogin}">
<div id="ssmi_social_login_div"></div> 
<isinclude template="shopsocially/shopsociallysociallogin"/> 
</isif>
6. By standard Demandware practice, all template pages in Demandware e-commerce sites calls htmlhead.isml or footer.isml. So when you put the ShopSocially script in either of these two files, it allows the script to be called in all pages of the website. Please note: ShopSocially tag need to be put either in the footer or in the header, and not in both sections.
7. In Business Manager, in Merchant Tools, in Site URLs, in URL Rules, in Pipeline URLs, add the following rules:
1. shopsocially-loyalty-login resolves to ShopSocially-Loyalty
2. loyalty-dashboard resolves to ShopSocially-LoyaltyDashboard
8. For Social Login, in the file which holds your login box (logininclude.isml), add the following lines at the place where you want the Social Login buttons to appear:
<isif condition="${dw.system.Site.current.preferences.custom.shopSociallyIsEnable
&& dw.system.Site.current.preferences.custom.enableSocialLogin}"> 
<div id="ssmi_social_login_div"></div> 
</isif>
9. Place the following lines on the same page outside of the login form:
<isif condition="${dw.system.Site.current.preferences.custom.shopSociallyIsEnable &&
dw.system.Site.current.preferences.custom.enableSocialLogin}"> 
<isinclude template="shopsocially/shopsociallysociallogin"/> 
</isif>

Please note: Ensure that these lines do not belong to any form.

10. For Social Login to work, you will need to create custom attributes in the ‘Customer Profile’ object type. 


In Business Manager, in Administration, in Site Development, in System Object Definitions , in Select ‘Profile’ object, in Attribute Definitions, create the following new attribute definitions :

  • isMerged - ( ID: isMerged , value Type: Boolean) 
  • network - (ID: network, value Type: String)  
  • shopSociallyGender – (ID: shopSociallyGender, valueType:String)  
  • socialBirthday – (ID: socialBirthday, valueType:String)
Please note: Ensure that the IDs of the attributes are as mentioned above. In absence of these fields, Social Login will not work.

11. For customer Q and A App, go to productdetail.isml and add the following lines after </div><!-- /pdpMain -->

<isif condition="${dw.system.Site.current.preferences.custom.shopSociallyIsEnab le && dw.system.Site.current.preferences.custom.enableQnA}">
<div class="qna">  
<isinclude template="shopsocially/shopsociallyqna"/>  
</div>  
</isif>
12. In Account Pipeline, in Account-SetNewPassword, add a call node to ShopSocially-MergeCheck after “ResetCustomerPasswordWithToken” pipelet and add the corresponding actions for “ok” and “error”. Refer to Figure: Account Pipeline.

Figure: Account Pipeline


13. In COSummary Pipeline, in COSummary-ShowConfirmation node, add 3 assign nodes. Refer to Figure: COSummary Pipeline. It is assumed that the COSummary-ShowConfirmation node contains the Thank You page or the Order Confirmation page where the confirmation.isml is called.

COSummary Pipeline


14. The Assign node will just have the value as in Figure: Assign Node. When you see this value, your ShopSocially integration with Demandware will be complete.

Figure: Assign Node



Loyalty Merchant Center Changes

For loyalty program to work, you will need to make changes in Loyalty in Merchant Center console.

Please follow the steps given below:

1. Login to Merchant Center and click Loyalty tab.
2. Click Dashboard Options.
3. In Authentication Options, in Authentication Type, select Base64 Authentication from drop down.
4. In Loyalty Authentication URL, enter http://<Your demandware store URL>/shopsocially-loyalty-login
Please note: <Your demandware store URL>: Here you need to enter Merchant Demandware Store URL (Your Demandware Store URL.
5. Select and clear Show Logout Button check box. Refer to Figure: Loyalty Authentication URL.

Figure: Loyalty Authentication URL


6. In Loyalty Dashboard, enter http://<Your demandware store URL>/loyalty-dashboard

Please note: <Your demandware store URL>: Here you need to enter Merchant Demandware Store URL (Your Demandware Store URL. Refer to Figure: User Dashboard URL.

Figure: User Dashboard URL


Go to top