Jump to content

Recommended Posts

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 by artofadornment (see edit history)
Link to comment
Share on other sites

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:

post-455771-0-57258900-1429717118_thumb.png

 

Also, clicking on the link seems to work properly:

post-455771-0-71615400-1429717163_thumb.png

 

and when clicking remove:

 

post-455771-0-09776200-1429717187_thumb.png

 

back to the original.

 

Can you explain to me what exactly you need different?

 

pascal

 

 

Link to comment
Share on other sites

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.

post-485533-0-11196900-1429770316_thumb.jpg post-485533-0-83403100-1429770334_thumb.jpg

 

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 by artofadornment (see edit history)
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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! :D

 

post-485533-0-98638100-1430109204_thumb.jpg

 

Link to comment
Share on other sites

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
post-455771-0-29781400-1430141239_thumb.png
 
 
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.
Link to comment
Share on other sites

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 by PascalVG
Edited css code a little (see edit history)
Link to comment
Share on other sites

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

Link to comment
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
×
×
  • Create New...