[Resolved] Changing Results Page Labels on Platinum Grid Layout2016-03-17T08:07:18+00:00

Build with IDX Broker Forums IDX Broker Control Panel Javascript in Control Panel Changing Results Page Labels on Platinum Grid Layout

  • Author
    Posts
  • Bill Macchio
    Participant
    Post count: 27

    I have been tasked with making some changes to the Search Results page such as this one http://listings.pastermackrealestate.com/idx/results/listings?idxID=b076&pt=1&lp=200000&hp=800000&ccz=city&a_propStatus%5B%5D=Active&per=100&srt=newest

    I’m not great at Javascript/jQuery, but I can program in other languages like PHP enough ot get the job done. I’ve spent a bunch of time trying to do this one that that seems simple and I cannot get it to work. Details…

    1. PLACING & TESTING CODE: I’m adding my code to my wrapper at Designs > Wrappers > Global where I’ve got the header and footer include files. Each time I make a change I am careful to Clear Wrapper Cache then Save Changes before checking the results page.

    2. PURPOSE: I am trying to change the labels (the ones I haven’t hidden) on the Platinum Grid layout for each property so that BD is changed to Beds, TB is changed to Baths and SQ is changed to Sq Ft. So far my test code is only trying to change BD to Beds (I realize CSS will transform that to BEDS, which is fine). However I’ve tried several different times and I cannot get this seemingly simple code running.

    3. CODE: Here is the most recent code I’ve tried, which I’m using to try and change bd in this code block: <span class=”IDX-resultsLabel”>bd</span>


    // Is this the right page to make changes on? Test it to find out.
    if ($(".IDX-page-listings").length)
    {
    // After all content is on the page, do the work
    $( window ).load(function()
    {
    // The work is done here
    $(".IDX-resultsLabel").text().replace(/bd/g,'Beds');
    })
    }

    Does anyone have insight into why this isn’t working?

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Bill Macchio
    Participant
    Post count: 27

    Following up here… any thoughts guys?

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Nick Leech
    Keymaster
    Post count: 109

    It looks like you can do this using CSS and the after selector

    .IDX-resultsField-bedrooms span::after {
    content: ” Beds”;}

    .IDX-resultsLabel {display: none;}

    http://www.w3schools.com/cssref/sel_after.asp

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
    • Bill Macchio
      Participant
      Post count: 27

      Ah, I’ve re-written this below. All code needed to make this change complete for us, not including hiding the .IDX-resultsField-acres field altogether.

      0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
      You need to be a registered member to rate this post.
      Loading...
  • Bill Macchio
    Participant
    Post count: 27

    SOLVED: BACKGROUND & DESIRED CHANGES
    Our client requested that the text labels BD, TB and SQ on the Platinum Grid Search Results pages to be changed to Beds, Baths and Sq Ft. as in the edited screenshot below:
    Current & Desired Result

    Here is an example URL where I made these change:
    http://listings.pastermackrealestate.com/idx/results/listings?idxID=b076&pt=1&lp=200000&hp=800000&ccz=city&a_propStatus%5B%5D=Active&per=100&srt=newest

    I went back to Google to show 2 or 3 attempts and found working code today! Hopefully the [code] tags will display this correctly:

    $( window ).load(function()
      {
         // Change bd to Beds
         $("div.IDX-resultsField-bedrooms span.IDX-resultsLabel").text('BEDS');
         // Change tb to Baths
         $("div.IDX-resultsField-totalBaths span.IDX-resultsLabel").text('BATHS');
         // Change sq to Sq Ft
         $("div.IDX-resultsField-sqFt span.IDX-resultsLabel").text('SQ FT');
      }
                          )

    NOTE: BD, TB and SQ are uppercased by CSS and the code actually is lowercase.

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Bill Macchio
    Participant
    Post count: 27

    I saw Nick’s reply above after I got the jQuery/JS working, so I’ve switched to CSS now. Thanks, Nick!

    /* Add new content for Beds, Baths, Sq Ft */
    .IDX-resultsField-bedrooms span::after {content: " Beds";}
    .IDX-resultsField-totalBaths span::after {content: " Baths";}
    .IDX-resultsField-sqFt span::after {content: " Sq Ft";}
    /* Hide Actual Content for these fields */
    .IDX-resultsLabel {display: none;}

    0 ratings, 0 votes0 ratings, 0 votes (0 rating, 0 votes, rated)
    You need to be a registered member to rate this post.
    Loading...

You must be logged in to reply to this topic.