finalized styling of checkout order informations page

config/sync/core.entity_view_display.commerce_product.materio_product_type.order_summary.yml

@@ -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

config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml

@@ -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:

config/sync/core.entity_view_mode.commerce_product.order_summary.yml

@@ -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

config/sync/views.view.commerce_checkout_order_summary.yml

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

web/themes/custom/materiotheme/assets/dist/main.css

@@ -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; }

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -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;
-        input[type="text"]{
-          width: 5em;
+        >.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: 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;
+      }
     }
   }
 }

web/themes/custom/materiotheme/materiotheme.theme

@@ -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().
  */

web/themes/custom/materiotheme/templates/content/commerce-product--order-summary.html.twig

@@ -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>