forked from verbb/craft-commerce-back-in-stock
-
Notifications
You must be signed in to change notification settings - Fork 0
/
form-example.twig
39 lines (33 loc) · 2.02 KB
/
form-example.twig
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
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Back In Stock Form Example</title>
</head>
<body class="bg-gray-200 h-full">
<div class="h-full rounded-t-lg overflow-hidden border-t border-l border-r border-gray-400 p-4 px-3 py-10 flex justify-center items-center">
<div class="w-full max-w-sm">
<div class="mb-4 flex flex-wrap items-center justify-center">
<h2 class="flex-1 font-bold text-xl text-gray-700">Product Name</h2>
<span class="flex-none bg-red-200 rounded-full px-3 py-1 text-xs font-semibold text-red-700">OUT OF STOCK</span>
</div>
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{{ csrfInput() }}
{# Action #}
<input type="hidden" name="action" value="craft-commerce-back-in-stock/base/register-interest">
{# Variant ID #}
<input type="hidden" name="variantId" value="{# product.defaultVariant.id #}">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label>
{# Users email #}
<input name="email" id="email" type="email" placeholder="Enter your email address" class="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm">
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Notify Me</button>
</form>
<p class="text-center text-gray-500 text-xs">Your email address wont be shared or used for anything other than being notified of this item being re-stocked.</p>
</div>
</div>
</body>
</html>