[SOLVED] Move Favorite Products Module To New Hook

[artofadornment]

Hello!

I'm using PS 1.5.3 and I've read many posts on how to transplant modules to new hooks, however Favorite Products doesn't seem to work properly if I follow the usual steps. I tried enabling a new hook in favoriteproducts.php by adding  !$this->registerHook('displayRightColumnProduct'), copying lines 90-99 and changing part of that to public function hookDisplayRightColumnProduct($params), and using the "transplant a module" feature, but it did not quite work.

 

The module displays in the correct position in the FO, but the formatting is broken (it appears as an unordered list of links rather than just one link, I don't think this is a CSS issue) and the functions (add/remove from favorites) don't work. I've never changed a hook before, so I think I must be doing something wrong or missing something - could anyone please help?

 

Thank you in advance!

Elaine

Edited April 27, 2015 by artofadornment (see edit history)

[PascalVG]

Hi Elaine,

 

- Do you have a link to your site, so we can have a look?

- Do you use standard theme, or some custome one?

 

 

pascal.

[artofadornment]

Hi Pascal,

 

I use a custom theme that is mobile responsive, the link is www.artofadornment.ca.

 

~ Elaine

[artofadornment]

I just remembered, you will not see the "add to favorites" link on the product page unless you are logged in. I've taken a screenshot here so you can see what it looks like by default without having to register.

 

[PascalVG]

Hi Elaine,

 

I don't really see anything wrong. Maybe I'm overlooking anything?

 

The default Prestashop (1531, almost same as 1530) has the same list under the product image. I don't see anything that different:

 

Also, clicking on the link seems to work properly:

 

and when clicking remove:

 

 

back to the original.

 

Can you explain to me what exactly you need different?

 

pascal

 

 

[artofadornment]

Hi Pascal, that is because there is no problem with the module hooked into the Extra Left hook. I have attached some screenshots below of what it looks like if I try to hook it to the Extra Right. I played with the code a little and the module does actually work now (products are added/removed from favorites) however the display of the link has broken into three unordered list links. Since you have now seen how it should behave (the little heart icon shows, the text displayed changes from "add to favorites" to "remove from favorites"), I need to fix it so it will behave the same way on the right as it did on the left. I don't want to enable it on the right on our live site until it is working as it should.

 

First image is before product is added to favorites, second is after.

 

It also seems to be floating in a strange place, but I think I can fix that with some CSS to align directly under the Add To Cart button (I have not changed the old CSS yet).

 

My code line 46-55:

	public function install()
	{
			if (!parent::install()
				|| !$this->registerHook('displayMyAccountBlock')
				|| !$this->registerHook('displayCustomerAccount')
				|| !$this->registerHook('displayLeftColumnProduct')
				|| !$this->registerHook('displayRightColumnProduct')
				|| !$this->registerHook('extraLeft')
				|| !$this->registerHook('displayHeader'))
					return false;

and I inserted this at line 102, I copied the code for hookDisplayLeftColumnProduct, pasted it in, and changed it to hookDisplayRightColumnProduct):

	public function hookDisplayRightColumnProduct($params)
	{
		include_once(dirname(__FILE__).'/FavoriteProduct.php');

		$this->smarty->assign(array(
			'isCustomerFavoriteProduct' => (FavoriteProduct::isCustomerFavoriteProduct($this->context->customer->id, Tools::getValue('id_product')) ? 1 : 0),
			'isLogged' => (int)$this->context->customer->logged,
		));
		return $this->display(__FILE__, 'favoriteproducts-extra.tpl');
	}

Edited April 23, 2015 by artofadornment (see edit history)

[PascalVG]

Hi Elaine,

 

I had another look at it and see what's the problem.

In the left column, the favorite Products is added to an existing unordered list <ul id="usefull_link_block">

 

<!-- usefull links-->

<ul id="usefull_link_block">

  {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}                   <-- inside <ul>..</ul>!!

  <li class="print"><a href="javascript:print();">{l s='Print'}</a></li>

  {if $have_image && !$jqZoomEnabled}

  {/if}

</ul>

 

 

in the right column, for some reason, they didn't add this unordered list tag, so it were just <li>'s without <ul> around it. And because the css was taking into account this #usefull_link_block , the css wasn't applied to it.

 

{if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}

{$HOOK_EXTRA_RIGHT}

{/if}

 

Actually we should make the usefull_link_block a class, instead of ID, but it works anyway on css level, so we can do this:

 

Edit  /themes/default/product.tpl: (Make backup!!!)

(Add red code):

 

{if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}

  <!-- usefull links-->

  <ul id="usefull_link_block">

    {$HOOK_EXTRA_RIGHT}

  </ul>

{/if}

 

If you add this, you will see that the css is restored, complete with heart.

 

 

Now it works, but ONLY if you add the favorite products module to ONLY right column or ONLY left column. This is normally what you want, so then you're finished changing things.

 

 

 

If you do want to add it to both left and right colums , you have to edit two more files:

 

EDIT File /modules/favoriteproducts/views/templates/hook/favoriteproducts-extra.tpl   (Make backup)

Add red code:

 

{if !$isCustomerFavoriteProduct AND $isLogged}

<li id="favoriteproducts_block_extra_add" class="add favoriteproducts_block_extra_add">

{l s='Add this product to my favorites' mod='favoriteproducts'}

</li>

{/if}

{if $isCustomerFavoriteProduct AND $isLogged}

<li id="favoriteproducts_block_extra_remove" class ="favoriteproducts_block_extra_remove">

{l s='Remove this product from my favorites' mod='favoriteproducts'}

</li>

{/if}

 

<li id="favoriteproducts_block_extra_added" class="favoriteproducts_block_extra_added">

{l s='Remove this product from my favorites' mod='favoriteproducts'}

</li>

<li id="favoriteproducts_block_extra_removed" class="favoriteproducts_block_extra_removed">

{l s='Add this product to my favorites' mod='favoriteproducts'}

</li>

 

 

 

What we did: We added classes with the same name as the IDs.

 

 

Now edit file:  /modules/favoriteproducts/favoriteproducts.js    (Make backup!!)

and change the '#' into a '.'   (in jquery language: change the 'ID' into a 'class')

 

$('document').ready(function(){

  $('.favoriteproducts_block_extra_add').click(function(){ // Change # to .

    $.ajax({

        url: favorite_products_url_add,

        type: "POST",

        data: {

            "id_product": favorite_products_id_product

        },

        success: function(result){

            if (result == '0')

            {

              $('.favoriteproducts_block_extra_add').slideUp(function() {  // Change #

                $('.favoriteproducts_block_extra_added').slideDown("slow");  // Change #

              });

 

            }

       }

    });

  });

  $('.favoriteproducts_block_extra_remove').click(function(){   // Change #

    $.ajax({

        url: favorite_products_url_remove,

        type: "POST",

        data: {

            "id_product": favorite_products_id_product

        },

        success: function(result){

          if (result == '0')

          {

            $('.favoriteproducts_block_extra_remove').slideUp(function() {  // Change #

              $('.favoriteproducts_block_extra_removed').slideDown("slow");  // Change #

            });

          }

        }

    });

  });

  $('.favoriteproducts_block_extra_added').click(function(){ // Change #

    $.ajax({

        url: favorite_products_url_remove,

        type: "POST",

        data: {

            "id_product": favorite_products_id_product

        },

        success: function(result){

          if (result == '0')

          {

            $('.favoriteproducts_block_extra_added').slideUp(function() { // Change #

              $('.favoriteproducts_block_extra_removed').slideDown("slow"); // Change #

            });

          }

        }

    });

  });

  $('.favoriteproducts_block_extra_removed').click(function(){ // Change #

    $.ajax({

        url: favorite_products_url_add,

        type: "POST",

        data: {

            "id_product": favorite_products_id_product

        },

        success: function(result){

          if (result == '0')

          {

            $('.favoriteproducts_block_extra_removed').slideUp(function() { // Change #

              $('.favoriteproducts_block_extra_added').slideDown("slow"); // Change #

            });

          }

        }

    });

  });

})

 

 

This will add the click action to all elements that have the class, not only the (first) one that has the ID.

Then clicking on any of the two (left or right column) will add/remove the product and slides both texts down and up together as well :-)

 

Hope this helps,

pascal.

[artofadornment]

Thank you Pascal!

I set it up for both extra left and extra right hooks and your solution works great! I am only having one minor style problem: after your last two steps (adding the classes and changing the js), some of the CSS on the "add to favorites" display text has stopped working, in both right and left hooks. This text should be white to match other links on the site, then underlined only when moused over, just like the "add to wishlist" and "send to a friend" links do.

 

See attached pic - in this image my cursor is hovering over the wishlist link (cursor didn't appear on screenshot, sorry about that) just to show the underline. As you can see, the favorites link has reverted to the default page text colour. I am just not sure where to fix this. Other than that, it works brilliantly!

 

 

[PascalVG]

Hi Elaine,

Little strange, as the color and the underline is some very basic css in custom.css file, a general file.

 

Could you turn it on for me to see tomorrow?

 

Or, if you want to try yourself, use chrome browser, and right click on the non working link and choose inspect element. On the bottom, some 'underwater' screen is shown, with on the right the css of that element. There should be (scrolling from the top down) be some css code like this:

 

 

#center_column a {

    color: #DEDEDE;

}

 

Do you see something else that defines the color? if so, look on the right of this piece of code, and see in which file the code is defined. (He above code is for example defined in custome.css

 

 

But easiest is if you just turn it on for a day, and I will have a look and see what we need to do to fix it.

 

pascal.

[PascalVG]

Or, just try to add this code to themes/<your theme folder>/css/global.css:

 

 

#favoriteproducts_block_extra_remove a,

#favoriteproducts_block_extra_added a,

#favoriteproducts_block_extra_removed a {

    color: #DEDEDE;

}

 

 

and:

 

#favoriteproducts_block_extra_remove a:hover,

#favoriteproducts_block_extra_added a:hover,

#favoriteproducts_block_extra_removed a:hover {

    text-decoration: underline;

}

 

 

See if that helps,

pascal.

 

(If not, maybe the fact that there are 2 elements with the same ID may be a problem, so then we need to change the id into a class.

But I don't suspect that's the problem)

Edited April 27, 2015 by PascalVG
Edited css code a little (see edit history)

[artofadornment]

It didn't quite work but you got me on the right track. In the end, I sort of cheated and added this to custom.css:

 

#usefull_link_block li{
    color: #DEDEDE;
}
#usefull_link_block li:hover {
    text-decoration: underline;
}

 

It affects all of the elements in that block, but they're all supposed to have that anyway, it may be redundant but at least it works!

 

Thank you so much for all of your time Pascal, I'm SO happy to have this fixed!! Marking as solved.

 

Elaine