Jump to content

[MODULE] Slideout image menu v2.0 - PS 1.2/1.6

shacker

By shacker ,
in Free Modules & Themes

 Share Followers 2

Recommended Posts

shacker

shacker 1,055

Posted
Posted (edited)

Add a slide out menu with jquery animation to the left side of your web

http://catalogo-onli...prestashop.html

-added Facebook/Twitter lien

Dont forget to add your stores to
DIRECTORY-STORES.COM
A free directory of prestashop stores.

v1.5 - can be used in right / left position

v1.6 - Support multi shop and ability to disable startup animation

v1.7 - fix bug in the purchasing process in 1.5...

v1.8 - add google +1

v2.0- compatible ps 1.6+bootstrap

 

slideout-modules-prestashop.jpg



VISIT OUR SITE FOR LATEST VERSION OF THE MODULE AND MORE FREE MODULE
www.catalogo-onlinersi.com.ar
 

32195_FFKkGXXdC1RVGP2EYJg4_t

slideout.zip

Edited by shacker (see edit history)
  • Like 1

Share this post

Link to post
Share on other sites
ysco

ysco 77

Posted
Posted

Hello Lucas

I just checked the module, it is really great ;)
Many thanks for the fast work on this module buddy, I really appreciate it.
Thanks like always.

Best regards,


Ysco..

Share this post

Link to post
Share on other sites
shacker

shacker 1,055

Posted
Posted
Hello Lucas

I just checked the module, it is really great ;)
Many thanks for the fast work on this module buddy, I really appreciate it.
Thanks like always.

Best regards,


Ysco..

Your welcome buddy.
This version dont use jquery 1.3 , so no problem with compatibility

Share this post

Link to post
Share on other sites
  • 2 weeks later...
Crisp

Crisp 0

Posted
Posted

Thanx for this awesome module!

One question though:
- I checked my webshop @ 1024 x 768 and the slideout module overlays the category block on the left sidebar so ppl cant click the category but press one of the slides instead, so thats pretty annoying. I know most customers use higher resolutions these days but I would still like to solve it for lower resolutions aswell

Is there a way to fix this? One solution is to ask customers to buy a better monitor with a higher resolution ;)

What numbers should i change in the css file to get a smaller sized slideout? I tried it but had some issues with it.

Share this post

Link to post
Share on other sites
shacker

shacker 1,055

Posted
Posted
Thanx for this awesome module!

One question though:
- I checked my webshop @ 1024 x 768 and the slideout module overlays the category block on the left sidebar so ppl cant click the category but press one of the slides instead, so thats pretty annoying. I know most customers use higher resolutions these days but I would still like to solve it for lower resolutions aswell

Is there a way to fix this? One solution is to ask customers to buy a better monitor with a higher resolution ;)

What numbers should i change in the css file to get a smaller sized slideout? I tried it but had some issues with it.

Tell me your site url and i check and apply a solution

Share this post

Link to post
Share on other sites
  • 1 month later...
bksmartit

bksmartit 2

Posted
Posted

This is a great module and I really like it!

I noticed one issue here!
I installed this module on my live site and I noticed that when I use this module from my front office and I click to login from this slideout then it will change page to login page but it doesn't display https://www. (as secure connection) but I see only http://www. (unsecure connection) but when I click login on the slideout again then change to https://www. however when I click RSS icon or Checkout icon or email icon from the slideout, it stays as secure connection - https://www. Plus when I click email or checkout I am getting error related to a javascript and the page freeze.

I use the latest version of Prestashop.

Please let me know if you noticed this happening and if there is fix for it?

Thank you

Share this post

Link to post
Share on other sites
bksmartit

bksmartit 2

Posted
Posted

I did cleared cache and I was able to download the new update!

I installed on my website and it seems working better but I still have some issues with freezing and getting errors under IE v.8
When I click in the slideout, the login or contact button I have the error and freeze in IE8:
the message: Message: Permission denied
Line: 94
Char: 3
Code: 0
URI: https://www.abilityinterface.com/modules/blockcart/ajax-cart.js

Under firefox is working better and I don't get any errors and it doesn't freeze.

However on both browsers I noticed when I click in the slideout to browse to login page it doesn't change to "https:www" secure connection it is still staying in unsecure connection?

Share this post

Link to post
Share on other sites
bksmartit

bksmartit 2

Posted
Posted

YOU ARE AMAZING!!!

It is working like a charm now!

I added {$base_dir_ssl} in the tpl file as you recommended in the link: login and contact.

Thank you a million and for your super quick respond with the solution

Best Regards,

Share this post

Link to post
Share on other sites
  • 3 months later...
  • 4 weeks later...
ShowYou

ShowYou 17

Posted
Posted

Hello,
I have PS 1.4.0.17 and i have error appear in Mozilla :
TypeError: Error #1010: Un terme n'est pas défini et n'a pas de propriété.
at Main/::loadFirstSlide()
at Main/::onFontInit()
at Main/::onIOError()
What is the problem ?

Share this post

Link to post
Share on other sites
shacker

shacker 1,055

Posted
Posted
Shacker,
Thanks for your response. Your module work well. An other module (block cuber) make trouble in my website. Now, it's allright ! ;-)


what is the problem with the module

Share this post

Link to post
Share on other sites
  • 1 month later...
  • 2 weeks later...
vestax

vestax 3

Posted
Posted

Hello, I just upgrade to version 1.4.2 of the module is presatshop 'View Unit more on page aacueil

I just downloaded the version compatible with 1.4 but cele appears not

When the module is enabled, I no longer block the right on the homepage is the module is not present slidout

you have a solution please

Share this post

Link to post
Share on other sites
  • 1 month later...
gamersmarket

gamersmarket 0

Posted
Posted

Firstly I would like to thank you for your fast response. I am not a programmer, so the results of my coding was a server error, and error in the module. I have adjusted the slideout.tpl, the style.css and the slideout.php files. Can you take a look, and say what is wrong with them? Thank you in advance.

 

slideout.tpl: 

  <ul id="navigation">
  {if $home eq "yes"}
       <li class="home"><a href="{$base_dir}index.php" title="{l s='Home' mod='slideout'}"></a></li>
  {else}{/if}
   {if $account eq "yes"}
       <li class="about"><a href="{$base_dir}my-account.php" title="{l s='My account' mod='slideout'}"></a></li>
       {else}{/if} 
        {if $cart eq "yes"}
       <li class="search"><a href="{$base_dir}order.php" title="{l s='Cart' mod='slideout'}"></a></li>
        {else}{/if}
        {if $rss eq "yes"}
       <li class="rssfeed"><a href="{$base_dir}modules/feeder/rss.php" title="{l s='RSS' mod='slideout'}"></a></li>
        {else}{/if}
        {if $contact eq "yes"}
	 <li class="contact"><a href="{$base_dir}contact-form.php" title="{l s='Contact' mod='slideout'}"></a></li>
   {else}{/if}
   <li class="delivery"><a href="{$base_dir}contact-form.php" title="{l s='Delivery' mod='slideout'}"></a></li>
   {else}{/if}
  </ul>


       <script type="text/javascript">
           $(function() {ldelim}
               $('#navigation a').stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},3000);

               $('#navigation > li').hover(
                   function ()  {ldelim}
                       $('a',$(this)).stop().animate( {ldelim}'marginLeft':'-22px'{rdelim},200);
                   },
                   function ()  {ldelim}
                       $('a',$(this)).stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},200);
                  {rdelim}
               );
           {rdelim});
       </script>

 

 

 

style.css:

 

ul#navigation {
   position: fixed;
   margin: 0px;
   padding: 0px;
   top: 10px;
   left: 0px;
   list-style: none;
   z-index:9999;
}
ul#navigation li {
   width: 100px;
}
ul#navigation li a {
   display: block;
   margin-left: -52px;
   width: 100px;
   height: 70px;    
   background-color:#CFCFCF;
   background-repeat:no-repeat;
   background-position:center center;
   border:1px solid #AFAFAF;
   -moz-border-radius:0px 10px 10px 0px;
   -webkit-border-bottom-right-radius: 10px;
   -webkit-border-top-right-radius: 10px;
   -khtml-border-bottom-right-radius: 10px;
   -khtml-border-top-right-radius: 10px;
   /*-moz-box-shadow: 0px 4px 3px #000;
   -webkit-box-shadow: 0px 4px 3px #000;
   */
   opacity: 1;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation .home a{
   background-image: url(../images/home.png);
}
ul#navigation .about a      {
   background-image: url(../images/user.png);
}
ul#navigation .search a      {
   background-image: url(../images/cart.png);
}

ul#navigation .rssfeed a   {
   background-image: url(../images/rss.png);
}
ul#navigation .contact a    {
   background-image: url(../images/contact.png);
}

ul#navigation .delivery a    {
   background-image: url(../images/contact.png);
}

 

slideout.php:

 

<?php

class SlideOut extends Module
{
function __construct()
{
	$this->name = 'slideout';
	$this->tab = 'Blocks';
	$this->version = 1.1;

	parent::__construct();

	$this->displayName = $this->l('SlideOut');
	$this->description = $this->l('Adds a slide out menu  - www.catalogo-onlinersi.com.ar');
}

function install()
{
if (parent::install() == false OR $this->registerHook('header') == false OR !$this->registerHook('footer'))
 		return false;
			if (!Configuration::updateValue('SLIDEOUT_HOME', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_ACCOUNT', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_CART', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_RSS', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_CONTACT', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_DELIVERY', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_LEFT', '-90'))
		return false;
 	return true;
}
public function getContent()
{
	$output = '<h2>'.$this->displayName.'</h2>';
	if (Tools::isSubmit('submitSlideout'))
	{

		$home = Tools::getValue('home');
		$account = Tools::getValue('account');
		$cart = Tools::getValue('cart');
		$rss = Tools::getValue('rss');
		$contact = Tools::getValue('contact');
		$delivery = Tools::getValue('delivery');
			$left = Tools::getValue('left');

			Configuration::updateValue('SLIDEOUT_HOME', $home);
			Configuration::updateValue('SLIDEOUT_ACCOUNT', $account);
			Configuration::updateValue('SLIDEOUT_CART', $cart);
			Configuration::updateValue('SLIDEOUT_RSS', $rss);
			Configuration::updateValue('SLIDEOUT_CONTACT', $contact);
			Configuration::updateValue('SLIDEOUT_DELIVERY', $delivery);
			Configuration::updateValue('SLIDEOUT_LEFT', $left);


		if (isset($errors) AND sizeof($errors))
			$output .= $this->displayError(implode('<br />', $errors));
		else
			$output .= $this->displayConfirmation($this->l('Settings updated'));
	}
	return $output.$this->displayForm();
}
	public function displayForm()
{
	$output = '

	<form action="'.$_SERVER['REQUEST_URI'].'" method="post">
		<fieldset><legend><img src="'.$this->_path.'logo.gif" alt="" title="" />'.$this->l('Settings').'</legend>

<label>'.$this->l('Margin left').'</label>
			<div class="margin-form">
				<input type="text" size="5" name="left" value="'.Tools::getValue('left', Configuration::get('SLIDEOUT_LEFT')).'" />
				<p class="clear">'.$this->l('Margin to left (nevative value, default -90))').'</p>

			</div>
<label>'.$this->l('Home button?').'</label>
<div class="margin-form">
 <select name="home" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_HOME') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_HOME') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('Account button?').'</label>
<div class="margin-form">
 <select name="account" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_ACCOUNT') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_ACCOUNT') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('Cart button?').'</label>
<div class="margin-form">
 <select name="cart" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_CART') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_CART') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('RSS button?').'</label>
<div class="margin-form">
 <select name="rss" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_RSS') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_RSS') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('Contact button?').'</label>
<div class="margin-form">
 <select name="contact" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_CONTACT') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_CONTACT') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>
<p class="clear">'.$this->l('Autorotate images)  ').'</p>

	</div>

	<label>'.$this->l('Delivery button?').'</label>
<div class="margin-form">
 <select name="delivery" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_DELIVERY') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_DELIVERY') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>
<p class="clear">'.$this->l('Autorotate images)  ').'</p>

	</div>

			<center><input type="submit" name="submitSlideout" value="'.$this->l('Save').'" class="button" /></center>
		</fieldset>
	</form>';
	return $output;
}

/**
* Returns module content
*
* @param array $params Parameters
* @return string Content
*/
function hookFooter($params)
{
	global $smarty, $protocol_content, $server_host, $home, $account, $rss, $cart, $left, $contact, $delivery;


	$home = Configuration::get('SLIDEOUT_HOME');
	$account = Configuration::get('SLIDEOUT_ACCOUNT');
	$cart = Configuration::get('SLIDEOUT_CART');
	$rss = Configuration::get('SLIDEOUT_RSS');
	$contact = Configuration::get('SLIDEOUT_CONTACT');
	$delivery = Configuration::get('SLIDEOUT_DELIVERY');
	$left = Configuration::get('SLIDEOUT_LEFT');

	$smarty->assign(array(
		'home' => $home,
		'account' => $account,
		'rss' => $rss,

		'cart' => $cart,
		'left' => $left,
		'contact' => $contact
			'delivery' => $delivery

	));

	return $this->display(__FILE__, 'slideout.tpl');
}
function hookHeader($params)
{	




	return $this->display(__FILE__, 'slideout-header.tpl');
}


}

?>

 

style.css

Share this post

Link to post
Share on other sites
shacker

shacker 1,055

Posted
Posted

style is ok, change this in tpl

 

<li class="delivery"><a href="{$base_dir}contact-form.php" title="{l s='Delivery' mod='slideout'}"></a></li>

{else}{/if}to

<li class="delivery"><a href="{$base_dir}contact-form.php" title="{l s='Delivery' mod='slideout'}"></a></li>

Share this post

Link to post
Share on other sites
  • 2 weeks later...
  • 4 weeks later...
shacker

shacker 1,055

Posted
Posted

slideout.tpl

 

y el margin left inicial lo puedes modificar, el otro lo cambias desde la configuracion del moudulo

 

 

<script type="text/javascript">

$(function() {ldelim}

$('#navigation a').stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},3000);

 

$('#navigation > li').hover(

function () {ldelim}

$('a',$(this)).stop().animate( {ldelim}'marginLeft':'-22px'{rdelim},200);

},

function () {ldelim}

$('a',$(this)).stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},200);

{rdelim}

);

{rdelim});

</script>

Share this post

Link to post
Share on other sites
  • 3 weeks later...
  • 3 months later...
lubo_ke

lubo_ke 0

Posted
Posted

Hello,

at first, thanks a lot for good work...

 

i have a little problem, on every page on my site is module working, but on home (index) it dont work, it have problem with nivo slider, but dont know what is the problem ... do you know something about this bug ? or its only bug on my page ... i cant post u an url cause i have it on local .... thanks for your reply

Share this post

Link to post
Share on other sites
tdr170

tdr170 679

Posted
Posted

Giving this module a try workes fine with 1.4.6.2, However for myself I am modifying almost everything.

Changed all of the links to outside websites and created my own images for the sliders.

I also moved the slider out so it is positioned just on the left edge in full view.

So far it works fine my only concern is what will happen on a smaller monitor I have a widescreen samsung running at 1680x1050.

I have a feeling on a small monitor that the slider will overlap my left column.

Share this post

Link to post
Share on other sites
tdr170

tdr170 679

Posted
Posted

Where I had it positioned it was on top of the left menu.

I had altered so it was not hidden, I had it on left side in full view as I felt that it was sort of hidden and wanted to make sure it was seen.

I looked on another monitor and it was indeed over the left menu, so what I did was to go back to original setup with it hidden on left and changed the borders.

Now I have border top, bottom, left and right with the right border in blue and 3px wide, stangs out this way.

Share this post

Link to post
Share on other sites
lubo_ke

lubo_ke 0

Posted
Posted

no the problem in not solved, i think that problem comes with nivo slider, becasuse your modul works great on every other page, but not on homepage ... jbx_menu is now disabled, can u look on page ...

Share this post

Link to post
Share on other sites
hrtr

hrtr 0

Posted
Posted

El código original:

{if $rss eq "yes"}
    <li class="rssfeed"><a href="{$modules_dir}feeder/rss.php" title="{l s='RSS' mod='slideout'}"></a></li>
	 {else}{/if}

 

Editado código, por ejemplo:

{if $rss eq "yes"}
    <li class="rssfeed"><a href="[b]http://www.google.com[/b]" title="{l s='RSS' mod='slideout'}"></a></li>
	 {else}{/if}

Se debe redirigir al sitio de Google, ¿verdad? Yo lo hago y sólo mantiene la misma URL original. He editado slideout.tpl.

Share this post

Link to post
Share on other sites
hrtr

hrtr 0

Posted
Posted 
[color=#666600]{[/color][color=#000088]if[/color] $rss eq [color=#008800]"yes"[/color][color=#666600]}[/color]
           [color=#666600]<[/color]li [color=#000088]class[/color][color=#666600]=[/color][color=#008800]"rssfeed"[/color][color=#666600]><[/color]a href[color=#666600]=[/color][color=#008800]"http://www.google.com"[/color] title[color=#666600]=[/color][color=#008800]"{l s='RSS' mod='slideout'}"[/color][color=#666600]></[/color]a[color=#666600]></[/color]li[color=#666600]>[/color]
                [color=#666600]{[/color][color=#000088]else[/color][color=#666600]}{/[/color][color=#000088]if[/color][color=#666600]}[/color]

Pongo el enlace en negrita, más lo que el código no funciona, siga el cambio correcto.

Share this post

Link to post
Share on other sites
  • 2 weeks later...
Rui1

Rui1 1

Posted
Posted

hello, can upgrade to run on Internet Explorer 9? is that I had to uninstall the module, if it did not show my website properly.

Greetings

Share this post

Link to post
Share on other sites
  • 3 weeks later...
dsczone

dsczone 0

Posted
Posted

hy... i try to modify this line...

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/share.php?u=http://{$servername}{$requesturi}" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

to modify in and don`t work !!!!!

 

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/DSCZone" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

 

 

PLEASE HELP THANKS..

Share this post

Link to post
Share on other sites
shacker

shacker 1,055

Posted
Posted

hy... i try to modify this line...

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/share.php?u=http://{$servername}{$requesturi}" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

to modify in and don`t work !!!!!

 

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/DSCZone" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

 

 

PLEASE HELP THANKS..

go to preferences, performance, and enable force compile to see the changes

Share this post

Link to post
Share on other sites
  • 4 months later...
Purpleman

Purpleman 0

Posted
Posted

Hello, can you tell me how to remove the points in slideout.tpl?

I would align horizontally rather vecticalment!?

 

The original code is :

 

 

 

<ul id="navigation">

 

 

 

{if $account eq "yes"}

<li class="about"><a href="{$base_dir_ssl}my-account.php" title="{l s='My account' mod='slideout'}"></a></li>

{else}{/if}

{if $cart eq "yes"}

<li class="search"><a href="{$base_dir}order.php" title="{l s='Cart' mod='slideout'}"></a></li>

{else}{/if}

 

{if $contact eq "yes"}

<li class="contact"><a href="{$base_dir_ssl}contact-form.php" title="{l s='Contact' mod='slideout'}"></a></li>

{else}{/if}

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/share.php?u=http://{$servername}{$requesturi}" title="{l s='Facebook' mod='slideout'}">

 

</a></li>

{else}{/if}

</ul>

 

 

 

 

</script>

 

 

thank you

Share this post

Link to post
Share on other sites
Purpleman

Purpleman 0

Posted
Posted

the site is at the beginning of the construction

http://pimpmyshirt.fr/Test/

 

 

ul#navigation li {

  • width: 100px;
  • list-style: none;

}

I use it in style-slideout.css and it does not work. I'll try again tonight and hold you to Current.

 

Thanks for your help

 

 

Slideout.css

 

 

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 374px;

right: -65px;

list-style: none;

z-index:9999;

}

ul#navigation li {

width: 100px;

list-style: none;

 

}

 

ul#navigation li a {

display: block;

margin-left: -52px;

width: 100px;

height: 70px;

list-style: none;

 

background-color:#CFCFCF;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

/*-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

*/

opacity: 1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

}

ul#navigation .home a{

background-image: url(../images/home.png);

}

ul#navigation .about a {

background-image: url(../images/user.png);

}

ul#navigation .search a {

background-image: url(../images/cart.png);

}

 

ul#navigation .rssfeed a {

background-image: url(../images/rss.png);

}

ul#navigation .contact a {

background-image: url(../images/contact.png);

}

ul#navigation .facebook a {

background-image: url(../images/facebook.png);

}

 

ul#navigation .twitter a {

background-image: url(../images/twitter.png);

}

Share this post

Link to post
Share on other sites
Purpleman

Purpleman 0

Posted
Posted

I want this final result at the top left without the roll over. My only problem is that I do not understand the <li she forms the vertical menu. can you help me put horizontal please? I try all night and nothing works .... please help me

 

 

desing.png

Share this post

Link to post
Share on other sites
  • 1 month later...