mirror of
https://github.com/KevinMidboe/planetposen-frontend.git
synced 2025-10-28 21:00:12 +00:00
Feat: Checkout page redesign (#6)
* Increased padding on input elements * Increased max layout width from 1500 to 1800 * Address input should take 2 column of space * Updated order section with new design * Checkout gets a new layout with sidebar * Express checkout section * Increase font size at larger screen width * Environment example file * Resolved linting issues
This commit is contained in:
GitHub
1
.env.example
Normal file
1
.env.example
Normal file
@@ -0,0 +1 @@
|
||||
STRIPE_API_KEY=
|
||||
@@ -47,8 +47,8 @@
|
||||
input {
|
||||
border: 2px solid grey;
|
||||
border-radius: 0px;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
padding: 0.7em;
|
||||
font-size: 1em;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
@import '../../styles/media-queries.scss';
|
||||
|
||||
.card {
|
||||
// padding: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid black;
|
||||
|
||||
@include desktop {
|
||||
|
||||
5
src/lib/icons/ApplePay.svelte
Normal file
5
src/lib/icons/ApplePay.svelte
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg id="shopify-svg__payments-apple-pay-light" viewBox="0 0 43 19" width="45px" height="20px"
|
||||
><path
|
||||
d="M6.948 1.409C7.934.147 9.305.147 9.305.147s.193 1.18-.771 2.316c-1.05 1.2-2.228.993-2.228.993s-.236-.93.642-2.047zM3.82 3.663c-1.735 0-3.6 1.51-3.6 4.363 0 2.916 2.186 6.555 3.943 6.555.6 0 1.543-.6 2.485-.6.922 0 1.607.559 2.464.559 1.907 0 3.322-3.826 3.322-3.826s-2.015-.744-2.015-2.936c0-1.944 1.629-2.73 1.629-2.73s-.836-1.447-2.936-1.447c-1.22 0-2.164.661-2.656.661-.622.021-1.5-.6-2.636-.6zM19.64 1.426c2.453 0 4.188 1.788 4.188 4.396 0 2.608-1.755 4.417-4.248 4.417h-2.932v4.564h-1.974V1.426h4.966zm-2.992 7.067h2.473c1.695 0 2.693-.967 2.693-2.65 0-1.683-.978-2.671-2.693-2.671h-2.473v5.321zm7.559 3.429c0-1.767 1.296-2.777 3.65-2.945l2.572-.147v-.78c0-1.156-.738-1.787-1.994-1.787-1.037 0-1.795.568-1.955 1.43h-1.775c.06-1.788 1.656-3.092 3.79-3.092 2.333 0 3.829 1.304 3.829 3.281v6.9h-1.815v-1.684h-.04c-.519 1.094-1.715 1.788-3.012 1.788-1.934.021-3.25-1.178-3.25-2.965zm6.222-.905v-.778l-2.313.168c-1.297.084-1.975.59-1.975 1.494 0 .862.718 1.409 1.815 1.409 1.396-.021 2.473-.968 2.473-2.293zm3.969 7.383v-1.64c.14.041.438.041.598.041.897 0 1.416-.4 1.735-1.472l.14-.526L33.4 4.707h2.054l2.453 8.224h.04L40.4 4.707h1.994l-3.57 10.538c-.818 2.419-1.715 3.197-3.67 3.197-.14.02-.598-.021-.757-.042z"
|
||||
style="fill: rgb(255, 255, 255);"></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
13
src/lib/icons/GooglePay.svelte
Normal file
13
src/lib/icons/GooglePay.svelte
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg id="shopify-svg__payments-google-pay-light" viewBox="0 0 41 17" width="45px" height="20px"
|
||||
><path
|
||||
d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zM27.194 10.442c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568M40.993 4.889l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z"
|
||||
style="fill: rgb(255, 255, 255);"></path><path
|
||||
d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944"
|
||||
style="fill: rgb(66, 133, 244);"></path><path
|
||||
d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703"
|
||||
style="fill: rgb(52, 168, 83);"></path><path
|
||||
d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z"
|
||||
style="fill: rgb(251, 188, 5);"></path><path
|
||||
d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774"
|
||||
style="fill: rgb(234, 67, 53);"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
32
src/lib/icons/PayPal.svelte
Normal file
32
src/lib/icons/PayPal.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:v="https://vecta.io/nano"
|
||||
width="80px"
|
||||
height="22px"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<g transform="translate(820, -21.779)">
|
||||
<path
|
||||
clip-path="none"
|
||||
d="M-828.604 39.734c-.697 0-1.289.506-1.398 1.195l-8.068 51.165a1.31 1.31 0 0 0 1.294 1.513h9.568c.696 0 1.289-.507 1.398-1.195l2.37-15.025c.108-.688.701-1.195 1.398-1.195h8.699c10.164 0 18.792-7.416 20.368-17.465 1.589-10.134-6.328-18.971-17.549-18.993zm9.301 11.422h6.96c5.73 0 7.596 3.381 7.006 7.12-.59 3.747-3.488 6.507-9.031 6.507h-7.084zm45.788 3.478c-2.416.009-5.196.504-8.317 1.804-7.159 2.984-10.597 9.151-12.057 13.647 0 0-4.647 13.717 5.852 21.253 0 0 9.737 7.255 20.698-.447l-.189 1.203a1.31 1.31 0 0 0 1.292 1.513h9.083c.697 0 1.289-.507 1.398-1.195l5.525-35.038a1.31 1.31 0 0 0-1.292-1.515h-9.083c-.697 0-1.29.507-1.398 1.195l-.297 1.886s-3.967-4.333-11.216-4.306zm.297 11.067c1.043 0 1.997.144 2.853.419 3.919 1.258 6.141 5.023 5.498 9.104-.793 5.025-4.914 8.725-10.199 8.725-1.042 0-1.996-.143-2.853-.418-3.918-1.258-6.154-5.023-5.511-9.104.793-5.025 4.927-8.727 10.212-8.727z"
|
||||
fill="#003087"></path><path
|
||||
clip-path="none"
|
||||
d="M-697.804 39.734c-.697 0-1.289.506-1.398 1.195l-8.068 51.165a1.31 1.31 0 0 0 1.294 1.513h9.568c.696 0 1.289-.507 1.398-1.195l2.37-15.025c.108-.688.701-1.195 1.398-1.195h8.699c10.164 0 18.791-7.416 20.366-17.465 1.59-10.134-6.326-18.971-17.547-18.993zm9.301 11.422h6.96c5.73 0 7.596 3.381 7.006 7.12-.59 3.747-3.487 6.507-9.031 6.507h-7.084zm45.787 3.478c-2.416.009-5.196.504-8.317 1.804-7.159 2.984-10.597 9.151-12.057 13.647 0 0-4.645 13.717 5.854 21.253 0 0 9.735 7.255 20.697-.447l-.189 1.203a1.31 1.31 0 0 0 1.294 1.513h9.082c.697 0 1.289-.507 1.398-1.195l5.527-35.038a1.31 1.31 0 0 0-1.294-1.515h-9.083c-.697 0-1.29.507-1.398 1.195l-.297 1.886s-3.967-4.333-11.216-4.306zm.297 11.067c1.043 0 1.997.144 2.853.419 3.919 1.258 6.141 5.023 5.498 9.104-.793 5.025-4.914 8.725-10.199 8.725-1.042 0-1.996-.143-2.853-.418-3.918-1.258-6.154-5.023-5.511-9.104.793-5.025 4.927-8.727 10.212-8.727z"
|
||||
fill="#0070e0"></path><path
|
||||
clip-path="none"
|
||||
d="M-745.92 55.859c-.72 0-1.232.703-1.012 1.388l9.958 30.901-9.004 14.562c-.437.707.071 1.62.902 1.62h10.642a1.77 1.77 0 0 0 1.513-.854l27.811-46.007c.427-.707-.083-1.611-.909-1.611h-10.641a1.77 1.77 0 0 0-1.522.869l-10.947 18.482-5.557-18.345c-.181-.597-.732-1.006-1.355-1.006z"
|
||||
fill="#003087"></path><path
|
||||
clip-path="none"
|
||||
d="M-609.107 39.734c-.696 0-1.289.507-1.398 1.195l-8.07 51.163a1.31 1.31 0 0 0 1.294 1.515h9.568c.696 0 1.289-.507 1.398-1.195l8.068-51.165a1.31 1.31 0 0 0-1.292-1.513z"
|
||||
fill="#0070e0"></path><path
|
||||
clip-path="none"
|
||||
d="M-908.37 39.734a2.59 2.59 0 0 0-2.556 2.185l-4.247 26.936c.198-1.258 1.282-2.185 2.556-2.185h12.445c12.525 0 23.153-9.137 25.095-21.519a20.76 20.76 0 0 0 .245-2.793c-3.183-1.669-6.922-2.624-11.019-2.624z"
|
||||
fill="#001c64"></path><path
|
||||
clip-path="none"
|
||||
d="M-874.832 42.359a20.76 20.76 0 0 1-.245 2.793c-1.942 12.382-12.571 21.519-25.095 21.519h-12.445c-1.273 0-2.358.926-2.556 2.185l-3.905 24.752-2.446 15.528a2.1 2.1 0 0 0 2.075 2.43h13.508a2.59 2.59 0 0 0 2.556-2.185l3.558-22.567a2.59 2.59 0 0 1 2.558-2.185h7.953c12.525 0 23.153-9.137 25.095-21.519 1.379-8.788-3.047-16.784-10.611-20.75z"
|
||||
fill="#0070e0"></path><path
|
||||
clip-path="none"
|
||||
d="M-923.716 21.779c-1.273 0-2.358.926-2.556 2.183l-10.6 67.216c-.201 1.276.785 2.43 2.077 2.43h15.719l3.903-24.752 4.247-26.936a2.59 2.59 0 0 1 2.556-2.185h22.519c4.098 0 7.836.956 11.019 2.624.218-11.273-9.084-20.58-21.873-20.58z"
|
||||
fill="#003087"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
25
src/lib/icons/ShopPay.svelte
Normal file
25
src/lib/icons/ShopPay.svelte
Normal file
@@ -0,0 +1,25 @@
|
||||
<svg id="shopify-svg__payments-shop-pay" viewBox="134 256 410 1" width="82px" height="24px"
|
||||
><path
|
||||
d="M241.22,242.74c-3.07-6.44-8.89-10.6-17.66-10.6a17.58,17.58,0,0,0-13.81,7.1l-.32.39V214.39a.55.55,0,0,0-.55-.55h-12.4a.55.55,0,0,0-.54.55v72.4a.54.54,0,0,0,.54.54h13.28a.55.55,0,0,0,.55-.54V255.92c0-6,4-10.25,10.4-10.25,7,0,8.77,5.76,8.77,11.63v29.49a.54.54,0,0,0,.54.54h13.25a.55.55,0,0,0,.55-.54V255.54c0-1.07,0-2.12-.14-3.14A27.63,27.63,0,0,0,241.22,242.74Z"
|
||||
style="fill: white;"></path><path
|
||||
d="M174.91,253.47s-6.76-1.59-9.25-2.23-6.84-2-6.84-5.29,3.51-4.34,7.07-4.34,7.52.86,7.83,4.81a.57.57,0,0,0,.57.52l13.09-.05a.56.56,0,0,0,.56-.6c-.81-12.64-11.9-17.16-22.13-17.16-12.13,0-21,8-21,16.82,0,6.44,1.82,12.48,16.13,16.68,2.51.73,5.92,1.68,8.9,2.51,3.58,1,5.51,2.51,5.51,4.89,0,2.76-4,4.68-7.93,4.68-5.69,0-9.73-2.11-10.06-5.9a.57.57,0,0,0-.57-.5l-13.06.06a.57.57,0,0,0-.57.59c.6,11.93,12.12,18.36,22.86,18.36,16,0,23.23-9,23.23-17.43C189.27,265.93,188.36,256.91,174.91,253.47Z"
|
||||
style="fill: white;"></path><path
|
||||
d="M343.31,232.12c-6.65,0-12.22,3.68-15.81,8.12v-7.6a.54.54,0,0,0-.53-.54H314.55a.54.54,0,0,0-.54.54v71a.54.54,0,0,0,.54.53h13.29a.53.53,0,0,0,.53-.53V280.3h.2c2.11,3.22,7.88,7.08,15.42,7.08,14.18,0,26-11.76,26-27.65C370,244.48,358.24,232.12,343.31,232.12Zm-1.23,41.73a14.09,14.09,0,1,1,13.74-14.12A13.9,13.9,0,0,1,342.08,273.85Z"
|
||||
style="fill: white;"></path><path
|
||||
d="M274.68,229c-12.39,0-18.57,4.21-23.53,7.58l-.15.1a1.23,1.23,0,0,0-.37,1.63l4.9,8.44a1.24,1.24,0,0,0,.87.6,1.21,1.21,0,0,0,1-.27l.39-.32c2.55-2.14,6.64-5,16.54-5.78,5.51-.44,10.27,1,13.78,4.28,3.86,3.56,6.17,9.31,6.17,15.38,0,11.17-6.58,18.19-17.15,18.33-8.71-.05-14.56-4.59-14.56-11.3,0-3.56,1.61-5.88,4.75-8.2a1.22,1.22,0,0,0,.37-1.56l-4.4-8.32a1.29,1.29,0,0,0-.77-.62,1.24,1.24,0,0,0-1,.13c-4.94,2.93-11,8.29-10.67,18.59.4,13.11,11.3,23.12,25.47,23.53l.71,0H278c16.84-.55,29-13.05,29-30C307,245.66,295.66,229,274.68,229Z"
|
||||
style="fill: white;"></path><path
|
||||
d="M342.08,245.68a14.09,14.09,0,1,0,13.74,14.05A13.84,13.84,0,0,0,342.08,245.68Z"
|
||||
style="fill: rgb(90, 49, 244);"></path><rect
|
||||
x="383.23"
|
||||
y="214.02"
|
||||
width="141.73"
|
||||
height="90.42"
|
||||
rx="14.17"
|
||||
style="fill: white;"></rect><path
|
||||
d="M439.07,246.62c0,9.67-6.77,16.57-16.23,16.57h-8.92a.75.75,0,0,0-.75.75v12.7a.75.75,0,0,1-.75.75h-6.28a.76.76,0,0,1-.75-.75V230.81a.75.75,0,0,1,.75-.75h16.7C432.3,230.06,439.07,237,439.07,246.62Zm-7.78,0c0-5.54-3.79-9.6-8.93-9.6h-8.44a.76.76,0,0,0-.75.75v17.71a.75.75,0,0,0,.75.74h8.44C427.5,256.22,431.29,252.17,431.29,246.62Z"
|
||||
style="fill: rgb(90, 49, 244);"></path><path
|
||||
d="M440.92,268.6a8.91,8.91,0,0,1,3.72-7.64c2.44-1.83,6.22-2.78,11.83-3l5.95-.2V256c0-3.51-2.36-5-6.15-5s-6.18,1.34-6.74,3.53a.72.72,0,0,1-.72.52h-5.87a.74.74,0,0,1-.75-.85c.88-5.2,5.18-9.15,14.35-9.15,9.74,0,13.25,4.53,13.25,13.18v18.38a.75.75,0,0,1-.75.76h-5.93a.75.75,0,0,1-.75-.76v-1.37a.56.56,0,0,0-1-.39c-1.77,1.93-4.65,3.33-9.24,3.33C445.39,278.2,440.92,274.68,440.92,268.6Zm21.5-4v-1.42l-7.7.4c-4.06.21-6.43,1.9-6.43,4.74,0,2.57,2.17,4,5.95,4C459.38,272.32,462.42,269.54,462.42,264.61Z"
|
||||
style="fill: rgb(90, 49, 244);"></path><path
|
||||
d="M475.75,291.27v-5.35a.76.76,0,0,1,.9-.75,14.84,14.84,0,0,0,2.75.26,7.11,7.11,0,0,0,7.17-5.07l.39-1.23a.74.74,0,0,0,0-.51l-12.34-31.7a.76.76,0,0,1,.71-1h6a.77.77,0,0,1,.71.49l8.38,22.36a.77.77,0,0,0,1.44,0l7.27-22.3a.75.75,0,0,1,.72-.52H506a.76.76,0,0,1,.71,1l-13.2,35.21c-3,8.18-8.25,10.28-14,10.28a11.17,11.17,0,0,1-3.21-.39A.77.77,0,0,1,475.75,291.27Z"
|
||||
style="fill: rgb(90, 49, 244);"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
44
src/lib/icons/Vipps.svelte
Normal file
44
src/lib/icons/Vipps.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
height="50px"
|
||||
width="80px"
|
||||
viewBox="0 0 163.5 66.1"
|
||||
style="enable-background:new 0 0 163.5 66.1;"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: #ff5b24;
|
||||
fill: white;
|
||||
}
|
||||
.st1 {
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
<path class="st0" d="M28,22l5.1,14.9l5-14.9H44l-8.8,22.1h-4.4L22,22H28z"></path>
|
||||
<path class="st1" d="M141.4,38.1l14.9-5.1l-14.9-5v-6l22.1,8.8v4.4L141.4,44V38.1z"></path>
|
||||
<path class="st1" d="M28,44l5.1,14.9l5-14.9H44l-8.8,22.1h-4.4L22,44H28z"></path>
|
||||
<path class="st1" d="M38.1,22.1L33,7.2l-5,14.9h-6L30.9,0h4.4l8.8,22.1H38.1z"></path>
|
||||
<path class="st1" d="M22.1,28L7.2,33.1l14.9,5.1v5.9L0,35.3v-4.4L22.1,22V28z"></path>
|
||||
<path
|
||||
class="st0"
|
||||
d="M57.3,40.6c3.7,0,5.8-1.8,7.8-4.4c1.1-1.4,2.5-1.7,3.5-0.9s1.1,2.3,0,3.7c-2.9,3.8-6.6,6.1-11.3,6.1 c-5.1,0-9.6-2.8-12.7-7.7c-0.9-1.3-0.7-2.7,0.3-3.4s2.5-0.4,3.4,1C50.5,38.3,53.5,40.6,57.3,40.6z M64.2,28.3c0,1.8-1.4,3-3,3 s-3-1.2-3-3s1.4-3,3-3C62.8,25.3,64.2,26.6,64.2,28.3z"
|
||||
></path>
|
||||
<path
|
||||
class="st0"
|
||||
d="M78.3,22v3c1.5-2.1,3.8-3.6,7.2-3.6c4.3,0,9.3,3.6,9.3,11.3c0,8.1-4.8,12-9.8,12c-2.6,0-5-1-6.8-3.5v10.6h-5.4 V22H78.3z M78.3,33c0,4.5,2.6,6.9,5.5,6.9c2.8,0,5.6-2.2,5.6-6.9c0-4.6-2.8-6.8-5.6-6.8C81,26.2,78.3,28.3,78.3,33z"
|
||||
></path>
|
||||
<path
|
||||
class="st0"
|
||||
d="M104.3,22v3c1.5-2.1,3.8-3.6,7.2-3.6c4.3,0,9.3,3.6,9.3,11.3c0,8.1-4.8,12-9.8,12c-2.6,0-5-1-6.8-3.5v10.6h-5.4 V22H104.3z M104.3,33c0,4.5,2.6,6.9,5.5,6.9c2.8,0,5.6-2.2,5.6-6.9c0-4.6-2.8-6.8-5.6-6.8C106.9,26.2,104.3,28.3,104.3,33z"
|
||||
></path>
|
||||
<path
|
||||
class="st0"
|
||||
d="M132.3,21.4c4.5,0,7.7,2.1,9.1,7.3l-4.9,0.8c-0.1-2.6-1.7-3.5-4.1-3.5c-1.8,0-3.2,0.8-3.2,2.1 c0,1,0.7,2,2.8,2.4l3.7,0.7c3.6,0.7,5.6,3.1,5.6,6.3c0,4.8-4.3,7.2-8.4,7.2c-4.3,0-9.1-2.2-9.8-7.6l4.9-0.8c0.3,2.8,2,3.8,4.8,3.8 c2.1,0,3.5-0.8,3.5-2.1c0-1.2-0.7-2.1-3-2.5l-3.4-0.6c-3.6-0.7-5.8-3.2-5.8-6.4C124.2,23.5,128.7,21.4,132.3,21.4z"
|
||||
></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -56,7 +56,7 @@
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
min-height: 95vh;
|
||||
max-width: 1500px;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import OrderSection from './OrderSection.svelte';
|
||||
import ExpressSection from './ExpressSection.svelte';
|
||||
import DeliverySection from './DeliverySection.svelte';
|
||||
import PageMeta from '$lib/components/PageMeta.svelte';
|
||||
import CheckoutButton from '$lib/components/Button.svelte';
|
||||
@@ -143,30 +144,43 @@
|
||||
/>
|
||||
|
||||
<h1>Kassen</h1>
|
||||
|
||||
<form class="checkout" bind:this="{form}" on:submit|preventDefault="{postOrder}">
|
||||
<section id="delivery">
|
||||
<h2>Leveringsaddresse</h2>
|
||||
<DeliverySection />
|
||||
</section>
|
||||
<div class="main">
|
||||
<section class="express-checkout" style="display: block;">
|
||||
<h2>Hurtigkasse</h2>
|
||||
|
||||
<section id="order">
|
||||
<h2>Din ordre</h2>
|
||||
<OrderSection />
|
||||
</section>
|
||||
<ExpressSection />
|
||||
|
||||
<section id="payment">
|
||||
<h2>Betalingsinformasjon</h2>
|
||||
<StripeCard bind:card="{card}" stripeApiKey="{stripeApiKey}" />
|
||||
<p style="margin: 0 0 -0.5rem 0.5rem; text-align: left; color: rgba(0,0,0,0.5);">eller</p>
|
||||
</section>
|
||||
|
||||
<div class="pay">
|
||||
<CheckoutButton type="submit" text="Betal" />
|
||||
<div class="payment-state-animation">
|
||||
{#if paymentPromise}
|
||||
<Loading promise="{paymentPromise}" />
|
||||
{/if}
|
||||
<section id="delivery">
|
||||
<h2>Leveringsaddresse</h2>
|
||||
<DeliverySection />
|
||||
</section>
|
||||
|
||||
<section id="payment">
|
||||
<h2>Betalingsinformasjon</h2>
|
||||
<StripeCard bind:card="{card}" stripeApiKey="{stripeApiKey}" />
|
||||
|
||||
<div class="pay">
|
||||
<CheckoutButton type="submit" text="Betal" />
|
||||
<div class="payment-state-animation">
|
||||
{#if paymentPromise}
|
||||
<Loading promise="{paymentPromise}" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<section id="order">
|
||||
<h2>Din ordre</h2>
|
||||
<OrderSection />
|
||||
</section>
|
||||
</aside>
|
||||
</form>
|
||||
|
||||
<ErrorStack bind:errors="{errors}" />
|
||||
@@ -175,20 +189,19 @@
|
||||
@import '../../styles/media-queries.scss';
|
||||
|
||||
form.checkout {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'delivery order'
|
||||
'payment order';
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
zoom: 1;
|
||||
position: relative;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
grid-gap: 2rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@include mobile {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
'order'
|
||||
'delivery'
|
||||
'payment';
|
||||
@media (min-width: 1000px) {
|
||||
padding: 0 5%;
|
||||
width: 90%;
|
||||
max-width: 78em;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,11 +215,42 @@
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
#delivery {
|
||||
grid-area: delivery;
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
|
||||
@media (min-width: 750px) {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
width: 52%;
|
||||
padding-right: 6%;
|
||||
float: left;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#order {
|
||||
grid-area: order;
|
||||
|
||||
aside.sidebar {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: #515151;
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
position: sticky;
|
||||
align-self: flex-start;
|
||||
top: 0;
|
||||
width: 38%;
|
||||
padding-left: 4%;
|
||||
background-position: left top;
|
||||
float: right;
|
||||
padding-top: 4em;
|
||||
}
|
||||
}
|
||||
#payment {
|
||||
grid-area: payment;
|
||||
@@ -225,6 +269,17 @@
|
||||
font-weight: 500;
|
||||
color: #231f20;
|
||||
line-height: 1.1;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
bottom: 0.15em;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
|
||||
:global(#address) {
|
||||
:global(#street_address) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
:global(#email) {
|
||||
|
||||
58
src/routes/checkout/ExpressSection.svelte
Normal file
58
src/routes/checkout/ExpressSection.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
import Vipps from '$lib/icons/Vipps.svelte';
|
||||
import ShopPay from '$lib/icons/ShopPay.svelte';
|
||||
import ApplePay from '$lib/icons/ApplePay.svelte';
|
||||
import PayPal from '$lib/icons/PayPal.svelte';
|
||||
import GooglePay from '$lib/icons/GooglePay.svelte';
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
<li class="button" tabindex="0"><Vipps /></li>
|
||||
<li class="button" tabindex="0"><ApplePay /></li>
|
||||
<li class="button" tabindex="0"><PayPal /></li>
|
||||
<li class="button" tabindex="0"><GooglePay /></li>
|
||||
</ul>
|
||||
|
||||
<style lang="scss">
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (max-width: 750px) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.5rem;
|
||||
width: 8em;
|
||||
height: 42px;
|
||||
border-radius: 4px;
|
||||
background-color: black;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
scale: 1.05;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
background-color: #ff5b24;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
background-color: #ffc439;
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
width: 10em;
|
||||
margin: 0.5rem 0.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import OrderTotalSection from './OrderTotalSection.svelte';
|
||||
import QuantitySelect from '$lib/components/QuantitySelect.svelte';
|
||||
|
||||
import { cart, subTotal } from '$lib/cartStore';
|
||||
@@ -12,130 +13,201 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div style="border: 2px solid black">
|
||||
<table class="order-summary">
|
||||
<thead style="border-bottom: 2px solid black;">
|
||||
<div class="order-summary">
|
||||
<table class="product-table">
|
||||
<caption class="visually-hidden"> Shopping cart </caption>
|
||||
<thead class="product-table__header">
|
||||
<tr>
|
||||
<th>Varenavn</th>
|
||||
<th>Antall</th>
|
||||
<th>Pris</th>
|
||||
<th scope="col"><span class="visually-hidden">Product image</span></th>
|
||||
<th scope="col"><span class="visually-hidden">Description</span></th>
|
||||
<th scope="col"><span class="visually-hidden">Quantity</span></th>
|
||||
<th scope="col"><span class="visually-hidden">Price</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#if $cart.length}
|
||||
{#each $cart as cartItem}
|
||||
<tr id="{lineItemClass(cartItem.lineitem_id)}">
|
||||
<td>
|
||||
<div class="line-order">
|
||||
<a href="/shop/{cartItem.product_no}"><span>{cartItem.name}</span></a>
|
||||
<span class="subtext">Størrelse: {cartItem.size}</span>
|
||||
<tbody data-order-summary-section="line-items">
|
||||
{#each $cart as cartItem}
|
||||
<tr
|
||||
class="product"
|
||||
data-product-id="6718367989809"
|
||||
data-variant-id="39715003924529"
|
||||
data-product-type=""
|
||||
data-customer-ready-visible=""
|
||||
>
|
||||
<td class="product__image">
|
||||
<div class="product-thumbnail">
|
||||
<div class="product-thumbnail__wrapper">
|
||||
<img
|
||||
alt="Black Googly Eye Puff Print Logo Tee - XS"
|
||||
class="product-thumbnail__image"
|
||||
src="{cartItem.image}"
|
||||
data-src="//cdn.shopify.com/s/files/1/0023/3789/8540/products/20220718_A24_GooglyEye_Tee_Black_15991x1gray_small.jpg?v=1659020903"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<QuantitySelect
|
||||
bind:value="{cartItem.quantity}"
|
||||
hideButtons="{true}"
|
||||
on:decrement="{() => decrementProductInCart(cartItem.lineitem_id)}"
|
||||
on:increment="{() => incrementProductInCart(cartItem.lineitem_id)}"
|
||||
/>
|
||||
</td>
|
||||
<td>Nok {cartItem.quantity * cartItem.price}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{:else}
|
||||
<tr class="no-products">
|
||||
<td>(ingen produkter)</td>
|
||||
<td>0</td>
|
||||
<td>Nok 0</td>
|
||||
<span class="product-thumbnail__quantity" aria-hidden="true">{cartItem.quantity}</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<th class="product__description" scope="row">
|
||||
<span class="product__description__name order-summary__emphasis">{cartItem.name}</span>
|
||||
<span class="product__description__variant order-summary__small-text"
|
||||
>{cartItem.size}</span
|
||||
>
|
||||
</th>
|
||||
<td class="product__quantity">
|
||||
<span class="visually-hidden"> 1 </span>
|
||||
</td>
|
||||
<td class="product__price">
|
||||
<p class="order-summary__emphasis skeleton-while-loading">
|
||||
NOK {cartItem.quantity * cartItem.price}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<tr style="border-bottom-color: rgba(0,0,0,0.15)">
|
||||
<td>Totalsum:</td>
|
||||
<td></td>
|
||||
<td>Nok {$subTotal}</td>
|
||||
</tr>
|
||||
|
||||
<tr style="border-bottom-color: rgba(0,0,0,0.15)">
|
||||
<td>Frakt:</td>
|
||||
<td></td>
|
||||
<td>Nok {shippingPrice}</td>
|
||||
</tr>
|
||||
|
||||
<tr style="font-weight: 600">
|
||||
<td>Pris:</td>
|
||||
<td></td>
|
||||
<td>Nok {totalPrice}</td>
|
||||
</tr>
|
||||
<tr class="spacer"></tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<OrderTotalSection />
|
||||
</div>
|
||||
|
||||
<!-- <slot name="express-checkout-buttons" /> -->
|
||||
<style lang="scss" module="scoped">
|
||||
table.order-summary {
|
||||
width: 100%;
|
||||
table,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
padding: 1rem 0.5rem;
|
||||
min-width: 50px;
|
||||
font-size: 1.3rem;
|
||||
.order-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.visually-hidden) {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
clip: rect(0 0 0 0);
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
margin: -2px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:global(.hidden) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-table {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 1.5em;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&__header th {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 0.7rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
&__image {
|
||||
.product-thumbnail {
|
||||
width: 4.6em;
|
||||
height: 4.6em;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
&__wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&__quantity {
|
||||
font-size: 0.8571428571em;
|
||||
font-weight: 500;
|
||||
line-height: 1.75em;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
border-radius: 1.75em;
|
||||
background-color: rgba(114, 114, 114, 0.9);
|
||||
background-color: rgb(24, 51, 47, 0.9);
|
||||
color: #fff;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-width: 1.75em;
|
||||
height: 1.75em;
|
||||
padding: 0 0.5833333333em;
|
||||
position: absolute;
|
||||
right: -0.75em;
|
||||
top: -0.75em;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__quantity {
|
||||
}
|
||||
|
||||
&__description {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
width: 100%;
|
||||
padding-top: 0.8rem;
|
||||
vertical-align: top;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1rem;
|
||||
|
||||
th:nth-of-type(2),
|
||||
td:nth-of-type(2) {
|
||||
width: 10%;
|
||||
}
|
||||
&__name {
|
||||
display: block;
|
||||
color: #787878;
|
||||
width: 1em;
|
||||
min-width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
th:last-of-type,
|
||||
td:last-of-type {
|
||||
width: 30%;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
tr.no-products {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
tr:not(:last-of-type) {
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 1rem 0.5rem;
|
||||
min-width: 50px;
|
||||
font-size: 1.1rem;
|
||||
text-align: left;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
&__variant {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: #6e6e6e;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.line-order {
|
||||
padding: 9px 12px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
|
||||
.subtext {
|
||||
color: #999;
|
||||
display: block;
|
||||
&__price {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.2;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
padding-top: 0.69rem;
|
||||
padding-right: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
142
src/routes/checkout/OrderTotalSection.svelte
Normal file
142
src/routes/checkout/OrderTotalSection.svelte
Normal file
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { subTotal } from '$lib/cartStore';
|
||||
</script>
|
||||
|
||||
<div class="total">
|
||||
<table class="total-line-table">
|
||||
<caption class="visually-hidden">Cost summary</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"><span class="visually-hidden">Description</span></th>
|
||||
<th scope="col"><span class="visually-hidden">Price</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="total-line-table__tbody">
|
||||
<tr class="total-line total-line--subtotal">
|
||||
<th class="total-line__name" scope="row">Subtotal</th>
|
||||
<td class="total-line__price">
|
||||
<span
|
||||
class="order-summary__emphasis skeleton-while-loading"
|
||||
data-checkout-subtotal-price-target="4000"
|
||||
>
|
||||
Nok {$subTotal}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="total-line total-line--shipping">
|
||||
<th class="total-line__name" scope="row">
|
||||
<span> Shipping </span>
|
||||
</th>
|
||||
<td class="total-line__price">
|
||||
<span
|
||||
class="skeleton-while-loading order-summary__small-text"
|
||||
data-checkout-total-shipping-target="0"
|
||||
>
|
||||
<!-- Calculated at next step -->
|
||||
Nok 75
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="total-line total-line--taxes hidden" data-checkout-taxes="">
|
||||
<th class="total-line__name" scope="row">Estimated taxes</th>
|
||||
<td class="total-line__price">
|
||||
<span
|
||||
class="order-summary__emphasis skeleton-while-loading"
|
||||
data-checkout-total-taxes-target="0">$0.00</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot class="total-line-table__footer">
|
||||
<tr class="total-line">
|
||||
<th class="name payment-due-label" scope="row">
|
||||
<span class="payment-due-label__total">Total</span>
|
||||
</th>
|
||||
<td class="price payment-due" data-presentment-currency="NOK">
|
||||
<span class="payment-due__currency remove-while-loading">Nok</span>
|
||||
<span class="price skeleton-while-loading--lg" data-checkout-payment-due-target="4000">
|
||||
{$subTotal + 75}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.total {
|
||||
border-top: 1px solid rgba(172, 172, 172, 0.34);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding-top: 0.5rem;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.total-line {
|
||||
&:first-child th,
|
||||
&:first-child td {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
text-align: right;
|
||||
padding-left: 0.875rem;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 0.875rem;
|
||||
color: #787878;
|
||||
}
|
||||
&__price {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
padding-left: 1.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
.name,
|
||||
.price {
|
||||
padding-top: 3em !important;
|
||||
position: relative;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.name::before,
|
||||
.price::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1.5em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: rgba(172, 172, 172, 0.34);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,6 +14,10 @@
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
@@ -98,3 +102,14 @@ button:focus:not(:focus-visible) {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px) {
|
||||
html {
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 2000px) {
|
||||
html {
|
||||
font-size: 130%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user