diff --git a/api/cart_place.php b/api/cart_place.php new file mode 100644 index 0000000..c962d7b --- /dev/null +++ b/api/cart_place.php @@ -0,0 +1,26 @@ +getConnection(); + +$body = $_POST['body']; + +http_response_code(200); +echo json_encode( + array( + "status" => 200, + "cart" => array_values($_SESSION['CART']), + "shipping" => $body + )); + +?> + diff --git a/components/buy/buy.html b/components/buy/buy.html index a635c3e..bab1784 100644 --- a/components/buy/buy.html +++ b/components/buy/buy.html @@ -50,7 +50,7 @@ diff --git a/components/buy/buy.scss b/components/buy/buy.scss index 2b07e2f..e0d7959 100644 --- a/components/buy/buy.scss +++ b/components/buy/buy.scss @@ -143,6 +143,7 @@ width: calc(50% - 4px); .qty { + border: none; appearance: none; -moz-appearance: textfield; &:-webkit-inner-spin-button { @@ -176,10 +177,16 @@ position: relative; display: inline-flex; float: right; - height: 44px; + height: 40px; padding: 0; @include font-style($font-serif, 'regular', $font-28); width: calc(50% - 4px); + + .label { + height: 36px; + line-height: 36px; + margin: 0 auto 0 5px; + } } } } diff --git a/components/checkout/checkout.html b/components/checkout/checkout.html index 617e3b3..ffd187b 100644 --- a/components/checkout/checkout.html +++ b/components/checkout/checkout.html @@ -1,6 +1,10 @@ @@ -15,35 +19,35 @@
Nome * - +
Cognome * - +
E-mail * - +
Telefono - +
Indirizzo * - +
Città * - +
CAP * - +
Provincia * - $p) { echo ""; @@ -53,11 +57,12 @@
Scegli una password * - + + deve essere di almeno 8 caratteri contenere almeno un numero, un carattere maiuscolo, uno minuscolo
Conferma password * - +
Vuoi spedire ad un indirizzo diverso? @@ -73,11 +78,104 @@
+ + + +
+
+ Indirizzo * + +
+
+ Città * + +
+
+ CAP * + +
+
+ Provincia * + +
+
Il tuo ordine + + +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ Costi di spedizione +
+
+ +
+
+ +
+
+ Totale tasse incluse +
+
+ +
+
+ +
+ +
+ Le informazioni fornite saranno utilizzate per le finalità descritte nella nostra + privacy policy +
+
+ +
+ +
+ +
+
+
diff --git a/components/checkout/checkout.js b/components/checkout/checkout.js index a5f1456..7d21e34 100644 --- a/components/checkout/checkout.js +++ b/components/checkout/checkout.js @@ -2,4 +2,117 @@ $(document).ready( () => { console.log('Load component - checkout') -}) \ No newline at end of file + const component = $('.component-checkout') + + if(component.length) { + const place = component.find('.place-order') + const extraAddress = component.find('.different-address') + const extraAddressRadio = component.find('input[name="other_address"]') + let hasExtraAddress = false + + place.off('.click').on('click.click', () => { + checkForm() + }) + + extraAddressRadio.off('.click').on('click.click', (e) => { + const checked = $(e.currentTarget).val() + hasExtraAddress = checked == 'yes' + if(checked == 'yes') { + extraAddress.stop().slideDown({ + start: () => { extraAddress.css({ display: "flex" }) } + }) + } else { + extraAddress.stop().slideUp() + } + }) + + const checkForm = () => { + const inputs = component.find('.input') + const passwords = component.find('.input[type="password"]') + let errors = 0 + + inputs.each( (i,e) => { + const input = $(e) + const type = input.prop('type') + const required = input.prop('required') + + if(required) { + switch(type) { + case 'text': + case 'select-one': + if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) { + if(hasExtraAddress) { + if(!input.val().length) { + input.addClass('error') + errors++ + } else { input.removeClass('error') } + } + } else { + if(!input.val().length) { + input.addClass('error') + errors++ + } else { input.removeClass('error') } + } + break; + case 'email': + if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ + .test(input.val())) { + input.addClass('error') + errors++ + } else { input.removeClass('error') } + break; + case 'password': + if(!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/ + .test(input.val())) { + input.addClass('error') + errors++ + } else { input.removeClass('error') } + break; + case 'checkbox': + if(!input.is(':checked')) { + input.closest('.checkbox').addClass('error') + errors++ + } else { + input.closest('.checkbox').removeClass('error') + } + break; + } + } + }) + + if(passwords[0].value != passwords[1].value) { + $(passwords[1]).addClass('error') + errors++ + } else { + $(passwords[1]).removeClass('error') + } + + if(!errors) { + let body = {} + inputs.each( (i,e) => { + const input = $(e) + const type = input.prop('type') + const name = input.prop('name') + + if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(name) > -1) { + if(hasExtraAddress) { + body[name] = input.val() + } + } else { + body[name] = input.val() + } + }) + + Apis.placeCart(body).then( (data) => { + const headerCart = $('.component-header .cart-cta .counter') + if(headerCart.length) { + headerCart.text(0) + } + }).catch( (error) => { + console.error(error) + }) + + } + } + } +}) diff --git a/components/checkout/checkout.scss b/components/checkout/checkout.scss index ef5d26d..2d5030b 100644 --- a/components/checkout/checkout.scss +++ b/components/checkout/checkout.scss @@ -24,4 +24,45 @@ color: $gray; padding: 15px 0 5px 0; } + + .item, + .total { + @include font-style($font-sans, 400, $font-16); + color: $gray; + padding: 20px 0; + border-bottom: 1px solid $gray; + } + + .total { + border: none; + font-weight: 700; + } + + .place { + @include font-style($font-sans, 400, $font-16); + color: $gray; + + .link { + padding: 0; + background: none; + font-weight: 700; + color: $brown; + } + + .place-order { + display: inline-block; + @include font-style($font-serif, 'regular', $font-20); + margin: 20px 0 0 auto; + } + } + + .input { + &.error { + border: 1px solid $red; + } + } + + .different-address { + display: none; + } } diff --git a/src/js/index.js b/src/js/index.js index d05cbd6..baa4397 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -47,3 +47,13 @@ window.Apis.removeFromCart = (pid) => { }) } +window.Apis.placeCart = (body) => { + return new Promise((resolve, reject) => { + $.post(apiUrl + `/cart_place.php?buster=${new Date().getTime()}`, {body: body}).done( (data) => { + resolve(data) + }).fail((error, status) => { + reject(error) + }) + }) +} + diff --git a/src/scss/forms.scss b/src/scss/forms.scss index d5c3dd8..7b5db9b 100644 --- a/src/scss/forms.scss +++ b/src/scss/forms.scss @@ -155,15 +155,14 @@ select, opacity: 0.5; } } - .checkbox { display: inline-block; position: relative; padding-left: 25px; - margin-bottom: 12px; + margin: 10px 15px 0 0; cursor: pointer; user-select: none; - line-height: 12px; + line-height: 20px; .checkbox-label { font-size: $font-16; @@ -173,10 +172,11 @@ select, position: absolute; top: 0; left: 0; - height: 15px; - width: 15px; + height: 20px; + width: 20px; + border-radius: 0; background: none; - border: 1px solid $black; + border: 1px solid $gray; &:disabled { border-bottom: 1px solid $gray; } @@ -184,10 +184,22 @@ select, &:after { content: ''; position: absolute; + top: 3px; + left: 3px; + height: 12px; + width: 12px; + border-radius: 0; + background: $gray; display: none; } } + &.error { + .mark { + border: 1px solid $red; + } + } + input { position: absolute; opacity: 0; @@ -195,7 +207,6 @@ select, height: 0; width: 0; &:checked ~ .mark { - background: $gray; &:after { display: block; }