Knowledgebase: SocialCommerce
How can I add the "Share Your Purchase - Facebook" function to my store?
Posted by Henry Suarez

Beginning with 3dcart's version 5.1.1; if your store is integrated with 3dcart's Facebook Connect add-on, you can also utilize a new "Share Your Purchase" function on your store.

This function will create a simple ajax pop up window that will encourage your shoppers to share news of their purchase with both their Facebook friends and Twitter followers upon completion of a purchase. This presents yet another way in which you can use Social Media channels to drive business to your store!

Note: As mentioned, you will need to have 3dcart's Facebook Connect add-on installed in order to use the "Share your Purchase" feature. If you do not currently have 3dcart's Facebook Connect add-on, please click here for details on ordering it.

Adding the "Share Your Purchase" Script to your Checkout Page

The first step in the process will be to retrieve the necessary coding that is required for the "Share Your Purchase" feature. To begin, log into your 3dcart Online Store Manager.

  1. Go to Settings =>General =>Store Modules
  2. Look for the "Enable Facebook Connect" setting

  1. Click on "Change Settings"

Along with your Facebook App ID and Secret keys, you will see a series of text variables that will be used for your "Share your Purchase" options.

These are:

  • Share Message - Facebook: The basic sharing message that will be displayed on your shoppers' Facebook feeds, including the product name, your store name, and a brief description of the product.
  • Share Message - Twitter: The basic sharing message that will be displayed on your shoppers' Twitter feeds, including the product name and your store name.

Tip: You may edit these messages however you see fit, but please keep in mind that there are certain character limitations that come into play with Social media postings. (i.e. Twitter has a well-known 140 character limit)

Also, please note that only the following 3 dynamic product variables work within the message text:

  • [store_name]
  • [name]
  • [description]

Below the "Share Message" areas, you will then see two specific scripts that will be used for the "Share Your Purchase" feature. Each of these scripts will behave on your store differently, so select one (CTRL-A) and copy it (CTRL-C) to your computer's clipboard.

The two options are:

  • Display the Share Your Purchase Window Automatically: Upon completion of the sale, an ajax modal window will open up automatically and encourage your shopper to share their purchase. The pop up window will give the option of either posting the share to Facebook or Twitter.
  • Display the Share Your Purchase Button: At the final checkout page, your shoppers will see a button that will then open up the ajax modal pop up window described above.

Additional Information: The "Share Your Purchase" modal window is based on the simplemodal jQuery plugin. As such, you can edit its display placement options relatively freely. For more information on this, please review the simplemodal settings by clicking here.

You can also edit the template used by the modal to customize the look and feel of the actual pop up window. The template used for this feature is located via FTP at "web/assets/templates/common/shareyourpurchase.html"

(Please note that 3dcart support will not be able to assist in the customization or designing of the modal window or its template)

Activating "Share Your Purchase"

Once you've selected and copied the script that you'd like to use, you will now need to place it onto your store's Checkout 4 template. To do this, please use the following steps.

From your Online Store Manager:

  1. Go to Settings =>Design =>Titles & Content
  2. Look for "Checkout #4" and click on its "Edit" button

  1. Paste (CTRL-V) the copied script code into the "Footer" section at the bottom
  2. Click "Save Changes" at the top right


How It Will Look

Once you are complete with the above steps, your shoppers will then see the following upon a successful purchase on your store:

Automatic script:

Manual script:


Comments (1)
Andrew Colsky
12 March 2013 11:24 AM
Nice feature.
Post a new comment
 
 
Full Name:
Email:
Comments:
CAPTCHA Verification 
 
Please enter the text you see in the image into the textbox below. This is required to prevent automated registrations and form submissions.

Help Desk Software by Kayako Fusion