Rich-text Reply

Testing Changes to a CSS Class

SlamMan 06-11-14

Testing Changes to a CSS Class

I'd like to change the text color associated with a css class on my product pages.  Is there a simple way to do this in the editor?  I can only figure out how to change one instance of that class at a time or change the class entirely.  

Level 2

Amanda 06-11-14

Re: Testing Changes to a CSS Class


Out curiousity, is your experiment going to be running site-wide, or are you just running the experiment on your product pages?


*Experiment on only your product pages*

You can click "edit code" in the bottom right of the editor. When you make a change to a specific element on the page, you'll see a line of code generated that will look something like:   $(".content > p > div > #specific_element").css({"color":"red"}); . If you wanted this color change to apply to the entire CSS class .content, then you would just modify the selector to be more generic: $(".content").css({"color":"red"});



Then, in your targeting settings, you would ensure that your experiment is targeted only at the product pages. This will ensure the product pages are the only locations where the color changes appear. 



*Site-Wide experiment*

You can write some "if" logic into the variation code that determines if its a product page. If it is a product page, then you would execute the class color change. For example :  if (window.location.href.indexOf("product") > -1) { //make changes};


Or, if your class lives within a larger class/ID that is spefic to product pages, you can alter your selector accordingly. For example, if the whole page was in a class named "product", you could alter your selector to look like $(".product .content").css({"color":"red"});


Does this help clear things up? Let me know if you have any questions. 

SlamMan 06-18-14

Re: Testing Changes to a CSS Class

Hi @Amanda , 


Thanks for the reply.  I thought it would work by testing on the entire class but it turns out that class is used on a couple other items on the page.  Maybe you could help me tweak the code that I have though:


$("#product-price-1304 > .price").css({"color":"#0de335"});


I'm a regex dummy but I think if the "1304" part of the code could be a wild card that could match any of our product ID numbers it would work on every productpage.  Maybe you know a better way though.  I couldn't find a larger class ID.  My experiment number is 1331531984 if you want to look.

Level 2
Amanda 06-18-14

Re: Testing Changes to a CSS Class

[ Edited ]

How about this: 


$("#super-product-table .price").css({"color":"#0de335"});


It will ensure that *only* the .price class within the specific product table is changed. The addition of the parent table ID #super-product-table prevents other elements with the .price class from being change, such as the cart total in the top right. You can see in the attached screenshot that the selector $("#super-product-table .price") correctly returns only the 8 prices listed next to the product name. 


Let me know if this does the trick for you! Thanks. 


Screen Shot 2014-06-18 at 4.55.01 PM.png