On document save, we need to hit an API route on the NextJS front-end to regenerate it's static page (ISR).

Add a new element to the src/fields/richText field config. Base the code off the existing LargeBody element.

It should render a 15px Roboto Mono uppercase label in the Admin UI.

Contentful is done, but still need to copy over:

• Strapi
• WordPress
• Directus

i have uploaded the video to related issue

issue:
when i chose category item, then there are 2 sub categories item and then i select one and publish , but after i change the item of category and then chose the same item, its corresponding subitems are not showing all items.

import { CollectionConfig } from "payload/types";
import Fields from "./common/fields";

const Courses: CollectionConfig = {
  slug: "courses",
  admin: {
    useAsTitle: "name",
  },
  fields: [
    {
      type: "tabs",
      tabs: [
        {
          label: "Basic",
          description: "asa",
          fields: [
            {
              type: "text",
              name: "title",
              required: true,
            },
            {
              type: "textarea",
              name: "excerpt",
              required: true,
            },
            {
              type: "richText",
              name: "content",
              required: true,
            },
            {
              type: "relationship",
              relationTo: "videos",
              name: "previewVideo",
              required: true,
            },
            {
              type: "upload",
              relationTo: "media",
              name: "image",
              required: true,
            },
            {
              name: "materials",
              type: "array",
              fields: [
                {
                  name: "item",
                  type: "upload",
                  relationTo: "media",
                  required: true,
                },
              ],
            },
          ],
        },
        {
          label: "Builder",
          description: "Build your Course",
          fields: [
            {
              name: "lessons",
              type: "relationship",
              label: "Lessons",
              relationTo:"lessons",
              hasMany:true,
            },
          ],
        },
        {
          label: "Settings",
          description: "setting related to course",
          fields: [
            {
              name: "quizCategories",
              label: "Quiz Categories",
              type: "array",
              fields: [
                {
                  type: "relationship",
                  relationTo: "categoriesitem",
                  name: "categoriesItem",
                },
                {
                  type: "relationship",
                  relationTo: "categoriessubitem",
                  name: "categoriesSubItem",
                  hasMany: true,
                  filterOptions: ({ data, siblingData }: any) => {
                    if (siblingData?.categoriesItem) {
                      return {
                        parent: { equals: siblingData?.categoriesItem },
                      };
                    }
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  ],
  versions: {
    drafts: {
      autosave: true,
    },
  },
};

export default Courses;

Expected Behaviour:
sub categories items will work properly.

I have a local version of Payload downloaded from this repo. (My package.json file is below)
When attempting to install any social media icon packages I get the following errors:

Richs-Mac-Pro:thebeatentrail rich$ npm install react-social-icons
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @payloadcms/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/payload
npm ERR! peer payload@"^2.0.0" from @payloadcms/[email protected]
npm ERR! node_modules/@payloadcms/bundler-webpack
npm ERR! @payloadcms/bundler-webpack@"^1.0.0" from the root project
npm ERR! peer payload@"^2.0.0" from @payloadcms/[email protected]
npm ERR! node_modules/@payloadcms/db-mongodb
npm ERR! @payloadcms/db-mongodb@"^1.0.0" from the root project
npm ERR! 5 more (@payloadcms/plugin-cloud, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer payload@"^1.1.8" from @payloadcms/[email protected]
npm ERR! node_modules/@payloadcms/plugin-stripe
npm ERR! @payloadcms/plugin-stripe@"^0.0.14" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/payload
npm ERR! peer payload@"^1.1.8" from @payloadcms/[email protected]
npm ERR! node_modules/@payloadcms/plugin-stripe
npm ERR! @payloadcms/plugin-stripe@"^0.0.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

This is my entire package.json file to provide accurate versions for this repot:
{
"name": "@payloadcms/template-ecommerce",
"description": "E-commerce template for Payload",
"version": "1.0.0",
"main": "dist/server.js",
"license": "MIT",
"scripts": {
"dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts nodemon",
"stripe:webhooks": "stripe listen --forward-to localhost:8000/stripe/webhooks",
"seed": "rm -rf media && cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts ts-node src/server.ts",
"build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload build",
"build:server": "tsc --project tsconfig.server.json",
"build:next": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NEXT_BUILD=true node dist/server.js",
"build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next",
"serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NODE_ENV=production node dist/server.js",
"eject": "yarn remove next react react-dom @next/eslint-plugin-next && ts-node eject.ts",
"copyfiles": "copyfiles -u 1 "src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}" dist/",
"generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:types",
"generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:graphQLSchema",
"lint": "eslint src",
"lint:fix": "eslint --fix --ext .ts,.tsx src",
"payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload"
},
"dependencies": {
"@payloadcms/bundler-webpack": "^1.0.0",
"@payloadcms/db-mongodb": "^1.0.0",
"@payloadcms/plugin-cloud": "^2.0.0",
"@payloadcms/plugin-nested-docs": "^1.0.8",
"@payloadcms/plugin-redirects": "^1.0.0",
"@payloadcms/plugin-seo": "^1.0.10",
"@payloadcms/plugin-stripe": "^0.0.14",
"@payloadcms/richtext-slate": "^1.0.0",
"@stripe/react-stripe-js": "^1.16.3",
"@stripe/stripe-js": "^1.46.0",
"cross-env": "^7.0.3",
"dotenv": "^8.2.0",
"escape-html": "^1.0.3",
"express": "^4.17.1",
"next": "13.5.2",
"payload": "^2.0.7",
"payload-admin-bar": "^1.0.6",
"qs": "6.11.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.1",
"react-router-dom": "5.3.4",
"stripe": "^10.2.0"
},
"devDependencies": {
"@next/eslint-plugin-next": "^13.1.6",
"@payloadcms/eslint-config": "^0.0.1",
"@swc/core": "1.3.76",
"@types/escape-html": "^1.0.2",
"@types/express": "^4.17.9",
"@types/node": "18.11.3",
"@types/qs": "^6.9.8",
"@types/react": "18.0.21",
"@typescript-eslint/eslint-plugin": "^5.51.0",
"@typescript-eslint/parser": "^5.51.0",
"copyfiles": "^2.4.1",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"nodemon": "^2.0.6",
"prettier": "^2.7.1",
"slate": "0.91.4",
"ts-node": "^10.9.1",
"typescript": "^4.8.4"
},
"resolutions": {
"jackspeak": "2.1.1"
}
}

Does anyone know how to resolve these dependencies?

• It should be a Rich Text element, and should be enabled in most all rich text fields
• Design an icon that is descriptive over what the element does
• Render it accordingly in the Rich Text field

yikes

fix it

when I have a collection with the permission of create:()=> isAdmin

It causes below Permission error:
You are not allowed to perform this action.

Thank you so much for helping me out! Take care

I guess there's a small bug in fields/link.ts

    linkResult.fields.push({
      name: 'appearance',
      type: 'select',
      defaultValue: 'default',
      options: appearanceOptionsToUse,
      admin: {
        description: 'Choose how the link should be rendered.'
      }
    });

SelectInput throws "TypeError: undefined is not an object (evaluating 'matchingOption.label')" if 'default' is not in appearanceOptionsToUse around here probably.

There's a place in fields/hero.ts

    linkGroup({
      appearances: ["primary", "secondary"], // no "default" = TypeError
      overrides: {
        name: "buttons",
        label: "Buttons",
        maxRows: 2,
        admin: {
          condition: (_, { type }) => type === "home",
        },
      },
    }),

import payload from "payload";
import type { CollectionConfig } from "payload/types";

const Questions: CollectionConfig = {
  slug: "questions",
  admin: {
    defaultColumns: ["title"],
    useAsTitle: "title",
    listSearchableFields: ["title"],
  },
  fields: [
    {
      name: "title",
      type: "text",
      required: true,
    },
    {
      name: "content",
      type: "richText",
      required: true,
    },
    {
      name: "type",
      type: "select",
      required: true,
      options: [
        {
          label: "Free Choice",
          value: "free_choice",
        },
        {
          label: "Single Choice",
          value: "single_choice",
        },
        {
          label: "Multiple Choice",
          value: "multiple_choice",
        },
        {
          label: "Matrix Sorting",
          value: "matrix_sorting",
        },
        {
          label: "Fill In The Blanks",
          value: "fill_in_the_blanks",
        },
        {
          label: "Sorting",
          value: "sorting",
        },
      ],
    },
    {
      name: "data",
      type: "richText",
      admin: {
        condition: (_, siblingData) => siblingData?.type === "free_choice",
      },
    },
    {
      name: "data",
      type: "richText",
      admin: {
        condition: (_, siblingData) =>
          siblingData?.type === "fill_in_the_blanks",
      },
    },
    {
      name: "data",
      type: "array",
      fields: [
        {
          type: "row",
          fields: [
            {
              type: "text",
              name: "label",
              required: true,
            },
            {
              name: "correct",
              type: "checkbox",
              defaultValue: false,
              admin: {
                style: {
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                },
              },
            },
          ],
        },
      ],
      admin: {
        condition: (_, siblingData) => siblingData?.type === "single_choice",
        style: {
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        },
      },
    },
    {
      name: "data",
      type: "array",
      fields: [
        {
          type: "row",
          fields: [
            {
              type: "text",
              name: "label",
              required: true,
            },
            {
              name: "correct",
              type: "checkbox",
              defaultValue: false,
              admin: {
                style: {
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                },
              },
            },
          ],
        },
      ],
      admin: {
        condition: (_, siblingData) => siblingData?.type === "multiple_choice",
      },
    },
    {
      name: "data",
      type: "array",
      fields: [
        {
          type: "richText",
          name: "label",
          required: true,
        },
      ],
      admin: {
        condition: (_, siblingData) => siblingData?.type === "sorting",
      },
    },
    {
      type: "row",
      fields: [
        {
          type: "richText",
          name: "left",
          required: true,
          admin: {
            width: "50%",
          },
        },
        {
          type: "richText",
          name: "right",
          required: true,
          admin: {
            width: "50%",
          },
        },
      ],
      admin: {
        condition: (_, siblingData) => siblingData?.type === "matrix_sorting",
      },
    },
  ],
  access: {
    read: () => true,
  },
  versions: {
    drafts: {
      autosave: true,
    },
  },
};
export default Questions;

Issue:
I am implementing a learning management system and facing issues implementing question types. I have a select field of dropdown type with options of question types. I want to conditionally show the corresponding question type as user will select a tyoe.

but my backend editor is breaking as soon as i change the type.

Expected behavior:
I should be able to change type and enter data without any issues.

Thank you so much for such a great tool!

This needs:

• Email template
• Transport provider (can use Ethereal for dev)

The Contentful /compare page follows a nice pattern. Try and replicate that wherever possible.

• Websites
• Native Apps
• Web Apps

This needs to be form-specific and not apply to all forms. To do this, add a beforeValidate hook to the formSubmissions collection via the plugin config. In here, check the form type, and if it should use a unique email, search all form submissions of the same type and same email. If a duplicate is found, return a message and do not continue.

I was just wondering what the plans for migrating this project to payload 2.0 (and possibly lexical and vite), as I imagine that this is what many would like to do, if they are using this as a template.

How to change the login interface?
i need to change the login interface.
I want a login button using IAM on the Login screen, and hide form Email and Password.

On the website there is a link that when clicked leads to this repo saying that the repo includes source code of the website

When I opened server.ts file in this repo it seems that any request to the root domain should result in redirect to admin pathname

app.get('/', (_, res) => { res.redirect('/admin'); });

However when I request https://payloadcms.com no redirect is happenning. Does that mean that source code in the repo is not source code of the website but source code of the backen(server) that the website relies upon? When I clicked the button on the website promising to show the source code of the website I was expecting to see frontend code for the client but seems like I am looking at the backend code