statamic-cargo/resources/views/checkout/layout.antlers.html at 9a30a4a1c720c9545f12b26dedecdf32e4b7f3cd · duncanmcclean/statamic-cargo · GitHub

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
{{#
    🛒 This is the layout for your store's Checkout page. To see it in action, add something to your cart and visit /checkout.

    It's built with Tailwind CSS and Alpine.js, to keep things simple, fast and interactive.
    Alpine.js handles submitting any forms, updating the cart on the fly, loading shipping methods, amoungst other things.

    You can customize as much, or as little of the Checkout experience as you like. You could even delete the stubs
    we've provided and build everything yourself. The choice is yours.
#}}

<!doctype html>
<html lang="{{ site:short_locale }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title }} - {{ site:name }}</title>
    {{ stack:header_scripts }}
    {{ vite directory="checkout-build" hot="public/checkout-build/hot" src="resources/css/checkout.css" }}
    <style>[x-cloak] { display: none !important; }</style>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="font-sans antialiased">
    <div class="relative md:min-h-screen">
        <div class="hidden md:block fixed top-0 left-0 w-1/2 bg-[#F8FAFC] h-screen"></div>
        <div class="hidden md:block fixed top-0 right-0 w-1/2 bg-white h-screen"></div>

        {{ partial:checkout/components/banner }}

        <div id="Checkout" class="relative flex flex-col-reverse md:flex-row md:min-h-screen max-w-6xl mx-auto">
            <main class="md:w-3/5 bg-[#F8FAFC] min-h-screen">
                <div class="flex flex-col">
                    {{ partial:checkout/header }}

                    <div x-data="{ show: false }" class="md:hidden bg-white border-y border-gray-200">
                        <div class="flex items-center justify-between px-8 py-4">
                            <button class="text-secondary font-medium text-sm flex items-center w-full" @click="show = !show">
                                Order summary
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 ml-1" :class="{ 'rotate-180': show }">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                </svg>
                            </button>

                            {{ yield:summary_total }}
                                <template x-if="typeof cart !== 'undefined' && cart !== null">
                                    <span class="font-bold" x-text="cart.grand_total"></span>
                                </template>
                            {{ /yield:summary_total }}
                        </div>

                        <div x-cloak x-show="show">
                            {{ yield:sidebar }}
                        </div>
                    </div>

                    <div class="p-8">
                        {{ template_content }}
                    </div>
                </div>
            </main>

            <aside class="hidden md:block md:w-2/5 min-h-full border-l border-gray-200 bg-white">
                <div class="bg-white w-full h-full">
                    {{ yield:sidebar }}
                </div>
            </aside>
        </div>
    </div>

    {{ stack:footer_scripts }}
</body>
</html>