Add fields for configuring the How You'll Learn cards on product pages by jkachel · Pull Request #3487 · mitodl/mitxonline

jkachel · 2026-04-14T16:10:03Z

What are the relevant tickets?

Part of mitodl/hq#10856

Screenshot

Description (What does it do?)

Adds some checkbox fields for the cards that we'd like to display on the product pages in Learn. These include:

REAL-WORLD LEARNING
Learn from faculty experts who emphasize practical application over theory.
LEARN BY DOING
Practice core competencies through case studies, simulations, and hands-on tools.
LEARN FROM OTHERS
Connect with an international community of professionals working on real-world projects.
LEARN ON DEMAND
Access all course content online with complete flexibility to study at your own pace.
AI-ENABLED SUPPORT
Get personalized help on assignments from AskTIM, powered by advanced AI.
STACKABLE CREDENTIALS
Earn certificates at key milestones—module, course, and program—building a portfolio of expertise.

The text for these may change depending on what kind of course this is (UAI, MITx, etc.) but that will be controlled by the component.

How can this be tested?

The fields should show up in the course pages and program pages within the CMS. The fields should work as expected. The API output should include these new fields as well.

Additional Context

There will be a complimentary PR that will update the Learn frontend to make the cards in the How You'll Learn section dependent on these checkboxes.

There will need to be a further PR to set these to reasonable values for the courses that are there, but I don't think we have that codified at time of writing.

github-actions · 2026-04-14T16:10:23Z

OpenAPI Changes

Show/hide ## Changes for v0.yaml:

## Changes for v0.yaml:
4 changes: 0 error, 0 warning, 4 info
info	[response-required-property-added] at head/openapi/specs/v0.yaml	
	in API GET /api/v2/pages/?fields=*&type=cms.coursepage
		added the required property `items/items/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v0.yaml	
	in API GET /api/v2/pages/?fields=*&type=cms.programpage
		added the required property `items/items/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v0.yaml	
	in API GET /api/v2/pages/{id}/
		added the required property `/oneOf[#/components/schemas/CoursePageItem]/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v0.yaml	
	in API GET /api/v2/pages/{id}/
		added the required property `/oneOf[#/components/schemas/ProgramPageItem]/how_youll_learn` to the response with the `200` status



## Changes for v1.yaml:
4 changes: 0 error, 0 warning, 4 info
info	[response-required-property-added] at head/openapi/specs/v1.yaml	
	in API GET /api/v2/pages/?fields=*&type=cms.coursepage
		added the required property `items/items/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v1.yaml	
	in API GET /api/v2/pages/?fields=*&type=cms.programpage
		added the required property `items/items/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v1.yaml	
	in API GET /api/v2/pages/{id}/
		added the required property `/oneOf[#/components/schemas/CoursePageItem]/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v1.yaml	
	in API GET /api/v2/pages/{id}/
		added the required property `/oneOf[#/components/schemas/ProgramPageItem]/how_youll_learn` to the response with the `200` status



## Changes for v2.yaml:
4 changes: 0 error, 0 warning, 4 info
info	[response-required-property-added] at head/openapi/specs/v2.yaml	
	in API GET /api/v2/pages/?fields=*&type=cms.coursepage
		added the required property `items/items/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v2.yaml	
	in API GET /api/v2/pages/?fields=*&type=cms.programpage
		added the required property `items/items/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v2.yaml	
	in API GET /api/v2/pages/{id}/
		added the required property `/oneOf[#/components/schemas/CoursePageItem]/how_youll_learn` to the response with the `200` status

info	[response-required-property-added] at head/openapi/specs/v2.yaml	
	in API GET /api/v2/pages/{id}/
		added the required property `/oneOf[#/components/schemas/ProgramPageItem]/how_youll_learn` to the response with the `200` status

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

pdpinch · 2026-04-15T16:48:32Z

Can I get a screenshot of the CMS UI for this?

ChristopherChudzicki · 2026-04-15T17:07:19Z

@pdpinch

Can I get a screenshot of the CMS UI for this?

I just added one to the PR description. (@jkachel fyi... didn't edit anything else)

ChristopherChudzicki

Approving, but, consider the following change:

Suggestion: I was expecting the API to return an array like {key, title, description}[]. I think this would be better because:

Wagtail title/description and item order would automatically be in-sync with frontend.
if we get rid of the "How You'll Learn" images, it is entirely driven by the API data, frontend doesn't need to know anything else.
- removing the images is something that has been discussed as a possibility
- even with {key,title,description}[] response, if we keep the images, frontend needs to have a key->image map.

http://mitxonline.odl.local:8013/api/v2/pages/?type=cms.programpage&readable_id=program-v1%3AUAI%2BB2C&fields=* is the API i am talking about... (Annoying: need to encodeURICoponent the readable ids)

ChristopherChudzicki · 2026-04-15T17:21:06Z

@jkachel Actually, Also... Should we add a data migration that:

populates the relevant 4 for UAI courses/programs
leaves all the others blank

jkachel · 2026-04-15T17:24:16Z

@jkachel Actually, Also... Should we add a data migration that:

populates the relevant 4 for UAI courses/programs

leaves all the others blank

Mentioned this in the PR - not sure what we want for the defaults so didn't tackle this, so it doesn't hold up the changes for the front end. But I have the front end changes done so if those are the defaults we want I can add a step to the migration to set them.

jkachel · 2026-04-15T19:27:23Z

Suggestion: I was expecting the API to return an array like {key, title, description}[]. I think this would be better because:

I kept this simple because the upstream issue indicated that these weren't to be editable - and wrt the frontend changes I have in process, these are just flags; the content is defined wholly in the React code. (I just have that mocked API response y'all had in the HowYoullLearnSection component matched up to the fields. You get cards for whichever ones are True.)

However, my initial thought on this was to set this up as a linked page, like we do for signatories in contracts. The cards would be another set of pages within Wagtail and we'd link them into the product page. Then we send whatever the details are for that card as part of the API response. Potential tricky bit with this is that the card content can be dependent on the course type (UAI, MITx, etc.) and so we'd have to design for that. But this seemed like it'd be out of spec for the issue as it was written so I went with the simpler route. Thoughts @pdpinch ?

ChristopherChudzicki · 2026-04-16T13:28:56Z

The cards would be another set of pages within Wagtail and we'd link them into the product page.

I think that's more complicated than we need now, as you say, not planning to edit them much.

What I had in mind was something like

the six flags you have now

additional model property (or serializer) like

@property
def how_you_will_learn(self):
    return [
        {"key": key, "title": title, "description": description}
        for key, title, description in HOW_YOU_LEARN_CHOICES
        if getattr(self, f"hyl_choice_{key}", False)
    ]

so that the title/description stay synced between mitxlone and mit-learn

…duct page

jkachel · 2026-04-16T16:07:52Z

The cards would be another set of pages within Wagtail and we'd link them into the product page.

I think that's more complicated than we need now, as you say, not planning to edit them much.

What I had in mind was something like
the six flags you have now
additional model property (or serializer) like
@property
def how_you_will_learn(self):
    return [
        {"key": key, "title": title, "description": description}
        for key, title, description in HOW_YOU_LEARN_CHOICES
        if getattr(self, f"hyl_choice_{key}", False)
    ]
so that the title/description stay synced between mitxlone and mit-learn

8d0b1df updates the API to coalesce the choice fields in this manner. Will update mitodl/mit-learn#3198 appropriately - should make that a simpler implementation, really.

ChristopherChudzicki

👍

jkachel mentioned this pull request Apr 14, 2026

Add support for dynamically displaying the How You'll Learn cards mitodl/mit-learn#3198

Merged

jkachel marked this pull request as ready for review April 14, 2026 19:07

jkachel added the Needs Review label Apr 14, 2026

ChristopherChudzicki self-assigned this Apr 15, 2026

jkachel force-pushed the jkachel/10856-how-youll-learn-cms-choices branch from b7aeed9 to 749a4e6 Compare April 15, 2026 16:44

ChristopherChudzicki approved these changes Apr 15, 2026

View reviewed changes

jkachel added 3 commits April 16, 2026 11:03

Add a bunch of fields to toggle the How You'll Learn cards on the pro…

d17cc0d

…duct page

Renumber migration

58e9dfb

Update the HYL fields to compress them down into a single field

8d0b1df

jkachel force-pushed the jkachel/10856-how-youll-learn-cms-choices branch from 270020c to 8d0b1df Compare April 16, 2026 16:03

jkachel requested a review from ChristopherChudzicki April 16, 2026 16:31

ChristopherChudzicki approved these changes Apr 16, 2026

View reviewed changes

jkachel merged commit 4890c34 into main Apr 16, 2026
10 checks passed

jkachel deleted the jkachel/10856-how-youll-learn-cms-choices branch April 16, 2026 17:15

odlbot mentioned this pull request Apr 16, 2026

Release 1.146.5 #3496

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add fields for configuring the How You'll Learn cards on product pages#3487

Add fields for configuring the How You'll Learn cards on product pages#3487
jkachel merged 3 commits into
mainfrom
jkachel/10856-how-youll-learn-cms-choices

jkachel commented Apr 14, 2026 •

edited by ChristopherChudzicki

Loading

Uh oh!

github-actions Bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

pdpinch commented Apr 15, 2026

Uh oh!

ChristopherChudzicki commented Apr 15, 2026

Uh oh!

ChristopherChudzicki left a comment •

edited

Loading

Uh oh!

ChristopherChudzicki commented Apr 15, 2026

Uh oh!

jkachel commented Apr 15, 2026

Uh oh!

jkachel commented Apr 15, 2026

Uh oh!

ChristopherChudzicki commented Apr 16, 2026

Uh oh!

jkachel commented Apr 16, 2026

Uh oh!

ChristopherChudzicki left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

jkachel commented Apr 14, 2026 • edited by ChristopherChudzicki Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Screenshot

Description (What does it do?)

How can this be tested?

Additional Context

Uh oh!

github-actions Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

OpenAPI Changes

Uh oh!

pdpinch commented Apr 15, 2026

Uh oh!

ChristopherChudzicki commented Apr 15, 2026

Uh oh!

ChristopherChudzicki left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki commented Apr 15, 2026

Uh oh!

jkachel commented Apr 15, 2026

Uh oh!

jkachel commented Apr 15, 2026

Uh oh!

ChristopherChudzicki commented Apr 16, 2026

Uh oh!

jkachel commented Apr 16, 2026

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jkachel commented Apr 14, 2026 •

edited by ChristopherChudzicki

Loading

github-actions Bot commented Apr 14, 2026 •

edited

Loading

ChristopherChudzicki left a comment •

edited

Loading