Passing query parameter from the URL into the javascript value | Community
Skip to main content
K
Keerthi97
Level 3
April 21, 2022
Solved

Passing query parameter from the URL into the javascript value

  • April 21, 2022
  • 1 reply
  • 3057 views

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!

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Ravi_Pampana

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

1 reply

Ravi_Pampana
Community Advisor
Ravi_PampanaCommunity AdvisorAccepted solution
Community Advisor
April 21, 2022

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

    K
    Keerthi97Author
    Level 3
    April 29, 2022

    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
    Community Advisor
    Ravi_PampanaCommunity Advisor
    Community Advisor
    April 29, 2022

    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-string-parameter-in-sightly-component/m-p/197930

      Terms & ConditionsAccessibility statement

      Loading footer...