feat(pdp): polish PDP backorder availability display (BACK-636)#2670
feat(pdp): polish PDP backorder availability display (BACK-636)#2670bc-apostoliuk wants to merge 2 commits into
Conversation
- Render on-hand stock as "X in stock" (was "Current Stock: X") - Bold the on-hand and backordered quantities for emphasis - Drop the hardcoded "()" wrapping the backorder availability prompt - Add a vertical divider between the quantity and the backorder prompt/message rows; the divider hides when no prompt/message is shown Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fc5fb79. Configure here.
| border-left: 1px solid stencilColor("color-textSecondary"); | ||
| font-weight: fontWeight("normal"); | ||
| margin-left: spacing("half"); | ||
| padding-left: spacing("half"); |
There was a problem hiding this comment.
Empty backorder message span shows stray border divider
Medium Severity
The new border-left on [data-backorder-message] renders a stray vertical divider when the element is empty. Unlike $backorderPrompt which uses .hide() to set display: none, $backorderMessage is only cleared with .text('') — the element remains in the layout. An empty inline <span> with border-left and padding-left still renders a visible border line at the line height of its parent, producing an unwanted visual artifact next to the backordered quantity message whenever no backorder message is configured.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit fc5fb79. Configure here.
| }, | ||
| "products": { | ||
| "current_stock": "Current Stock:", | ||
| "in_stock": "in stock", |
There was a problem hiding this comment.
New lang key missing from all non-English locale files
Medium Severity
The template now uses {{lang 'products.in_stock'}} instead of {{lang 'products.current_stock'}}, but the new products.in_stock key was only added to lang/en.json. The replaced products.current_stock key has translations in da.json, de.json, es-419.json, es-AR.json, and likely others. Non-English storefronts will now display the English fallback "in stock" instead of a localized label, which is a regression from the previously translated stock text.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit fc5fb79. Configure here.
|
Closing as redundant — BACK-636 polish was already implemented on master via #2662 (BACK-655) with a cleaner CSS-only approach. |
1 participant
What?
Polishes the Stencil PDP backorder/on-hand stock display so it matches the intended design (and Catalyst implementation).
Changes:
templates/components/products/product-view.htmlnow renders the stock count as<strong>{stock_level}</strong> in stockinstead ofCurrent Stock: {stock_level}. The<span data-product-stock>was replaced with<strong data-product-stock>so the quantity is bold; the surrounding label still picks upfont-weight: boldfrom new scoped SCSS for the rest of the row text.products.in_stock("in stock") inlang/en.json. The oldproducts.current_stockkey is retained for any other consumers.(...)wrapper in both the Handlebars template andassets/js/theme/common/product-details-base.js(updateBackorderAvailabilityPrompt). The prompt text is now rendered raw.updateQtyBackorderedMessageinproduct-details-base.jsnow wraps the quantity in<strong>and writes via.html(). The__QTY__token substitution in the merchant-provided message keeps working (the bold markup is injected before substitution).assets/scss/components/stencil/productView/_productView.scss:.productView-backorder-availability-promptand[data-backorder-message]now share aborder-leftdivider with matchingmargin-left/padding-left, replacing the previous plainmargin-left-only rule. Both elements also explicitly usefont-weight: normalso the divider/message text doesn't inherit the bold weight from the parent label..form-field--stock .form-label--alternate { font-weight: bold; }so theX in stock/X will be backorderedrows render bold, while the prompt/message after the divider stays at normal weight.The divider naturally hides when there is no prompt/message because those spans are emptied or set to
display: noneby the existing logic.Requirements
Tickets / Documentation
Screenshots (if appropriate)
Before:
After:
🤖 Generated with Claude Code
Note
Low Risk
Presentation-only changes to PDP stock/backorder copy and styles; backordered quantity HTML is built from a numeric value only.
Overview
Polishes the PDP backorder / on-hand stock row so it matches the intended design: bold quantity, "in stock" copy, and a divider before the prompt or backorder message.
The stock label in
product-view.htmlswitches from Current Stock:{level}to{level}in stock (newproducts.in_stockinlang/en.json;current_stockis unchanged for other callers). The on-hand count uses<strong data-product-stock>. The backorder availability prompt is shown without hardcoded parentheses in both the template andupdateBackorderPromptinproduct-details-base.js.When quantity triggers a backorder line,
updateQtyBackorderedMessagewraps the count in<strong>and uses.html()so__QTY__in the merchant message can stay bold. SCSS bolds.form-field--stocklabels, sets normal weight on the prompt and[data-backorder-message], and adds a left border divider between the main stock text and those segments.Reviewed by Cursor Bugbot for commit fc5fb79. Bugbot is set up for automated code reviews on this repo. Configure here.