imporved pricing page, better display for Login/register modal form

config/sync/core.entity_form_display.commerce_product.materio_product_type.default.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - commerce_product.commerce_product_type.materio_product_type
     - field.field.commerce_product.materio_product_type.body
+    - field.field.commerce_product.materio_product_type.field_price_description
   module:
     - commerce
     - path
@@ -30,6 +31,14 @@ content:
     region: content
     settings: {  }
     third_party_settings: {  }
+  field_price_description:
+    weight: 91
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+    type: text_textarea
+    region: content
   langcode:
     type: language_select
     weight: 2

config/sync/core.entity_form_display.commerce_product_variation.materio_product_variation_type.default.yml

@@ -7,7 +7,6 @@ dependencies:
     - field.field.commerce_product_variation.materio_product_variation_type.billing_schedule
     - field.field.commerce_product_variation.materio_product_variation_type.field_description
     - field.field.commerce_product_variation.materio_product_variation_type.field_multiple
-    - field.field.commerce_product_variation.materio_product_variation_type.field_price_description
     - field.field.commerce_product_variation.materio_product_variation_type.license_expiration
     - field.field.commerce_product_variation.materio_product_variation_type.license_type
     - field.field.commerce_product_variation.materio_product_variation_type.subscription_type
@@ -22,12 +21,12 @@ mode: default
 content:
   billing_schedule:
     type: options_select
-    weight: 91
+    weight: 10
     settings: {  }
     third_party_settings: {  }
     region: content
   field_description:
-    weight: 92
+    weight: 11
     settings:
       rows: 5
       placeholder: ''
@@ -35,54 +34,46 @@ content:
     type: text_textarea
     region: content
   field_multiple:
-    weight: 93
+    weight: 5
     settings:
       display_label: true
     third_party_settings: {  }
     type: boolean_checkbox
     region: content
-  field_price_description:
-    weight: 94
-    settings:
-      rows: 5
-      placeholder: ''
-    third_party_settings: {  }
-    type: text_textarea
-    region: content
   langcode:
     type: language_select
-    weight: 2
+    weight: 6
     region: content
     settings:
       include_locked: true
     third_party_settings: {  }
   license_expiration:
     type: commerce_plugin_select
-    weight: 21
+    weight: 8
     settings: {  }
     third_party_settings: {  }
     region: content
   license_type:
     type: commerce_plugin_select
-    weight: 20
+    weight: 7
     settings: {  }
     third_party_settings: {  }
     region: content
   list_price:
     type: commerce_list_price
-    weight: -1
+    weight: 2
     region: content
     settings: {  }
     third_party_settings: {  }
   price:
     type: commerce_price_default
-    weight: 0
+    weight: 3
     region: content
     settings: {  }
     third_party_settings: {  }
   sku:
     type: string_textfield
-    weight: -4
+    weight: 1
     region: content
     settings:
       size: 60
@@ -92,18 +83,18 @@ content:
     type: boolean_checkbox
     settings:
       display_label: true
-    weight: 90
+    weight: 9
     region: content
     third_party_settings: {  }
   subscription_type:
     type: commerce_plugin_select
-    weight: 0
+    weight: 4
     settings: {  }
     third_party_settings: {  }
     region: content
   title:
     type: string_textfield
-    weight: -5
+    weight: 0
     region: content
     settings:
       size: 60

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

@@ -5,25 +5,48 @@ dependencies:
   config:
     - commerce_product.commerce_product_type.materio_product_type
     - 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.default
 targetEntityType: commerce_product
 bundle: materio_product_type
 mode: default
 content:
+  body:
+    type: text_default
+    weight: 1
+    region: content
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+  field_price_description:
+    weight: 2
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
+  title:
+    type: string
+    weight: 0
+    region: content
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
   variations:
     type: entity_reference_entity_view
-    weight: 0
+    weight: 3
     region: content
     label: hidden
     settings:
-      view_mode: summary
+      view_mode: add_to_cart
       link: false
     third_party_settings: {  }
 hidden:
-  body: true
   created: true
   langcode: true
   search_api_excerpt: true
   stores: true
-  title: true
   uid: true

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

@@ -8,7 +8,6 @@ dependencies:
     - field.field.commerce_product_variation.materio_product_variation_type.billing_schedule
     - field.field.commerce_product_variation.materio_product_variation_type.field_description
     - field.field.commerce_product_variation.materio_product_variation_type.field_multiple
-    - field.field.commerce_product_variation.materio_product_variation_type.field_price_description
     - field.field.commerce_product_variation.materio_product_variation_type.license_expiration
     - field.field.commerce_product_variation.materio_product_variation_type.license_type
     - field.field.commerce_product_variation.materio_product_variation_type.subscription_type
@@ -31,7 +30,6 @@ hidden:
   billing_schedule: true
   field_description: true
   field_multiple: true
-  field_price_description: true
   langcode: true
   license_expiration: true
   license_type: true

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

@@ -7,7 +7,6 @@ dependencies:
     - field.field.commerce_product_variation.materio_product_variation_type.billing_schedule
     - field.field.commerce_product_variation.materio_product_variation_type.field_description
     - field.field.commerce_product_variation.materio_product_variation_type.field_multiple
-    - field.field.commerce_product_variation.materio_product_variation_type.field_price_description
     - field.field.commerce_product_variation.materio_product_variation_type.license_expiration
     - field.field.commerce_product_variation.materio_product_variation_type.license_type
     - field.field.commerce_product_variation.materio_product_variation_type.subscription_type
@@ -45,13 +44,6 @@ content:
       format_custom_true: ''
       format_custom_false: ''
     third_party_settings: {  }
-  field_price_description:
-    weight: 5
-    label: above
-    settings: {  }
-    third_party_settings: {  }
-    type: text_default
-    region: content
   price:
     type: commerce_price_default
     weight: 2

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

@@ -8,7 +8,6 @@ dependencies:
     - field.field.commerce_product_variation.materio_product_variation_type.billing_schedule
     - field.field.commerce_product_variation.materio_product_variation_type.field_description
     - field.field.commerce_product_variation.materio_product_variation_type.field_multiple
-    - field.field.commerce_product_variation.materio_product_variation_type.field_price_description
     - field.field.commerce_product_variation.materio_product_variation_type.license_expiration
     - field.field.commerce_product_variation.materio_product_variation_type.license_type
     - field.field.commerce_product_variation.materio_product_variation_type.subscription_type
@@ -42,7 +41,6 @@ hidden:
   billing_schedule: true
   commerce_variation_cart_form: true
   field_multiple: true
-  field_price_description: true
   langcode: true
   license_expiration: true
   license_type: true

config/sync/field.field.commerce_product.materio_product_type.field_price_description.yml

@@ -0,0 +1,21 @@
+uuid: b79d76a4-1c0d-4b11-bd38-58de9f9c00f4
+langcode: en
+status: true
+dependencies:
+  config:
+    - commerce_product.commerce_product_type.materio_product_type
+    - field.storage.commerce_product.field_price_description
+  module:
+    - text
+id: commerce_product.materio_product_type.field_price_description
+field_name: field_price_description
+entity_type: commerce_product
+bundle: materio_product_type
+label: 'Price description'
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: text_long

config/sync/field.field.commerce_product_variation.materio_product_variation_type.field_price_description.yml

@@ -1,21 +0,0 @@
-uuid: 40f453ec-fa1a-4367-bdef-a74bab61d5ad
-langcode: en
-status: true
-dependencies:
-  config:
-    - commerce_product.commerce_product_variation_type.materio_product_variation_type
-    - field.storage.commerce_product_variation.field_price_description
-  module:
-    - text
-id: commerce_product_variation.materio_product_variation_type.field_price_description
-field_name: field_price_description
-entity_type: commerce_product_variation
-bundle: materio_product_variation_type
-label: 'price description'
-description: ''
-required: false
-translatable: false
-default_value: {  }
-default_value_callback: ''
-settings: {  }
-field_type: text_long

config/sync/field.storage.commerce_product_variation.field_price_description.yml → config/sync/field.storage.commerce_product.field_price_description.yml

@@ -1,4 +1,4 @@
-uuid: 9a3272dc-0077-4def-bd19-6c401287e4a3
+uuid: 43356247-86e1-4ebc-8269-6893a340d2ec
 langcode: en
 status: true
 dependencies:
@@ -9,9 +9,9 @@ dependencies:
 third_party_settings:
   field_permissions:
     permission_type: public
-id: commerce_product_variation.field_price_description
+id: commerce_product.field_price_description
 field_name: field_price_description
-entity_type: commerce_product_variation
+entity_type: commerce_product
 type: text_long
 settings: {  }
 module: text

web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls

@@ -78,6 +78,7 @@ type Product {
   title: String
   bundle: String
   body: String
+  price_description: String
   path: String
   variations: [Variation]
 }

web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php

@@ -1129,11 +1129,18 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
 
     $registry->addFieldResolver('Product', 'body',
       $builder->produce('property_path')
-        ->map('type', $builder->fromValue('entity:node'))
+        ->map('type', $builder->fromValue('entity:commerce_product'))
         ->map('value', $builder->fromParent())
         ->map('path', $builder->fromValue('body.value'))
       );
 
+    $registry->addFieldResolver('Product', 'price_description',
+        $builder->produce('property_path')
+          ->map('type', $builder->fromValue('entity:commerce_product'))
+          ->map('value', $builder->fromParent())
+          ->map('path', $builder->fromValue('field_price_description.value'))
+      );
+
     $registry->addFieldResolver('Product', 'variations',
       $builder->produce('entity_reference')
         ->map('entity', $builder->fromParent())

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

@@ -1504,14 +1504,7 @@ article.node--type-frontpage .node__content > section.home-intro > div:nth-child
   font-size: 3.5em;
   line-height: 1; }
 
-article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description, article.node--type-frontpage #main-content > #pricing article.product section.content .description, #main-content > #pricing article.product section.content article.node--type-frontpage .description,
-article.node--type-frontpage #main-content > #pricing article.product .views-field-body .description, #main-content > #pricing article.product .views-field-body article.node--type-frontpage .description,
-article.node--type-frontpage #main-content > #pricing .views-row section.content .description, #main-content > #pricing .views-row section.content article.node--type-frontpage .description,
-article.node--type-frontpage #main-content > #pricing .views-row .views-field-body .description, #main-content > #pricing .views-row .views-field-body article.node--type-frontpage .description,
-article.node--type-frontpage #main-content .view-pricing-products .view-content article.product section.content .description, #main-content .view-pricing-products .view-content article.product section.content article.node--type-frontpage .description,
-article.node--type-frontpage #main-content .view-pricing-products .view-content article.product .views-field-body .description, #main-content .view-pricing-products .view-content article.product .views-field-body article.node--type-frontpage .description,
-article.node--type-frontpage #main-content .view-pricing-products .view-content .views-row section.content .description, #main-content .view-pricing-products .view-content .views-row section.content article.node--type-frontpage .description,
-article.node--type-frontpage #main-content .view-pricing-products .view-content .views-row .views-field-body .description, #main-content .view-pricing-products .view-content .views-row .views-field-body article.node--type-frontpage .description {
+article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description {
   font-size: 0.9em;
   line-height: 1.3; }
 
@@ -2093,9 +2086,14 @@ article.card {
   #main-content > #pricing .views-row,
   #main-content .view-pricing-products .view-content article.product,
   #main-content .view-pricing-products .view-content .views-row {
-    flex: auto;
+    flex: 0 0 50%;
     text-align: center;
     padding: 2em 0; }
+    #main-content > #pricing article.product > header,
+    #main-content > #pricing .views-row > header,
+    #main-content .view-pricing-products .view-content article.product > header,
+    #main-content .view-pricing-products .view-content .views-row > header {
+      padding-bottom: 1.3em; }
     #main-content > #pricing article.product > header h1,
     #main-content > #pricing article.product .views-field-title,
     #main-content > #pricing .views-row > header h1,
@@ -2105,10 +2103,11 @@ article.card {
     #main-content .view-pricing-products .view-content .views-row > header h1,
     #main-content .view-pricing-products .view-content .views-row .views-field-title {
       font-size: 4em;
-      line-height: 1;
-      color: #fff; }
-    #main-content > #pricing article.product section.content,
-    #main-content > #pricing article.product .views-field-body,
+      line-height: 0.6;
+      color: #fff;
+      text-align: center;
+      word-spacing: 30000px; }
+    #main-content > #pricing article.product section.content, #main-content > #pricing article.product .views-field-body,
     #main-content > #pricing .views-row section.content,
     #main-content > #pricing .views-row .views-field-body,
     #main-content .view-pricing-products .view-content article.product section.content,
@@ -2116,60 +2115,113 @@ article.card {
     #main-content .view-pricing-products .view-content .views-row section.content,
     #main-content .view-pricing-products .view-content .views-row .views-field-body {
       color: #fff; }
-      #main-content > #pricing article.product section.content .description p,
-      #main-content > #pricing article.product .views-field-body .description p,
-      #main-content > #pricing .views-row section.content .description p,
-      #main-content > #pricing .views-row .views-field-body .description p,
-      #main-content .view-pricing-products .view-content article.product section.content .description p,
-      #main-content .view-pricing-products .view-content article.product .views-field-body .description p,
-      #main-content .view-pricing-products .view-content .views-row section.content .description p,
-      #main-content .view-pricing-products .view-content .views-row .views-field-body .description p {
-        margin: 0; }
-      #main-content > #pricing article.product section.content span.price,
-      #main-content > #pricing article.product .views-field-body span.price,
-      #main-content > #pricing .views-row section.content span.price,
-      #main-content > #pricing .views-row .views-field-body span.price,
-      #main-content .view-pricing-products .view-content article.product section.content span.price,
-      #main-content .view-pricing-products .view-content article.product .views-field-body span.price,
-      #main-content .view-pricing-products .view-content .views-row section.content span.price,
-      #main-content .view-pricing-products .view-content .views-row .views-field-body span.price {
-        font-size: 2em;
-        font-weight: 700; }
-    #main-content > #pricing article.product button,
-    #main-content > #pricing .views-row button,
-    #main-content .view-pricing-products .view-content article.product button,
-    #main-content .view-pricing-products .view-content .views-row button {
-      display: inline-block;
-      font-size: 0.9em;
-      font-weight: bold;
-      padding: 0.7em 1em;
-      margin-bottom: 0.3em;
-      background-color: #fff;
-      color: #000;
-      border-radius: 5px;
-      border: none;
-      background-color: #fff; }
+      #main-content > #pricing article.product section.content .description, #main-content > #pricing article.product .views-field-body .description,
+      #main-content > #pricing .views-row section.content .description,
+      #main-content > #pricing .views-row .views-field-body .description,
+      #main-content .view-pricing-products .view-content article.product section.content .description,
+      #main-content .view-pricing-products .view-content article.product .views-field-body .description,
+      #main-content .view-pricing-products .view-content .views-row section.content .description,
+      #main-content .view-pricing-products .view-content .views-row .views-field-body .description {
+        font-size: 1.134em; }
+        #main-content > #pricing article.product section.content .description p, #main-content > #pricing article.product .views-field-body .description p,
+        #main-content > #pricing .views-row section.content .description p,
+        #main-content > #pricing .views-row .views-field-body .description p,
+        #main-content .view-pricing-products .view-content article.product section.content .description p,
+        #main-content .view-pricing-products .view-content article.product .views-field-body .description p,
+        #main-content .view-pricing-products .view-content .views-row section.content .description p,
+        #main-content .view-pricing-products .view-content .views-row .views-field-body .description p {
+          margin: 0.3em; }
+    #main-content > #pricing article.product aside,
+    #main-content > #pricing .views-row aside,
+    #main-content .view-pricing-products .view-content article.product aside,
+    #main-content .view-pricing-products .view-content .views-row aside {
+      padding: 1em 0; }
+      #main-content > #pricing article.product aside .variation,
+      #main-content > #pricing .views-row aside .variation,
+      #main-content .view-pricing-products .view-content article.product aside .variation,
+      #main-content .view-pricing-products .view-content .views-row aside .variation {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: flex-end; }
+        #main-content > #pricing article.product aside .variation div.variation-description,
+        #main-content > #pricing .views-row aside .variation div.variation-description,
+        #main-content .view-pricing-products .view-content article.product aside .variation div.variation-description,
+        #main-content .view-pricing-products .view-content .views-row aside .variation div.variation-description {
+          flex: 0 0 6.7em;
+          font-size: 2.012em;
+          font-weight: 800;
+          color: #fff; }
+          #main-content > #pricing article.product aside .variation div.variation-description p,
+          #main-content > #pricing .views-row aside .variation div.variation-description p,
+          #main-content .view-pricing-products .view-content article.product aside .variation div.variation-description p,
+          #main-content .view-pricing-products .view-content .views-row aside .variation div.variation-description p {
+            margin: 0;
+            text-align: left; }
+        #main-content > #pricing article.product aside .variation button,
+        #main-content > #pricing .views-row aside .variation button,
+        #main-content .view-pricing-products .view-content article.product aside .variation button,
+        #main-content .view-pricing-products .view-content .views-row aside .variation button {
+          display: inline-block;
+          font-size: 0.9em;
+          font-weight: bold;
+          padding: 0.7em 1em;
+          margin-bottom: 0.3em;
+          background-color: #fff;
+          color: #000;
+          border-radius: 5px;
+          border: none;
+          background-color: #fff; }
     #main-content > #pricing article.product:nth-child(1),
     #main-content > #pricing .views-row:nth-child(1),
     #main-content .view-pricing-products .view-content article.product:nth-child(1),
     #main-content .view-pricing-products .view-content .views-row:nth-child(1) {
       background-color: #69cdcf; }
-      #main-content > #pricing article.product:nth-child(1) button,
-      #main-content > #pricing .views-row:nth-child(1) button,
-      #main-content .view-pricing-products .view-content article.product:nth-child(1) button,
-      #main-content .view-pricing-products .view-content .views-row:nth-child(1) button {
+      #main-content > #pricing article.product:nth-child(1) aside .variation button,
+      #main-content > #pricing .views-row:nth-child(1) aside .variation button,
+      #main-content .view-pricing-products .view-content article.product:nth-child(1) aside .variation button,
+      #main-content .view-pricing-products .view-content .views-row:nth-child(1) aside .variation button {
         color: #69cdcf; }
     #main-content > #pricing article.product:nth-child(2),
     #main-content > #pricing .views-row:nth-child(2),
     #main-content .view-pricing-products .view-content article.product:nth-child(2),
     #main-content .view-pricing-products .view-content .views-row:nth-child(2) {
       background-color: #ff9f50; }
-      #main-content > #pricing article.product:nth-child(2) button,
-      #main-content > #pricing .views-row:nth-child(2) button,
-      #main-content .view-pricing-products .view-content article.product:nth-child(2) button,
-      #main-content .view-pricing-products .view-content .views-row:nth-child(2) button {
+      #main-content > #pricing article.product:nth-child(2) aside .variation button,
+      #main-content > #pricing .views-row:nth-child(2) aside .variation button,
+      #main-content .view-pricing-products .view-content article.product:nth-child(2) aside .variation button,
+      #main-content .view-pricing-products .view-content .views-row:nth-child(2) aside .variation button {
         color: #ff9f50; }
 
+.modal {
+  position: relative; }
+
+#pricing-modal-login-register {
+  position: relative;
+  width: 100%;
+  text-align: left; }
+  #pricing-modal-login-register h2 {
+    margin: 0.4em 0 1.1em;
+    padding-right: 4em;
+    font-size: 1.2em;
+    font-weight: 300; }
+  #pricing-modal-login-register #login-register {
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap; }
+    #pricing-modal-login-register #login-register > section {
+      flex: 0 0 250px; }
+      #pricing-modal-login-register #login-register > section form .form-item, #pricing-modal-login-register #login-register > section form .form-actions {
+        margin: 0.5em 0;
+        max-width: none; }
+      #pricing-modal-login-register #login-register > section form .form-type-email,
+      #pricing-modal-login-register #login-register > section form .form-type-password,
+      #pricing-modal-login-register #login-register > section form .form-actions {
+        display: block; }
+      #pricing-modal-login-register #login-register > section form input[type="email"],
+      #pricing-modal-login-register #login-register > section form input[type="password"] {
+        max-width: 11em; }
+
 body:not(.path-home) footer[role="contentinfo"] {
   display: none; }
 

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

@@ -1374,48 +1374,114 @@ article.card{
   flex-flow: row nowrap;
   article.product,
   .views-row{
-    flex: auto;
-    // flex:0 0 50%;
+    flex:0 0 50%;
     text-align: center;
     padding: 2em 0;
+    >header{
+      padding-bottom: 1.3em;
+    }
     >header h1,
     .views-field-title{
       font-size: 4em;
-      line-height: 1;
+      line-height: 0.6;
       color: #fff;
+      text-align: center;
+      word-spacing: 30000px;
     }
-    section.content,
-    .views-field-body{
+    section.content, .views-field-body{
       color: #fff;
       .description{
-        @extend %front-col-description;
+        font-size: 1.134em;
         p{
-          margin: 0;
+          margin: 0.3em;
         }
       }
-      span.price{
-        font-size: 2em;
-        font-weight: 700;
-      }
     }
-    button{
-      @include btn;
-      background-color: #fff;
+    aside{
+      padding:1em 0;
+      .variation{
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items:flex-end;
+        div.variation-description{
+          flex: 0 0 6.7em;
+          font-size: 2.012em;
+          font-weight: 800;
+          color: #fff;
+          p{
+            margin:0;
+            text-align: left;
+          }
+        }
+        button{
+          @include btn;
+          background-color: #fff;
+        }
+      }
     }
     &:nth-child(1){
       background-color: $color-base;
-      button{
+      aside .variation button{
         color: $color-base;
       }
     }
     &:nth-child(2){
       background-color: $color-webshowroom;
-      button{
+      aside .variation button{
         color: $color-webshowroom;
       }
     }
   }
 }
+
+.modal{
+  position: relative;
+}
+#pricing-modal-login-register{
+  position: relative;
+  width: 100%;
+  text-align: left;
+  h2{
+    margin: 0.4em 0 1.1em;
+    padding-right: 4em;
+    font-size: 1.2em;
+    font-weight: 300;
+  }
+  #login-register{
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    >section{
+      flex:0 0 250px;
+      form{
+        .form-item, .form-actions {
+          margin: 0.5em 0;
+          max-width: none;
+        }
+        .form-type-email,
+        .form-type-password,
+        .form-actions{
+          display:block;
+        }
+        input[type="email"],
+        input[type="password"]{
+          max-width: 11em;
+        }
+      }
+    }
+    section.login{
+      form{
+        >div{
+          // display: block;
+        }
+      }
+    }
+    section.register{
+
+    }
+  }
+}
 //  ___         _
 // | __|__  ___| |_ ___ _ _
 // | _/ _ \/ _ \  _/ -_) '_|

web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql

@@ -4,6 +4,7 @@ fragment ProductsFields on Product {
   uuid
   bundle
   body
+  price_description
   path
   variations{
     id

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -1,29 +1,39 @@
 <template>
   <article class="product">
     <header>
-      <h1 v-html="product.title" />
+      <h1 v-html="product.title"/>
     </header>
     <section class="content">
-      <div class="description" v-html="product.body" />
+      <div class="description" v-html="product.body"/>
+      <!-- <div class="price-description" v-html="product.price_description"/> -->
     </section>
     <aside v-if="!isAdherent">
-      <button
+      <div
+        class="variation"
         v-for="variation in product.variations"
-        type="button"
-        name="addtocart"
-        @click.stop="checkaddtocart"
+        :key="variation.id"
       >
-        Commander {{ variation.price.value }}
-      </button>
+        <div class="variation-description" v-html="variation.description"/>
+        <button
+          type="button"
+          name="addtocart"
+          @click.stop="checkaddtocart"
+        >
+          Commander
+        </button>
+      </div>
+
     </aside>
 
     <Modal
       v-if="showLoginModal"
       @close="closeModal"
-      :styles="{width:'500px', height:'100%'}"
+      :styles="{width:'500px', height:'300px'}"
     >
-      <h2>Please login or register before continue.</h2>
-      <LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
+      <section id="pricing-modal-login-register">
+        <h2>{{ $t("materio.Please login or create a new account before ordering") }}</h2>
+        <LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
+      </section>
     </Modal>
 
   </article>

web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue

@@ -1,9 +1,13 @@
 <template>
   <div id="login-register">
-    <h3>Login</h3>
-    <LoginForm @onLogedIn="onLogedIn" />
-    <h3>Register</h3>
-    <RegisterForm @onRegistered="onRegistered" />
+    <section class="login">
+      <h3>{{ $t("default.Login") }} </h3>
+      <LoginForm @onLogedIn="onLogedIn" />
+    </section>
+    <section class="register">
+      <h3>{{ $t("default.Register a new account") }}</h3>
+      <RegisterForm @onRegistered="onRegistered" />
+    </section>
   </div>
 </template>