From 7f027f322c514cf456d4c0f04d90e467c6e080d9 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 4 Jan 2021 22:11:11 +0100 Subject: [PATCH] refactored front pricing to use graphql, refactored to add 2 products (web & web+showroom) each one with 2 variations (monthly, annual) --- ...materio_product_variation_type.default.yml | 9 + ...rio_product_variation_type.add_to_cart.yml | 3 + ...materio_product_variation_type.default.yml | 8 + ...materio_product_variation_type.summary.yml | 2 + ...variation_type.field_price_description.yml | 21 + ...duct_variation.field_price_description.yml | 23 + config/sync/views.view.pricing.yml | 65 +- config/sync/views.view.pricing_products.yml | 569 ++++++++++++++++++ .../custom/materiotheme/assets/dist/main.css | 101 +++- .../custom/materiotheme/assets/dist/main.js | 20 +- .../materiotheme/assets/styles/main.scss | 109 +++- .../vuejs/api/gql/products.fragment.gql | 19 + .../vuejs/components/Content/Product.vue | 14 +- .../vuejs/components/Pages/Pricing.vue | 12 +- .../materiotheme/vuejs/store/modules/pages.js | 51 +- 15 files changed, 967 insertions(+), 59 deletions(-) create mode 100644 config/sync/field.field.commerce_product_variation.materio_product_variation_type.field_price_description.yml create mode 100644 config/sync/field.storage.commerce_product_variation.field_price_description.yml create mode 100644 config/sync/views.view.pricing_products.yml create mode 100644 web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql diff --git a/config/sync/core.entity_form_display.commerce_product_variation.materio_product_variation_type.default.yml b/config/sync/core.entity_form_display.commerce_product_variation.materio_product_variation_type.default.yml index 9ab3ac8..5d4b264 100644 --- a/config/sync/core.entity_form_display.commerce_product_variation.materio_product_variation_type.default.yml +++ b/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 diff --git a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.add_to_cart.yml b/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.add_to_cart.yml index 8a06db7..2271266 100644 --- a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.add_to_cart.yml +++ b/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 diff --git a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.default.yml b/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.default.yml index 64870f0..b7ca90f 100644 --- a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.default.yml +++ b/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 diff --git a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml b/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml index fba4666..db32569 100644 --- a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml +++ b/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 diff --git a/config/sync/field.field.commerce_product_variation.materio_product_variation_type.field_price_description.yml b/config/sync/field.field.commerce_product_variation.materio_product_variation_type.field_price_description.yml new file mode 100644 index 0000000..bc71ddc --- /dev/null +++ b/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 diff --git a/config/sync/field.storage.commerce_product_variation.field_price_description.yml b/config/sync/field.storage.commerce_product_variation.field_price_description.yml new file mode 100644 index 0000000..9854b32 --- /dev/null +++ b/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 diff --git a/config/sync/views.view.pricing.yml b/config/sync/views.view.pricing.yml index 9a4eff4..5cbd3d8 100644 --- a/config/sync/views.view.pricing.yml +++ b/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' diff --git a/config/sync/views.view.pricing_products.yml b/config/sync/views.view.pricing_products.yml new file mode 100644 index 0000000..afcaae4 --- /dev/null +++ b/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: { } diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 04c5b52..9f25086 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/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; } diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index a300200..b30bc26 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/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"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 1126f84..630d8c5 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/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; + } + } + } +} // ___ _ // | __|__ ___| |_ ___ _ _ // | _/ _ \/ _ \ _/ -_) '_| diff --git a/web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql b/web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql new file mode 100644 index 0000000..6b2c823 --- /dev/null +++ b/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 + } + } +} diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue b/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue index 2cca46b..595192d 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue @@ -4,24 +4,16 @@

-
- {{ product.price__number }} +
diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue index 5e8d611..8387989 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue @@ -1,11 +1,11 @@