diff --git a/assets/main.css b/assets/main.css index 273ba0f9..1234bbb7 100644 --- a/assets/main.css +++ b/assets/main.css @@ -159,6 +159,25 @@ button:focus { margin-top: 6px; } +.yc-btn-secondary--large { + border: 1px solid var(--yc-primary-color); + color: var(--yc-primary-color); + padding: 14px; + border-radius: 4px; + display: flex; + font-weight: 700; + font-size: 18px; + justify-content: center; + align-items: center; + gap: 10px; + width: 100%; +} +.yc-btn-secondary--large:hover { + background: var(--yc-primary-color); + color: white; + transition: all 0.2s ease-in; +} + [dir=rtl] .yc-btn { flex-direction: row-reverse; } diff --git a/assets/thankyou.css b/assets/thankyou.css index 22c941fa..804a3e37 100644 --- a/assets/thankyou.css +++ b/assets/thankyou.css @@ -1,162 +1,95 @@ -.thankyou-wrapper { +.thankyou-page-container { + max-width: 440px; + width: 100%; + margin: 0 auto; +} +@media screen and (max-width: 768px) { + .thankyou-page-container { + padding: 0 16px; + } +} +.thankyou-page-container .thankyou-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; } -.thankyou-wrapper .content-wrapper { +.thankyou-page-container .thankyou-wrapper .content-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 10px; } -.thankyou-wrapper .content-wrapper .title { - font-size: 2rem; +.thankyou-page-container .thankyou-wrapper .content-wrapper .heading { + line-height: 42px; } -@media (min-width: 768px) { - .thankyou-wrapper .content-wrapper .title { - font-size: 2.7rem; - } -} -.thankyou-wrapper .content-wrapper .subtitle { - opacity: 0.75; - font-size: 1.2rem; +.thankyou-page-container .thankyou-wrapper .content-wrapper .heading .title { + display: block; } -@media (min-width: 768px) { - .thankyou-wrapper .content-wrapper .subtitle { - font-size: 1.5rem; +@media screen and (max-width: 768px) { + .thankyou-page-container .thankyou-wrapper .content-wrapper .heading .title { + font-size: 24px; } } -.thankyou-wrapper .content-wrapper .description { +.thankyou-page-container .thankyou-wrapper .content-wrapper .description { margin-top: 15px; opacity: 0.9; - font-size: 1.3rem; + text-align: center; + font-size: 15px; + font-weight: 400; line-height: 1.5rem; } @media (min-width: 768px) { - .thankyou-wrapper .content-wrapper .description { - font-size: 1.5rem; + .thankyou-page-container .thankyou-wrapper .content-wrapper .description { + font-size: 16px; line-height: 2rem; } } -.thankyou-wrapper .content-wrapper .description .ql-align-center { - text-align: center; -} -.thankyou-wrapper .content-wrapper .yc-btn { +.thankyou-page-container .thankyou-wrapper .content-wrapper .yc-btn { margin-top: 2rem; } - -.order-details { - margin: 2rem auto; - max-width: 600px; +.thankyou-page-container .order-details { + border: 1px solid #EBEBEB; + padding: 24px 28px; + border-radius: 4px; } -.order-details .title { - font-size: 1.3rem; - margin: 0 0 1rem; +.thankyou-page-container .order-details h2 { + font-weight: 600; + line-height: 22px; + color: #000000; + font-weight: 700; } -.order-details .table-content .head { - display: grid; - grid-template-columns: 1fr; - border: var(--yc-main-border); - background-color: rgba(0, 0, 0, 0.03); -} -@media (min-width: 768px) { - .order-details .table-content .head { - grid-template-columns: repeat(3, 1fr); - align-items: center; - } -} -.order-details .table-content .head .item { +.thankyou-page-container .order-details .table-content .head { display: flex; - flex-direction: row; + margin-top: 15px; justify-content: space-between; - gap: 5px; - border-top: var(--yc-main-border); - border-bottom: var(--yc-main-border); - padding: 10px 17px; -} -@media (min-width: 768px) { - .order-details .table-content .head .item { - flex-direction: column; - border: none; - border-right: var(--yc-main-border); - border-left: var(--yc-main-border); - } -} -.order-details .table-content .head .item:first-child { - border: none; -} -.order-details .table-content .head .item:last-child { - border: none; -} -.order-details .table-content .head .item .label { - font-size: 1.1rem; - font-weight: 500; -} -.order-details .table-content .summary { - margin-top: 10px; + align-items: center; } -.order-details .table-content .summary table { - border: 1px solid #ccc; - border-collapse: collapse; - margin: 0; - padding: 0; - width: 100%; - table-layout: fixed; +.thankyou-page-container .order-details .table-content .head .item { + font-weight: 400; + font-size: 14px; } -.order-details .table-content .summary table caption { - font-size: 1.5em; - margin: 0.5em 0 0.75em; +.thankyou-page-container .order-details .table-content .head .data-item { + font-weight: 700; + font-size: 14px; } -.order-details .table-content .summary table tr { - background-color: #f8f8f8; - border: 1px solid #ddd; - padding: 0.35em; +.thankyou-page-container .order-details .table-content .total-price-head { + display: flex; + margin-top: 20px; + padding-top: 15px; + justify-content: space-between; + align-items: center; + border-top: 1px solid #EBEBEB; } -.order-details .table-content .summary table th, -.order-details .table-content .summary table td { - padding: 0.625em; - text-align: unset; +.thankyou-page-container .order-details .table-content .total-price-head .item { + font-weight: 700; + line-height: 22px; } -.order-details .table-content .summary table th { - font-weight: 500; - font-size: 0.85em; +.thankyou-page-container .order-details .table-content .total-price-head .data-item { + font-weight: 700; + font-size: 16px; + color: var(--yc-primary-color); } -@media screen and (max-width: 768px) { - .order-details .table-content .summary table { - border: 0; - } - .order-details .table-content .summary table caption { - font-size: 1.3em; - } - .order-details .table-content .summary table thead { - border: none; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - .order-details .table-content .summary table tr { - display: block; - margin-bottom: 0.625em; - } - .order-details .table-content .summary table td { - border-bottom: var(--yc-main-border); - display: block; - font-size: 0.8em; - text-align: right; - } - .order-details .table-content .summary table td::before { - content: attr(data-label); - float: left; - font-weight: 500; - text-transform: uppercase; - } - .order-details .table-content .summary table td:last-child { - border-bottom: 0; - } +.thankyou-page-container .home-page { + margin-top: 50px; } diff --git a/locales/ar.default.json b/locales/ar.default.json index 90bb319b..772ca8cf 100644 --- a/locales/ar.default.json +++ b/locales/ar.default.json @@ -46,13 +46,13 @@ "title": "شكرا", "subtitle": "تم استلام طلبك.", "description": "سيتصل بك فريقنا لتأكيد طلبك", - "return_cta": "عودة إلى المتجر", + "return_cta": "الصفحة الرئيسية ", "details": { - "title": "تفاصيل الطلب", + "title": "ملخص الفاتورة", "payment_status": "حالة الدفع", - "shipping_cost": "تكلفة الشحن", - "total": "المجموع", - "product": "منتج", + "shipping_cost": "الشحن والتسليم", + "total": "إجمالي المبلغ", + "product": "السلع", "one_piece_price": "سعر قطعة واحدة", "quantity": "الكمية" } diff --git a/sections/thankyou.liquid b/sections/thankyou.liquid index e8075754..ab058717 100644 --- a/sections/thankyou.liquid +++ b/sections/thankyou.liquid @@ -1,133 +1,104 @@ {{ 'thankyou.css' | asset_url | stylesheet_tag }} -
-
-
- -
{{ section.settings.title }}
-
{{ section.settings.subtitle }}
-
- {{ section.settings.description }} +{% style %} +.title { + color: {{ section.settings.title_color.hex }}; + font-size: {{ section.settings.title_size }}px; +} + +.subtitle { + color: {{ section.settings.subtitle_color.hex }}; +} + + +{% endstyle %} + +
+
+
+
+ +
+
{{ section.settings.title }}
{{ section.settings.subtitle }}
+
+
+ {{ section.settings.description }} +
- - - {{ 'thankyou.return_cta' | t }} -
-
- -
-
-
- {{ 'thankyou.details.title' | t }} -
-
-
-
-
{{ 'thankyou.details.payment_status' | t }}
-
{{ order.paymentStatus }}
-
-
-
{{ 'thankyou.details.shipping_cost' | t }}
-
{{ order.shippingCost }}
+
+ {% comment %} + TO DO: Add variants when the data is provided + {% endcomment %} +
+
+

{{ 'thankyou.details.title' | t }}

+
+
+
+ {{ 'thankyou.details.product' | t }}
-
-
{{ 'thankyou.details.total' | t }}
-
{{ order.total | money }}
+
+ {{ order.total | money }}
+
+
+
+ {{ 'thankyou.details.shipping_cost' | t }}
- -
- - - - - - - - - - - {%- for item in order.order_variants %} - - - - - - - {%- endfor %} - -
{{ 'thankyou.details.product' | t }}{{ 'thankyou.details.one_piece_price' | t }}{{ 'thankyou.details.one_piece_price' | t }}{{ 'thankyou.details.total' | t }}
{{ item.name }}{{ item.price | money }}{{ item.quantity }}{{ item.price | times: item.quantity | money }}
+
+ {{ order.shippingCost | money }} +
+
+
+
+ {{ 'thankyou.details.total' | t }} +
+
+ {{ order.total | money }}
+
+ + + {{ 'thankyou.return_cta' | t }} + +
+
+ {%- schema -%} { "label": "Thank you page", "templates": ["thankyou"], "limit": 1, "settings": [ - { - "type": "image_picker", - "id": "hero_image", - "label": "Image" - }, - { - "type": "range", - "id": "hero_image_height", - "label": "Image height", - "min": 0, - "max": 200, - "step": 1, - "unit": "px", - "default": 50 - }, { "type": "text", "id": "title", "label": "Title" }, { - "type": "select", - "id": "title_font_weight", - "label": "Title font weight", - "default": "400", - "options": [ - { - "value": "300", - "label": "Light" - }, - { - "value": "400", - "label": "Normal" - }, - { - "value": "500", - "label": "Bold" - }, - { - "value": "700", - "label": "Heavy" - } - ] + "type": "color", + "id": "title_color", + "label": "Title color" + }, + { + "type": "color", + "id": "subtitle_color", + "label": "Subtitle color" }, { "type": "range", - "id": "title_font_size", + "id": "title_size", "label": "Title font size", - "min": 0, + "min": 14, "max": 100, "step": 1, "unit": "px", @@ -138,49 +109,10 @@ "id": "subtitle", "label": "Subtitle" }, - { - "type": "select", - "id": "subtitle_font_weight", - "label": "Subtitle font weight", - "default": "400", - "options": [ - { - "value": "300", - "label": "Light" - }, - { - "value": "400", - "label": "Normal" - }, - { - "value": "500", - "label": "Bold" - }, - { - "value": "700", - "label": "Heavy" - } - ] - }, - { - "type": "range", - "id": "subtitle_font_size", - "label": "Subtitle font size", - "min": 0, - "max": 100, - "step": 1, - "unit": "px", - "default": 16 - }, { "type": "richtext", "id": "description", "label": "Description" - }, - { - "type": "text", - "id": "button_text", - "label": "Button text" } ] } diff --git a/styles/main.scss b/styles/main.scss index fe9df36c..f847b096 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -161,6 +161,26 @@ button { margin-top: 6px; } } + +.yc-btn-secondary--large { + border: 1px solid var(--yc-primary-color); + color: var(--yc-primary-color); + padding: 14px; + border-radius: 4px; + display: flex; + font-weight: 700; + font-size: 18px; + justify-content: center; + align-items: center; + gap: 10px; + width: 100%; + + &:hover { + background: var(--yc-primary-color); + color: white; + transition: all .2s ease-in; + } +} [dir='rtl'] { .yc-btn { flex-direction: row-reverse; diff --git a/styles/thankyou.scss b/styles/thankyou.scss index 4b512207..616b771d 100644 --- a/styles/thankyou.scss +++ b/styles/thankyou.scss @@ -1,188 +1,110 @@ @import 'helpers/mixins'; +.thankyou-page-container { + max-width: 440px; + width: 100%; + margin: 0 auto; -.thankyou-wrapper { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + @media screen and (max-width: 768px) { + padding: 0 16px; + } - .content-wrapper { + .thankyou-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 10px; - .title { - font-size: 2rem; + .content-wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; - @include breakpoint('md') { - font-size: 2.7rem; - } - } + .heading { + line-height: 42px; - .subtitle { - opacity: 0.75; - font-size: 1.2rem; + .title { + display: block; - @include breakpoint('md') { - font-size: 1.5rem; + @media screen and (max-width: 768px) { + font-size: 24px; + } + } } - } - .description { - margin-top: 15px; - opacity: 0.9; - font-size: 1.3rem; - line-height: 1.5rem; + .description { + margin-top: 15px; + opacity: 0.9; + text-align: center; + font-size: 15px; + font-weight: 400; + line-height: 1.5rem; - @include breakpoint('md') { - font-size: 1.5rem; - line-height: 2rem; + @include breakpoint('md') { + font-size: 16px; + line-height: 2rem; + } } - .ql-align-center { - text-align: center; + .yc-btn { + margin-top: 2rem; } } - - .yc-btn { - margin-top: 2rem; - } } -} -.order-details { - margin: 2rem auto; - max-width: 600px; + .order-details { + border: 1px solid #EBEBEB; + padding: 24px 28px; + border-radius: 4px; - .title { - font-size: 1.3rem; - margin: 0 0 1rem; - } - - .table-content { - .head { - display: grid; - grid-template-columns: 1fr; - border: var(--yc-main-border); - background-color: rgba(0, 0, 0, 0.03); - - @include breakpoint('md') { - grid-template-columns: repeat(3, 1fr); - align-items: center; - } + h2 { + font-weight: 600; + line-height: 22px; + color: #000000; + font-weight: 700; + } - .item { + .table-content { + .head { display: flex; - flex-direction: row; + margin-top: 15px; justify-content: space-between; - gap: 5px; - border-top: var(--yc-main-border); - border-bottom: var(--yc-main-border); - padding: 10px 17px; - - @include breakpoint('md') { - flex-direction: column; - border: none; - - border-right: var(--yc-main-border); - border-left: var(--yc-main-border); - } - - &:first-child { - border: none; - } + align-items: center; - &:last-child { - border: none; + .item { + font-weight: 400; + font-size: 14px; } - .label { - font-size: 1.1rem; - font-weight: 500; + .data-item { + font-weight: 700; + font-size: 14px; } } - } - - .summary { - margin-top: 10px; - - table { - border: 1px solid #ccc; - border-collapse: collapse; - margin: 0; - padding: 0; - width: 100%; - table-layout: fixed; - } - - table caption { - font-size: 1.5em; - margin: 0.5em 0 0.75em; - } - - table tr { - background-color: #f8f8f8; - border: 1px solid #ddd; - padding: 0.35em; - } - table th, - table td { - padding: 0.625em; - text-align: unset; - } - - table th { - font-weight: 500; - font-size: 0.85em; - } - - $breakpoint-value: map-get($breakpoints, 'md'); - @media screen and (max-width: $breakpoint-value) { - table { - border: 0; - } - - table caption { - font-size: 1.3em; - } - - table thead { - border: none; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - table tr { - display: block; - margin-bottom: 0.625em; - } - - table td { - border-bottom: var(--yc-main-border); - display: block; - font-size: 0.8em; - text-align: right; - } + .total-price-head { + display: flex; + margin-top: 20px; + padding-top: 15px; + justify-content: space-between; + align-items: center; + border-top: 1px solid #EBEBEB; - table td::before { - content: attr(data-label); - float: left; - font-weight: 500; - text-transform: uppercase; + .item { + font-weight: 700; + line-height: 22px; } - table td:last-child { - border-bottom: 0; + .data-item { + font-weight: 700; + font-size: 16px; + color: var(--yc-primary-color); } } } } + + .home-page { + margin-top: 50px; + } } diff --git a/templates/thankyou.json b/templates/thankyou.json index 7cd7795e..4793f05a 100644 --- a/templates/thankyou.json +++ b/templates/thankyou.json @@ -2,9 +2,19 @@ "label": "Collection", "layout": "theme", "sections": { - "thankyou": { - "type": "thankyou" - } + "thankyou": { + "type": "thankyou", + "settings": { + "title": "لقد تم تسجيل طلبك بنجاح, ", + "subtitle": "شكرا لك على اختيار متجرنا .", + "title_size": 30, + "title_color": "#8DC347", + "subtitle_color": "#020202FF", + "description": "

نحن سعداء لاختيارك متجرنا ونتمنى ان تكون تجربتك مع منتجاتنا جد مميزة، سنرسل لك تأكيدا بالشحن بمجرد شحن طلبك.<\/p>" + } + } }, - "order": ["thankyou"] + "order": [ + "thankyou" + ] }