Dusty Candland | Tue Feb 12 2019 JS Widget Updates Feb 12, 2019

Just released a new version of the CloudSh.js widget that removes the need for jQuery, allows for templates using Mustache, and can support images in the results!

None of these changes should have any effect on current installs.

No jQuery

I love jQuery, but I didn't like having it as a requirement for the search widget. Plus most modern browsers don't really need it. You Might Not Need jQuery was a great resource for quickly finding the standard JS functions to replace jQuery with.

Templates

I've tried to keep the results formatting very basic to allow CSS to handle the formatting, but event with that cases will require more control. I've used Mustache to handle the templates. You can override them as needed by passing the template string in the setup options.

  var notFoundTemplate = "<p>No results for .</p>";

  var resultSummaryTemplate = "<h3>Results</h3><p>Found  results.</p>";

  var CshConf = {
    token: "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMTAxNDA0ODktYmNmNS00ZWQ5LTgxZTctZjNlODk1OWE5MDQ0IiwiaW5kZXhfaWQiOiJmODliOTQ0ZS02YTU3LTQ5NTgtODFjZi0yMWE5M2M4Y2U1MTYiLCJpbmRleF91cmwiOiJodHRwczovL2Nsb3Vkc2guY29tIn0.4O4dexthpsq7degKWeXag2J7oB5zwdkN88hSVBml6XY",
    formId: "#cloudsh",
    resultsId: "#results",
    notFoundTemplate: notFoundTemplate,
    resultSummaryTemplate: resultSummaryTemplate,
  };

You can also override the resultTemplate and the pagingTemplate variables. More docs on those coming soon!

Images

If you have a site with images setup for most pages, we'll index those and you can turn on image display in the results! Use the showImages: true configuration option to start showing images and you can replace the default blank image with the placeHolderImage option.

  var CshConf = {
    token: "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMTAxNDA0ODktYmNmNS00ZWQ5LTgxZTctZjNlODk1OWE5MDQ0IiwiaW5kZXhfaWQiOiJmODliOTQ0ZS02YTU3LTQ5NTgtODFjZi0yMWE5M2M4Y2U1MTYiLCJpbmRleF91cmwiOiJodHRwczovL2Nsb3Vkc2guY29tIn0.4O4dexthpsq7degKWeXag2J7oB5zwdkN88hSVBml6XY",
    formId: "#cloudsh",
    resultsId: "#results",
    showImages: true,
    placeHolderImage: "https://mysite.com/images/placeholder.png"
  };

I hope you find these additions helpful! Let me know what you think!