Building a Shopify App - Day4
Tags: webdev, sideprojects, laravel, shopify
Published: 2020-11-17 17:00:56

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](https://tailiwindcomponents.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.
![Multi-Step form with TailwindCSS and AlpineJS](https://dev-to-uploads.s3.amazonaws.com/i/93t8hgu2vcatl9c2itwy.gif)

Putting the code for this below 👇🏼
```html
<!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](https://twitter.com/Zubairmohsin33). I tweet about Laravel, Shopify and React stuff.