Instalation of a j query script

[peter-s]

Hi there, I am really new to the the who ecommerce side of things and on a bit of a learning curve, I have had a search through the forums and on the internet as general, but I am now at a point where I don't know what to do. I have been able to install several addons to my site without any issue, untill it came to the social media side of things.

I am Looking to install a "floating" side bar of various social media links, and found the perfect one, It should have been a simple case of installing like any other mod, but for the life of me I cannot get this to work. I know you need to rename files in the JS folder to _Jscript to get zen cart to recognise them, however I still cannot fathom the rest out.

I am using the latest version of Zen cart with the alien-stemware template, The sidebar I am trying to install can be seen here

http://www.jqueryscript.net/social-m...-Sidebars.html

Would anyone be able to point me out in the right direction to how to install the plugin. The instalation instruction that come with it are not as clear as the normal instaructions.

Alternativly, if anyone knows of a similar style plugin I would also consider that as an possability.

[kobra]

Do you wish this to be present on all of your ZenCart pages?

What/where have you attempted to implement this?

[peter-s]

Hi there, Thanks for getting back to me. Ideally I would like it on all pages, but this can be changed if it is easier to implement

I did try to load

<link rel="stylesheet" type="text/css" href="css/social.css" />
<div id="socialside"></div>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/socialbars.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/socialbars.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/social.css" />
<div id="socialside"></div>

at the end of html_header.php (before the </head> located in /public_html/includes/templates/alien-stemware/common. This is the only place that I know of where /head command is used.

Also tried in tpl_main_page.php as I think this is the main page for the entire site

Have to admit that I am proberbly putting things in the totally wrong place as I am only in my first week of learning.
ANY help you can provide, either in the form of an answer on how to install, or a link to a site which I will be able to learn from would be most welcome.

[kobra]

Maybe this will assist
https://www.zen-cart.com/content.php...-the-home-page

You do not need to list the following

<link rel="stylesheet" type="text/css" href="css/social.css" />

As ZenCart will process all *.css files that are in your templates /css directory

Also calling out

<div id="socialside"></div>

Before the head tag is not kosher

Rename these
2.1.0.min.js
jquery-ui.min.js
socialbars.js

to

jscript_2.1.0.min.js
jscript_jquery-ui.min.js
jscript_socialbars.js

And upload them to your templates /jscript directory

[peter-s]

Many thanks for getting back to me Kobra, I appricate your time in helping me out :)
However I am little confused to the nature of the link you gave me as it seems to be refrence flash.
but using that as a base refrence I done the following

created a file "jscript_swfobject.php" in /public_html/includes/templates/alien-stemware/jscript with the following

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

The first line of the code is from the link you gave me to read, and the second two lines are from the vague instalation guide on the page where I got the plugin from here

Next I created a file "define_main_page.php" in the /public_html/includes/languages/english/html_includes/alien-stemware
and put the Flash coding from the page you gave me to read.

This gave me a lovely band of colorfull bars down the middle of the screen. as can be seen here
I think I have to inset

<div id="socialside"></div>

into a file somwhere, but I have no idea where to put it.

[mc12345678]

That div, from reading through the guide goes where you want the social sidebar to appear. So you would need to figure that part out/let us know so that we can advise on which page(s) to apply the code. Another way to look at it is to identify on which pages it is not desired to have...

[mc12345678]

Seems that should also preface the filename of the new stylesheet with style as the first part of the filename. See the code associated with includes/templates/YOUR_TEMPLATE/common/html_header.php or the version in templates_default if it is not in the above directory.

The css files are loaded based on matching certain criteria not just because they are present in the directory.

[peter-s]

Thanks for getting back to me MC,

This image should explain better what I am trying to achieve, Sorry I dont yet know the propper vocablary for describing where it is to go, other that "everywhere a customer goes"

This is how I would like it to look, Basicly no matter where a vistor goes on the site they will have access to the social media buttons. There is only going to be 3 or 4 there, and I already figured out where to edit the Jscript for that :)


Thanks again for any help, I am actually having a lot of fun learning this stuff :)

[mc12345678]

Three places come to mind, with possibly a better/more appropriate to be identified.

At the end of common/tpl_header.php
In the module associated with the left column
Or in common/tpl_main_page towards the first of the content displayed so that the tag would be applied towards the beginning. The new css file should address further placement, but would be the place to look to modify further.

[kobra]

I suspect that the div needs to be in a copy of tpl_main_page.php probably about line 75 here

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>
<div id="socialside"></div>
<?php

But you also need something to be contained in this div