include custom Javascript file in catalog search frontend Magento 2

Question

i have a custom module with frontend custom js located in app/code/Namespace/Module/view/frontend/web/js/preorder.js that i need to include it in catalogsearch frontend, for now my requirejs-config.js look like this:

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'Namespace_Module/js/swatch-renderer-mixin': true
            }
        }
    },
    map: {
        '*': {
            preorder: 'Namespace_Module/js/preorder',,
        catalogAddToCart: "Namespace_Module/js/catalog-add-to-cart",
        "Magento_Catalog/js/catalog-add-to-cart": "Namespace_Module/js/catalog-add-to-cart"
        }
    }
};

i need to add that preorder in catalogsearch frontend, how can i add it to catalog search layout?

Answer 1

Add below line in catalogsearch_result_index.xml before body tag.

<link src="Namespace_Module::js/slider/jquery.themepunch.plugins.min.js"/>
</head>

Answer 2

Inside the search results template (copy the file to your theme) add the JS using require, it is no longer best practice to add JS via the XML.

<script type="text/x-magento-init">
{
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    },
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...
    }
}
</script>

More info can be found on the dev docs.