bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finalized styling of checkout order informations page

This commit is contained in:
Bachir Soussi Chiadmi 2021-01-06 22:04:53 +01:00
parent d9ccca3a5e
commit 2cb5a3c5b4
9 changed files with 274 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
config/sync/core.entity_view_display.commerce_product.materio_product_type.order_summary.yml Normal file
View File

@ -0,0 +1,39 @@
uuid: c59a04b2-8939-4553-91fa-22a3e9d9df2f
langcode: en
status: true
dependencies:
config:
- commerce_product.commerce_product_type.materio_product_type
- core.entity_view_mode.commerce_product.order_summary
- field.field.commerce_product.materio_product_type.body
- field.field.commerce_product.materio_product_type.field_price_description
module:
- text
id: commerce_product.materio_product_type.order_summary
targetEntityType: commerce_product
bundle: materio_product_type
mode: order_summary
content:
body:
type: text_default
weight: 1
region: content
label: hidden
settings: { }
third_party_settings: { }
title:
type: string
weight: 0
region: content
label: hidden
settings:
link_to_entity: false
third_party_settings: { }
hidden:
created: true
field_price_description: true
langcode: true
search_api_excerpt: true
stores: true
uid: true
variations: true

7
config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml
View File

@ -23,18 +23,19 @@ bundle: materio_product_variation_type
mode: order_summary
content:
field_description:
type: text_default
weight: 2
region: content
label: hidden
settings: { }
third_party_settings: { }
type: text_default
region: content
product_id:
type: entity_reference_label
type: entity_reference_entity_view
weight: 0
region: content
label: hidden
settings:
view_mode: order_summary
link: false
third_party_settings: { }
title:

10
config/sync/core.entity_view_mode.commerce_product.order_summary.yml Normal file
View File

@ -0,0 +1,10 @@
uuid: e3b37ebc-e338-4c81-a24a-953e01400c36
langcode: en
status: true
dependencies:
module:
- commerce_product
id: commerce_product.order_summary
label: 'Order Summary'
targetEntityType: commerce_product
cache: true

2
config/sync/views.view.commerce_checkout_order_summary.yml
View File

@ -157,7 +157,7 @@ display:
group_type: group
admin_label: ''
label: TTC
exclude: false
exclude: true
alter:
alter_text: false
text: ''

78
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -1422,7 +1422,8 @@ header[role="banner"] {
font-weight: 300; }
body:not(.path-home) header[role="banner"] #block-pagetitle h2 {
padding: 0.5em 1em; }
body.path-blabla header[role="banner"] #block-pagetitle h2 {
body.path-blabla header[role="banner"] #block-pagetitle h2,
body.path-checkout header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #9458aa; }
body.path-showrooms header[role="banner"] #block-pagetitle h2 {
@ -2233,6 +2234,29 @@ article.card {
order: 2;
background-color: #ff9f50;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main label,
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main legend {
color: #fff; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main fieldset {
border: none;
margin: 0;
padding: 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main fieldset legend {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0.5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item {
margin: 0 0 0.5em 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main label {
display: inline-block;
font-weight: bold;
min-width: 10em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main input[type="text"] {
width: 20em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-billing-information-address-0-address-address-line2 {
padding-left: 10.25em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-billing-information-copy-to-address-book {
display: none; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary {
width: 100%;
float: none;
@ -2241,14 +2265,62 @@ article.card {
display: none; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary {
background-color: #69cdcf;
color: #fff;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary .view-commerce-checkout-order-summary {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-end; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary .field--name-product-id .field--name-title {
font-size: 2.5em;
font-weight: 800; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary .field--name-title {
font-size: 1.5em;
font-weight: 600; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary p {
margin: 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption {
background-color: #50aa3c;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption input[type="text"] {
width: 5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper {
display: flex;
flex-flow: row;
align-items: center; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper .form-item {
margin: 0 0.5em 0 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper .form-item label {
color: #fff;
font-size: 1.5em;
font-weight: 600;
margin-right: 0.5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper .form-item input[type="text"] {
width: 7em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper input[type="submit"] {
background-color: #fff;
color: #50aa3c;
border: none;
margin: 0;
padding: 0.1em 0.7em;
box-sizing: content-box;
height: 2em;
font-weight: 800;
border-radius: 5px; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer {
float: none;
width: 100%;
padding: 0;
order: 3; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer #edit-actions {
text-align: right; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer input#edit-actions-next {
background-color: #9458aa;
color: #fff;
border: none;
border-radius: 5px;
padding: 0.2em 0.4em 0.3em;
font-weight: 600;
font-size: 1.323em; }
body:not(.path-home) footer[role="contentinfo"] {
display: none; }

3
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

101
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -343,7 +343,8 @@ header[role="banner"]{
body:not(.path-home) & {
padding:0.5em 1em;
}
body.path-blabla & {
body.path-blabla &,
body.path-checkout & {
color: #fff;
background-color: $color-blabla;
}
@ -1497,6 +1498,37 @@ article.card{
order:2;
background-color: $color-webshowroom;
padding: 1em;
label,
legend{
color: #fff;
}
fieldset{
border:none;
margin:0; padding:0;
legend{
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0.5em;
}
}
$lw:10em;
.form-item{
margin:0 0 0.5em 0;
}
label{
display: inline-block;
font-weight: bold;
min-width: $lw;
}
input[type="text"]{
width:20em;
}
.form-item-payment-information-billing-information-address-0-address-address-line2{
padding-left:$lw + 0.25em;
}
.form-item-payment-information-billing-information-copy-to-address-book{
display: none;
}
}
.layout-region-checkout-secondary{
// disable default style
@ -1512,18 +1544,83 @@ article.card{
>h3{display:none;}
#edit-order-summary{
background-color: $color-base;
color:#fff;
padding:1em;
.view-commerce-checkout-order-summary{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-end;
}
.field--name-product-id{
.field--name-title{
font-size: 2.5em;
font-weight: 800;
}
.field--name-body{
}
}
.field--name-title{
font-size: 1.5em;
font-weight: 600;
}
p{
margin:0;
}
}
#edit-coupon-redemption{
background-color: $color-showrooms;
padding:1em;
>.form-wrapper{
display: flex;
flex-flow: row;
align-items: center;
.form-item{
margin:0 0.5em 0 0;
label{
color: #fff;
font-size: 1.5em;
font-weight: 600;
margin-right: 0.5em;
}
input[type="text"]{
width: 5em;
width: 7em;
}
}
input[type="submit"]{
background-color: #fff;
color: $color-showrooms;
border: none;
margin:0;
padding:0.1em 0.7em;
box-sizing: content-box;
height:2em;
font-weight: 800;
border-radius: 5px;
}
}
}
}
.layout-region-checkout-footer{
// disable default style
float: none;
width: 100%;
padding: 0;
// apply custom style
order: 3;
#edit-actions{
text-align: right;
}
input#edit-actions-next{
background-color: $color-blabla;
color: #fff;
border: none;
border-radius: 5px;
padding: 0.2em 0.4em 0.3em;
font-weight: 600;
font-size: 1.323em;
}
}
}
}

19
web/themes/custom/materiotheme/materiotheme.theme
View File

@ -165,6 +165,25 @@ function materiotheme_theme_suggestions_field_alter(&$suggestions, &$vars){
}
}
/**
* Prepares variables for product templates.
*
* Default template: commerce-product.html.twig.
*
* @param array $variables
* An associative array containing:
* - elements: An associative array containing rendered fields.
* - attributes: HTML attributes for the containing element.
*/
function materiotheme_preprocess_commerce_product(array &$variables) {
$test="test";
// remove the variation as we already display it via views
if($variables['elements']['#view_mode'] === 'order_summary'){
unset($variables['product']['variation_title']);
unset($variables['product']['variation_field_description']);
}
}
/**
* Implements hook_theme_suggestions_commerce_product_variation().
*/

24
web/themes/custom/materiotheme/templates/content/commerce-product--order-summary.html.twig Normal file
View File

@ -0,0 +1,24 @@
{#
/**
* @file
*
* Default product template.
*
* Available variables:
* - attributes: HTML attributes for the wrapper.
* - product: The rendered product fields.
* Use 'product' to print them all, or print a subset such as
* 'product.title'. Use the following code to exclude the
* printing of a given field:
* @code
* {{ product|without('title') }}
* @endcode
* - product_entity: The product entity.
* - product_url: The product URL.
*
* @ingroup themeable
*/
#}
<article{{ attributes }}>
{{- product|without('variation_attributes') -}}
</article>