bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
Bachir Soussi Chiadmi 2021-01-05 13:03:46 +01:00
parent 7f027f322c
commit ff03643ec7
17 changed files with 315 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
config/sync/core.entity_form_display.commerce_product.materio_product_type.default.yml
View File

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

33
config/sync/core.entity_form_display.commerce_product_variation.materio_product_variation_type.default.yml
View File

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

31
config/sync/core.entity_view_display.commerce_product.materio_product_type.default.yml
View File

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

2
config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.add_to_cart.yml
View File

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

8
config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.default.yml
View File

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

2
config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml
View File

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

21
config/sync/field.field.commerce_product.materio_product_type.field_price_description.yml Normal file
View File

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

21
config/sync/field.field.commerce_product_variation.materio_product_variation_type.field_price_description.yml
View File

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

6
config/sync/field.storage.commerce_product_variation.field_price_description.yml → config/sync/field.storage.commerce_product.field_price_description.yml
View File

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

1
web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls
View File

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

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

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

128
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

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

20
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

92
web/themes/custom/materiotheme/assets/styles/main.scss
View File

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

1
web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql
View File

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

18
web/themes/custom/materiotheme/vuejs/components/Content/Product.vue
View File

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

8
web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue
View File

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