Alrighty, kicking off day 4 of my side project with nothing but positive vibes 🙌🏼
Initial Thoughts
- This popup needs to be 3-step.
- First step, customer enters the secret sauce.
- Second step, we verify if it is indeed the secret sauce 🤓
- Third step, customer gets a discount and we get their secret sauce. Win win 🎉
- Need to look at some animation stuff. Because I am thinking of adding an animation when customer move to next step. Something like a Wizard or Multi-step form 🤔
- Not sure how would I achieve this in TailwindCSS.
Jumping into code... 👨🏽💻
Before that... Googling for multi-step form with TailwindCSS 😂
Alright, below link seems like a good starting point 👇🏼
https://tailwindcomponents.com/component/multistep-form-with-tailwindcss-and-alpinejs
Jumping into code... Again 👨🏽💻
Progress
- I was able to tweak the above snippet according to my requirements and achieve the multi-step concept just yet. Its not fully functional of course.
Putting the code for this below 👇🏼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Discount Popup</title>
</head>
<body>
<!-- component -->
<!-- This is an example component -->
<div class="h-screen">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div x-data="app()" x-cloak>
<div class="container bg-purple-600 py-6 px-5 rounded">
<div class="max-w-3xl mx-auto mb-10">
<div x-show.transition="step === 'complete'">
<div class="bg-white rounded-lg p-10 flex items-center shadow justify-between">
<div>
<svg class="mb-4 h-20 w-20 text-green-500 mx-auto" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
<h2 class="text-2xl mb-4 text-gray-800 text-center font-bold">DISCOUNT</h2>
<div class="text-gray-600 mb-8">
Thank you. Enjoy your discount at the checkout.
</div>
<button
@click="step = 1"
class="w-40 block mx-auto focus:outline-none py-2 px-5 rounded-lg shadow-sm text-center text-gray-600 bg-white hover:bg-gray-100 font-medium border"
>Back to home</button>
</div>
</div>
</div>
<div x-show.transition="step != 'complete'">
<div class="text-white py-5 px-5">
<h1>Hi 👋</h1>
<p>Up for a Discount?</p>
</div>
<!-- Step Content -->
<div class="bg-white py-5 px-5 rounded">
<div x-show.transition.in="step === 1">
<div class="mb-5">
<label for="firstname" class="font-bold mb-1 text-gray-700 block">Secret Sauce Part 1</label>
<input type="text"
class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2"
placeholder="Enter your secret sauce... ">
</div>
<div class="mb-5">
<label for="email" class="font-bold mb-1 text-gray-700 block">Secret Sauce Part 2</label>
<input type="text"
class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2"
placeholder="Enter your secret sauce...">
</div>
<div class="w-1/2">
<button
@click="step++"
class="w-32 focus:outline-none border border-transparent py-2 px-5 rounded-lg shadow-sm text-center text-white bg-blue-500 hover:bg-blue-600 font-medium"
>Next</button>
</div>
</div>
<div x-show.transition.in="step === 2">
<div class="mb-5">
<label for="profession" class="font-bold mb-1 text-gray-700 block">Verification</label>
<input type="text"
class="w-full px-4 py-3 rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium border-2"
placeholder="Just making sure it belongs to you">
</div>
<div class="flex justify-between">
<div class="w-1/2">
<button
@click="step--"
class="w-32 focus:outline-none py-2 px-5 rounded-lg shadow-sm text-center text-gray-600 bg-white hover:bg-gray-100 font-medium border"
>Go Back</button>
</div>
<div class="w-1/2 ">
<button
@click="step = 'complete'"
class="w-32 focus:outline-none border border-transparent py-2 px-5 rounded-lg shadow-sm text-center text-white bg-blue-500 hover:bg-blue-600 font-medium"
>Verify</button>
</div>
</div>
</div>
</div>
<!-- / Step Content -->
</div>
</div>
</div>
</div>
<script>
function app() {
return {
step: 1,
}
}
</script>
</body>
</html>
Time Spent
1 and half hour
Signing off 😴
P.S.
If anybody ( other than me 😂 ) reading it, you might be interested in following me on Twitter. I tweet about Laravel, Shopify and React stuff.
Top comments (3)
I have a question that how you are embedding the popup from an external source. Are you using script tags for the popup or you embedding CSS in the Shopify theme?
ScriptTag
Love this series, are you continuing with more posts? I'd love to know how billing works with the Shopify store