MAGETWO-55785: Lightweight configurable product form load and options display

Author: ishakhsuvarov

app/code/Magento/ConfigurableProduct/view/adminhtml/templates/catalog/product/edit/super/matrix.phtml

@@ -172,7 +172,10 @@ $currencySymbol = $block->getCurrencySymbol();
                                                     id: $parent.getRowId(variation, 'price'),
                                                     name: $parent.getVariationRowName(variation, 'price')
                                                 },
-                                                value: variation.price
+                                                value: variation.price,
+                                                event: {
+                                                    keyup: validatePrice()
+                                                }
                                             "/>
                                             <label class="addafter"
                                                    data-bind="attr: {for: $parent.getRowId(variation, 'price')">

app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/variations.js

@@ -82,14 +82,36 @@ define([
             }, this);
 
             $('#save-split-button, #save-split-button .item').click(function () {
-                this.productMatrixSerialized(JSON.stringify(this.prepareVariations()));
+                var variations = this.prepareVariations(),
+                    validationError = this.validateVariationPrices(this.variations) || false;
+
+                if (validationError) {
+                    pagingObservables.current(
+                        Math.floor(this.variations.indexOf(validationError) / pagingObservables.pageSize() + 1)
+                    );
+                    $('[data-form="edit-product"]').validation('isValid');
+
+                    return;
+                }
+
+                this.productMatrixSerialized(JSON.stringify(variations));
                 this.associatedProductsSerialized(JSON.stringify(this.associatedProducts));
                 this.configurationsSerialized(JSON.stringify(this.configurations));
             }.bind(this));
 
             return this;
         },
 
+        /**
+         * Validate variations data.
+         * @param {Array} variations
+         */
+        validateVariationPrices: function (variations) {
+            return _.find(variations, function (variation) {
+                return variation.hasOwnProperty('price') && variation.price === '';
+            });
+        },
+
         /**
          * @param {String} rowIndex
          */
@@ -400,7 +422,14 @@ define([
                     variationKey: this.getVariationKey(variation.options),
                     editable: variation.editable === undefined ? !variation.productId : variation.editable,
                     productUrl: this.buildProductUrl(variation.productId),
-                    status: variation.status === undefined ? 1 : parseInt(variation.status, 10)
+                    status: variation.status === undefined ? 1 : parseInt(variation.status, 10),
+
+                    /**
+                     * Validates variation price.
+                     */
+                    validatePrice: function () {
+                        $('[data-form="edit-product"]').validation('isValid');
+                    }
                 }));
             }, this);
             this.productMatrix(tempMatrix);