Dynamic url preview not working

Technical Questions
,
1

I’m having issues with the Dynamic URL preview; it stopped working a few days ago without any apparent changes to our models/ code.

Builder public api key
c62b6400b6304daabf5f25c1107e9986

What are you trying to accomplish
Preview new pages on builder editor

Screenshots or video link

2024-05-21_12-56-52
2024-05-21_12-56-523208×1532 228 KB

Code stack you are integrating Builder with
Nextjs

On the model settings Dynamic Preview URL:
this shows as undefined on the editor preview URL session:
return https://www.pie.tax/${content.data.url}

this shows the URL but page still 404 (this is what I had and what was working before):
return https://www.pie.tax${targeting.urlPath || '_'}

2

Hello @chrischris,

Using ${content.data.url} will not work because there is no URL field in your page model content. They should be using https://www.pie.tax${targeting.urlPath || '_'}

If it’s returning 404, then kindly check the integration code and publish the content page first.

Screenshot 2024-05-21 at 6.38.41 PM
Screenshot 2024-05-21 at 6.38.41 PM2874×1370 275 KB

3

@manish-sharma how do I use the Page Url field?

4

Hello @chrischris,

The default page URL path you can retrieve using {targeting.urlPath}. If you can share the integration code for the pible-page-article would help us understand your implementation and further assist you.

Thank you,

5

@manish-sharma that’s what we’re currently using and doesnt load, this happens on new pages, old ones are loading ok:
return https://www.pie.tax${targeting.urlPath || '_'}

implementation file:
src/pages/tax-pible/[...slug].tsx

const PibleArticle: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ article, urlPath }) => {
  return (
    <>
      <Navbar />

      <BuilderContent content={article} model="pible-page-article">
        {(data, _loading, fullContent) => (
          <React.Fragment>
            <PageHead
              url={`https://www.pie.tax${urlPath}`}
              title={data?.title}
              description={data?.metaDescription}
              image={data?.shareImage}
            />

            <BuilderComponent model="pible-page-article" content={fullContent} options={{ includeRefs: true }} />
          </React.Fragment>
        )}
      </BuilderContent>
      <Spacer size="large" />
      <CenteredContent>
        <StoresButtonsFooter />
      </CenteredContent>
    </>
  );
};

export const getStaticProps = async ({ params: { slug } }: GetStaticPropsContext & { params: { slug?: string } }) => {
  const urlPath = '/tax-pible/' + slug;
  const article = await BuilderAPI.getArticle(urlPath);

  return {
    props: {
      article: article,
      urlPath: urlPath,
    },
    notFound: !article,
    revalidate: 60,
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const articles =
    (await builder.getAll('pible-page-article', {
      fields: 'data.url',
      options: { noTargeting: true },
    })) ?? [];

  return { paths: articles.map(({ data }) => data?.url), fallback: true };
};

export default PibleArticle;
6

Hello @chrischris,

It seems that you have managed to resolve the issue. Please let us know if not.