Add audiobook purchase button to book details pages #2813
+55
−8
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This adds a new audiobook purchase option box that appears above the Individual and Bookstore print options when an audiobook link is configured in the CMS. Changes: - Import faVolumeUp icon for audiobook representation - Fetch audiobook_link from CMS API - Add audiobook entry to purchase options (appears first when present) - Update button styling to accommodate 3 boxes in grid layout - Add translations for "Audiobook" and "Purchase options" (en/es) - Add specific analytics tracking for audiobook clicks The audiobook box only appears when the book has an audiobook_link configured in the CMS, ensuring backwards compatibility. Related to: CORE-1476 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
TomWoodward
requested changes
Jan 9, 2026
|
|
||
| // Add audiobook option at the beginning if link is available | ||
| if (audiobookLink) { | ||
| content.unshift({ |
Member
There was a problem hiding this comment.
i think we would prefer the audiobook box at the end of the list
| padding: $normal-margin; | ||
| width: max-content; | ||
|
|
||
| &.boxes-3 { |
Member
There was a problem hiding this comment.
did you add this class and then not use it anywhere? whats up with that?
Per review feedback, the audiobook option now appears after Individual and Bookstore boxes instead of before them. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
OpenStaxClaude
commented
Jan 9, 2026
Contributor
Author
OpenStaxClaude
left a comment
OpenStaxClaude
left a comment
There was a problem hiding this comment.
Fixed! The audiobook box now appears at the end of the list. Changed from content.unshift() to content.push() in commit 5151f9d.
OpenStaxClaude
commented
Jan 9, 2026
Contributor
Author
OpenStaxClaude
left a comment
OpenStaxClaude
left a comment
There was a problem hiding this comment.
The boxes-3 class is being used - it's dynamically applied via template literals on lines 39 and 83:
<div className={`phone-version boxes boxes-${contentArray.length}`}>
<div className={`larger-version boxes boxes-${contentArray.length}`}>When there are 3 items in the contentArray (which happens when an audiobook link is present), the class becomes boxes-3, which triggers the 3-column grid layout in the SCSS.
TomWoodward
approved these changes
Jan 9, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a new audiobook purchase option box to the book details pages that appears above the Individual and Bookstore print options when an audiobook link is configured in the CMS.
Changes
Frontend (os-webview)
UI Changes
When an audiobook link is configured:
When no audiobook link is configured:
Responsive Design
boxes-${contentArray.length}class for flexible stylingTesting
Related
Screenshots
Mockup available in Jira ticket CORE-1476
🤖 Generated with Claude Code