Loading different symbols for different params in dynamic route

We have a dynamic route like page?x=1&y=2 and created different symbols based on different values of x. For example, for x=1, we will load symbol-1 and for x=2 we will load a different symbol-2 etc.

For now, we are loading all the symbols for all the values of x in the page and hiding all of them conditionally except the required one based on current x value.

We will be having 100s of Symbols to load conditionally and feel this as an inappropriate way.

So can we configure the symbols to load in the page based on the param value in the URL ?

Hi @dharmaraju what you want is a dynamic symbol ! You can see a similar sort of approach in this doc: Scheduling Symbols > In the page: Using Dynamic Symbols

But instead of using scheduling to show the right symbol, you would want to use targeting, as explained in this doc: Targeting and Scheduling > Targeting

It sounds like you have done most of the groundwork of creating the symbols, so now within each Symbol you would just need to set the appropriate targeting.

And then when you drop the default symbol on the page, toggle on Dynamic
Screen Shot 2022-03-17 at 2.46.33 PM

And assuming you are passing the targeting attributes correctly, the correct symbol should display. I know you mentioned that you were planning to use some sort of url param, but if possible, it would be best to probably set up this targeting within your app itself. Since I think you are using nextJS, say you had a Symbol on a page model, you could update the [[page]].tsx file in our starter to be something like:

export async function getStaticProps({
  params,
}: GetStaticPropsContext<{ page: string[] }>) {
  const page =
    (await builder
      .get('page', {
        userAttributes: {
          urlPath: '/' + (params?.page?.join('/') || ''),
          x: '1', //or whatever calculated value you want to pass
          y: '2' 
        },
      })
      .toPromise()) || null

...

export default function Page({
  page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  ...
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>

      <BuilderComponent model="page" content={page} options={{ userAttributes: { x: '1', y: '2' } }} />
    </>
  )
}

Though you may need to play around with the code to match your exact setup. Try that out and let us know if it works!