MAGETWO-50409: Changing order of configurable attributes is ignored on frontend

Author: Valeriy Nayda

app/code/Magento/ConfigurableProduct/Model/ConfigurableAttributeData.php

@@ -30,11 +30,12 @@ public function getAttributesData(Product $product, array $options = [])
             if ($attributeOptionsData) {
                 $productAttribute = $attribute->getProductAttribute();
                 $attributeId = $productAttribute->getId();
-                $attributes[] = [
+                $attributes[$attributeId] = [
                     'id' => $attributeId,
                     'code' => $productAttribute->getAttributeCode(),
                     'label' => $productAttribute->getStoreLabel($product->getStoreId()),
                     'options' => $attributeOptionsData,
+                    'position' => $attribute->getPosition(),
                 ];
                 $defaultValues[$attributeId] = $this->getAttributeConfigValue($attributeId, $product);
             }

app/code/Magento/ConfigurableProduct/Test/Unit/Model/ConfigurableAttributeDataTest.php

@@ -67,12 +67,14 @@ public function testPrepareJsonAttributes()
             ['value_index' => 'option_id_1', 'label' => 'label_1'],
             ['value_index' => 'option_id_2', 'label' => 'label_2'],
         ];
+        $position = 2;
         $expected = [
             'attributes' => [
                 $attributeId => [
                     'id' => $attributeId,
                     'code' => 'test_attribute',
                     'label' => 'Test',
+                    'position' => $position,
                     'options' => [
                         0 => [
                             'id' => 'option_id_1',
@@ -108,11 +110,15 @@ public function testPrepareJsonAttributes()
 
         $attributeMock = $this->getMockBuilder('Magento\ConfigurableProduct\Model\Product\Type\Configurable\Attribute')
             ->disableOriginalConstructor()
-            ->setMethods(['getProductAttribute', '__wakeup', 'getLabel', 'getOptions', 'getAttributeId'])
+            ->setMethods(['getProductAttribute', '__wakeup', 'getLabel', 'getOptions', 'getAttributeId', 'getPosition'])
             ->getMock();
         $attributeMock->expects($this->once())
             ->method('getProductAttribute')
             ->willReturn($productAttributeMock);
+        $attributeMock->expects($this->once())
+            ->method('getPosition')
+            ->willReturn($position);
+
         $this->product->expects($this->once())->method('getStoreId')->willReturn($storeId);
         $productAttributeMock->expects($this->once())
             ->method('getStoreLabel')

app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js

@@ -205,12 +205,22 @@ define([
          */
         _init: function () {
             if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
+                this._sortAttributes();
                 this._RenderControls();
             } else {
                 console.log('SwatchRenderer: No input data received');
             }
         },
 
+        /**
+         * @private
+         */
+        _sortAttributes: function () {
+            this.options.jsonConfig.attributes = _.sortBy(this.options.jsonConfig.attributes, function (attribute) {
+                return attribute.position;
+            });
+        },
+
         /**
          * @private
          */