Fix swatch sort order and lowercase labels

.github/copilot-instructions.md

@@ -56,6 +56,7 @@ This project aims to provide a stable and secure version of Magento 1.x, with on
 - Update comments to reflect changes in code.
 - Update tests to cover new functionality and changes in code.
 - Update copyright notices in new files.
+- Do not add return types in docblocks if type hints are used.
 
 ## UI guidelines
 

app/code/core/Mage/ConfigurableSwatches/Helper/Data.php

@@ -84,6 +84,14 @@ public static function normalizeKey($key)
         return trim(strtolower($key));
     }
 
+    /**
+     * Wraps a key in a Normalized object that normalizes to lowercase but preserves original value
+     */
+    public static function normalizeKeyToObject(?string $key): Mage_ConfigurableSwatches_Model_String_Normalized
+    {
+        return new Mage_ConfigurableSwatches_Model_String_Normalized($key);
+    }
+
     /**
      * Get list of attributes that should use swatches
      *

app/code/core/Mage/ConfigurableSwatches/Helper/List/Price.php

@@ -65,8 +65,7 @@ public function attachConfigurableProductChildrenPricesMapping(array $products,
                         ['product' => $product],
                     );
                     $configurablePrice = $product->getConfigurablePrice();
-                    $cofigurableSwatchesHelper = Mage::helper('configurableswatches');
-                    $result[$cofigurableSwatchesHelper::normalizeKey($attributePrice['store_label'])] = [
+                    $result[Mage_ConfigurableSwatches_Helper_Data::normalizeKey($attributePrice['store_label'])] = [
                         'price' => $configurablePrice,
                         'oldPrice' => $this->_getHelper()->prepareOldPrice(
                             $product,

app/code/core/Mage/ConfigurableSwatches/Helper/Mediafallback.php

@@ -78,7 +78,7 @@ public function attachProductChildrenAttributeMapping(array $parentProducts, $st
 
         // normalize to all lower case before we start using them
         $optionLabels = array_map(function ($value) {
-            return array_map(Mage_ConfigurableSwatches_Helper_Data::normalizeKey(...), $value);
+            return array_map(Mage_ConfigurableSwatches_Helper_Data::normalizeKeyToObject(...), $value);
         }, $optionLabels);
 
         foreach ($parentProducts as $parentProduct) {
@@ -109,7 +109,8 @@ public function attachProductChildrenAttributeMapping(array $parentProducts, $st
                     }
 
                     // using default value as key unless store-specific label is present
-                    $optionLabel = $optionLabels[$optionId][$storeId] ?? $optionLabels[$optionId][0];
+                    $optionLabelObject = $optionLabels[$optionId][$storeId] ?? $optionLabels[$optionId][0];
+                    $optionLabel = (string) $optionLabelObject;
 
                     // initialize arrays if not present
                     if (!isset($mapping[$optionLabel])) {
@@ -119,7 +120,7 @@ public function attachProductChildrenAttributeMapping(array $parentProducts, $st
                     }
 
                     $mapping[$optionLabel]['product_ids'][] = $childProduct->getId();
-                    $mapping[$optionLabel]['label'] = $optionLabel;
+                    $mapping[$optionLabel]['label'] = $optionLabelObject;
                     $mapping[$optionLabel]['default_label'] = $optionLabels[$optionId][0];
                     $mapping[$optionLabel]['labels'] = $optionLabels[$optionId];
 
@@ -184,10 +185,11 @@ public function getConfigurableImagesFallbackArray(
             // load images from the configurable product for swapping
             if (is_array($mapping)) {
                 foreach ($mapping as $map) {
+                    $mapLabel = (string) $map['label'];
                     $imagePath = null;
 
                     //search by store-specific label and then default label if nothing is found
-                    $imageKey = array_search($map['label'], $imageHaystack);
+                    $imageKey = array_search($mapLabel, $imageHaystack);
                     if ($imageKey === false) {
                         $imageKey = array_search($map['default_label'], $imageHaystack);
                     }
@@ -197,7 +199,7 @@ public function getConfigurableImagesFallbackArray(
                         $imagePath = $mediaGallery['images'][$imageKey]['file'];
                     }
 
-                    $imagesByLabel[$map['label']] = [
+                    $imagesByLabel[$mapLabel] = [
                         'configurable_product' => [
                             Mage_ConfigurableSwatches_Helper_Productimg::MEDIA_IMAGE_TYPE_SMALL => null,
                             Mage_ConfigurableSwatches_Helper_Productimg::MEDIA_IMAGE_TYPE_BASE => null,
@@ -206,11 +208,11 @@ public function getConfigurableImagesFallbackArray(
                     ];
 
                     if ($imagePath) {
-                        $imagesByLabel[$map['label']]['configurable_product']
+                        $imagesByLabel[$mapLabel]['configurable_product']
                             [Mage_ConfigurableSwatches_Helper_Productimg::MEDIA_IMAGE_TYPE_SMALL]
                                 = $this->_resizeProductImage($product, 'small_image', $keepFrame, $imagePath);
 
-                        $imagesByLabel[$map['label']]['configurable_product']
+                        $imagesByLabel[$mapLabel]['configurable_product']
                             [Mage_ConfigurableSwatches_Helper_Productimg::MEDIA_IMAGE_TYPE_BASE]
                                 = $this->_resizeProductImage($product, 'image', $keepFrame, $imagePath);
                     }

app/code/core/Mage/ConfigurableSwatches/Model/Resource/Catalog/Product/Attribute/Super/Collection.php

@@ -119,7 +119,9 @@ protected function _getOptionLabels()
             ->where(
                 'labels.store_id IN (?)',
                 [Mage_Catalog_Model_Abstract::DEFAULT_STORE_ID, $this->getStoreId()],
-            );
+            )
+            ->order('options.sort_order ASC')
+            ->order('labels.value ASC');
 
         $resultSet = $this->getConnection()->query($select);
         $labels = [];

app/code/core/Mage/ConfigurableSwatches/Model/String/Normalized.php

@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright  For copyright and license information, read the COPYING.txt file.
+ * @link       /COPYING.txt
+ * @license    Open Software License (OSL 3.0)
+ * @package    Mage_ConfigurableSwatches
+ */
+
+/**
+ * Wrapper to modify a string value with a method to get the original string value
+ *
+ * @package    Mage_ConfigurableSwatches
+ */
+class Mage_ConfigurableSwatches_Model_String_Normalized implements Stringable
+{
+    /**
+     * The original, non-normalized string value.
+     */
+    protected ?string $originalValue;
+
+    public function __construct(?string $originalValue)
+    {
+        $this->originalValue = $originalValue;
+    }
+
+    /**
+     * Get normalized string value
+     */
+    public function __toString(): string
+    {
+        return Mage_ConfigurableSwatches_Helper_Data::normalizeKey($this->originalValue);
+    }
+
+    /**
+     * Get non-normalized original value
+     */
+    public function getOriginalValue(): ?string
+    {
+        return $this->originalValue;
+    }
+}

app/design/frontend/rwd/default/template/configurableswatches/catalog/product/list/swatches.phtml

@@ -8,8 +8,10 @@
 
 /** @var Mage_Core_Block_Template $this */
 
+/** @var Mage_Catalog_Model_Product $_product */
 $_product = $this->getProduct();
 
+/** @var Mage_ConfigurableSwatches_Model_String_Normalized[] $_attrValues */
 if (Mage::helper('configurableswatches')->isEnabled() && $_product && $_product->getId()
     && ($_attrValues = $_product->getListSwatchAttrValues()) && count($_attrValues) > 0):
     $_attrStockValues = $_product->getListSwatchAttrStockValues();
@@ -25,31 +27,47 @@
     <?php foreach ($_attrValues as $_optionValue => $_optionLabel): ?>
         <?php
         $_optionCode = Mage::helper('configurableswatches')->getHyphenatedString($_optionLabel);
-        $_swatchUrl = Mage::helper('configurableswatches/productimg')->getSwatchUrl($_product, $_optionLabel, $_swatchInnerWidth, $_swatchInnerHeight, $_swatchType);
+        $_swatchUrl = Mage::helper('configurableswatches/productimg')->getSwatchUrl(
+            $_product,
+            $_optionLabel,
+            $_swatchInnerWidth,
+            $_swatchInnerHeight,
+            $_swatchType
+        );
+
+        $_label = $this->escapeHtml($_optionLabel->getOriginalValue());
         $_hasImage = !empty($_swatchUrl);
-        $_liClasses = [];
+        $_liClass = '';
         $_aClass = 'swatch-link swatch-link-' . $_swatchAttribute->getId();
         if ($_hasImage) {
-            if ($_swatchType == 'media') {
-                $_liClasses[] = 'is-media';
-            }
+            $_liClass .= $_swatchType == 'media' ? ' is-media' : '';
             $_aClass .= ' has-image';
-        } elseif (strlen($_optionLabel) > 3) {
-            $_liClasses[] = 'wide-swatch';
+        } elseif (strlen($_label) > 3) {
+            $_liClass .= ' wide-swatch';
         }
         if (Mage::helper('configurableswatches/productlist')->swatchMatchesFilter($_optionValue)) {
-            $_liClasses[] = 'filter-match';
+            $_liClass .= ' filter-match';
         }
-        $_liClass = (!empty($_liClasses)) ? ' ' . implode(' ', $_liClasses) : '';
         ?>
-    <li class="option-<?php echo $_optionCode; ?><?php echo $_liClass; ?>" data-product-id="<?php echo $_product->getId() ?>" data-option-label="<?php echo $_optionLabel ?>">
-        <a href="javascript:void(0)" name="<?php echo $_optionCode; ?>" class="<?php echo $_aClass ?>" title="<?php echo $_optionLabel; ?>"
-               style="height: <?php echo $_swatchOuterHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchOuterWidth ?>px;">
-            <span class="swatch-label" style="height: <?php echo $_swatchInnerHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchInnerWidth ?>px; line-height: <?php echo $_swatchInnerHeight ?>px;">
+    <li class="option-<?php echo $_optionCode ?><?php echo $_liClass ?>"
+        data-product-id="<?php echo $_product->getId() ?>"
+        data-option-label="<?php echo $_optionLabel ?>">
+        <a href="javascript:void(0)"
+           name="<?php echo $_optionCode ?>"
+           class="<?php echo $_aClass ?>"
+           title="<?php echo $_label ?>"
+           style="height: <?php echo $_swatchOuterHeight ?>px;
+           <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchOuterWidth ?>px;">
+            <span class="swatch-label"
+                  style="height: <?php echo $_swatchInnerHeight ?>px;
+                  <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchInnerWidth ?>px; line-height: <?php echo $_swatchInnerHeight ?>px;">
             <?php if ($_hasImage): ?>
-                <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_optionLabel; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
+                <img src="<?php echo $_swatchUrl ?>"
+                     alt="<?php echo $_label ?>"
+                     width="<?php echo $_swatchInnerWidth ?>"
+                     height="<?php echo $_swatchInnerHeight ?>" />
             <?php else: ?>
-                <?php echo $_optionLabel; ?>
+                <?php echo $_label ?>
             <?php endif ?>
             </span>
             <?php if (isset($_attrStockValues[$_optionValue]) && !$_attrStockValues[$_optionValue]): ?>

app/design/frontend/rwd/default/template/configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml

@@ -21,7 +21,6 @@ $_swatchOuterHeight = $this->getSwatchOuterHeight();
 
 $_attr = $_attribute->getProductAttribute();
 $_attrCode = $_attr->getAttributeCode();
-/** @var string $_id */
 $_id = $_attribute->getAttributeId();
 
 $_swatchArray = $_config->attributes->$_id;
@@ -41,25 +40,44 @@ $_swatchArray = $_config->attributes->$_id;
             <?php foreach ($_swatchArray->options as $_option): ?>
                 <?php
                 $_optionCode = Mage::helper('configurableswatches')->getHyphenatedString($_option->label);
-                $_swatchUrl = Mage::helper('configurableswatches/productimg')->getSwatchUrl($_product, $_option->label, $_swatchInnerWidth, $_swatchInnerHeight, $_swatchType);
+                $_swatchUrl = Mage::helper('configurableswatches/productimg')->getSwatchUrl(
+                    $_product,
+                    $_option->label,
+                    $_swatchInnerWidth,
+                    $_swatchInnerHeight,
+                    $_swatchType
+                );
+
+                $_label = $this->escapeHtml($_option->label);
                 $_hasImage = !empty($_swatchUrl);
                 $_liClass = '';
                 $_aClass = 'swatch-link swatch-link-' . $_attribute->getAttributeId();
                 if ($_hasImage) {
                     $_liClass .= $_swatchType == 'media' ? ' is-media' : '';
                     $_aClass .= ' has-image';
-                } elseif (strlen($_option->label) > 3) {
+                } elseif (strlen($_label) > 3) {
                     $_liClass .= ' wide-swatch';
                 }
                 ?>
-                <li class="option-<?php echo $_optionCode; ?><?php echo $_liClass; ?>" id="option<?php echo $_option->id; ?>">
-                    <a href="javascript:void(0)" name="<?php echo $_optionCode; ?>" id="swatch<?php echo $_option->id; ?>" class="<?php echo $_aClass ?>" title="<?php echo $_option->label; ?>"
-                       style="height: <?php echo $_swatchOuterHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchOuterWidth ?>px;">
-                <span class="swatch-label" style="height: <?php echo $_swatchInnerHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchInnerWidth ?>px; line-height: <?php echo $_swatchInnerHeight ?>px;">
+                <li class="option-<?php echo $_optionCode ?><?php echo $_liClass ?>"
+                    id="option<?php echo $_option->id ?>">
+                    <a href="javascript:void(0)"
+                       name="<?php echo $_optionCode ?>"
+                       id="swatch<?php echo $_option->id ?>"
+                       class="<?php echo $_aClass ?>"
+                       title="<?php echo $_label ?>"
+                       style="height: <?php echo $_swatchOuterHeight ?>px;
+                       <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchOuterWidth ?>px;">
+                <span class="swatch-label"
+                      style="height: <?php echo $_swatchInnerHeight ?>px;
+                      <?php if (!$_hasImage): ?>min-<?php endif ?>width: <?php echo $_swatchInnerWidth ?>px; line-height: <?php echo $_swatchInnerHeight ?>px;">
                 <?php if ($_hasImage): ?>
-                    <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
+                    <img src="<?php echo $_swatchUrl ?>"
+                         alt="<?php echo $_label ?>"
+                         width="<?php echo $_swatchInnerWidth ?>"
+                         height="<?php echo $_swatchInnerHeight ?>" />
                 <?php else: ?>
-                    <?php echo $_option->label; ?>
+                    <?php echo $_label ?>
                 <?php endif ?>
                  </span>
                         <span class="x">X</span>

cypress/e2e/openmage/frontend/catalog/category.cy.js

@@ -0,0 +1,23 @@
+const test = cy.openmage.test.frontend.catalog.category.config;
+
+describe('Check catalog category page', () => {
+    beforeEach('Go to page', () => {
+        cy.visit(test.url);
+    });
+
+    it('tests swatch: color', () => {
+        const options = 'ul.configurable-swatch-color';
+        const swatchLink = 'li a.swatch-link';
+        const colors = ['Charcoal', 'Khaki', 'Red', 'Royal Blue'];
+        const images = ['msj006t', 'msj006c-khaki', 'msj006c-red', 'msj006c-royal-blue'];
+
+        cy.get(options).eq(0).find(swatchLink).should('have.length', 4);
+
+        cy.get(options).eq(0).find(swatchLink).each((swatch, index) => {
+            cy.wrap(swatch).invoke('attr', 'title').should('eq', colors[index]);
+            cy.wrap(swatch).click();
+            cy.get('img.product-collection-image-404').should('have.attr', 'src').should('include', images[index]);
+            cy.wait(500);
+        });
+    });
+})

cypress/e2e/openmage/frontend/catalog/product.cy.js

@@ -0,0 +1,36 @@
+const test = cy.openmage.test.frontend.catalog.product.config;
+
+describe('Check catalog product page', () => {
+    beforeEach('Go to page', () => {
+        cy.visit(test.url);
+    });
+
+    it('tests swatch: color', () => {
+        const options = 'ul#configurable_swatch_color';
+        const swatchLink = 'li a.swatch-link';
+        const colors = ['Charcoal', 'Khaki', 'Red', 'Royal Blue'];
+        const images = ['msj006t_4', 'msj006c-khaki', 'msj006c-red', 'msj006c-royal-blue'];
+
+        cy.get(options).eq(0).find(swatchLink).should('have.length', 4);
+
+        cy.get(options).eq(0).find(swatchLink).each((swatch, index) => {
+            cy.wrap(swatch).invoke('attr', 'title').should('eq', colors[index]);
+            cy.wrap(swatch).click();
+            cy.get('img.gallery-image.visible').should('have.attr', 'src').should('include', images[index]);
+            cy.wait(500);
+        });
+    });
+
+    it('tests swatch: size', () => {
+        const options = 'ul#configurable_swatch_size';
+        const swatchLink = 'li a.swatch-link';
+        const sizes = ['XS', 'S', 'M', 'L', 'XL'];
+
+        cy.get(options).eq(0).find(swatchLink).should('have.length', 5);
+
+        cy.get(options).eq(0).find(swatchLink).each((swatch, index) => {
+            cy.get(options).eq(0).contains(sizes[index]).should('exist');
+            cy.wrap(swatch).invoke('attr', 'title').should('eq', sizes[index]);
+        });
+    });
+})

cypress/support/e2e.js

@@ -61,5 +61,7 @@ import './openmage/backend/system/notification'
 import './openmage/backend/system/store'
 import './openmage/backend/system/variable'
 
+import './openmage/frontend/catalog/category'
+import './openmage/frontend/catalog/product'
 import './openmage/frontend/customer/account'
 import './openmage/frontend/homepage/newsletter'

cypress/support/openmage/_utils/test.js

@@ -302,6 +302,9 @@ cy.openmage.test.backend.system.variable = {};
  * @type {{}}
  */
 cy.openmage.test.frontend = {};
+cy.openmage.test.frontend.catalog = {};
+cy.openmage.test.frontend.catalog.category = {};
+cy.openmage.test.frontend.catalog.product = {};
 cy.openmage.test.frontend.customer = {};
 cy.openmage.test.frontend.customer.account = {};
 cy.openmage.test.frontend.homepage = {

cypress/support/openmage/frontend/catalog/category.js

@@ -0,0 +1,5 @@
+const test = cy.openmage.test.frontend.catalog.category;
+
+test.config = {
+    url: cy.openmage.test.frontend.homepage._url + 'men/shirts.html'
+}

cypress/support/openmage/frontend/catalog/product.js

@@ -0,0 +1,5 @@
+const test = cy.openmage.test.frontend.catalog.product;
+
+test.config = {
+    url: cy.openmage.test.frontend.homepage._url + 'men/shirts/plaid-cotton-shirt-476.html'
+}