Jump to content

Put social buttons ALSO under the header in Prestashop


Maria Gonzalez
 Share

Recommended Posts

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.

 

 

ZJfO3.jpg

Thanks!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Maria Gonzalez (see edit history)

Share this post


Link to post
Share on other sites

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 by razaro (see edit history)

Share this post


Link to post
Share on other sites

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...

 

eNxz0.jpg

 

 

Thanks for your help!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More