How to get query parameters from the URL?

Plasmic Studio Questions
1

I need to retrieve the values from the queries on my URL.

I’ve been trying to do so with $ctx.query from this documentation: dynamic-values

But it isn’t working.

The param I’m trying to get is “coupon_code” from a URL like this one:

https://turismoracing.com/?coupon_code=Q3JFS83KALS1

I’ve tried the following ways but they don’t return anything:

$ctx.query.coupon_code, $ctx.query.couponCode, $ctx.query[“coupon_code”], $ctx.query.get(“coupon_code”).

What I’m doing wrong and how can I get the query parameters?

I’m currently using the URLSearchParams() API to have the coupon_code value but I wanted to know if there is a native way to do it with Plasmic.

2

Can you share some screenshots of what you expect to be working?

3

Hello @jason and thank you for your response.

I don’t really know which screenshots will be helpful because everything I’m doing is in the backend of Plasmic Studio.

Basically, I need the parts at the right of the questions mark in the following URL:

turismoracing.com/?coupon_code=Q3JFS83KALS1

In this case: “coupon_code=Q3JFS83KALS1”.

I’m already using URLSearchParams() to get the parameters, but in your documentation, that method is not recommended and I thought the $ctx.query was meant to do that, but at this point, I couldn’t make it work.

4

Could you point me to the project and which element is trying to use the query param?

5

This is the component where I wrote the code.

https://studio.plasmic.app/projects/82hhy5Swa4UQRthjvLcihV/-/Turismo-Header?arena_type=component&arena=mksrpiSxgT48

The code is on the Side Effect component in the On Load action called Run Code 2.

I’m just printing it because at that time I needed to see what was getting.

The rest of the code is the JavaScript way to do it.

6

Try loading this URL, you can see the query params printed properly. Plasmic

I wonder if you were testing the Side Effect by previewing the header component and seeing it return undefined? In components, we don’t have $ctx.query loaded.

7

I’m totally lost.

How did you achieve that?

Is that preview still my project?

Did you add a new component or used my exact same code?

I’m asking all that because the link you shared is working (showing the query), but I’m trying to replicate it and it doesn’t work.

I put a query parameters on a Studio preview and is not working.

Can you please make a short video on how did you achieve that in the Plasmic Studio preview?

8

I just manually edited the URL to add the query param. It’s not possible from within Plasmic right now.

You should also be able to test this if you run your app locally.

9

@jason I don’t run my app locally because everything is done with the Studio.

However, what you did isn’t working in my live site. Any idea why?