1

I'm running puro icotheme for Magento and I would really love to trigger the cart preview (available on mouseover on the header) right after a customer click add to cart on the product page.. This is my code but the console gives the Unexpected Token error

<button type="button" title="<?php echo $this->__('Add to cart');?>" data-button="<i class='fs1' aria-hidden='true' data-icon=''></i><span><?php echo $buttonTitle ?></span>" class="btn-cart" onclick="productAddToCartForm.submit(this); document.getElementsByClassName("icon-cart-header")[1].click()">

I tried both onmouseover() and click()...

Thanks everyone!

Elettra D
  • 63
  • 7
  • Have you tried `trigger()` function ? http://api.jquery.com/trigger/ – Vincent G Apr 10 '16 at 15:14
  • Tells me trigger is not a function. document.getElementsByClassName("icon-cart-header").trigger( "click" ); – Elettra D Apr 10 '16 at 17:19
  • It's a jquery function so you can use it like this : `$('.icon-cart-header').trigger("click");` Also make sure to include jQuery library – Vincent G Apr 10 '16 at 17:25
  • I'm using like this jQuery(".cart-container")[1].trigger("click"); but keep saying is not a function... – Elettra D Apr 10 '16 at 17:48
  • What is this `[1]` before the trigger event ? Can you do a small JSFiddle with the relevant part of the code so we can have a view of this please ? – Vincent G Apr 10 '16 at 17:54
  • I added [1] to select one element of the returned array. – Elettra D Apr 10 '16 at 17:59
  • here is the code [link] https://jsfiddle.net/kfejg4fj/ – Elettra D Apr 10 '16 at 18:00
  • The desired outcome is to display the cart preview after adding the item starting from one of any product pages like this one https://www.capolavori.com/euro/lamanupina-avorio-accessories-bags-shoulder-bags-0001200017.html – Elettra D Apr 10 '16 at 18:02
  • It's more like a popup as I see it. Maybe check about popup plugin with jQuery. – Vincent G Apr 10 '16 at 18:08
  • for what I see the pop up is class= cart-wrapper" and I am trying to show it from chrome console. I can show it changing opacity and visibility but what I want is to show it for a while and then hide it again... – Elettra D Apr 10 '16 at 18:30
  • Oh ok, so in that case, check about `setTimeout()` function :) – Vincent G Apr 10 '16 at 18:32
  • Tried this https://jsfiddle.net/r2cr6j7c/, but seems it's ignoring the code.... Sorry I'm being dumb but I am new both to javascript and magento :-( – Elettra D Apr 10 '16 at 19:09
  • You have to put HTML code as well to make it works in the JSFiddle. Try to debug with the browser inspector and the javascript console if there are errors, it will output something in there. – Vincent G Apr 10 '16 at 19:11
  • Ok I coded this function [link] (https://jsfiddle.net/6yvpLrLm/) and it works but it seems that override the normal behaviour on mouseover. I saw that now the effect is performed through css :hov transition. This is why probably I cannot use .show() and .hide(). How can I trigger :hov css from another button then? – Elettra D Apr 16 '16 at 12:03
  • showshopping cart.. you can't see it? I'm calling it from the onclick and it actually works but then the cart-wrapper :hover CSS seems overridden and it does not work anymore on the page – Elettra D Apr 16 '16 at 12:32
  • In your JSFiddle, there's only a JS function with no html / css code at all. I can't help you without a complete example of the issue sorry :/ – Vincent G Apr 16 '16 at 12:43
  • I think that my problem is the same of this case :-( http://stackoverflow.com/questions/4347116/trigger-css-hover-with-js – Elettra D Apr 16 '16 at 12:50
  • Why not play with class like it said in this post ? Do a `.hover` class which contain the same state as `:hover` and add it with your JS function, no ? – Vincent G Apr 16 '16 at 12:53
  • Trying to do it :-) But I'm very new to everything so very simple things seem very hard to me – Elettra D Apr 16 '16 at 13:14
  • After I created the class I just have to use onmouseover function? – Elettra D Apr 16 '16 at 13:25
  • I know a very simple way to do that with jQuery, here it is : https://jsfiddle.net/6yvpLrLm/1/ Hope that helps :) – Vincent G Apr 16 '16 at 14:31
  • Thanks! And what if I want to trigger the same effect but from a button, after an onclick event? – Elettra D Apr 16 '16 at 16:17
  • I've made an answer to make it easier to find for people ;) – Vincent G Apr 16 '16 at 16:25

1 Answers1

0

If you want to trigger a css :hover with a class, you can do it like this : 

$("a").hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

If you want to trigger the same effect but from a button after a click event, you can do it like this : 

$("button").click(function(){
    $(this).toggleClass('hover');
});

Or this one to toggle the class on the link from a button :

$("button").click(function(){
    $("a").toggleClass('hover');
});
Vincent G
  • 8,547
  • 1
  • 18
  • 36
  • Thank Vincent! This is great!!! I think we are nearly there but there is something I don't quite understand. In the CSS the :hover class is assigned like this .cart-container:hover .cart-wrapper { ...}. So is it possible to change style on a subclass using :hover? In this case which Jquery class I have to create? Cart-container.hover or cart-container.cart-wrapper.hover... – Elettra D Apr 17 '16 at 09:22
  • If `.cart-container` is a parent of `.cart-wrapper`, it is possible that way : https://jsfiddle.net/6yvpLrLm/22/ In that case, you need to create the class which simulate the `:hover` on the element. The best way now for you is to try to play with this and understand how it works ;) I'm here if you need further information, don't forget to validate the subject if my answer is ok for you :) – Vincent G Apr 17 '16 at 09:37