Navigate to a Search Page with a Search Query

A common use case is to navigate to a search page with a dynamic search query when clicking on a link inside a content layout.

For example, assume that you want to navigate to a search page named "Authors" when clicking on the "More articles from this author" link in your content layout, passing a search payload. The following code will achieve this. Notice that the global objects SCS and SCSRenderAPI are available to use in the content layout when running inside a sites page.

$('.more-from-author').click($.proxy(function () {
    var childrenPages = SCS.structureMap[SCS.navigationRoot].children;

    if (!childrenPages) return; // No pages

    // Find the Authors page
    for (var i = 0; i < childrenPages.length; i++) {
        var page = SCS.structureMap[childrenPages[i]];
        if (page.name === 'Authors') {
            var linkData = SCSRenderAPI.getPageLinkData(page.id);
            if (linkData && linkData.href) {
                var href = linkData.href,
                    searchPayload = content.author_id + '*',
                    contentType = "Starter-Blog-Post";
                // if both the page URL and the search query exists, navigate to the page passing in the query
                if (href && searchPayload) {
                    var queryStart = href.indexOf('?') === -1 ? '?' : '&';

                    // add in the contentType and search parameters
                    // contentType isn't a required URL parameter
                    // Payload contains search string only. No parameter name.
                    href += queryStart + (contentType ? 'contentType=' + contentType + '&' : '') + 'q=' + searchPayload;

                    // navigate to the search results page
                    window.location = href;
                 }
            }
        }
    }
}, this));

If you expect the same content layout to be used multiple times in the same page, it is better to use the unique ID in the CSS selector rather than the class selector, like $('.more-from-author').click(…).

For example:

template.html
	<div id="{{navigateId}}">….</div>

render.js
	content.navigateId = this.scsData.id + 'detailTrigger';
	$('#' + navigateId).click(…)