创建像 shopify 这样的变体表答案

【问题标题】：Create variants table like shopify创建像 shopify 这样的变体表
【发布时间】：2021-04-19 20:10:31
【问题描述】：

您好，我正在使用 jQuery 标签输入库来创建像 shopify 这样的变体选项，例如，每个产品都可以有一个特定的选项，比如颜色大小...... 我有 3 个输入字段，每个输入包含用户将在界面上输入的可变数量的标签，我如何将我在第一个输入（颜色）中拥有的标签数量与我拥有的标签数量相乘第二行（大小）

例如颜色标签数量 X 尺寸标签数量

这是一个例子：

这是我的 jQuery 代码：

$('.tagline').on('change', function(){
    for(i = 0; i < $('.tagline').length; i++){
        // multiplicate line 1 width the line 2
    }
});

这是我的 HTML 代码

<input type="text" class="form-control tagline tokenfield" value="">

我想生成一个这样的表：

【问题讨论】：

如果您创建了一个，请分享代码。

标签： javascript html bootstrap-tags-input

【解决方案1】：

您可以像我在 angularjs 中使用的那样通过笛卡尔积制作此表

$scope.createVariation = function() {
        var tagsArr = [];
        for (var i = 0; i < $scope.optionsList.length; i++) {
            tagsArr[i] = $scope.optionsList[i].tags.split(',');
        }

        const cartesianProduct = (...arr) => {
            return arr.reduce((acc, val) => {
                return acc.map(el => {
                    return val.map(element => {
                        return el.concat([element]);
                    });
                }).reduce((acc, val) => acc.concat(val), []);
            }, [
                []
            ]);
        };

        var variationList = [];

        if ($scope.optionsList.length == 1) {
            variationList = cartesianProduct(tagsArr[0]);
        }
        if ($scope.optionsList.length == 2) {
            variationList = cartesianProduct(tagsArr[0], tagsArr[1]);
        }
        if ($scope.optionsList.length == 3) {
            variationList = cartesianProduct(tagsArr[0], tagsArr[1], tagsArr[2]);
        }

        $scope.makeVariationTable(variationList);
    }

    $scope.makeVariationTable = function(variationList) {
        $scope.variationListArray = [];
        for (var i = 0; i < variationList.length; i++) {
            $scope.variationListArray.push({
                'variant': variationList[i],
                'price': '',
                'sku': '',
                'barcode':''
            });
        }
    }

其中 $scope.optionsList 是用户定义的选项数组。

$scope.optionsList = [{name:'size',tags:'10,10.5,11,11.5'},{name:'color',tags:'red,blue'}]

【讨论】：