Passing query parameter from the URL into the javascript value

[Keerthi97]

Hi ,

I need to pass the query parameter values from the search URL into the Java script value in AEM component. Using this URL as an example, https://www.xyz.com/content/test1/testpage/abc-def-xyz.3132.html?sort=&page=1, Value of the query parameter from the URL will be- 'abc def xyz'

Sample JS used in HTL:

<script type="text/javascript" charset="utf-8">
var pageOptions =

{    "query": "<search term>", // When the value of the Page field is Search, this value should be dynamically update the value with the value of query parameter in the URI while this is being loaded.  }

;  
</script>

So, could anyone please suggest me the ways to integrate dynamically the query param value in the custom javascript .

Thanks in Advance!

[Ravi_Pampana · Accepted solution]

Hi,

Seems you are the reading value from the url not the query string as per the url mentioned in your question.

You can read the url in backend sling model and split using last / and replace hyphens (-) with space and set it to a variable and return it to the sightly which can be used in script tag using context scriptString

[Keerthi97]

Hi @Ravi_Pampana ,

Thanks for your response.

Could you also let me know how to get the query param from the url to access in sling model?

URL:www.retail.com/search-results.html?q=eggs

QUERY:eggs 

Thanks in Advance!

[Ravi_Pampana]

Hi,

You can try below code and from request you can read the request, we can read the query string

Model(adaptables = {SlingHttpServletRequest.class, Resource.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class AdaptationModel { 


    @SlingObject
    private SlingHttpServletRequest request;

 Also you can check below link for reading the query string in sightly

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/access-request-query-strin...