Put social buttons ALSO under the header in Prestashop

Maria Gonzalez · May 14, 2015

Hi,

I have a prestashop website, I'll like to put the social buttons also (I do not want to remove the ones I have in the footer) under the header just above the shoppingcart (see screenshot).

The problem is I do not know where to put or modify the code. I'll like to use the configuration of the socialblock so I do not have to duplicate it? Do I have to modify this module? Which file should I modify? Any help will be appreciated.

Thanks!

razaro · May 14, 2015

You can do that in couple of ways.

One is if you have those icons in footer and want same for header.

Then you can try to add this code blocksocial.php

	public function hookDisplayTop()
	{
		return $this->hookDisplayFooter();
	}

and then Transplant module to displayTop hook and move it after to right position.

Other way, is to have new tpl file, so code could be

	public function hookDisplayTop()
	{
		if (!$this->isCached('blocksocial-top.tpl', $this->getCacheId()))
			$this->smarty->assign(array(
				'facebook_url' => Configuration::get('BLOCKSOCIAL_FACEBOOK'),
				'twitter_url' => Configuration::get('BLOCKSOCIAL_TWITTER'),
				'rss_url' => Configuration::get('BLOCKSOCIAL_RSS'),
				'youtube_url' => Configuration::get('BLOCKSOCIAL_YOUTUBE'),
				'google_plus_url' => Configuration::get('BLOCKSOCIAL_GOOGLE_PLUS'),
				'pinterest_url' => Configuration::get('BLOCKSOCIAL_PINTEREST'),
				'vimeo_url' => Configuration::get('BLOCKSOCIAL_VIMEO'),
				'instagram_url' => Configuration::get('BLOCKSOCIAL_INSTAGRAM'),
			));

		return $this->display(__FILE__, 'blocksocial-top.tpl', $this->getCacheId());
	}

and then create new blocksocial-top.tpl file in modules/blocksocial folder. In that file you can place similar code to original one.

Maria Gonzalez · May 14, 2015

Thanks for your reply...

However, I did not fully understand your reply....

Upon your reply I have investigated further so I can add more info :

- It seems that the social block is already hooked on the displayHeader.

- my blocksocial.php have those lines :

	public function hookDisplayHeader()
	{
		$this->context->controller->addCSS(($this->_path).'blocksocial.css', 'all');
	}
		
	public function hookDisplayFooter()
	{
		if (!$this->isCached('blocksocial.tpl', $this->getCacheId()))
			$this->smarty->assign(array(
				'facebook_url' => Configuration::get('BLOCKSOCIAL_FACEBOOK'),
				'twitter_url' => Configuration::get('BLOCKSOCIAL_TWITTER'),
				'rss_url' => Configuration::get('BLOCKSOCIAL_RSS'),
				'youtube_url' => Configuration::get('BLOCKSOCIAL_YOUTUBE'),
				'google_plus_url' => Configuration::get('BLOCKSOCIAL_GOOGLE_PLUS'),
				'pinterest_url' => Configuration::get('BLOCKSOCIAL_PINTEREST'),
				'vimeo_url' => Configuration::get('BLOCKSOCIAL_VIMEO'),
				'instagram_url' => Configuration::get('BLOCKSOCIAL_INSTAGRAM'),
			));

		return $this->display(__FILE__, 'blocksocial.tpl', $this->getCacheId());
	}

- Cannot find any blocksocial.css file

Do I have to create that css file and the icons should appear?

I do have the icons on the footer but I need different ones on the header (smaller).

Maria Gonzalez · May 14, 2015

Hi,

I have made some advances:

- I have created a blocksocial_top.tpl file (copy of blocksocial.tpl but changing class names).

- I have modified the hookDisplayHeader to:

	public function hookDisplayHeader()
	{
		if (!$this->isCached('blocksocial_top.tpl', $this->getCacheId()))
			$this->smarty->assign(array(
				'facebook_url' => Configuration::get('BLOCKSOCIAL_FACEBOOK'),
				'twitter_url' => Configuration::get('BLOCKSOCIAL_TWITTER'),
				'rss_url' => Configuration::get('BLOCKSOCIAL_RSS'),
				'youtube_url' => Configuration::get('BLOCKSOCIAL_YOUTUBE'),
				'google_plus_url' => Configuration::get('BLOCKSOCIAL_GOOGLE_PLUS'),
				'pinterest_url' => Configuration::get('BLOCKSOCIAL_PINTEREST'),
				'vimeo_url' => Configuration::get('BLOCKSOCIAL_VIMEO'),
				'instagram_url' => Configuration::get('BLOCKSOCIAL_INSTAGRAM'),
			));

		return $this->display(__FILE__, 'blocksocial_top.tpl', $this->getCacheId());
	}

Then the module appears on the header (but of course without style), I saw that the style is in global.css, but how I change the names of the class, i.e. originally is:

.footer-container #footer .blockcategories_footer {

clear: left; }

.footer-container #footer #social_block {

float: left;

width: 50%;

padding: 22px 15px 0 15px; }

@media (max-width: 767px) {

.footer-container #footer #social_block {

width: 100%;

float: left;

padding-top: 5px; } }

.footer-container #footer #social_block ul {

float: right; }

@media (max-width: 767px) {

.footer-container #footer #social_block ul {

float: none; } }

.footer-container #footer #social_block ul li {

float: left;

width: 40px;

text-align: center; }

@media (min-width: 768px) and (max-width: 991px) {

.footer-container #footer #social_block ul li {

width: 30px; } }

.footer-container #footer #social_block ul li a {

display: inline-block;

color: #fff;

font-size: 28px; }

@media (min-width: 768px) and (max-width: 991px) {

.footer-container #footer #social_block ul li a {

font-size: 20px; } }

.footer-container #footer #social_block ul li a span {

display: none; }

.footer-container #footer #social_block ul li a:before {

display: inline-block;

font-family: "FontAwesome";

vertical-align: -5px;

font-weight: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale; }

.footer-container #footer #social_block ul li a:hover {

color: #e9aeae; }

.footer-container #footer #social_block ul li.facebook a:before {

content: "\f09a"; }

.footer-container #footer #social_block ul li.twitter a:before {

content: "\f099"; }

.footer-container #footer #social_block ul li.rss a:before {

content: "\f09e"; }

.footer-container #footer #social_block ul li.youtube a:before {

content: "\f167"; }

.footer-container #footer #social_block ul li.google-plus a:before {

content: "\f0d5"; }

.footer-container #footer #social_block ul li.pinterest a:before {

content: "\f0d2"; }

.footer-container #footer #social_block ul li.vimeo a:before {

content: "\f194"; }

.footer-container #footer #social_block ul li.instagram a:before {

content: "\f16d"; }

.footer-container #footer #social_block h4 {

float: right;

margin-bottom: 0;

font-size: 21px;

line-height: 25px;

text-transform: none;

padding: 0 10px 0 0; }

@media (max-width: 767px) {

.footer-container #footer #social_block h4 {

display: none;

text-align: center; } }

.footer-container #footer .bottom-footer {

position: absolute;

bottom: -55px;

left: 0; }

.footer-container #footer .bottom-footer div {

padding: 15px 0 0 0;

border-top: 1px solid #515151;

width: 100%; }

what should I put instead of footer, footer-container, etc....? Any one can give me a sample css for the header?

Thanks

razaro · May 15, 2015

Sorry if explanation was not too clear.

Few thing to clear out, first displayHeader hook is mostly only used for linking js and css files.

That module have .css in code but it is not needed because like you said all code is in global.css.

For css code you said you have added custom class, good. So then copy that css code and replace

.footer-container #footer with your class. You can be more specific also so check maybe you have

div with id header so in code you can use maybe #header .blocksocial-top for example if blocksocial-top is

your custom class.

Also I suggested you add displayTop hook and then transplant module to that hook. Because that one have

modules in header/top. And it is different then displayHeader.

And if you need some more explanations or some help with css, you can PM me your website if you do not want to post links in forum.

Maria Gonzalez · May 15, 2015

Hi,

Thanks, I have modified the global.css but it seems that it's not working....

my blocksocial_top.tpl file is:

<div id="social_block_top">
	<h4 class="title_block_top">{l s='Follow us' mod='blocksocial'}</h4>
	<ul>
		{if $facebook_url != ''}<li class="facebook_top"><a class="_blank" href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}
		{if $twitter_url != ''}<li class="twitter_top"><a class="_blank" href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}
		{if $youtube_url != ''}<li class="youtube_top"><a class="_blank" href="{$youtube_url|escape:html:'UTF-8'}">{l s='YouTube' mod='blocksocial'}</a></li>{/if}
		{if $google_plus_url != ''}<li class="google_plus_top"><a class="_blank" href="{$google_plus_url|escape:html:'UTF-8'}">{l s='Google+' mod='blocksocial'}</a></li>{/if}
		{if $pinterest_url != ''}<li class="pinterest_top"><a class="_blank" href="{$pinterest_url|escape:html:'UTF-8'}">{l s='Pinterest' mod='blocksocial'}</a></li>{/if}
		{if $instagram_url != ''}<li class="instagram_top"><a class="_blank" href="{$instagram_url|escape:html:'UTF-8'}">{l s='Instagram' mod='blocksocial'}</a></li>{/if}
	</ul>
</div>

now I have disabled the return $this->display(__FILE__, 'blocksocial_top.tpl', $this->getCacheId()); because it make my site looks badly.

what am I still doing wrong?

Thanks for your help

Edited May 17, 2015 by Maria Gonzalez (see edit history)

razaro · May 16, 2015

Ok try with this for blocksocial_top.tpl

<div id="social_block_top" class="col-sm-4 clearfix">
	<h4 class="title_block_top">{l s='Follow us' mod='blocksocial'}</h4>
	<ul>
		{if $facebook_url != ''}<li class="facebook_top"><a class="_blank" href="{$facebook_url|escape:html:'UTF-8'}"><span>{l s='Facebook' mod='blocksocial'}</span></a></li>{/if}
		{if $twitter_url != ''}<li class="twitter_top"><a class="_blank" href="{$twitter_url|escape:html:'UTF-8'}"><span>{l s='Twitter' mod='blocksocial'}</span></a></li>{/if}
		{if $youtube_url != ''}<li class="youtube_top"><a class="_blank" href="{$youtube_url|escape:html:'UTF-8'}"><span>{l s='YouTube' mod='blocksocial'}</span></a></li>{/if}
		{if $google_plus_url != ''}<li class="google_plus_top"><a class="_blank" href="{$google_plus_url|escape:html:'UTF-8'}"><span>{l s='Google+' mod='blocksocial'}</span></a></li>{/if}
		{if $pinterest_url != ''}<li class="pinterest_top"><a class="_blank" href="{$pinterest_url|escape:html:'UTF-8'}"><span>{l s='Pinterest' mod='blocksocial'}</span></a></li>{/if}
		{if $instagram_url != ''}<li class="instagram_top"><a class="_blank" href="{$instagram_url|escape:html:'UTF-8'}"><span>{l s='Instagram' mod='blocksocial'}</span></a></li>{/if}
	</ul>
</div>

Then add these css syles after yours

#social_block_top {
  margin-top: 30px;
}

#social_block_top h4 {
  display: none;
}


#social_block_top ul li a {
  display: inline-block;
  color: #916E6E;
  font-size: 24px;
}

And if that cache causes issues change to

	public function hookDisplayTop()
	{
		
			$this->smarty->assign(array(
				'facebook_url' => Configuration::get('BLOCKSOCIAL_FACEBOOK'),
				'twitter_url' => Configuration::get('BLOCKSOCIAL_TWITTER'),
				'rss_url' => Configuration::get('BLOCKSOCIAL_RSS'),
				'youtube_url' => Configuration::get('BLOCKSOCIAL_YOUTUBE'),
				'google_plus_url' => Configuration::get('BLOCKSOCIAL_GOOGLE_PLUS'),
				'pinterest_url' => Configuration::get('BLOCKSOCIAL_PINTEREST'),
				'vimeo_url' => Configuration::get('BLOCKSOCIAL_VIMEO'),
				'instagram_url' => Configuration::get('BLOCKSOCIAL_INSTAGRAM'),
			));

		return $this->display(__FILE__, 'blocksocial-top.tpl');
	}

I got this as result

Edited October 23, 2015 by razaro (see edit history)

Maria Gonzalez · May 16, 2015

Wow! That's exactly what I need! However I can get this result.....

I did all your changes but seems I forgot or make something wrong...

The results are now live so you can check by yourself....

I got that result....Nothing but a black top banner...

Thanks for your help!

Maria Gonzalez · May 16, 2015

OK. I think I saw the error, on my side the module was and still is hooked on "header" but on your code suggest that have to be on "Top". I cannot unhook and rehook to top.. how can I do it?

Maria Gonzalez · May 16, 2015

I did it! They now appear! but not on your position, appear below the menu. And now there is a lot of space between the menu and the images..

Maria Gonzalez · May 16, 2015

I did it!

Thanks you very much for your help!

razaro · May 17, 2015

Nice work, yeah Prestashop have different hooks and also changing position of modules inside one hook

can make them display differently. Glad to help.

Put social buttons ALSO under the header in Prestashop

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in