Answered

In a Gatsby/React site, how to set the "Item Preview Page" for a "Dynamic Page List" in "Shared Content"?

In a Gatsby/React site, how do I set the "Item Preview Page" for a "Dynamic Page List" in "Shared Content"? I know how to get it working on a site that uses a server, but not with a static site. Putting in the correct page for "Item Preview Page" with the ContentID parameter does not work (I get sent to a 404 page).

 

 

The "List Preview Page" works without issue.

1

Comments

9 comments
  • Official comment

    Hi John,

    The gatsby-source-agilitycms plugin should actually take care of this for you. Provided, you set the following for your site:

    List Preview Page: this should be the listing page you have for your dynamic items 

    Item Preview Page: this should be a link to your dynamic page in the sitemap, i.e. ~/news-articles/your-dynamic-node

    Item Preview Query String Parameter: this should be set to "ContentID"

    From there, the agiltycms gatsby plugin will take care of creating (client-side) redirects for you so your preview URLs work.

    Can you verify this works for you?

    Comment actions Permalink
  • It does not work for me.

     

    The URL that was trying to be accessed: https://<redacted>/news-articles/news-article?ContentID=80&lang=en-us&agilitypreviewkey=oeEN97mwObqzoUCAROYy1QTYpx8B780ck3uKdt78R4HqYboCGfc7sJihLhKVdDQPvWIJYDvHVd26egk%2boPNUIQ%3d%3d&agilityts=20200511120028

    0
    Comment actions Permalink
  • Hmm, what version of the `gatsby-source-agilitycms` plugin are you using? Latest version is 1.4.0.

    0
    Comment actions Permalink
  • 1.4.0

    From my package-lock.json:

    "@agility/gatsby-source-agilitycms": {
    "version": "1.4.0",
    "resolved": "https://registry.npmjs.org/@agility/gatsby-source-agilitycms/-/gatsby-source-agilitycms-1.4.0.tgz",
    "integrity": "sha512-hzx1inDg+8Cb+KAAR6om2awHfBAMyerwlOimD8CASFr03fd57uzeICqCnA+v07EQCqTHmL/y7MaeELzBy3fUFw==",
    "requires": {
    "@agility/content-sync": "^0.1.6"
    }
    }
    0
    Comment actions Permalink
  • In case it helps, this is the setup of the gatsby-source-agilitycms plugin in my gatsby-config.js file:

    {
    //the name of the plugin
    resolve: "@agility/gatsby-source-agilitycms",
    //the options for our plugin
    options: {
    //your Agility Content Fetch API Guid
    guid: agilityConfig.guid,
    //your Agility Content Fetch API Key
    apiKey: agilityConfig.apiKey,
    //set this to true if you are using the preview API Key
    isPreview: agilityConfig.isPreview,
    //set this to true to see expanded traces in the build logs
    debug: false,
    //the languages you want to source content for
    languages: [{
    // The name of the language code
    name: "English",
    // The actual language code set in Agility CMS
    code: "en-us",
    // The name to be used in the URL path that represents the current language
    path: "en",
    }],
    // The channels you want to include
    channels: [{
    // The reference name for the website channel as it is defined in Agility CMS
    referenceName: "website",
    }],
    //the page template that will be used to render Agility CMS pages
    masterPageTemplate: "./src/AgilityPage.js",
    },
    },



    And in my gatsby-node.js file:

    exports.onCreateNode = async (
    {
    node,
    actions: { createNode },
    store,
    cache,
    createNodeId,
    },
    ) => {
    // For all Agility nodes that have an attachment field, call createRemoteFileNode
    if (
    node.internal.type.indexOf(`agility`) > -1 &&
    node.customFields
    && (
    node.internal.type.indexOf(`agilitypage`) == -1 &&
    node.internal.type.indexOf(`agilitystate`) == -1 &&
    node.internal.type.indexOf(`agilitysitemap`) == -1 &&
    node.internal.type.indexOf(`agilitynestedsitemap`) == -1 &&
    node.internal.type.indexOf(`agilitySitemapNode`) == -1 &&
    node.internal.type.indexOf(`agilityitem`) == -1
    )
    ) {
    const customFields = Object.keys(node.customFields)
    await asyncForEach(customFields, async (field) => {

    const fieldKeys = Object.keys(node.customFields[field])
    if (
    fieldKeys.includes(`url`) &&
    fieldKeys.includes(`pixelHeight`) &&
    fieldKeys.includes(`pixelWidth`) &&
    fieldKeys.includes(`width`) &&
    fieldKeys.includes(`height`)
    ) {
    console.log(`found ${field} on ${node.internal.type}`)
    let fileNode = await createRemoteFileNode({
    url: node.customFields[field].url, // string that points to the URL of the image
    parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
    createNode, // helper function in gatsby-node to generate the node
    createNodeId, // helper function in gatsby-node to generate the node id
    cache, // Gatsby's cache
    store, // Gatsby's redux store
    })
    // if the file was created, attach the new node to the parent node
    if (fileNode) {
    node.customFields[`${field}LocalImg___NODE`] = fileNode.id
    }
    }
    })
    }
    }
    0
    Comment actions Permalink
  • Hi John,

    I found the issue here (after receiving your source code through support). I changed your config and set the debug property to true.

    This allowed me to get some more information as to what was happening in your build.

    What I found in the logs:

    #######################################################################
    "AgilityCMS(debug) => Preview redirect for /news-articles/test-article-2/news-article?ContentID=80&lang=en-us to /news-articles/test-article-2/2020-07-08t010000-0400 created
    #######################################################################

    You can see here that there is a bug with how the source plugin interprets your preview URL (the URL that should redirect to the right place). That is because you are using the following page path formula for your dynamic page in Agility CMS.

    ##Title##/##Date:MM-dd-YYYY##

    Which results in a nested page. It is a bug no doubt in our gatsby plugin, but wanted to check-in with you on the purpose behind having a two-part URL for a news article. Is this intended? If you were to remove the two-part URL and not have a slash in there, that would resolve your issue.

    Is it important to have the two-part URL? This is also important because we are looking at simplifying Dynamic pages and removing the capability for two-part URLs with a path in the middle is one of the things we are considering removing.

    0
    Comment actions Permalink
  • My client for another site wanted the ability to have the same title for events that happen yearly. I did not even realize I had it setup to use a `/` to make it a two-part url. I suppose changing that `/` to a `-` would also fix it.

    0
    Comment actions Permalink
  • Yes, I confirmed that simply changing that character in the "Page Path Formula" of the SEO tab of the details page did fix it:

    I think what tripped me up was that when I used the "Add Field" button to the right of the "Page Path Formula" field, it automatically added the `/`. I did not think much of it originally and left it as auto-generated.

    0
    Comment actions Permalink
  • Ok great! Yes, I can't really think of any good reason why it should add a `/` in the path. This is something we are going to look at.

    Thanks!

    0
    Comment actions Permalink

Please sign in to leave a comment.

Didn't find what you were looking for?

New post