Change data-pg-ia-scene/data-pg-ia value with javascript or jquery

Pinegrow Interactions Add-on
1

Hi everyone,

I’m a bit stuck with this for a while, hope someone can help me figure this out.
I’m working on a woocommerce website and I’ve created a template for a product page. I need to change interaction values for a certain section on the page and I’m trying to achieve that by changing the data-pg-ia attribute value with jQuery. I even tried to remove the attribute, but in both cases when I inspect the element, I can see that the values are changed or removed, but the interaction is playing to the original value. It looks like the value is parsed from somewhere else and new values do not register.

Does anyone know how to do or have tried to achieve something similar?

Thanks a lot!

2

Hi @bergamot999,
I might be able to help, but I would need a little better example of what you are trying to accomplish. What is the interaction you are trying to change? I guess the begining data-pg-ia and ending you are trying to achieve would be good. I’m guessing that you are going to have to “reset” the scene.

Cheers,
Bob

3

Hi @RobM,

Thanks for the reply.

    <div class="video_sq" data-pg-ia='{"l":[{"trg":"mouseenter_notouch","a":{"l":[{"t":"$.video_sq #gt# div:nth-of-type(1) #gt# .in-blk-img #gt# .in-blk-img-c #gt# video","l":[{"t":"tween","p":0,"d":2.6,"l":{"media.play":1}},{"t":"set","p":2.6,"d":0,"l":{"media.stop":""}}]},{"t":"$.video_sq #gt# div:nth-of-type(2) #gt# .in-blk-img #gt# .in-blk-img-c #gt# video","l":[{"t":"tween","p":2.6,"d":4.8,"l":{"media.play":""}},{"t":"set","p":7.4,"d":0,"l":{"media.stop":""}}]},{"t":"$.video_sq #gt# div:nth-of-type(3) #gt# .in-blk-img #gt# .in-blk-img-c #gt# video","l":[{"t":"tween","p":7.4,"d":2.2,"l":{"media.play":0}},{"t":"set","p":9.4,"d":0,"l":{"media.stop":""}}]}]},"rpt":"999","tcv":"start-how","t":"$.sequence-t"}]}'>

This is the interaction that I’m currently using. Basically, this starts one of the three videos on mouse enter trigger and after certain amount of time the first video stops and second stars to play and so on. What I’m trying to do, is to change the duration on some pages for certain videos.

As mentioned in the original post, I tried to change video duration by modifying data-pg-ia attribute via jquery and targeting the page. And even though the modified attribute appears on the element when I inspect it, the original duration still takes the place.

This is the case for other interactions I tried to override as well. Any help on how to override these attributes would be greatly appreciated.

Thanks!

4

Hi @bergamot999,
When the page loads, the pgia.js script collects all of the data-pg-ia. Changing after this point won’t have an impact unless you trigger re-collection of those attributes. The page I linked to has documentation about this. The one thing I’m not sure about is whether it makes more sense to pgia.recreate() or pgia.elementAnimationsManager.refreshAnimations(). I’m thinking that after you change the attribute, the later called on the body of the page would be good. So:

let el = document.body;
pgia.elementAnimationsManager.refreshAnimations(el, true);

Let me know if this accomplishes what you are attempting.
Cheers,
Bob

5

Hi @RobM

Thanks a lot! let el = document.body; pgia.elementAnimationsManager.refreshAnimations(el, true); did the trick!

Really appreciate it mate, you’re the real saviour.

2 Likes