Documentation

Learning Plugin

commercetools learning gatsby plugin

A gatsby theme plugins providing UI components and helper utilities to integrate self-learning functionality.

Works against commercetools' learning-api, which is not a part of this open source project.

Configuration

gatsby-theme-learning plugin expects the following parameters and also needs the gatsby-theme-sso-ui-kit

  • auth0Domain: the auth0 application domain url (it is defined in the auth0 management app)
  • learnApiBaseUrl: the learn API base url. It can be omitted if the host running the site matches the api host.
  • features: an array of strings representing feature flags used to toggle specific functionalities. Expected values:
    • status-indicator: feature flag to toggle the course status indicator.

In order to enable the plugin, the following configuration should be added to the gatsby-config.js plugin section:

{
    resolve: '@commercetools-docs/gatsby-theme-learning',
    options: {
        auth0Domain: 'auth0domain.dummy.tld',
        learnApiBaseUrl: 'https://api.host.tld',
    },
}

Components

Quiz

Quiz component can be used in any mdx page. It's responsible for fetching, rendering and handling all the interaction logic of a quiz answer submission. The component simply renders a login CTA if the user is not logged in, otherwise the quiz is rendered.

The component expects 2 mandatory props:

  • courseId: Id of the course defined in the LMS
  • quizId: Id of the quiz defined in the LMS

Example

you write:md
<Quiz courseId="5565" quizId="85065"/>

CourseCard

Quiz card is a card component displaying information about a specific course. It supports logged in and logged out state. When the user is logged in, the course status is displayed.

The component has the following mandatory props:

  • title: The course title.
  • href: Relative path to the first course page
  • courseId: The courseId
  • duration: A string giving information about course duration

Example

you write:md
<CourseCard duration="30 min" title="Course name" href="self-learning/overview" courseId="66">Course description. Introduction to extensibility possibilities available in Composable Commerce.</CourseCard>

LearningPathCard

Learning path card is a card component displaying information about a learning path.

The component has the following mandatory props:

  • title: The learning path title.
  • duration: A string giving information about learning path duration
  • productName: A string representing the product the learning path is referring to

Example

you write:md
<LearningPathCard title="Overview" duration="1 hour 25 minutes | 7 courses" productName="Composable Commerce">
    This learning path is great for Composable Commerce administrators who create/maintain e-commerce data points, primarily work with a user interface, and have some familiarity with APIs.
</LearningPathCard>

IfUserLoggedIn / IfUserLoggedOut

These components are used to wrap content that should only be displayed if the user is logged in or logged out respectively.

The components have 1 optional prop.

  • assumeTrue: boolean, if set to true while auth0 is still loading the logged in/logged out user state, the component will render the content regardless.

Examples

you write:md


<IfUserLoggedIn assumeTrue>
 ## Welcome back!
</IfUserLoggedIn>
you write:md


<IfUserLoggedOut>
 ## Please log in
</IfUserLoggedOut>

FirstName

This component simply render the first name of the logged in user, if the user is logged out, nothing is rendered.

Example

you write:md


Hello <FirstName />, welcome back

Learing path card with image on the side

In order to add an image on the side of a learning path card use the following pattern (the image must have been previously added to the /content/files directory)

you write:md
<Cards>
  <LearningPathCard title="Overview" duration="1 hour 25 minutes | 7 courses" productName="Composable Commerce"> Description here</LearningPathCard>
  <ImageCard>


  ![learning path](/content/files/file-name.svg)


  </ImageCard>
</Cards>

IfLearningPathComplete / IfLearningPathNotComplete

These components are used to wrap content that should only be/not be displayed if the user completed the learning path

Examples

you write:md


<IfLearningPathComplete>
 Congratulations, you completed learning path
</IfLearningPathComplete>
you write:md


<IfLearningPathNotComplete>
  Keep learning!
</IfLearningPathNotComplete>

LoginButton

The component renders a button that implements the login functionality through auth0.

The component has the following mandatory props:

  • theme: (primary or secondary)
  • label: The text rendered on the button
  • icon: (Optional) Icon component to be rendered in front of the label text
  • quizId: (Optional)Refers to the id of a quiz secton on the page causing auto-scroll to that section after login

Examples

you write:md
import { LoginButton } from '@commercetools-docs/gatsby-theme-sso-ui-kit';


<LoginButton
  theme="primary"
  icon={<UserFilledIcon color="surface"/>}
  label="Login to start the quiz"
  quizId={`quiz-${props.quizId}`}
/>