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

refactored checkout workflow with stripe

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-01-11 21:16:42 +01:00
parent 2df6e53aa0
commit 02c983e7e0
48 changed files with 1154 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,6 +45,27 @@ div.description[data-v-7bb795f8] {
max-width: 30%;
margin: 0;
}
.form-type-password input.weak[data-v-2acc57a0] {
border-width: 2px;
border-color: red !important;
}
.form-type-password input.weak[data-v-2acc57a0]:focus {
outline: none;
}
.form-type-password input.medium[data-v-2acc57a0] {
border-width: 2px;
border-color: orange !important;
}
.form-type-password input.medium[data-v-2acc57a0]:focus {
outline: none;
}
.form-type-password input.strong[data-v-2acc57a0] {
border-width: 2px;
border-color: green !important;
}
.form-type-password input.strong[data-v-2acc57a0]:focus {
outline: none;
}
input[data-v-2acc57a0] {
box-sizing: content-box;
max-width: 100%;
@@ -110,6 +131,14 @@ p a {
width: 100%;
border-bottom: 1px dotted #000; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
border-radius: 5px;
border: 0.5px solid #aaa;
padding: 0.3em 0.4em; }
.col-1, .small-col-1, .med-col-1, .large-col-1, .col-2, .small-col-2, .med-col-2, .large-col-2, .col-3, .small-col-3, .med-col-3, .large-col-3, .col-4, .small-col-4, .med-col-4, .large-col-4, .col-5, .small-col-5, .med-col-5, .large-col-5, .col-6, .small-col-6, .med-col-6, .large-col-6, .col-7, .small-col-7, .med-col-7, .large-col-7, .col-8, .small-col-8, .med-col-8, .large-col-8, .col-9, .small-col-9, .med-col-9, .large-col-9, .col-10, .small-col-10, .med-col-10, .large-col-10, .col-11, .small-col-11, .med-col-11, .large-col-11, .col-12, .small-col-12, .med-col-12, .large-col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 {
width: 100%;
float: left;
@@ -1505,7 +1534,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 .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-body {
font-size: 0.9em;
line-height: 1.3; }
@@ -1757,7 +1786,7 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
background-color: #ff9f50; }
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(2) a.btn {
color: #ff9f50; }
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item > div {
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item > article {
position: absolute;
top: 50%;
left: 50%;
@@ -1765,12 +1794,12 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
font-weight: 600;
line-height: 0.7;
padding-bottom: 0.5em;
padding-bottom: 0.1em;
text-align: center;
word-spacing: 30000px; }
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-pricing .field--name-computed-products-reference > .field__item .field--name-body {
padding: 0.5em; }
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description p {
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-body p {
margin: 0; }
.infinite-loading-container .infinite-status-prompt i[class^="loading-"] {
@@ -2255,9 +2284,25 @@ article.card {
min-width: 10em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main input[type="text"] {
width: 20em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-billing-information-address-0-address-address-line2 {
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .stripe-form {
display: inline-block;
background-color: #fff;
color: #1A1A1A;
border-radius: 5px;
padding: 1em;
margin: 0 0 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .stripe-form .form-item {
display: flex;
align-items: center;
flex-flow: row nowrap; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .stripe-form .form-item label {
color: #777; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .stripe-form .form-item .form-text {
background-color: #fff;
border-radius: 3px; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-add-payment-method-billing-information-address-0-address-address-line2 {
padding-left: 10.25em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-billing-information-copy-to-address-book {
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-add-payment-method-billing-information-copy-to-address-book {
display: none; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary {
width: 100%;

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

File diff suppressed because one or more lines are too long

15
web/themes/custom/materiotheme/assets/styles/base/_reset.scss
View File

@@ -33,3 +33,18 @@ p a{
border-bottom: 1px dotted #000;
}
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"]{
border-radius: 5px;
border : 0.5px solid #aaa;
padding: 0.3em 0.4em;
// &:focus{
// outline: none;
// border-color: blue;
// }
// outline-style: solid;
// outline-width: 1px;
}

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

@@ -874,7 +874,7 @@ article.node--type-frontpage{
color: #fff;
position: relative;
height:18em;
>div{
>article{
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
@@ -883,11 +883,11 @@ article.node--type-frontpage{
@extend %front-col-field__label;
font-weight: 600;
line-height: 0.7;
padding-bottom: 0.5em;
padding-bottom: 0.1em;
text-align: center;
word-spacing: 30000px;
}
.field--name-field-description{
.field--name-body{
@extend %front-col-description;
padding:0.5em;
p{
@@ -1525,10 +1525,32 @@ article.card{
input[type="text"]{
width:20em;
}
.form-item-payment-information-billing-information-address-0-address-address-line2{
.stripe-form{
display: inline-block;
background-color: #fff;
color: #1A1A1A;
border-radius: 5px;
padding: 1em;
margin: 0 0 1em;
.form-item{
display: flex;
align-items: center;
flex-flow: row nowrap;
label{
color: #777;
}
.form-text{
background-color: #fff;
border-radius: 3px;
}
}
}
// .form-item-payment-information-billing-information-address-0-address-address-line2
.form-item-payment-information-add-payment-method-billing-information-address-0-address-address-line2{
padding-left:$lw + 0.25em;
}
.form-item-payment-information-billing-information-copy-to-address-book{
// .form-item-payment-information-billing-information-copy-to-address-book
.form-item-payment-information-add-payment-method-billing-information-copy-to-address-book{
display: none;
}
}

6
web/themes/custom/materiotheme/materiotheme.theme
View File

@@ -178,9 +178,13 @@ function materiotheme_theme_suggestions_field_alter(&$suggestions, &$vars){
function materiotheme_preprocess_commerce_product(array &$variables) {
$test="test";
// remove the variation as we already display it via views
if($variables['elements']['#view_mode'] === 'order_summary'){
if($variables['elements']['#view_mode'] === 'order_summary'
|| $variables['elements']['#view_mode'] === 'home_summary'){
unset($variables['product']['variation_title']);
unset($variables['product']['variation_field_description']);
unset($variables['product']['variation_price']);
unset($variables['product']['variation_field_multiple']);
unset($variables['product']['variation_commerce_variation_cart_form']);
}
}

27
web/themes/custom/materiotheme/templates/content/commerce-product--home-summary.html.twig Normal file
View File

@@ -0,0 +1,27 @@
{#
/**
* @file
*
* Default product template.
*
* Available variables:
* - attributes: HTML attributes for the wrapper.
* - product: The rendered product fields.
* Use 'product' to print them all, or print a subset such as
* 'product.title'. Use the following code to exclude the
* printing of a given field:
* @code
* {{ product|without('title') }}
* @endcode
* - product_entity: The product entity.
* - product_url: The product URL.
*
* @ingroup themeable
*/
#}
<article{{ attributes }}>
{{- product|without('variation_attributes') -}}
<a href="/pricing" @click.prevent="onClickLink" class="btn">
{% trans %}View Option Details{% endtrans %}
</a>
</article>

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

@@ -31,7 +31,7 @@
:styles="{width:'500px', height:'300px'}"
>
<section id="pricing-modal-login-register">
<h2>{{ $t("materio.Please login or create a new account before ordering") }}</h2>
<h2>{{ $t("materio.Please login or create a new account to order your access") }}</h2>
<LoginRegister
:callbackargs="showLoginModal"
@onLogedIn="onLogedIn"
@@ -150,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.target_id}/order_information`
window.location.href = `/checkout/${data[0].order_id}/order_information`
})
.catch(( error ) => {
console.warn('Issue with product add to cart', error)

59
web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue
View File

@@ -4,14 +4,28 @@ import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
import { MA } from 'vuejs/api/ma-axios'
import passwordStrength from 'check-password-strength'
export default {
name: "RegisterForm",
data: () => ({
form: null,
mail: null,
pass1: null,
pass2: null
pass2: null,
ps: ""
}),
computed: {
psswd_class: function(){
return this.ps.toLowerCase()
},
can_register: function() {
if (this.ps === "Strong") {
return 'can-register'
}
return ''
}
},
methods: {
...mapActions({
userRegister: 'User/userRegister'
@@ -31,6 +45,13 @@ export default {
console.warn('Issue with getRegisterForm', error)
})
},
checkSubmitEnabled () {
if(this.ps === 'Strong'){
this.$refs.register.disabled = false
}else{
this.$refs.register.disabled = true
}
},
register () {
console.log('register', this.mail, this.pass1, this.pass2);
// TODO: check for identical password
@@ -61,6 +82,7 @@ export default {
mounted(){
// console.log('LoginBlock mounted');
Drupal.attachBehaviors(this.$el);
this.checkSubmitEnabled()
},
render(h) {
// console.log('LoginBlock render');
@@ -71,6 +93,15 @@ export default {
// console.log('LoginBlock render template');
return this.form.render.call(this)
}
},
watch: {
pass1: function(n, o){
if(n){
this.ps = passwordStrength(n).value
console.log('watch pass1 n', n, 'ps :', this.ps)
this.checkSubmitEnabled()
}
}
}
}
</script>
@@ -82,10 +113,36 @@ export default {
max-width:30%;
margin:0;
}
.form-type-password input{
&.weak {
border-width: 2px;
border-color: red!important;
&:focus{
outline:none;
}
}
&.medium {
border-width: 2px;
border-color: orange!important;
&:focus{
outline:none;
}
}
&.strong {
border-width: 2px;
border-color: green!important;
&:focus{
outline:none;
}
}
}
input{
box-sizing:content-box;
max-width:100%;
}
// input#edit-submit{
//
// }
label,
div.description{
display:none;

6
web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue
View File

@@ -2,7 +2,11 @@
<div id="user-tools">
<h4
class="mdi mdi-account"
>{{ mail }}</h4>
>
<a href="/user">
{{ mail }}
</a>
</h4>
<a href="/admin/content/materials"
v-if="isAdmin"
class="mdi mdi-settings"