diff --git a/src/course-about/CourseAboutPage.tsx b/src/course-about/CourseAboutPage.tsx index c4c010e..2a0d0c7 100644 --- a/src/course-about/CourseAboutPage.tsx +++ b/src/course-about/CourseAboutPage.tsx @@ -10,8 +10,8 @@ import { Loading } from '@src/generic'; import CourseAboutIntroSlot from '@src/plugin-slots/CourseAboutIntroSlot'; import CourseAboutCourseMediaSlot from '@src/plugin-slots/CourseAboutCourseMediaSlot'; import CourseAboutOverviewSlot from '@src/plugin-slots/CourseAboutOverviewSlot'; +import CourseAboutSidebarSlot from '@src/plugin-slots/CourseAboutSidebarSlot'; import { useCourseAboutData } from './data/hooks'; -import CourseSidebar from './course-sidebar/CourseSidebar'; import messages from './messages'; import { GRID_LAYOUT } from './layout'; @@ -57,9 +57,7 @@ const CourseAboutPage = () => { overviewData={courseAboutData.overview} courseId={courseId} /> - + ) : ( @@ -77,9 +75,7 @@ const CourseAboutPage = () => { - + )} diff --git a/src/plugin-slots/CourseAboutSidebarSlot/README.md b/src/plugin-slots/CourseAboutSidebarSlot/README.md new file mode 100644 index 0000000..98ed5e3 --- /dev/null +++ b/src/plugin-slots/CourseAboutSidebarSlot/README.md @@ -0,0 +1,133 @@ +# Course about page sidebar slot + +### Slot ID: `org.openedx.frontend.catalog.course_about_page.sidebar` + +## Description + +This slot is used to replace/modify/hide the entire Course about page sidebar. + +### Plugin Props: + +* `courseAboutData` - Object. The course about page data object containing course information such as id, name, start/end dates, enrollment details, media, pricing, prerequisites, and other course metadata. + +## Examples + +### Default content + +![Course about page sidebar slot with default content](./images/screenshot_default.png) + +### Replaced with custom component + +![🦶 in Course about page sidebar slot](./images/screenshot_custom.png) + +The following `env.config.tsx` will replace the Course about page sidebar entirely (in this case with a centered `h1` tag) + +```tsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + 'org.openedx.frontend.catalog.course_about_page.sidebar': { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_course_about_page_sidebar_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +

🦶

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` + +### Custom component with plugin props + +![Custom sidebar component with course information in Course about page sidebar slot](./images/screenshot_custom_simplified_sidebar.png) + +The following `env.config.tsx` example demonstrates how to replace the Course about page sidebar slot with a custom component that uses the plugin props (`courseAboutData`). In this case, it creates a custom sidebar component that displays key course information in a simplified format with badges and highlights. + +```tsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; +import { Card, Badge, Stack, Chip } from '@openedx/paragon'; + +const config = { + pluginSlots: { + 'org.openedx.frontend.catalog.course_about_page.sidebar': { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_course_about_page_sidebar_component', + type: DIRECT_PLUGIN, + RenderWidget: ({ courseAboutData }) => { + if (!courseAboutData) { + return null; + } + + return ( + + + +
+

{courseAboutData.name}

+

+ {courseAboutData.displayOrgWithDefault}/{courseAboutData.displayNumberWithDefault} +

+
+ + {courseAboutData.effort && ( + + Effort: {courseAboutData.effort} + + )} + + {courseAboutData.pacing && ( + + Pacing: {courseAboutData.pacing} + + )} + + {courseAboutData.language && ( + + Language: {courseAboutData.language} + + )} + + {courseAboutData.start && ( + + Start Date: {courseAboutData.startDisplay || courseAboutData.start} + + )} + + {courseAboutData.coursePrice && ( + + Price: {courseAboutData.coursePrice} + + )} + + {courseAboutData.canEnroll && ( + Enrollment Available + )} +
+
+
+ ); + }, + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom.png b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom.png new file mode 100644 index 0000000..44bd975 Binary files /dev/null and b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom.png differ diff --git a/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom_simplified_sidebar.png b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom_simplified_sidebar.png new file mode 100644 index 0000000..a905a2d Binary files /dev/null and b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom_simplified_sidebar.png differ diff --git a/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_default.png b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_default.png new file mode 100644 index 0000000..65f9980 Binary files /dev/null and b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_default.png differ diff --git a/src/plugin-slots/CourseAboutSidebarSlot/index.tsx b/src/plugin-slots/CourseAboutSidebarSlot/index.tsx new file mode 100644 index 0000000..042d718 --- /dev/null +++ b/src/plugin-slots/CourseAboutSidebarSlot/index.tsx @@ -0,0 +1,20 @@ +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import CourseSidebar from '@src/course-about/course-sidebar/CourseSidebar'; +import type { CourseAboutData } from '@src/course-about/types'; + +const CourseAboutSidebarSlot = ({ courseAboutData }: { courseAboutData: CourseAboutData }) => ( + + + +); + +export default CourseAboutSidebarSlot; diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index 3215b6c..8e7263f 100644 --- a/src/plugin-slots/README.md +++ b/src/plugin-slots/README.md @@ -16,3 +16,4 @@ * [`org.openedx.frontend.catalog.course_about_page.intro_video_modal`](./CourseAboutIntroVideoSlots/CourseAboutIntroVideoModalSlot/) * [`org.openedx.frontend.catalog.course_about_page.course_image`](./CourseAboutCourseImageSlot/) * [`org.openedx.frontend.catalog.course_about_page.course_media`](./CourseAboutCourseMediaSlot/) +* [`org.openedx.frontend.catalog.course_about_page.sidebar`](./CourseAboutSidebarSlot/)