product-variations/index.html at main · red1code/product-variations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="description"
			content="Generate every possible combination of variation for Woocommerce variable products">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon" />
		<link rel="stylesheet" href="styles.css" />
		<script type="module" src="main.js"></script>
		<title>Woocommerce Products Variations Generator</title>
	</head>

	<body>
		<header>
			<div>
				<h1>Woocommerce Products Variations Generator</h1>
			</div>
		</header>

		<main>
			<div class="intro">
				<h2 class="app-overview">App overview</h2>
				Upload a CSV file containing
				<a href="https://woocommerce.com/" target="_blank" class="woo-link">Woocommerce</a>
				variables products, and the app will generate every possible compbinations of variations
				from the attributes values, and put them in a final CSV file, and then you can download it.
				<br /><br />
				The input CSV file must be in a specific structure. Download
				<button class="sample-btn" title="Download">
					<a href="./assets/variables-input-sample.csv">CSV Sample</a>
				</button>
				(it contains 2 products as variables examples)
			</div>

			<form id="form">
				<div class="upload-container">
					<label for="csv-input">Upload a CSV file: </label> <br /><br />
					<input type="file" id="csv-file-input" accept=".csv" name="csv-input"
						placeholder="Upload a CSV file" required />
				</div>
				<div class="btns">
					<button type="submit" id="downloadBtn">Download Variations</button>
					<button type="button" class="reset" onClick="window.location.reload()">Reset</button>
				</div>
			</form>
		</main>

		<div id="alert">
			<button id="closeAlert">Close</button>
			<div id="alertContent"></div>
		</div>

		<footer>
			<div class="footer-text">
				©
				<strong>
					<a rel="noopener" id="red1devLink" target="_blank" title="Redouane Bekkouche's website"
						href="https://red1code.github.io/red1dev/">
						red1dev
					</a>
				</strong>
				<span id="currentYear"></span> <b>|</b> Source code on
				<a href="https://github.com/red1code/product-variations" rel="noopener" target="_blank"
					id="githubRepoLink" title="Github repository of the app">
					<img src="./assets/github.svg" alt="Github icon">
				</a>
			</div>
		</footer>

		<script>
			document.getElementById('currentYear').textContent = new Date().getFullYear();
		</script>
	</body>
</html>