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

This commit is contained in:
Bachir Soussi Chiadmi 2021-01-04 22:11:11 +01:00
parent 830f5a5909
commit 7f027f322c
15 changed files with 967 additions and 59 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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");
/***/ }),

View File

@ -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;
}
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|

View File

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

View File

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

View File

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

View File

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