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/dist/main.js

@@ -1206,7 +1206,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _Product = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Product */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  name: \"Pricing\",\n  // data() {\n  //   return {\n  //     items:[],\n  //     page:0\n  //   }\n  // },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    pricing: function pricing(state) {\n      return state.Pages.pricing;\n    }\n  })),\n  created: function created() {\n    if (!this.pricing.length) this.getPricing();\n  },\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    getPricing: 'Pages/getPricing'\n  })),\n  components: {\n    Product: _Product.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _Product = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Product */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  name: \"Pricing\",\n  // data() {\n  //   return {\n  //     items:[],\n  //     page:0\n  //   }\n  // },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    products: function products(state) {\n      return state.Pages.products;\n    }\n  })),\n  created: function created() {\n    if (!this.products.length) this.getProducts();\n  },\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    getProducts: 'Pages/getProducts'\n  })),\n  components: {\n    Product: _Product.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 
@@ -1535,7 +1535,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\n// import { JSONAPI } from 'vuejs/api/json-axios'\n// import { MA } from 'vuejs/api/ma-axios'\n// import qs from 'querystring-es3'\nvar _default = {\n  namespaced: true,\n  // initial state\n  state: {\n    pricing: {}\n  },\n  // getters\n  getters: {},\n  // mutations\n  mutations: {\n    setPricing: function setPricing(state, page) {\n      state.pricing = page;\n    }\n  },\n  // actions\n  actions: {\n    getPricing: function getPricing(_ref) {\n      var dispatch = _ref.dispatch,\n          commit = _ref.commit,\n          state = _ref.state;\n\n      _restAxios.REST.get('/pricing_rest?_format=json', {}).then(function (_ref2) {\n        var data = _ref2.data;\n        console.log('pricing REST: data', data);\n        commit('setPricing', data);\n      }).catch(function (error) {\n        console.warn('Issue with pricing', error);\n        Promise.reject(error);\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/store/modules/pages.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _productsFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/products.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n  var data = _taggedTemplateLiteral([\"{\\n        products(ids: [\", \"]) {\\n          ...ProductsFields\\n        }\\n      }\\n      \", \"\\n      \"]);\n\n  _templateObject = function _templateObject() {\n    return data;\n  };\n\n  return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar _default = {\n  namespaced: true,\n  // initial state\n  state: {\n    products_ids: [],\n    products: []\n  },\n  // getters\n  getters: {},\n  // mutations\n  mutations: {\n    setProductsIds: function setProductsIds(state, ids) {\n      state.products_ids = ids;\n    },\n    setProducts: function setProducts(state, p) {\n      state.products = p;\n    }\n  },\n  // actions\n  actions: {\n    getProducts: function getProducts(_ref) {\n      var dispatch = _ref.dispatch,\n          commit = _ref.commit,\n          state = _ref.state;\n      dispatch('loadProductsIds');\n    },\n    loadProductsIds: function loadProductsIds(_ref2) {\n      var dispatch = _ref2.dispatch,\n          commit = _ref2.commit,\n          state = _ref2.state;\n\n      _restAxios.REST.get('/pricing_rest?_format=json', {}).then(function (_ref3) {\n        var data = _ref3.data;\n        console.log('getProducts REST: data', data);\n        var ids = [];\n\n        for (var i = 0; i < data.length; i++) {\n          ids.push(data[i].product_id);\n        }\n\n        commit('setProductsIds', ids);\n        dispatch('loadProducts');\n      }).catch(function (error) {\n        console.warn('Issue with pricing', error);\n        Promise.reject(error);\n      });\n    },\n    loadProducts: function loadProducts(_ref4) {\n      var dispatch = _ref4.dispatch,\n          commit = _ref4.commit,\n          state = _ref4.state;\n      var ast = (0, _graphqlTag.default)(_templateObject(), state.products_ids, _productsFragment.default);\n\n      _graphqlAxios.MGQ.post('', {\n        query: (0, _printer.print)(ast)\n      }).then(function (resp) {\n        console.log('loadProductsGQL resp', resp);\n        commit('setProducts', resp.data.data.products);\n      }).catch(function (error) {\n        console.warn('Issue with loadProducts', error);\n        Promise.reject(error);\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/store/modules/pages.js?");
 
 /***/ }),
 
@@ -1623,6 +1623,18 @@ eval("\n    var doc = {\"kind\":\"Document\",\"definitions\":[{\"kind\":\"Fragme
 
 /***/ }),
 
+/***/ "./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql":
+/*!****************************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql ***!
+  \****************************************************************************/
+/*! unknown exports (runtime-defined) */
+/*! runtime requirements: module */
+/***/ ((module) => {
+
+eval("\n    var doc = {\"kind\":\"Document\",\"definitions\":[{\"kind\":\"FragmentDefinition\",\"name\":{\"kind\":\"Name\",\"value\":\"ProductsFields\"},\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"Product\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"title\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"uuid\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"bundle\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"body\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"path\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"variations\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"uuid\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"title\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"description\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"sku\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"price\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"value\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"currency\"},\"arguments\":[],\"directives\":[]}]}}]}}]}}],\"loc\":{\"start\":0,\"end\":194}};\n    doc.loc.source = {\"body\":\"fragment ProductsFields on Product {\\n  id\\n  title\\n  uuid\\n  bundle\\n  body\\n  path\\n  variations{\\n    id\\n    uuid\\n    title\\n    description\\n    sku\\n    price{\\n      value\\n      currency\\n    }\\n  }\\n}\\n\",\"name\":\"GraphQL request\",\"locationOffset\":{\"line\":1,\"column\":1}};\n  \n\n    var names = {};\n    function unique(defs) {\n      return defs.filter(\n        function(def) {\n          if (def.kind !== 'FragmentDefinition') return true;\n          var name = def.name.value\n          if (names[name]) {\n            return false;\n          } else {\n            names[name] = true;\n            return true;\n          }\n        }\n      )\n    }\n  \n\n      module.exports = doc;\n    \n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql?");
+
+/***/ }),
+
 /***/ "./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql":
 /*!*********************************************************************************!*\
   !*** ./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql ***!
@@ -3215,7 +3227,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"render\": () => /* binding */ render,\n/* harmony export */   \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"article\",\n    { staticClass: \"product\" },\n    [\n      _c(\"header\", [\n        _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.product.title) } })\n      ]),\n      _vm._v(\" \"),\n      _c(\"section\", { staticClass: \"content\" }, [\n        _c(\"div\", {\n          staticClass: \"description\",\n          domProps: { innerHTML: _vm._s(_vm.product.field_description) }\n        }),\n        _vm._v(\" \"),\n        _c(\"span\", { staticClass: \"price\" }, [\n          _vm._v(_vm._s(_vm.product.price__number))\n        ])\n      ]),\n      _vm._v(\" \"),\n      !_vm.isAdherent\n        ? _c(\"aside\", [\n            _vm.product.field_multiple\n              ? _c(\"input\", {\n                  directives: [\n                    {\n                      name: \"model\",\n                      rawName: \"v-model\",\n                      value: _vm.quantity,\n                      expression: \"quantity\"\n                    }\n                  ],\n                  attrs: {\n                    placeholder: \"quantity\",\n                    type: \"text\",\n                    name: \"quantity\",\n                    value: \"1\"\n                  },\n                  domProps: { value: _vm.quantity },\n                  on: {\n                    input: function($event) {\n                      if ($event.target.composing) {\n                        return\n                      }\n                      _vm.quantity = $event.target.value\n                    }\n                  }\n                })\n              : _vm._e(),\n            _vm._v(\" \"),\n            _c(\n              \"button\",\n              {\n                attrs: { type: \"button\", name: \"addtocart\" },\n                on: {\n                  click: function($event) {\n                    $event.stopPropagation()\n                    return _vm.checkaddtocart($event)\n                  }\n                }\n              },\n              [_vm._v(\"\\n      Commander\\n    \")]\n            )\n          ])\n        : _vm._e(),\n      _vm._v(\" \"),\n      _vm.showLoginModal\n        ? _c(\n            \"Modal\",\n            {\n              attrs: { styles: { width: \"500px\", height: \"100%\" } },\n              on: { close: _vm.closeModal }\n            },\n            [\n              _c(\"h2\", [_vm._v(\"Please login or register before continue.\")]),\n              _vm._v(\" \"),\n              _c(\"LoginRegister\", {\n                on: { onLogedIn: _vm.onLogedIn, onRegistered: _vm.onRegistered }\n              })\n            ],\n            1\n          )\n        : _vm._e()\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"render\": () => /* binding */ render,\n/* harmony export */   \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"article\",\n    { staticClass: \"product\" },\n    [\n      _c(\"header\", [\n        _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.product.title) } })\n      ]),\n      _vm._v(\" \"),\n      _c(\"section\", { staticClass: \"content\" }, [\n        _c(\"div\", {\n          staticClass: \"description\",\n          domProps: { innerHTML: _vm._s(_vm.product.body) }\n        })\n      ]),\n      _vm._v(\" \"),\n      !_vm.isAdherent\n        ? _c(\n            \"aside\",\n            _vm._l(_vm.product.variations, function(variation) {\n              return _c(\n                \"button\",\n                {\n                  attrs: { type: \"button\", name: \"addtocart\" },\n                  on: {\n                    click: function($event) {\n                      $event.stopPropagation()\n                      return _vm.checkaddtocart($event)\n                    }\n                  }\n                },\n                [\n                  _vm._v(\n                    \"\\n      Commander \" +\n                      _vm._s(variation.price.value) +\n                      \"\\n    \"\n                  )\n                ]\n              )\n            }),\n            0\n          )\n        : _vm._e(),\n      _vm._v(\" \"),\n      _vm.showLoginModal\n        ? _c(\n            \"Modal\",\n            {\n              attrs: { styles: { width: \"500px\", height: \"100%\" } },\n              on: { close: _vm.closeModal }\n            },\n            [\n              _c(\"h2\", [_vm._v(\"Please login or register before continue.\")]),\n              _vm._v(\" \"),\n              _c(\"LoginRegister\", {\n                on: { onLogedIn: _vm.onLogedIn, onRegistered: _vm.onRegistered }\n              })\n            ],\n            1\n          )\n        : _vm._e()\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 
@@ -3327,7 +3339,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"render\": () => /* binding */ render,\n/* harmony export */   \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    { attrs: { id: \"pricing\" } },\n    [\n      !_vm.pricing.length\n        ? _c(\"div\", { staticClass: \"loading\" }, [\n            _c(\"span\", [_vm._v(\"Loading ...\")])\n          ])\n        : _vm._l(_vm.pricing, function(product) {\n            return _c(\"Product\", {\n              key: product.uuid,\n              attrs: { product: product }\n            })\n          })\n    ],\n    2\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"render\": () => /* binding */ render,\n/* harmony export */   \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    { attrs: { id: \"pricing\" } },\n    [\n      !_vm.products.length\n        ? _c(\"div\", { staticClass: \"loading\" }, [\n            _c(\"span\", [_vm._v(\"Loading ...\")])\n          ])\n        : _vm._l(_vm.products, function(product) {\n            return _c(\"Product\", {\n              key: product.uuid,\n              attrs: { product: product }\n            })\n          })\n    ],\n    2\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

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" />
+      <div class="description" v-html="product.body" />
-      <span class="price">{{ product.price__number }}</span>
     </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)
+    if(!this.products.length)
-      this.getPricing()
+      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) {
+    setProductsIds (state, ids) {
-      state.pricing = page
+      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)
+          console.log('getProducts REST: data', data)
-          commit('setPricing', 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)
+        })
+    }
+
+  }
 }