Fix configurable attribute option ordering and case on product listing pages

[Copilot]

Description (*)

Configurable attribute options on category/listing pages were displaying in reversed order and with incorrect lowercase labels, inconsistent with product detail pages.

Root causes:

• SQL query in _getOptionLabels() lacked ORDER BY options.sort_order, resulting in unpredictable ordering
• Label normalization (for case-insensitive image matching) was applied to display values

Changes:

Collection.php

• Added ORDER BY options.sort_order ASC to SQL query
• Leverages PHP array insertion order to maintain sort

Mediafallback.php

• Split label handling: $optionLabelsOriginal for display, $optionLabels (normalized) for image matching
• $listSwatchValues now uses original case labels for rendering
• $mapping continues using normalized labels to preserve case-insensitive image matching

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

1. Create a configurable product with dropdown attribute (e.g., Size: S, M, L, XL) in backend with uppercase labels
2. Set attribute position values (1, 2, 3, 4) and enable "Used in Product Listing"
3. View product detail page - verify options display as: S, M, L, XL (uppercase, correct order)
4. View category page - verify options display as: S, M, L, XL (uppercase, correct order, not reversed)
5. Verify images still match correctly with option labels (case-insensitive matching preserved)

Questions or comments

N/A

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All automated tests passed successfully (all builds are green)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[BUG] Configurable attribute options order reversed on category page</issue_title>
<issue_description>### Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

In the latest version, when viewing a configurable product:

On the Product Detail Page, the configurable attribute (e.g., size) options are displayed in the correct order as defined in the backend.

On the Category / Product Listing Page, the same configurable attribute options appear in reversed order.

This behavior can be confusing for users and inconsistent with the product detail display.

Expected Behavior

The configurable attribute options should appear in the same order on the category page as on the product detail page, respecting the order set in the backend.

Steps To Reproduce

1. Create a configurable product with a dropdown attribute (e.g., size) that has multiple options (S, M, L, XL).

2. Ensure the attribute is set to be used in product listings.

3. View the product on the Product Detail Page – the options are in the correct order (S → M → L → XL).

4. View the product on the Category Page (e.g., using swatches or options) – the options are reversed (XL → L → M → S).

Environment

- OpenMage: latest cloned from the repository, no sample data - PHP: 8.4 - Theme: RWD (default OpenMage / Magento RWD theme) - Configurable Swatches enabled - Attribute used in product listing - No custom modifications to sorting applied

Anything else?

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

@addison74 Additionally, on the category page the size options are displayed in lowercase letters, instead of using the exact attribute option labels as defined in the backend (which are uppercase).

<ul class="configurable-swatch-list configurable-swatch-size clearfix"> <li class="option-s not-available" data-product-id="5" data-option-label="s"> <a href="javascript:void(0)" name="s" class="swatch-link swatch-link-134" title="s" style="height: 17px; min-width: 17px;"> <span class="swatch-label" style="height: 15px; min-width: 15px; line-height: 15px;"> s </span> <span class="x" style="display: block;"></span> </a> </li> <li class="option-m" data-product-id="5" data-option-label="m"> <a href="javascript:void(0)" name="m" class="swatch-link swatch-link-134" title="m" style="height: 17px; min-width: 17px;"> <span class="swatch-label" style="height: 15px; min-width: 15px; line-height: 15px;"> m </span> </a> </li> <li class="option-l" data-product-id="5" data-option-label="l"> <a href="javascript:void(0)" name="l" class="swatch-link swatch-link-134" title="l" style="height: 17px; min-width: 17px;"> <span class="swatch-label" style="height: 15px; min-width: 15px; line-height: 15px;"> l </span> </a> </li> <li class="option-xl" data-product-id="5" data-option-label="xl"> <a href="javascript:void(0)" name="xl" class="swatch-link swatch-link-134" title="xl" style="height: 17px; min-width: 17px;"> <span class="swatch-label" style="height: 15px; min-width: 15px; line-height: 15px;"> xl </span> </a> </li> </ul> ```</body></comment_new> </comments>

• Fixes [BUG] Configurable attribute options order reversed on category page #5132

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[github-actions]

Test Results

962 tests  ±0   954 ✅ ±0   16s ⏱️ -1s
211 suites ±0     8 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 82e4efa. ± Comparison against base commit ef34f89.

♻️ This comment has been updated with latest results.

[addison74]

@copilot: I tested this PR and works. There is another one opened here #5133. Please let me know your opinion.

[Copilot]

@copilot: I tested this PR and works. There is another one opened here #5133. Please let me know your opinion.

I'm glad the fix is working for you! Unfortunately, I don't have access to view PR #5133 from my environment to provide a comparison. If there's a conflict or overlap between the two PRs, the maintainers can help determine which approach is better suited for merging.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud