siumhossain · October 6, 2024 17:38
diff --git a/test.html b/test.html
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

 </head>
 <body>
    <div x-data="variantApp()" class="p-4">
        <h2>Create Product Variant</h2>

        <div class="attributes">
            <template x-for="(attribute, index) in attributes" :key="index">
                <div class="attribute-group">
                    <label>Attribute Name</label>
                    <input type="text" x-model="attribute.name" placeholder="e.g., Color, Size" />

                    <label>Attribute Values</label>
                    <input type="text" x-model="attribute.newValue" placeholder="Add value and press Enter" @keydown.enter.prevent="addAttributeValue(index)" />

                    <div class="attribute-values">
                        <template x-for="(value, idx) in attribute.values" :key="idx">
                            <span class="tag">
                                <span x-text="value"></span>
                                <button type="button" @click="removeAttributeValue(index, idx)">x</button>
                            </span>
                        </template>
                    </div>

                    <button type="button" @click="removeAttributeGroup(index)" class="remove-group">Remove</button>
                </div>
            </template>

            <button type="button" @click="addAttributeGroup()" class="add-group">Add Attribute Group</button>
        </div>

        <div class="sku-section">
            <label>Generated SKUs:</label>
            <div class="sku-list">
                <template x-for="(skuObj, index) in generatedSKUs" :key="index">
                    <div class="sku-item">
                        <span x-text="skuObj.sku"></span>

                        <div class="form-group">
                            <label>Quantity:</label>
                            <input type="number" x-model="skuObj.quantity" placeholder="Enter quantity" />
                        </div>

                        <div class="form-group">
                            <label>Price:</label>
                            <input type="number" x-model="skuObj.price" placeholder="Enter price" />
                        </div>

                        <button type="button" @click="removeSKU(index)">x</button>
                    </div>
                </template>
            </div>
        </div>

        <button type="button" @click="saveVariant()" class="save-button">Save Variant</button>
    </div>

 </body>

 <script>
    function variantApp() {
        return {
            attributes: [],
            generatedSKUs: [],

            addAttributeGroup() {
                this.attributes.push({ name: '', values: [], newValue: '' });
            },

            removeAttributeGroup(index) {
                this.attributes.splice(index, 1);
                this.updateSKUs();
            },

            addAttributeValue(index) {
                if (this.attributes[index].newValue) {
                    this.attributes[index].values.push(this.attributes[index].newValue);
                    this.attributes[index].newValue = '';
                    this.updateSKUs();
                }
            },

            removeAttributeValue(attrIndex, valueIndex) {
                this.attributes[attrIndex].values.splice(valueIndex, 1);
                this.updateSKUs();
            },

            updateSKUs() {
                let values = this.attributes.map(attr => attr.values);
                let skuCombinations = this.generateCombinations(values);
                
                this.generatedSKUs = skuCombinations.map(sku => ({
                    sku: sku,
                    quantity: '',
                    price: ''
                }));
            },

            generateCombinations(arrays) {
                if (arrays.length === 0) return [];
                if (arrays.length === 1) return arrays[0];

                let combinations = arrays.reduce((acc, array) => {
                    let temp = [];
                    acc.forEach(comb => {
                        array.forEach(item => {
                            temp.push(`${comb}-${item}`);
                        });
                    });
                    return temp;
                }, arrays.shift());
                
                return combinations;
            },

            removeSKU(index) {
                this.generatedSKUs.splice(index, 1);
            },

            saveVariant() {
                alert('Variant saved!');
                console.log('Attributes:', this.attributes);
                console.log('Generated SKUs:', this.generatedSKUs);
            }
        };
    }
 </script>

 <style>
    .attributes {
        margin-bottom: 20px;
    }
    .attribute-group {
        margin-bottom: 15px;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
    }
    .attribute-values .tag {
        display: inline-block;
        background-color: #f0f0f0;
        padding: 5px 10px;
        margin-right: 5px;
        border-radius: 3px;
    }
    .remove-group {
        background-color: #f44336;
        color: white;
        padding: 5px;
        border: none;
        border-radius: 3px;
    }
    .add-group {
        background-color: #007bff;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 3px;
    }
    .sku-section {
        margin-bottom: 20px;
    }
    .sku-list {
        display: flex;
        flex-wrap: wrap;
    }
    .sku-item {
        background-color: #f0f0f0;
        padding: 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: 3px;
        width: 200px;
    }
    .form-group {
        margin-bottom: 10px;
    }
    .save-button {
        background-color: #28a745;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 3px;
    }
 </style>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

	</head>
	<body>
	<div x-data="variantApp()" class="p-4">
	<h2>Create Product Variant</h2>

	<div class="attributes">
	<template x-for="(attribute, index) in attributes" :key="index">
	<div class="attribute-group">
	<label>Attribute Name</label>
	<input type="text" x-model="attribute.name" placeholder="e.g., Color, Size" />

	<label>Attribute Values</label>
	<input type="text" x-model="attribute.newValue" placeholder="Add value and press Enter" @keydown.enter.prevent="addAttributeValue(index)" />

	<div class="attribute-values">
	<template x-for="(value, idx) in attribute.values" :key="idx">
	<span class="tag">
	<span x-text="value"></span>
	<button type="button" @click="removeAttributeValue(index, idx)">x</button>
	</span>
	</template>
	</div>

	<button type="button" @click="removeAttributeGroup(index)" class="remove-group">Remove</button>
	</div>
	</template>

	<button type="button" @click="addAttributeGroup()" class="add-group">Add Attribute Group</button>
	</div>

	<div class="sku-section">
	<label>Generated SKUs:</label>
	<div class="sku-list">
	<template x-for="(skuObj, index) in generatedSKUs" :key="index">
	<div class="sku-item">
	<span x-text="skuObj.sku"></span>

	<div class="form-group">
	<label>Quantity:</label>
	<input type="number" x-model="skuObj.quantity" placeholder="Enter quantity" />
	</div>

	<div class="form-group">
	<label>Price:</label>
	<input type="number" x-model="skuObj.price" placeholder="Enter price" />
	</div>

	<button type="button" @click="removeSKU(index)">x</button>
	</div>
	</template>
	</div>
	</div>

	<button type="button" @click="saveVariant()" class="save-button">Save Variant</button>
	</div>

	</body>

	<script>
	function variantApp() {
	return {
	attributes: [],
	generatedSKUs: [],

	addAttributeGroup() {
	this.attributes.push({ name: '', values: [], newValue: '' });
	},

	removeAttributeGroup(index) {
	this.attributes.splice(index, 1);
	this.updateSKUs();
	},

	addAttributeValue(index) {
	if (this.attributes[index].newValue) {
	this.attributes[index].values.push(this.attributes[index].newValue);
	this.attributes[index].newValue = '';
	this.updateSKUs();
	}
	},

	removeAttributeValue(attrIndex, valueIndex) {
	this.attributes[attrIndex].values.splice(valueIndex, 1);
	this.updateSKUs();
	},

	updateSKUs() {
	let values = this.attributes.map(attr => attr.values);
	let skuCombinations = this.generateCombinations(values);

	this.generatedSKUs = skuCombinations.map(sku => ({
	sku: sku,
	quantity: '',
	price: ''
	}));
	},

	generateCombinations(arrays) {
	if (arrays.length === 0) return [];
	if (arrays.length === 1) return arrays[0];

	let combinations = arrays.reduce((acc, array) => {
	let temp = [];
	acc.forEach(comb => {
	array.forEach(item => {
	temp.push(`${comb}-${item}`);
	});
	});
	return temp;
	}, arrays.shift());

	return combinations;
	},

	removeSKU(index) {
	this.generatedSKUs.splice(index, 1);
	},

	saveVariant() {
	alert('Variant saved!');
	console.log('Attributes:', this.attributes);
	console.log('Generated SKUs:', this.generatedSKUs);
	}
	};
	}
	</script>

	<style>
	.attributes {
	margin-bottom: 20px;
	}
	.attribute-group {
	margin-bottom: 15px;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
	}
	.attribute-values .tag {
	display: inline-block;
	background-color: #f0f0f0;
	padding: 5px 10px;
	margin-right: 5px;
	border-radius: 3px;
	}
	.remove-group {
	background-color: #f44336;
	color: white;
	padding: 5px;
	border: none;
	border-radius: 3px;
	}
	.add-group {
	background-color: #007bff;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 3px;
	}
	.sku-section {
	margin-bottom: 20px;
	}
	.sku-list {
	display: flex;
	flex-wrap: wrap;
	}
	.sku-item {
	background-color: #f0f0f0;
	padding: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 3px;
	width: 200px;
	}
	.form-group {
	margin-bottom: 10px;
	}
	.save-button {
	background-color: #28a745;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 3px;
	}
	</style>