Transplation :: Block Newsletter and Social Networking Block ?

[Hyperion_]

Hello all,

 

Have been trying to figure out how to simply move the modules to wherever I wish to but haven't been successful whatsoever. Decided to pick on this again and here I am hopeful that someone will please explain me how to manually move a module to a certain part of the website.

 

I would love to move Social Networking Block and Block Newsletter to my banner on the homepage (see image below). Mind the other pages where those modules look rightly placed for me.

 

Since the transplation will not work for these two. However it does work with Block Newsletter if I do a transplation to displayTop (top of pages) yet it won't display on the header or other than the footer.

 

Since transplation is pretty much useless, my question is: is there a way to manually move these modules?

 

Thank you!

Edited November 7, 2014 by Hyperion_ (see edit history)

[PascalVG]

You have to write the hooks-code if it's missing for that module. Not every module can be transplanted everywhere by default, only some obvious places the developer intended the module to be placed.

So, transplanting a module is not 'pretty useless', it's the way to do hook the module. The code to hook it there must be available though, to make it work.

 

See some modules for some sample code. Especially the ones that are already allowed to be transplanted at the location you'd like your modules to be. The order of the modules hooked into a special hook can be adjusted in modules->positions. This may influence the order they are displayed (more to the left, more to the top etc.)

 

 

pascal.

[Hyperion_]

Thank you for your input concerning this problem.

 

Should I edit the .php files of my installed modules which reside in the themes folders or in the main modules folder?

 

How should the functions code be? This this?

public function hookDisplayBanner($params)
{
return $this->displaySocialSharing();
}

Could you please breakdown the process for me?

 

Thank you.

[PascalVG]

For example, the social block:

 

If the layout is OK, but you just want to move it to another hook, you could do something like: (in file modules/blocksocial/blocksocial.php  (make backup!!!)

 

public function hookDisplayTop($params)

{

   return $this->hookDisplayFooter($params);  // just re-use the old function that placed it in the footer to put it at the top

}

 

 

This will put the contents at the top hook. Problem can be that the layout of the block is written SO, that it is only done for the original location. This is the case with the social block.

Open the themes/<your theme folder>/css/global.css    (make backup!!!!!!)    file and search for social_block

 

You find lines of code like this:

 

    .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: #908f8f;
            font-size: 28px; }

You see, the css code is specifically written for the footer:

 

.footer-container #footer #social_block  {...}

 

So, if you move it to the header, the css code isn't used at all, as it it outside the html tag (normally a <div> ) with class="footer-container" and html tag with id="footer".

 

It was like this:

 

<div class='header'>

  ...

</div>

...

<div class='footer-container'>

  <div id='footer'>

      original social block code...

  </div>

</div>

 

 

but when you move it to the header, it's like this:

 

<div class='header'>

  ...

      our moved social block code...

</div>

...

<div class='footer-container'>

  <div id='footer'>

  </div>

</div>

 

so the css code, which expects the social block to be inside the <div id='footer'> doesn't work when outside it.

 

Therefore you have to add css code to make it work again, like this or so:

    .footer-container #footer #social_block, #header #social_block {
      float: left;
      width: 50%;
      padding: 22px 15px 0 15px; }
      @media (max-width: 767px) {
        .footer-container #footer #social_block, #header #social_block  {
          width: 100%;
          float: left;
          padding-top: 5px; } }
      .footer-container #footer #social_block ul, #header #social_block ul {
        float: right; }
        @media (max-width: 767px) {
          .footer-container #footer #social_block ul , #header #social_block ul{
            float: none; } }
        .footer-container #footer #social_block ul li , #header #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 , #header #social_block ul li {
              width: 30px; } }
          .footer-container #footer #social_block ul li a , #header #social_block ul li a {
            display: inline-block;
            color: #908f8f;
            font-size: 28px; }

as you see, we added the css code for when inside the header, like this:

.footer-container #footer #social_block, #header #social_block {...}

 

this will make the css code do have its effect in both the footer and the header, wherever we transplant it.

 

 

Well, this is the basics. Sometimes, you may have to write the code for 

 

public function hookDisplayTop($params)

{

...

}

 

yourself, for example, if the space allowed for the module on the new location is different than at the original location (like if you move a left-column module to the footer etc, or when you want to rearrange input fields etc.)

 

 

As you see, lots of coding and re-coding. Not as easy as just transplanting a module to the new position, you have to write the code behind it as well.

 

 

If you like to get into writing/rewriting modules, maybe start reading the developers guide, to get into the fundamentals of prestaShop.

   Developers Guide

 

pascal