= [];
let skuList = ;
//When there is only one attribute if ( === 1) {
let attr = [0];
for (let i = 0; i < ; i++) {
({
spData: ([{key:,value:[i]}])
});
}
} else if ( === 2) {
let attr0 = [0];
let attr1 = [1];
for (let i = 0; i < ; i++) {
if ( === 0) {
({
spData: ([{key:,value:[i]}])
});
continue;
}
for (let j = 0; j < ; j++) {
let spData = [];
({key:,value:[i]});
({key:,value:[j]});
({
spData: (spData)
});
}
}
} else {
let attr0 = [0];
let attr1 = [1];
let attr2 = [2];
for (let i = 0; i < ; i++) {
if ( === 0) {
({
spData: ([{key:,value:[i]}])
});
continue;
}
for (let j = 0; j < ; j++) {
if ( === 0) {
let spData = [];
({key:,value:[i]});
({key:,value:[j]});
({
spData: (spData)
});
continue;
}
for (let k = 0; k < ; k++) {
let spData = [];
({key:,value:[i]});
({key:,value:[j]});
({key:,value:[k]});
({
spData: (spData)
});
}
}
}
}Assumed selection attribute data
Assume that the selected product attributes are as follows (can be adjusted as needed):
= [
{ name: "color", values: ["red", "blue"] },
{ name: "size", values: ["S", "M"] },
{ name: "Material", values: ["cotton", "wool"] }
];
Initialization part
First, the code initializes an empty array skuStockList and points to the array through a skuList reference.
= []; let skuList = ;
The purpose of this code is to provide a storage place for subsequently generated SKU lists.
Handle different number of attributes
Next, the code determines how many attributes are currently selected based on the value of . Depending on the number of attributes, the code will generate different number of combined SKUs.
1. When there is only one attribute
if ( === 1) {
let attr = [0]; // Get the first attribute for (let i = 0; i < ; i++) { // Iterate through all values of this property ({
spData: ([{ key: , value: [i] }])
});
}
}
Execution process:
- There is only one attribute "Color" whose values are ["Red", "Blue"].
- For each value of this property, generate a SKU and push into the skuList.
result:
[
{"spData": "[{\"key\":\"color\",\"value\":\"red\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"blue\"}]"}
]
2. When there are two attributes
else if ( === 2) {
let attr0 = [0]; // Get the first attribute let attr1 = [1]; // Get the second attribute for (let i = 0; i < ; i++) { // Iterate through all values of the first property if ( === 0) { // If the second attribute has no value ({
spData: ([{ key: , value: [i] }])
});
continue; // Skip the current loop and continue processing the value of the next first property }
for (let j = 0; j < ; j++) { // Iterate through all values of the second property let spData = [];
({ key: , value: [i] }); // Add the value of the first attribute ({ key: , value: [j] }); // Add the value of the second attribute ({
spData: (spData)
});
}
}
}Execution process:
- There are two attributes "color" and "size", where "color" has ["red", "blue" and "size" has ["S", "M"].
- The code generates all combinations of the two properties. That is, iterate through each value of "color" and pair it with each value of "size".
result:
[
{"spData": "[{\"key\":\"color\",\"value\":\"red\"},{\"key\":\"size\",\"value\":\"S\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"red\"},{\"key\":\"size\",\"value\":\"M\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"blue\"},{\"key\":\"size\",\"value\":\"S\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"blue\"},{\"key\":\"size\",\"value\":\"M\"}]"}
]
3. When there are three attributes
else {
let attr0 = [0]; // Get the first attribute let attr1 = [1]; // Get the second attribute let attr2 = [2]; // Get the third attribute for (let i = 0; i < ; i++) { // Iterate through all values of the first property if ( === 0) { // If the second attribute has no value ({
spData: ([{ key: , value: [i] }])
});
continue; // Skip the current loop and continue processing the value of the next first property }
for (let j = 0; j < ; j++) { // Iterate through all values of the second property if ( === 0) { // If the third attribute has no value let spData = [];
({ key: , value: [i] }); // Add the value of the first attribute ({ key: , value: [j] }); // Add the value of the second attribute ({
spData: (spData)
});
continue; // Skip the current loop and continue processing the value of the next second property }
for (let k = 0; k < ; k++) { // Iterate through all values of the third property let spData = [];
({ key: , value: [i] }); // Add the value of the first attribute ({ key: , value: [j] }); // Add the value of the second attribute ({ key: , value: [k] }); // Add the value of the third attribute ({
spData: (spData)
});
}
}
}
}Execution process:
There are three attributes: "Color", "Size" and "Material", whose values are:
- "Color": ["Red", "Blue"]
- "Size": ["S", "M"]
- "Material": ["Cotton", "Wool"]
The code generates all combinations of the three properties. That is, iterate through each value of "color" and pair it with each value of "size" and "material".
result:
[
{"spData": "[{\"key\":\"color\",\"value\":\"red\"},{\"key\":\"size\",\"value\":\"S\"},{\"key\":\"Material\",\"value\":\"cotton\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"red\"},{\"key\":\"size\",\"value\":\"S\"},{\"key\":\"Material\",\"value\":\"wool\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"red\"},{\"key\":\"size\",\"value\":\"M\"},{\"key\":\"Material\",\"value\":\"cotton\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"red\"},{\"key\":\"size\",\"value\":\"M\"},{\"key\":\"Material\",\"value\":\"wool\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"blue\"},{\"key\":\"size\",\"value\":\"S\"},{\"key\":\"Material\",\"value\":\"cotton\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"blue\"},{\"key\":\"size\",\"value\":\"S\"},{\"key\":\"Material\",\"value\":\"wool\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"blue\"},{\"key\":\"size\",\"value\":\"M\"},{\"key\":\"Material\",\"value\":\"cotton\"}]"},
{"spData": "[{\"key\":\"color\",\"value\":\"blue\"},{\"key\":\"size\",\"value\":\"M\"},{\"key\":\"Material\",\"value\":\"wool\"}]"}
]
Summarize
- The code dynamically generates different number of SKU combinations based on the selected product attribute number.
- When the number of attributes is 1, a list of SKUs containing all values of the attribute is generated.
- When the number of attributes is 2, a combined SKU list containing all values of the two attributes is generated.
- When the number of attributes is 3, a list of all combined SKUs containing the three attributes is generated.
- Each SKU is a JSON string containing the attribute name and value, saved in skuStockList.
Through these steps, the code can flexibly handle different combinations of multi-attribute products, ultimately generating different SKU lists.
This is the end of this article about the method of implementing vue front-end sku. For more related vue sku content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!