DEV Community

Zubair Mohsin
Zubair Mohsin

Posted on

Building a Shopify App - Day4

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. Multi-Step form with TailwindCSS and AlpineJS

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
wajahatanwar profile image
Wajahat Anwar

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?

Collapse
 
zubairmohsin33 profile image
Zubair Mohsin

ScriptTag

Collapse
 
jamesking56 profile image
James King

Love this series, are you continuing with more posts? I'd love to know how billing works with the Shopify store