Rich-text Reply

Button image change problems

GaryDeagle 10-05-16
Accepted Solution

Button image change problems

I am trying to change a button image on a split test, and it changes on my edit end. But still shows the original button when it goes live and on the preview page. Stumped on what to do. 

Re: Button image change problems

Hey Gary,

Can you confirm that you have updated the 'Variation Visible On This Page' in the Preview console to show the variation?

You must select the variation you want to display here.
To your success,
George Amine

GaryDeagle 10-05-16
 

Re: Button image change problems

Yes it is updated to show the variation. Any text changes I have made show, but the actual button image does not which causes a problem because people see one price on the button then get sent to the price the button is supposed to show.

A funny thing is if pull it up on internet explorer it seems to show correct in previe mode. But on google chrome it does not.
robertchan 10-05-16
 

Re: Button image change problems

Go into variation code and first wrap a timeout around your code to see whether it's a timing issue:

 

setTimout(function(){
    //your code here
}, 5000);

If you're still not seeing your image then it might be something with your code, if you could share that and the force parameter link then that would help. You should also consider previewing with force parameters prior to launching live in the future.

Robert Chan

GaryDeagle 10-05-16
 

Re: Button image change problems

No luck, but not sure if I was applying it right.
GaryDeagle 10-06-16
 

Re: Button image change problems

Here is what variation code looks like for oen of the images that is not changing. It just shows the originial image in the variation instead of the one that is different and I am trying to test.

$(".wp-image-2474").attr({"src":"//cdn.optimizely.com/img/1580560112/28203f378ebf4947a8d84184cc8d98fe.png"});

Re: Button image change problems

As Robert said, if you could share a link to your variation with the Force Paramater, that would help heaps.
To your success,
George Amine

GaryDeagle 10-06-16
 

Re: Button image change problems

robertchan 10-06-16
 

Re: Button image change problems

Here are the reasons things were not working:

1) $ is not defined on your site, use jQuery instead or make adjustments as needed

2) You need to not only change src, but srcset as well

 

Below, I've made all the changes needed so you can just copy and paste this into the Variation Code section of your experiment:

 

// Stores the button image into a variable so that your code is cleaner
var btnImg = jQuery('#sales-button a img');

// Sets src to your new image
btnImg.attr('src','http://cdn.optimizely.com/img/1580560112/28203f378ebf4947a8d84184cc8d98fe.png');

// Sets srcset to your new image
btnImg.attr('srcset','http://cdn.optimizely.com/img/1580560112/28203f378ebf4947a8d84184cc8d98fe.png');

Notice that the selector I chose was 

#sales-button a img

This is better than the default wp selector grabbed by the WYSIWYG and might be something to keep in mind for selecting elements in the future. For one, it's cleaner to read, and two, since I'm using an ID, you're getting more precise targeting.

Robert Chan

GaryDeagle 10-06-16
 

Re: Button image change problems

Thanks Robert! That worked. How would I use that same code for the second sales button at the bottom? Do I just need to change some kind of indicatorthat it is a different button in it?
robertchan 10-06-16
 

Re: Button image change problems

Anytime, please mark my answer as the solution if it worked Smiley Very Happy

 

For the second button, you'll do the same thing, except you'll need to change the selector. Here is the code for the second button:

 

// Stores the button image into a variable so that your code is cleaner
var btnImgTwo = jQuery('#sales-facts a img');

// Sets src to your new image
btnImgTwo.attr('src','http://cdn.optimizely.com/img/1580560112/28203f378ebf4947a8d84184cc8d98fe.png');

// Sets srcset to your new image
btnImgTwo.attr('srcset','http://cdn.optimizely.com/img/1580560112/28203f378ebf4947a8d84184cc8d98fe.png');

You'll notice that compared to the first button, in this second instance, we changed the selector to #sales-facts a img, and the variable to btnImgTwo instead of btnImg. 

Robert Chan