refactored front pricing to use graphql, refactored to add 2 products (web & web+showroom) each one with 2 variations (monthly, annual)

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

@@ -7,6 +7,7 @@ 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
@@ -40,6 +41,14 @@ content:
     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

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

@@ -7,6 +7,8 @@ dependencies:
     - core.entity_view_mode.commerce_product_variation.add_to_cart
     - 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
@@ -29,6 +31,7 @@ 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,6 +7,7 @@ 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
@@ -44,6 +45,13 @@ 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,6 +8,7 @@ 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
@@ -41,6 +42,7 @@ 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_variation.materio_product_variation_type.field_price_description.yml

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,23 @@
+uuid: 9a3272dc-0077-4def-bd19-6c401287e4a3
+langcode: en
+status: true
+dependencies:
+  module:
+    - commerce_product
+    - field_permissions
+    - text
+third_party_settings:
+  field_permissions:
+    permission_type: public
+id: commerce_product_variation.field_price_description
+field_name: field_price_description
+entity_type: commerce_product_variation
+type: text_long
+settings: {  }
+module: text
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/views.view.pricing.yml

@@ -1,9 +1,10 @@
 uuid: 85b6fa75-c392-415a-9e3f-58322aeba35f
 langcode: en
-status: true
+status: false
 dependencies:
   config:
     - commerce_product.commerce_product_variation_type.materio_product_variation_type
+    - core.entity_view_mode.commerce_product_variation.add_to_cart
     - field.storage.commerce_product_variation.field_description
     - field.storage.commerce_product_variation.field_multiple
     - system.menu.header
@@ -464,6 +465,57 @@ display:
           separator: ', '
           field_api_classes: false
           plugin_id: field
+        rendered_entity:
+          id: rendered_entity
+          table: commerce_product_variation
+          field: rendered_entity
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          view_mode: add_to_cart
+          entity_type: commerce_product_variation
+          plugin_id: rendered_entity
       filters:
         status:
           value: '1'
@@ -505,6 +557,11 @@ display:
         - 'languages:language_interface'
         - url.query_args
       tags:
+        - 'config:core.entity_view_display.commerce_product_variation.default.cart'
+        - 'config:core.entity_view_display.commerce_product_variation.default.summary'
+        - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.add_to_cart'
+        - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.default'
+        - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary'
         - 'config:field.storage.commerce_product_variation.field_description'
         - 'config:field.storage.commerce_product_variation.field_multiple'
   page_1:
@@ -584,6 +641,7 @@ display:
         - 'config:core.entity_view_display.commerce_product_variation.default.summary'
         - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.add_to_cart'
         - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.default'
+        - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary'
   rest_export_1:
     display_plugin: rest_export
     id: rest_export_1
@@ -633,5 +691,10 @@ display:
         - 'languages:language_interface'
         - request_format
       tags:
+        - 'config:core.entity_view_display.commerce_product_variation.default.cart'
+        - 'config:core.entity_view_display.commerce_product_variation.default.summary'
+        - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.add_to_cart'
+        - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.default'
+        - 'config:core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary'
         - 'config:field.storage.commerce_product_variation.field_description'
         - 'config:field.storage.commerce_product_variation.field_multiple'

config/sync/views.view.pricing_products.yml

@@ -0,0 +1,569 @@
+uuid: 4b5e7b90-17fd-49e5-9306-6c2f2d4da413
+langcode: en
+status: true
+dependencies:
+  config:
+    - commerce_product.commerce_product_type.materio_product_type
+    - field.storage.commerce_product.body
+  module:
+    - commerce
+    - commerce_product
+    - rest
+    - serialization
+    - text
+id: pricing_products
+label: Pricing
+module: views
+description: ''
+tag: ''
+base_table: commerce_product_field_data
+base_field: product_id
+display:
+  default:
+    display_plugin: default
+    id: default
+    display_title: Master
+    position: 0
+    display_options:
+      access:
+        type: none
+        options: {  }
+      cache:
+        type: tag
+        options: {  }
+      query:
+        type: views_query
+        options:
+          disable_sql_rewrite: false
+          distinct: false
+          replica: false
+          query_comment: ''
+          query_tags: {  }
+      exposed_form:
+        type: basic
+        options:
+          submit_button: Apply
+          reset_button: false
+          reset_button_label: Reset
+          exposed_sorts_label: 'Sort by'
+          expose_sort_order: true
+          sort_asc_label: Asc
+          sort_desc_label: Desc
+      pager:
+        type: mini
+        options:
+          items_per_page: 10
+          offset: 0
+          id: 0
+          total_pages: null
+          expose:
+            items_per_page: false
+            items_per_page_label: 'Items per page'
+            items_per_page_options: '5, 10, 25, 50'
+            items_per_page_options_all: false
+            items_per_page_options_all_label: '- All -'
+            offset: false
+            offset_label: Offset
+          tags:
+            previous: ‹‹
+            next: ››
+      style:
+        type: default
+        options:
+          grouping: {  }
+          row_class: ''
+          default_row_class: true
+      row:
+        type: fields
+      fields:
+        title:
+          table: commerce_product_field_data
+          field: title
+          id: title
+          entity_type: null
+          entity_field: title
+          plugin_id: field
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          settings: {  }
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        body:
+          id: body
+          table: commerce_product__body
+          field: body
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: text_default
+          settings: {  }
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          plugin_id: field
+        product_id:
+          id: product_id
+          table: commerce_product_field_data
+          field: product_id
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: true
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: number_integer
+          settings:
+            thousand_separator: ''
+            prefix_suffix: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          entity_type: commerce_product
+          entity_field: product_id
+          plugin_id: field
+        uuid:
+          id: uuid
+          table: commerce_product
+          field: uuid
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: true
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          settings:
+            link_to_entity: false
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          entity_type: commerce_product
+          entity_field: uuid
+          plugin_id: field
+        variations_target_id:
+          id: variations_target_id
+          table: commerce_product__variations
+          field: variations_target_id
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: target_id
+          type: entity_reference_entity_view
+          settings:
+            view_mode: add_to_cart
+          group_column: target_id
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: ul
+          separator: ', '
+          field_api_classes: false
+          entity_type: commerce_product
+          entity_field: variations
+          plugin_id: field
+      filters:
+        status:
+          value: '1'
+          table: commerce_product_field_data
+          field: status
+          plugin_id: boolean
+          entity_type: commerce_product
+          entity_field: status
+          id: status
+          expose:
+            operator: ''
+            operator_limit_selection: false
+            operator_list: {  }
+          group: 1
+        type:
+          id: type
+          table: commerce_product_field_data
+          field: type
+          value:
+            materio_product_type: materio_product_type
+          entity_type: commerce_product
+          entity_field: type
+          plugin_id: commerce_entity_bundle
+          expose:
+            operator_limit_selection: false
+            operator_list: {  }
+      sorts: {  }
+      title: Pricing
+      header: {  }
+      footer: {  }
+      empty: {  }
+      relationships: {  }
+      arguments: {  }
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url.query_args
+      tags:
+        - 'config:field.storage.commerce_product.body'
+  page_1:
+    display_plugin: page
+    id: page_1
+    display_title: Page
+    position: 1
+    display_options:
+      display_extenders:
+        views_ef_fieldset: {  }
+      path: pricing
+      group_by: false
+      defaults:
+        group_by: false
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url.query_args
+      tags:
+        - 'config:field.storage.commerce_product.body'
+  rest_export_1:
+    display_plugin: rest_export
+    id: rest_export_1
+    display_title: 'REST export'
+    position: 2
+    display_options:
+      display_extenders:
+        views_ef_fieldset: {  }
+      path: pricing_rest
+      style:
+        type: serializer
+      defaults:
+        style: false
+        row: false
+        fields: false
+      row:
+        type: data_field
+        options:
+          field_options:
+            title:
+              alias: ''
+              raw_output: false
+            body:
+              alias: ''
+              raw_output: false
+            variations_target_id:
+              alias: variations
+              raw_output: false
+      pager:
+        type: some
+        options:
+          items_per_page: 10
+          offset: 0
+      fields:
+        product_id:
+          id: product_id
+          table: commerce_product_field_data
+          field: product_id
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: number_integer
+          settings:
+            thousand_separator: ''
+            prefix_suffix: false
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          entity_type: commerce_product
+          entity_field: product_id
+          plugin_id: field
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - request_format
+      tags: {  }

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

@@ -1432,6 +1432,9 @@ header[role="banner"] {
       body.path-thematique header[role="banner"] #block-pagetitle h2 {
         color: #fff;
         background-color: #69cdcf; }
+      body.path-pricing header[role="banner"] #block-pagetitle h2 {
+        color: #fff;
+        background-color: #ff9f50; }
   header[role="banner"] #block-materiosapisearchblock {
     padding: 0; }
     header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .form-item, header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form input.button {
@@ -1501,7 +1504,14 @@ 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 .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 {
   font-size: 0.9em;
   line-height: 1.3; }
 
@@ -1553,6 +1563,7 @@ article.node--type-frontpage .node__content > section.home-database {
       background-color: #fff;
       color: #000;
       border-radius: 5px;
+      border: none;
       background-color: #fff;
       color: #69cdcf; }
   article.node--type-frontpage .node__content > section.home-database .cards-list-home {
@@ -1594,6 +1605,7 @@ article.node--type-frontpage .node__content > section.home-showrooms {
       background-color: #fff;
       color: #000;
       border-radius: 5px;
+      border: none;
       background-color: #fff;
       color: #50aa3c; }
   article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
@@ -1672,6 +1684,7 @@ article.node--type-frontpage .node__content > section.home-blabla {
       background-color: #fff;
       color: #000;
       border-radius: 5px;
+      border: none;
       background-color: #fff;
       color: #9458aa; }
   article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
@@ -1740,6 +1753,7 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
       background-color: #fff;
       color: #000;
       border-radius: 5px;
+      border: none;
       background-color: #fff; }
     article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) {
       background-color: #69cdcf; }
@@ -2071,6 +2085,91 @@ article.card {
       #showrooms article.showroom figure img {
         max-width: 100%; }
 
+#main-content > #pricing,
+#main-content .view-pricing-products .view-content {
+  display: flex;
+  flex-flow: row nowrap; }
+  #main-content > #pricing article.product,
+  #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;
+    text-align: center;
+    padding: 2em 0; }
+    #main-content > #pricing article.product > header h1,
+    #main-content > #pricing article.product .views-field-title,
+    #main-content > #pricing .views-row > header h1,
+    #main-content > #pricing .views-row .views-field-title,
+    #main-content .view-pricing-products .view-content article.product > header h1,
+    #main-content .view-pricing-products .view-content article.product .views-field-title,
+    #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,
+    #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,
+    #main-content .view-pricing-products .view-content article.product .views-field-body,
+    #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: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 {
+        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 {
+        color: #ff9f50; }
+
 body:not(.path-home) footer[role="contentinfo"] {
   display: none; }
 

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

@@ -356,6 +356,10 @@ header[role="banner"]{
         color: #fff;
         background-color: $color-base;
       }
+      body.path-pricing & {
+        color: #fff;
+        background-color: $color-webshowroom;
+      }
     }
   }
 
@@ -483,13 +487,25 @@ aside.messages{
 // |  _| '_/ _ \ ' \  _|
 // |_| |_| \___/_||_\__|
 
+@mixin btn{
+  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;
+}
+
 article.node--type-frontpage{
 
   %front-col-field__label{
     font-size: 3.5em;
     line-height: 1;
   }
-  %front-col-descritpion{
+  %front-col-description{
     font-size: 0.9em;
     line-height: 1.3;
   }
@@ -505,7 +521,7 @@ article.node--type-frontpage{
         @extend %front-col-field__label;
       }
       .field__item{
-        @extend %front-col-descritpion;
+        @extend %front-col-description;
       }
     }
   }
@@ -522,7 +538,7 @@ article.node--type-frontpage{
   //       @extend %front-col-field__label;
   //     }
   //     .field__item{
-  //       @extend %front-col-descritpion;
+  //       @extend %front-col-description;
   //     }
   //   }
   //   >div:nth-child(2){
@@ -543,7 +559,7 @@ article.node--type-frontpage{
         @extend %front-col-field__label;
       }
       .field__item{
-        @extend %front-col-descritpion;
+        @extend %front-col-description;
       }
     }
     >div:nth-child(2){
@@ -559,17 +575,6 @@ article.node--type-frontpage{
 
   .node__content{
 
-    @mixin btn{
-      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;
-    }
-
     &>section{
       &.home-intro{
         @extend %part-centered-layout;
@@ -882,7 +887,7 @@ article.node--type-frontpage{
               word-spacing: 30000px;
             }
             .field--name-field-description{
-              @extend %front-col-descritpion;
+              @extend %front-col-description;
               padding:0.5em;
               p{
                 margin: 0;
@@ -1135,7 +1140,6 @@ article.card{
   }
 }
 
-
 //  _____ _                   _   _
 // |_   _| |_  ___ _ __  __ _| |_(_)__ _ _  _ ___
 //   | | | ' \/ -_) '  \/ _` |  _| / _` | || / -_)
@@ -1192,11 +1196,10 @@ article.card{
 
 }
 
-
- //  ___ _      _    _
- // | _ ) |__ _| |__| |__ _
- // | _ \ / _` | '_ \ / _` |
- // |___/_\__,_|_.__/_\__,_|
+//  ___ _      _    _
+// | _ ) |__ _| |__| |__ _
+// | _ \ / _` | '_ \ / _` |
+// |___/_\__,_|_.__/_\__,_|
 #blabla{
 
 }
@@ -1333,10 +1336,10 @@ article.card{
   }
 }
 
- //  ___ _
- // / __| |_  _____ __ ___ _ ___  ___ _ __  ___
- // \__ \ ' \/ _ \ V  V / '_/ _ \/ _ \ '  \(_-<
- // |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
+//  ___ _
+// / __| |_  _____ __ ___ _ ___  ___ _ __  ___
+// \__ \ ' \/ _ \ V  V / '_/ _ \/ _ \ '  \(_-<
+// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
 #showrooms{
   width: calc(100% + #{$column_goutiere});
   article.showroom{
@@ -1360,7 +1363,59 @@ article.card{
 
 }
 
-
+//  ___     _    _
+// | _ \_ _(_)__(_)_ _  __ _
+// |  _/ '_| / _| | ' \/ _` |
+// |_| |_| |_\__|_|_||_\__, |
+//                     |___/
+#main-content>#pricing,
+#main-content .view-pricing-products .view-content{
+  display: flex;
+  flex-flow: row nowrap;
+  article.product,
+  .views-row{
+    flex: auto;
+    // flex:0 0 50%;
+    text-align: center;
+    padding: 2em 0;
+    >header h1,
+    .views-field-title{
+      font-size: 4em;
+      line-height: 1;
+      color: #fff;
+    }
+    section.content,
+    .views-field-body{
+      color: #fff;
+      .description{
+        @extend %front-col-description;
+        p{
+          margin: 0;
+        }
+      }
+      span.price{
+        font-size: 2em;
+        font-weight: 700;
+      }
+    }
+    button{
+      @include btn;
+      background-color: #fff;
+    }
+    &:nth-child(1){
+      background-color: $color-base;
+      button{
+        color: $color-base;
+      }
+    }
+    &:nth-child(2){
+      background-color: $color-webshowroom;
+      button{
+        color: $color-webshowroom;
+      }
+    }
+  }
+}
 //  ___         _
 // | __|__  ___| |_ ___ _ _
 // | _/ _ \/ _ \  _/ -_) '_|

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

@@ -0,0 +1,19 @@
+fragment ProductsFields on Product {
+  id
+  title
+  uuid
+  bundle
+  body
+  path
+  variations{
+    id
+    uuid
+    title
+    description
+    sku
+    price{
+      value
+      currency
+    }
+  }
+}

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

@@ -4,24 +4,16 @@
       <h1 v-html="product.title" />
     </header>
     <section class="content">
-      <div class="description" v-html="product.field_description" />
-      <span class="price">{{ product.price__number }}</span>
+      <div class="description" v-html="product.body" />
     </section>
     <aside v-if="!isAdherent">
-      <input
-        v-if="product.field_multiple"
-        v-model="quantity"
-        placeholder="quantity"
-        type="text"
-        name="quantity"
-        value="1"
-      />
       <button
+        v-for="variation in product.variations"
         type="button"
         name="addtocart"
         @click.stop="checkaddtocart"
       >
-        Commander
+        Commander {{ variation.price.value }}
       </button>
     </aside>
 

web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="pricing">
-    <div class="loading" v-if="!pricing.length">
+    <div class="loading" v-if="!products.length">
       <span>Loading ...</span>
     </div>
     <Product
       v-else
-      v-for="product in pricing"
+      v-for="product in products"
       v-bind:key="product.uuid"
       :product="product"
     />
@@ -27,16 +27,16 @@ export default {
   // },
   computed: {
     ...mapState({
-      pricing: state => state.Pages.pricing
+      products: state => state.Pages.products
     })
   },
   created(){
-    if(!this.pricing.length)
-      this.getPricing()
+    if(!this.products.length)
+      this.getProducts()
   },
   methods: {
     ...mapActions({
-      getPricing: 'Pages/getPricing'
+      getProducts: 'Pages/getProducts'
     })
   },
   components: {

web/themes/custom/materiotheme/vuejs/store/modules/pages.js

@@ -1,14 +1,17 @@
-// import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
-// import { MA } from 'vuejs/api/ma-axios'
-// import qs from 'querystring-es3'
+
+import { MGQ } from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import productsGQL from 'vuejs/api/gql/products.fragment.gql'
 
 export default {
   namespaced: true,
 
   // initial state
   state: {
-    pricing: {}
+    products_ids: [],
+    products: []
   },
 
   // getters
@@ -16,23 +19,53 @@ export default {
 
   // mutations
   mutations: {
-    setPricing (state, page) {
-      state.pricing = page
+    setProductsIds (state, ids) {
+      state.products_ids = ids
+    },
+    setProducts (state, p) {
+      state.products = p
     }
   },
 
   // actions
   actions: {
-    getPricing ({ dispatch, commit, state }) {
+    getProducts({ dispatch, commit, state }) {
+      dispatch('loadProductsIds')
+    },
+    loadProductsIds({ dispatch, commit, state }) {
       REST.get('/pricing_rest?_format=json', {})
         .then(({ data }) => {
-          console.log('pricing REST: data', data)
-          commit('setPricing', data)
+          console.log('getProducts REST: data', data)
+          let ids = [];
+          for (var i = 0; i < data.length; i++) {
+            ids.push(data[i].product_id)
+          }
+          commit('setProductsIds', ids)
+          dispatch('loadProducts')
         })
         .catch((error) => {
           console.warn('Issue with pricing', error)
           Promise.reject(error)
         })
+    },
+    loadProducts({ dispatch, commit, state }) {
+      let ast = gql`{
+        products(ids: [${state.products_ids}]) {
+          ...ProductsFields
+        }
+      }
+      ${ productsGQL }
+      `
+      MGQ.post('', { query: print(ast) })
+        .then(( resp ) => {
+          console.log('loadProductsGQL resp', resp )
+          commit('setProducts', resp.data.data.products)
+        })
+        .catch(error => {
+          console.warn('Issue with loadProducts', error)
+          Promise.reject(error)
+        })
     }
+
   }
 }