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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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