Hi BOLD,
This should be possible, though I’m not sure to understand 100% what you want to do.
Can you maybe give me a bit more information? And can you maybe share your JS?
Marc
Thread Starter
BOLD
(@welovebold)
Hello Marc,
I don’t have a JS unfortunately, because I haven’t found a connection between the choice and the image. So I want that the image I set here will be shown in the red marked area here when I hover the choice. Just like the tooltip above.
Cheers,
BOLD
Ok. You can try something like this:
// Add events on the choice
wp.hooks.addAction( 'PC.fe.choice.init', 'test', function( view ) {
if ( ! view.$el.is( '.hover-only' ) ) return;
view.$el.on( 'mouseenter', function() {
view.model.set( 'hovered' );
} );
view.$el.on( 'mouseleave', function() {
view.model.set( 'hovered' );
} );
} );
// Listen to the changes on the image, and add a class when hovered
wp.hooks.addAction( 'PC.fe.choice-img.init', 'test', function( view ) {
view.listenTo( view.model, 'change:hovered', function( model ) {
view.$el.toggleClass( 'hovered', model.get( 'hovered' ) );
} );
} );
You can use this starter plugin to add the JS, as it loads a JS file at the right time and only when the configurator scripts are loaded.
You’ll obviously need to add the required CSS so that the picture shows.
Thread Starter
BOLD
(@welovebold)
Hello again,
thank you for the snippet. I installed your plugin and added the snippet to the custom.js. Unfortunately, it is not working. The image doesn’t get the hovered class. Is it because the configurator is enabled in a custom page and not in the product page?
BOLD
-
This reply was modified 2 years, 8 months ago by
BOLD.
Thread Starter
BOLD
(@welovebold)
Hello,
I was able to fix it by myself:
// Add events on the choice
wp.hooks.addAction( 'PC.fe.choice.init', 'test', function( view ) {
view.$el.on( 'mouseenter', function() {
if(view.$el.is('.hover-only')) {
view.model.set( 'hovered', 1 );
}
} );
view.$el.on( 'mouseleave', function() {
if(view.$el.is('.hover-only')) {
view.model.set( 'hovered', 0 );
}
} );
} );
Thanks a lot for your help!
BOLD
