A client of mine didn’t like the way the built in share buttons that now come with CS-Cart looked so I integrated the free service Shareaholic for them. It works really well! Here is how I did it:
- Create a free Shareaholic account here: http://www.shareaholic.com
- Add your website to Shareaholic.
- Click “Add App Location” drop down at the bottom of the Dashboard page. Select “Share Buttons” as the type.
- Configure all of your services and settings. Please note that I usually use the mini buttons with the side counter since they are nice and compact. Save your settings (FYI I usually call this location “CS-Cart Products” for easy identification).
- Make sure my_addons addon is turned on in CS-Cart.
- Using FTP navigate to:
For 4.x.x: /design/themes/THEME_NAME/templates/addons/my_changes/hooks/index
For 3.x.x: /skins/THEME_NAME/customer/addons/my_changes/hooks/index
(you might have to create the “my_changes” and below folders, depending on if you have other hooks in use or not).
- If you do not have a file called “scripts.post.tpl” already please create it. In that file you need to add the following code, making sure to put in your Site Code from Shareaholic (get this on the dashboard)
<br />
<!-- Shareaholic buttons --><br />
{literal}<br />
<script type="text/javascript"><br />
//<![CDATA[<br />
(function() {<br />
var shr = document.createElement('script');<br />
shr.setAttribute('data-cfasync', 'false');<br />
shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';<br />
shr.type = 'text/javascript'; shr.async = 'true';<br />
shr.onload = shr.onreadystatechange = function() {<br />
var rs = this.readyState;<br />
if (rs && rs != 'complete' && rs != 'loaded') return;<br />
var site_id = 'ENTER YOUR SITE CODE HERE OR IT WONT WORK!!';<br />
try { Shareaholic.init(site_id); } catch (e) {}<br />
};<br />
var s = document.getElementsByTagName('script')[0];<br />
s.parentNode.insertBefore(shr, s);<br />
})();<br />
//]]><br />
</script><br />
{/literal}
```<br />
<br />
8. Then you need to add code to the product pages. Again in FTP navigate to:<br />
For 4.x.x: /design/themes/THEME_NAME/templates/addons/my_changes/hooks/products<br />
For 3.x.x: /skins/THEME_NAME/customer/addons/my_changes/hooks/products<br />
<br />
(again you may have to make the products folder).<br />
9. Create the file "buy_now.post.tpl" if it does not exist. This will add the share buttons under all of the pricing and add to cart buttons on every product page. In this file you need to add the code snippet from the new location you created in step #3. The code snippet is to the right of whatever name you gave your location and will look similar to this:<br />
<br />
```php
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='XXXXXXX'></div>
```<br />
<br />
10. Once all files are on the server and you have configured everything at Shareaholic you need to clear your CS-Cart cache by going to Administration > Storage > Clear Cache<br />
11. Then you will want to go back to Shareaholic and press the "Verify Site" button on the dashboard. If you get the green bar saying it verified the site you should be good to go!<br />
<br />
I hope you all enjoy this and if you need any help getting this up and running on your own site or need help with anything else related to CS-Cart please think of me!<br />
<br />
I attached a couple of helpful images <img src="upload://rA9Qa8gnUPZzRZRdI8kt3dpjkrs.png" class="bbc_emoticon" alt=":)"><p><a href="127.0.0.1/uploads/monthly_08_2015/post-13686-0-25599300-1438889632.jpg">shareaholic-buttons-csc.jpg</a></p><p><a href="127.0.0.1/uploads/monthly_08_2015/post-13686-0-79471700-1438890447.jpg">shareaholic-settings-csc.jpg</a></p>