When trying to use Dynamic Value inside a Navigation with a Page with Params studio does not display values (undefined)

Issues
1

Hi there.

I am trying to ue CMS a pass a slug a “Post Card” but when I try to do it to use dynamic value with Page Navigation is always undefined. Do you have some idea about how to solve it? This is core to navigate between page with page aprams.

image
image974×699 21.9 KB

2

A few things to check:

  1. Is the button located inside or outside a CMS Data Fetcher?
  2. If you click “Switch to data picker” (in screenshot above) what do you see? Do you see the CMS item and the slug field inside of it? What if you type $ctx inside the code editor - do you see anything there?
3

Hi Yang.

  1. It is a Interaction of a Vertical Stack who is using a “Post Card” slug props. I did it mnaully, I mean, I writting the expression $props.slug and works sometimes (still debugging why click event did not trigger to go to other page sometime).
    image

  2. When I switch to data picker it does nothing, nothing change, it stay in code section with undefined.

4

I am pretty sure is a problem with that Page navigation select component. Because no matter where I use it I can not have access to the pre-complete helpers.

5

Ok. So when you press “Link to a Component Prop” and you use it for example with a page params with a slug, it doesn’t work I think probably because is using quotes (") in slug or not passing the value at all and it doesn’t match the cms.

When I try to use Link to a Dynamic value (btw, what is the diff with link with prop) and go to editor I get undefined but if i anyway type $props.slug works. i am always talking with the Page navigation option in a onClick interaction.

Anyway when I press "play"button the interaction works well, I mean go to the destination filling the slug, but when I executed locally or deployed actually in plasmic host, it does not work, it does not navigate.

I don’t know how to solve it or what am I doing wrong.

6

More context: I added a link then work on the interaction to a link and works perfect. In the same level if I assign a onClick to a VerticalStack it does not access to props (undefined)

7

Hey @javier_cornejo-alfar! Thank you for digging into this. Indeed there were two bugs here:

  1. Page Navigation interaction was not showing variables of the element context in Data Picker / Custom Code Editor.
  2. Linking page params to props was not working (using the name of the prop as a string instead of the prop value).

Fixes for both issues were just deployed. Let me know if you find any other related issues!

1 Like
8

Hey @tiago .

Thanks to you and team super fast. I will testing soon and let you know.

Regards.

9

I can confirm I see params now inside Page navigation dynamic page params but it is weird that the navigation works well when I try the studio preview but when I try in the hosting version (Netlify + NextJs) it does not…although the Navigation itself works perfect with a Button in the navbar (without dynamic slug), Also and btw, for future references I am solving it by putting a floating above all the element with dynamic props slug to the Page navigation slug param (Navigation + . Not very nice but worked).

This point to me to onClick + PageNavigation + Params it is not working outside studio preview at least not with NextJs + Netlify as hosting.

am I explaining myself well? Thanks anyway.

I can see errors in the console but it not seems to be related to this but…
image
10

In the same Component
This works

image
image287×506 33.5 KB

and this doesn’t

image
image296×613 30.6 KB

Inside the preview events works outside don’t.
Regards.

11

Hi @javier_cornejo-alfar! Sorry for the delay to respond. I can’t reproduce this. Page navigation interactions binding to $props in Next.js/codegen are working for me. Is it still failing for you? If so, can you share a project where it happens so I can take a look?