Rich-text Reply

Search results page: adding and removing elements

tomneville 09-17-15
Accepted Solution

Search results page: adding and removing elements

I am looking to do two things with a search results page that are more complicated than usual. I used VWO recently that allowed me to do this so am hoping Optimizely can do the same (I'm a little rusty with optimizely).

 

This is an example page: https://www.justpark.com/search/?filter=1&q=balham&ac_country=&place_id=default&location_name=&sourc...

 

(1) Within each search result box I want to add a button that says "view details" and uses the URL of that search result as its href. How do I do this as the URL is dynamic content?

 

(2) I want to e.g. change "Single level parking lot - (5 spaces) , 1.58 miles from here" to "Spaces: 5   Distance: 1.58 miles"

 

Please advise.

Thank you

Amanda 09-18-15
 

Re: Search results page: adding and removing elements

@tomneville - Yes you can definitely do this, you just have to get a little tricky with the code Smiley Wink I am going to provide you with some examples here, and perhaps you can give it a go on your own and let me know where you end up? You have full flexibility of the code in Optimizely by clicking the "Edit Code" button at the bottom of the editor. 

 

1)

I'm not exactly sure what you mean by this. Are you just saying that you want to grab the link of the search result title and apply the same URL href to a new button?  

 

 

If this is what you want to do, one way to do it would be to write an each function that loops through each of the search results on the page and then grabs the URL and adds a new button with the specific URL.  Here's the jquery documentation on the each function: https://api.jquery.com/each/

 

Let me know if this is the direction you're looking to go and I can help provide more clarity! 

 

2) 

 

You will want to grab all of the elements that have the class 'facilities' since this is where the text you want to change is contained. Then, you will want to modify the HTML within this class. Here's an example of how to do this. In the code below you are replacing 'miles from here' with whatever comes in the second ' ' set. 

 

$(".facilities").html($(".facilities").html().replace('miles from here','whatever you want here'));

 

NOTE: The most IMPORTANT part here is that you don't overwrite the pieces of text that containthe dynamic #s. For example the # of spaces or the # of miles. Feel free to use the code above to replace anything around it. 

 

Looking forward to hearing back from you on this! 

Optimizely
JDahlinANF 09-18-15
 

Re: Search results page: adding and removing elements

In both cases, "$.each()" is your friend.

 

#1: You will need to determine what the actual HTML is that makes the link look like a button and doesn't screw up the formating on your site., but here is how you can add a View Details link:

$.each($('.listing-container'),function(i,e){
  var link = $(e).find('.title a').attr('href');
  var viewdetails = '<div><a href="' + link + '">View Details</a></div>';
  $(viewdetails).appendTo(e);
})

 

#2: Adjusting the "facilities" text

 

$.each($('.facilities'),function(i,e){
  var space = $(e).text().trim().split('(')[1].toString().split(')')[0].toString().replace(' spaces','').replace(' space','');
  var distance = $(e).text().trim().split(',')[1].toString();
  var newDescription = 'Spaces: ' + space + ', Distance:' + distance;
  $(e).text(newDescription);
})

Both of these work when run in the console.  If .each() is not supported in the Optimizely version of jQuery, you may need to change

$.each

to

window.$.each

 

(Sorry @Amanda - I can never remember which functions are not supported, so I mention the caveat everywhere)