Shopify 앱 구축 - Day4

14098 단어 laravel sideprojects webdev shopify

자, 긍정적인 기운으로 사이드 프로젝트 4일차를 시작합니다 🙌🏼

초기 생각

이 팝업은 3단계여야 합니다.

첫 번째 단계, 고객이 비법 소스에 들어갑니다.

2단계, 과연 비법 소스인지 확인합니다🤓

세 번째 단계, 고객은 할인을 받고 저희는 고객의 비밀 소스를 받습니다. 윈윈 🎉

일부 애니메이션을 살펴봐야 합니다. 고객이 다음 단계로 이동할 때 애니메이션을 추가할 생각이기 때문입니다. 마법사 또는 다단계 양식과 같은 것 🤔

TailwindCSS에서 이 작업을 수행하는 방법을 잘 모르겠습니다.

코드 시작... 👨🏽‍💻

그 전에... TailwindCSS로 다단계 양식 검색 😂

좋아요, 아래 링크가 좋은 출발점인 것 같습니다 👇🏼
https://tailwindcomponents.com/component/multistep-form-with-tailwindcss-and-alpinejs

코드 시작... 다시 👨🏽‍💻

진전

내 요구 사항에 따라 위의 스니펫을 조정할 수 있었고 아직 다단계 개념을 달성할 수 있었습니다. 물론 완전히 작동하지는 않습니다.

아래에 이에 대한 코드를 입력하세요 👇🏼

<!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/[email protected]/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>

보낸 시간

1시간 30분

로그아웃 😴

추신

(나 말고 😂 ) 누군가가 그것을 읽는다면, 당신은 관심이 있을 것입니다. 나는 Laravel, Shopify 및 React에 대해 트윗합니다.

Reference

이 문제에 관하여(Shopify 앱 구축 - Day4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zubairmohsin33/building-a-shopify-app-day4-4oon

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Async 동기화 기원 구축, Part 2 AsyncAutoResetEvent

NullPointer Exception 오류로 하루가 걸렸어요. 오늘도 반나절이 걸렸어요.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다