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

refactored checkout flow on button click from pricing page, started to redsign the checkout page

This commit is contained in:
Bachir Soussi Chiadmi 2021-01-06 12:23:27 +01:00
parent ff03643ec7
commit d9ccca3a5e
11 changed files with 204 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
config/sync/commerce_checkout.commerce_checkout_flow.materio_checkout_flow.yml
View File

@ -17,36 +17,42 @@ configuration:
allow_registration: true
step: login
weight: 0
email_registration_login:
allow_guest_checkout: true
allow_registration: true
step: login
weight: 1
contact_information:
double_entry: false
step: order_information
weight: 2
payment_information:
step: order_information
weight: 3
review:
step: review
weight: 4
payment_process:
capture: true
step: payment
weight: 5
completion_message:
message:
value: "Your order number is [commerce_order:order_number].\r\nYou can view your order on your account page when logged in."
format: plain_text
step: complete
weight: 6
completion_register:
step: complete
weight: 7
order_summary:
view: ''
view: commerce_checkout_order_summary
step: _sidebar
weight: 8
contact_information:
double_entry: false
step: order_information
weight: 2
payment_process:
capture: true
step: payment
weight: 5
payment_information:
step: order_information
weight: 3
coupon_redemption:
allow_multiple: false
step: _sidebar
weight: 9
email_registration_login:
allow_guest_checkout: true
allow_registration: true
step: login
weight: 1
email_registration_completion_registration:
step: _disabled
weight: 10

59
config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml Normal file
View File

@ -0,0 +1,59 @@
uuid: 1fb21500-e88c-4213-a350-d79575ab3b29
langcode: en
status: true
dependencies:
config:
- commerce_product.commerce_product_variation_type.materio_product_variation_type
- core.entity_view_mode.commerce_product_variation.order_summary
- 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.license_expiration
- field.field.commerce_product_variation.materio_product_variation_type.license_type
- field.field.commerce_product_variation.materio_product_variation_type.subscription_type
module:
- commerce_variation_cart_form
- text
third_party_settings:
commerce_variation_cart_form:
combine: '1'
id: commerce_product_variation.materio_product_variation_type.order_summary
targetEntityType: commerce_product_variation
bundle: materio_product_variation_type
mode: order_summary
content:
field_description:
weight: 2
label: hidden
settings: { }
third_party_settings: { }
type: text_default
region: content
product_id:
type: entity_reference_label
weight: 0
region: content
label: hidden
settings:
link: false
third_party_settings: { }
title:
type: string
weight: 1
region: content
label: hidden
settings:
link_to_entity: false
third_party_settings: { }
hidden:
billing_schedule: true
commerce_variation_cart_form: true
field_multiple: true
langcode: true
license_expiration: true
license_type: true
list_price: true
price: true
search_api_excerpt: true
sku: true
subscription_type: true

10
config/sync/core.entity_view_mode.commerce_product_variation.order_summary.yml Normal file
View File

@ -0,0 +1,10 @@
uuid: 9fdff172-c2b2-46a8-b998-b7a869e0de52
langcode: en
status: true
dependencies:
module:
- commerce_product
id: commerce_product_variation.order_summary
label: 'Order Summary'
targetEntityType: commerce_product_variation
cache: true

2
config/sync/language/fr/views.view.commerce_checkout_order_summary.yml
View File

@ -10,8 +10,6 @@ display:
sort_asc_label: Asc
sort_desc_label: Desc
fields:
quantity:
separator: ', '
purchased_entity:
separator: ', '
total_price__number:

74
config/sync/views.view.commerce_checkout_order_summary.yml
View File

@ -84,74 +84,6 @@ display:
hide_empty: false
default_field_elements: true
fields:
quantity:
id: quantity
table: commerce_order_item
field: quantity
relationship: order_items
group_type: group
admin_label: ''
label: ''
exclude: false
alter:
alter_text: true
text: '{{ quantity }} x'
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_decimal
settings:
thousand_separator: ''
prefix_suffix: false
decimal_separator: .
scale: 0
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_order_item
entity_field: quantity
plugin_id: field
purchased_entity:
id: purchased_entity
table: commerce_order_item
@ -192,7 +124,7 @@ display:
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: true
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
@ -203,7 +135,7 @@ display:
click_sort_column: target_id
type: entity_reference_entity_view
settings:
view_mode: summary
view_mode: order_summary
group_column: target_id
group_columns: { }
group_rows: true
@ -224,7 +156,7 @@ display:
relationship: order_items
group_type: group
admin_label: ''
label: ''
label: TTC
exclude: false
alter:
alter_text: false

10
config/sync/views.view.pricing_products.yml
View File

@ -5,6 +5,7 @@ dependencies:
config:
- commerce_product.commerce_product_type.materio_product_type
- field.storage.commerce_product.body
- system.menu.header
module:
- commerce
- commerce_product
@ -452,6 +453,15 @@ display:
group_by: false
defaults:
group_by: false
menu:
type: normal
title: Pricing
description: ''
expanded: false
parent: ''
weight: 3
context: '0'
menu_name: header
cache_metadata:
max-age: -1
contexts:

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

@ -2222,6 +2222,34 @@ article.card {
#pricing-modal-login-register #login-register > section form input[type="password"] {
max-width: 11em; }
#main-content form.commerce-checkout-flow {
max-width: 641px; }
#main-content form.commerce-checkout-flow .layout-checkout-form {
display: flex;
flex-flow: column; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main {
width: 100%;
float: none;
order: 2;
background-color: #ff9f50;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary {
width: 100%;
float: none;
order: 1; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary > h3 {
display: none; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary {
background-color: #69cdcf;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption {
background-color: #50aa3c;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption input[type="text"] {
width: 5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer {
order: 3; }
body:not(.path-home) footer[role="contentinfo"] {
display: none; }

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

File diff suppressed because one or more lines are too long

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

@ -1482,6 +1482,52 @@ article.card{
}
}
}
#main-content form.commerce-checkout-flow{
$w:3;
max-width: $column_width * $w + $column_goutiere * ($w - 1);
.layout-checkout-form{
display: flex;
flex-flow: column;
.layout-region-checkout-main{
// disable default style
width:100%;
float: none;
// apply custom style
order:2;
background-color: $color-webshowroom;
padding: 1em;
}
.layout-region-checkout-secondary{
// disable default style
width:100%;
float: none;
// apply custom style
order: 1;
// display: flex;
// flex-flow: row nowrap;
// >.checkout-pane{
// flex: 0 0 50%;
// }
>h3{display:none;}
#edit-order-summary{
background-color: $color-base;
padding:1em;
}
#edit-coupon-redemption{
background-color: $color-showrooms;
padding:1em;
input[type="text"]{
width: 5em;
}
}
}
.layout-region-checkout-footer{
order: 3;
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|

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

@ -17,9 +17,9 @@
<button
type="button"
name="addtocart"
@click.stop="checkaddtocart"
@click.stop="checkaddtocart($event, variation.id)"
>
Commander
{{ $t("default.Add to cart") }}
</button>
</div>
@ -32,7 +32,11 @@
>
<section id="pricing-modal-login-register">
<h2>{{ $t("materio.Please login or create a new account before ordering") }}</h2>
<LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
<LoginRegister
:callbackargs="showLoginModal"
@onLogedIn="onLogedIn"
@onRegistered="onRegistered"
/>
</section>
</Modal>
@ -73,27 +77,27 @@ export default {
closeModal () {
this.showLoginModal = false;
},
checkaddtocart() {
checkaddtocart(e, variation_id) {
console.log('checkaddtocart');
if(!this.isloggedin){
// show popup for login or register
// login or register event will be catched by onLogedin or onRegistered
this.showLoginModal = true
this.showLoginModal = variation_id
}else{
// if already logedin directly goes to cart operations
this.addtocart()
this.addtocart(variation_id)
}
},
// event bubbled from modal login form
onLogedIn () {
console.log('Product: onLogedIn');
this.addtocart()
onLogedIn (variation_id) {
console.log('Product: onLogedIn. variation_id', variation_id);
this.addtocart(variation_id)
},
// event bubbled from modal register form
onRegistered () {
console.log('Product: onRegistered');
this.addtocart()
onRegistered (variation_id) {
console.log('Product: onRegistered. variation_id', variation_id);
this.addtocart(variation_id)
},
getCarts () {
// this is bugging on stage
@ -126,7 +130,7 @@ export default {
// return all the promises as one
return Promise.all(promises)
},
addtocart () {
addtocart (variation_id) {
console.log("addtocart")
this.getCarts()
.then(({data}) => {
@ -137,7 +141,7 @@ export default {
// fill the cart with new product
REST.post(`/cart/add?_format=json`, [{
"purchased_entity_type": "commerce_product_variation",
"purchased_entity_id": this.product.variation_id,
"purchased_entity_id": variation_id,
"quantity": this.quantity
}])
.then(({ data }) => {
@ -146,7 +150,7 @@ export default {
// redirect to /cart
// window.location.href = "/cart"
// TODO: redirect to checkout instead of cart
window.location.href = `/checkout/${data[0].order_id}/order_information`
window.location.href = `/checkout/${data[0].order_id.target_id}/order_information`
})
.catch(( error ) => {
console.warn('Issue with product add to cart', error)

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

@ -24,16 +24,17 @@ export default {
password:null,
registerEmail:null
}),
props:['callbackargs'],
methods: {
...mapActions({
userLogin: 'User/userLogin',
userRegister: 'User/userRegister'
}),
onLogedIn () {
this.$emit('onLogedIn')
this.$emit('onLogedIn', this.callbackargs)
},
onRegistered () {
this.$emit('onRegistered')
this.$emit('onRegistered', this.callbackargs)
}
},
components: {