Altering text on ALL buttons on a single page
We have a mobile version of our website that has a very long list of products, or "Looks", that get updated every day. I want to test the wording "SHOP THIS LOOK" vs "BUY THIS LOOK" for each Look listed. I see how to alter the button text individually, but is there a simple way to update all of the buttons on a single page? And will that apply to new products being loaded in daily?
For an example of what I'm talking about, load this URL on a mobile device: http://www.dailylook.com/c/All-Looks/1/100.html?oneProductPerCategoryID=true
OR go to DailyLook.com and navigate to the New Looks page from the side menu.
Have you seen this article in our Knowledge Base? https://help.optimizely.com/hc/en-us/articles/200039835#multiple_elements
Or this video? https://help.optimizely.com/hc/en-us/articles/201697344-Help-Videos#multiple_elements
They walk you through how to change multiple similar elements at once. Basically, you'll be doing some light work in the Code Editor to find the part of the selector that's more generic and separate it from the part that's more specific. Once you get rid of the more specific part, then the changes you made will apply to all similar elements. Please let me know if that doesn't work for you!
As for the fact that the images are populated dynamically, it looks like you have generic names for the containers that hold the images -- product-list-product and product-image-container. If you make a change to one of those in the Editor, then I'd think that the changes would continue to apply even if new products are loaded in because the containers are more generic.
Again, please let me know how that works for you. I'd recommend doing some QA on this one by setting up a test cookie so you can make sure that everything displays as you intend: https://help.optimizely.com/hc/en-us/articles/200293784
Thanks, and hope this helps!
The link @AdamA provided is super helpful. To make things easy, I've provided a line of jQuery that will do the trick for your page http://www.dailylook.com/c/All-Looks/1/100.html?oneProductPerCategoryID=true
You'll just need to click the "Edit Code" button in the editor and past the below snippet. Essentially the line of code is grabbing all of the buttons with the class "button" and "class" that exist within the container "product-info" and then changing the text to "Shop this look"
This will apply to *all* of the buttons that meet the description above and will also apply to the new products you add in daily so long as they all have same classnames.
Let me know if you have any questions!
$(".product-info .button.large").text("Shop this look");