Skip to content

fix(storefront): BACK-675 make cart Shipping row label span the full totals width#2674

Merged
bc-apostoliuk merged 5 commits into
masterfrom
BACK-675
Jun 8, 2026
Merged

fix(storefront): BACK-675 make cart Shipping row label span the full totals width#2674
bc-apostoliuk merged 5 commits into
masterfrom
BACK-675

Conversation

@bc-apostoliuk

@bc-apostoliuk bc-apostoliuk commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

What?

The cart Shipping row's .cart-total-label was constrained to the narrow label column (~50% of the row width). With multi-coupon UI enabled, the row's label embeds the shipping-estimator trigger and a .cart-shipping-expectation-message paragraph that wraps inside that narrow column instead of using the same horizontal space as the Discount and other totals rows.

This change scopes a width: 100% rule to .cart-total-shipping-estimator .cart-total-label (inside .cart-total-enhanced) so the label — and the embedded expectation message — stretch across the full width of the parent <li>.

Note: the Jira ticket also mentions matching the Discount row's font for the expectation message. That portion is not included in this PR — needs design clarification (the current <p class="cart-shipping-expectation-message"> already inherits the body font, so the specific font change being requested isn't clear from the description alone). Happy to follow up in a separate PR or commit once we have a reference.

Files changed:

  • assets/scss/components/stencil/cart/_cart.scss — added width: 100% for .cart-total-shipping-estimator .cart-total-label within .cart-total-enhanced.
  • CHANGELOG.md — Draft entry added.

Requirements

  • CHANGELOG.md entry added (required for code changes only)

Tickets / Documentation

Screenshots (if appropriate)

Screenshot 2026-06-04 at 10 51 29

Test plan

  • On a storefront with multi-coupon UI enabled and cart.inventory_settings.show_default_shipping_expectation_prompt = true: open the cart page. The Shipping row label (containing "Shipping", the destination estimator trigger, and the expectation prompt) should span the full width of the totals row, matching the Discount row's width.
  • Regression check: the cart totals layout on small/medium/large breakpoints — the Shipping label still aligns left and the value still aligns right; nothing visually broken on other rows (Subtotal, Discount, Tax, Gift Certificate, Grand Total).
  • Regression check: with multi-coupon UI disabled (legacy layout), the Shipping row layout is unaffected (no .cart-total-shipping-estimator class is applied to the <li>).

🤖 Generated with Claude Code


Note

Low Risk
Scoped cart totals styling and template conditionals; legacy cart layout is unchanged when multi-coupon UI is off.

Overview
Cart Shipping row layout (multi-coupon UI): When enhanced cart totals are enabled, the Shipping row label (including the estimator trigger and shipping expectation copy) now spans the full width of the totals row via width: 100% on .cart-total-shipping-estimator .cart-total-label, so the expectation message is not squeezed into the narrow label column.

Shipping expectation prompt gating: The default shipping expectation message in cart totals is shown only when the inventory setting is on and the cart has at least one backordered line item (including pick-list bundled items with quantity_backordered). Previously it appeared whenever the setting was enabled.

Reviewed by Cursor Bugbot for commit a5ba67b. Bugbot is set up for automated code reviews on this repo. Configure here.

…totals width

The Shipping row's .cart-total-label was constrained to the narrow
label column (~50%), which left the embedded shipping expectation
message (.cart-shipping-expectation-message) wrapping inside that
narrow column instead of using the same horizontal space as Discount
and other totals rows.

Sets the shipping-estimator .cart-total-label width to 100% so the
label and its embedded expectation message stretch the full width of
the parent <li>.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@bc-apostoliuk bc-apostoliuk requested a review from a team as a code owner June 4, 2026 07:51
…a cart item is backordered

The default shipping expectation prompt was rendering on every cart
page where show_default_shipping_expectation_prompt was enabled, even
when no item required backorder shipping. The prompt is only
informational for backordered items, so it now also requires at least
one cart item with stock_position.quantity_backordered > 0.

Scans cart.items before the Shipping row, sets a hasBackorderedItem
flag via assignVar, and gates the prompt with that flag in addition to
the existing inventory_settings.show_default_shipping_expectation_prompt
check.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Fix All in Cursor

❌ 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 b72e5b5. Configure here.

Comment thread templates/components/cart/totals.html
Comment thread templates/components/cart/totals.html
bc-apostoliuk and others added 2 commits June 8, 2026 16:57
…ckorder check

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@bc-apostoliuk bc-apostoliuk merged commit 3fb7960 into master Jun 8, 2026
9 checks passed
@bc-apostoliuk bc-apostoliuk deleted the BACK-675 branch June 8, 2026 14:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants