From d9ccca3a5ec986a1fcce65a3287606dce9450811 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Wed, 6 Jan 2021 12:23:27 +0100 Subject: [PATCH] refactored checkout flow on button click from pricing page, started to redsign the checkout page --- ...ce_checkout_flow.materio_checkout_flow.yml | 40 +++++----- ...o_product_variation_type.order_summary.yml | 59 +++++++++++++++ ...mmerce_product_variation.order_summary.yml | 10 +++ ...s.view.commerce_checkout_order_summary.yml | 2 - ...s.view.commerce_checkout_order_summary.yml | 74 +------------------ config/sync/views.view.pricing_products.yml | 10 +++ .../custom/materiotheme/assets/dist/main.css | 28 +++++++ .../custom/materiotheme/assets/dist/main.js | 6 +- .../materiotheme/assets/styles/main.scss | 46 ++++++++++++ .../vuejs/components/Content/Product.vue | 34 +++++---- .../vuejs/components/Helper/LoginRegister.vue | 5 +- 11 files changed, 204 insertions(+), 110 deletions(-) create mode 100644 config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml create mode 100644 config/sync/core.entity_view_mode.commerce_product_variation.order_summary.yml diff --git a/config/sync/commerce_checkout.commerce_checkout_flow.materio_checkout_flow.yml b/config/sync/commerce_checkout.commerce_checkout_flow.materio_checkout_flow.yml index defa59c4..d785fe74 100644 --- a/config/sync/commerce_checkout.commerce_checkout_flow.materio_checkout_flow.yml +++ b/config/sync/commerce_checkout.commerce_checkout_flow.materio_checkout_flow.yml @@ -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 diff --git a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml b/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml new file mode 100644 index 00000000..1926963d --- /dev/null +++ b/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.order_summary.yml @@ -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 diff --git a/config/sync/core.entity_view_mode.commerce_product_variation.order_summary.yml b/config/sync/core.entity_view_mode.commerce_product_variation.order_summary.yml new file mode 100644 index 00000000..0bc9fe48 --- /dev/null +++ b/config/sync/core.entity_view_mode.commerce_product_variation.order_summary.yml @@ -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 diff --git a/config/sync/language/fr/views.view.commerce_checkout_order_summary.yml b/config/sync/language/fr/views.view.commerce_checkout_order_summary.yml index ba882aad..1953fc93 100644 --- a/config/sync/language/fr/views.view.commerce_checkout_order_summary.yml +++ b/config/sync/language/fr/views.view.commerce_checkout_order_summary.yml @@ -10,8 +10,6 @@ display: sort_asc_label: Asc sort_desc_label: Desc fields: - quantity: - separator: ', ' purchased_entity: separator: ', ' total_price__number: diff --git a/config/sync/views.view.commerce_checkout_order_summary.yml b/config/sync/views.view.commerce_checkout_order_summary.yml index a0e9e44a..1dbba3fe 100644 --- a/config/sync/views.view.commerce_checkout_order_summary.yml +++ b/config/sync/views.view.commerce_checkout_order_summary.yml @@ -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 diff --git a/config/sync/views.view.pricing_products.yml b/config/sync/views.view.pricing_products.yml index afcaae47..92dcba1b 100644 --- a/config/sync/views.view.pricing_products.yml +++ b/config/sync/views.view.pricing_products.yml @@ -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: diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 072ccb40..b3c70140 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -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; } diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 8b4846ea..4cafe595 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -1030,7 +1030,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Helper/Modal */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue\"));\n\nvar _LoginRegister = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Helper/LoginRegister */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n name: \"Product\",\n router: _route.default,\n props: ['product'],\n data: function data() {\n return {\n quantity: 1,\n showLoginModal: false\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n isloggedin: function isloggedin(state) {\n return state.User.isloggedin;\n },\n isAdherent: function isAdherent(state) {\n return state.User.isAdherent;\n },\n csrftoken: function csrftoken(state) {\n return state.User.csrftoken;\n }\n })),\n methods: {\n // ...mapActions({\n // userLogin: 'User/userLogin'\n // }),\n closeModal: function closeModal() {\n this.showLoginModal = false;\n },\n checkaddtocart: function checkaddtocart() {\n console.log('checkaddtocart');\n\n if (!this.isloggedin) {\n // show popup for login or register\n // login or register event will be catched by onLogedin or onRegistered\n this.showLoginModal = true;\n } else {\n // if already logedin directly goes to cart operations\n this.addtocart();\n }\n },\n // event bubbled from modal login form\n onLogedIn: function onLogedIn() {\n console.log('Product: onLogedIn');\n this.addtocart();\n },\n // event bubbled from modal register form\n onRegistered: function onRegistered() {\n console.log('Product: onRegistered');\n this.addtocart();\n },\n getCarts: function getCarts() {\n // this is bugging on stage\n return _restAxios.REST.get(\"/cart?_format=json\", {}, {\n 'X-CSRF-Token': this.csrftoken\n }) // .then(({ data }) => {\n // console.log('current user carts: data', data)\n // })\n .catch(function (error) {\n console.warn('Issue with get cart', error);\n Promise.reject(error);\n });\n },\n deleteCart: function deleteCart(order_id) {\n console.log('deleting cart ', order_id);\n return _restAxios.REST.delete(\"/cart/\".concat(order_id, \"/items?_format=json\")).then(function (_ref) {\n var data = _ref.data;\n console.log(\"product cart \".concat(order_id, \" deleted: data\"), data);\n }).catch(function (error) {\n console.warn(\"Issue with cart \".concat(order_id, \" deleting\"), error);\n Promise.reject(error);\n });\n },\n clearCarts: function clearCarts(data) {\n var promises = []; // clear each cart as a promise\n\n for (var i = 0; i < data.length; i++) {\n promises.push(this.deleteCart(data[i].order_id));\n } // return all the promises as one\n\n\n return Promise.all(promises);\n },\n addtocart: function addtocart() {\n var _this = this;\n\n console.log(\"addtocart\");\n this.getCarts().then(function (_ref2) {\n var data = _ref2.data;\n console.log('current user carts: data', data);\n\n _this.clearCarts(data).then(function () {\n console.log('all carts cleared'); // fill the cart with new product\n\n _restAxios.REST.post(\"/cart/add?_format=json\", [{\n \"purchased_entity_type\": \"commerce_product_variation\",\n \"purchased_entity_id\": _this.product.variation_id,\n \"quantity\": _this.quantity\n }]).then(function (_ref3) {\n var data = _ref3.data;\n console.log('product added to cart: data', data);\n\n _this.closeModal(); // redirect to /cart\n // window.location.href = \"/cart\"\n // TODO: redirect to checkout instead of cart\n\n\n window.location.href = \"/checkout/\".concat(data[0].order_id, \"/order_information\");\n }).catch(function (error) {\n console.warn('Issue with product add to cart', error);\n Promise.reject(error);\n });\n });\n });\n }\n },\n components: {\n Modal: _Modal.default,\n LoginRegister: _LoginRegister.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Helper/Modal */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue\"));\n\nvar _LoginRegister = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Helper/LoginRegister */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n name: \"Product\",\n router: _route.default,\n props: ['product'],\n data: function data() {\n return {\n quantity: 1,\n showLoginModal: false\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n isloggedin: function isloggedin(state) {\n return state.User.isloggedin;\n },\n isAdherent: function isAdherent(state) {\n return state.User.isAdherent;\n },\n csrftoken: function csrftoken(state) {\n return state.User.csrftoken;\n }\n })),\n methods: {\n // ...mapActions({\n // userLogin: 'User/userLogin'\n // }),\n closeModal: function closeModal() {\n this.showLoginModal = false;\n },\n checkaddtocart: function checkaddtocart(e, variation_id) {\n console.log('checkaddtocart');\n\n if (!this.isloggedin) {\n // show popup for login or register\n // login or register event will be catched by onLogedin or onRegistered\n this.showLoginModal = variation_id;\n } else {\n // if already logedin directly goes to cart operations\n this.addtocart(variation_id);\n }\n },\n // event bubbled from modal login form\n onLogedIn: function onLogedIn(variation_id) {\n console.log('Product: onLogedIn. variation_id', variation_id);\n this.addtocart(variation_id);\n },\n // event bubbled from modal register form\n onRegistered: function onRegistered(variation_id) {\n console.log('Product: onRegistered. variation_id', variation_id);\n this.addtocart(variation_id);\n },\n getCarts: function getCarts() {\n // this is bugging on stage\n return _restAxios.REST.get(\"/cart?_format=json\", {}, {\n 'X-CSRF-Token': this.csrftoken\n }) // .then(({ data }) => {\n // console.log('current user carts: data', data)\n // })\n .catch(function (error) {\n console.warn('Issue with get cart', error);\n Promise.reject(error);\n });\n },\n deleteCart: function deleteCart(order_id) {\n console.log('deleting cart ', order_id);\n return _restAxios.REST.delete(\"/cart/\".concat(order_id, \"/items?_format=json\")).then(function (_ref) {\n var data = _ref.data;\n console.log(\"product cart \".concat(order_id, \" deleted: data\"), data);\n }).catch(function (error) {\n console.warn(\"Issue with cart \".concat(order_id, \" deleting\"), error);\n Promise.reject(error);\n });\n },\n clearCarts: function clearCarts(data) {\n var promises = []; // clear each cart as a promise\n\n for (var i = 0; i < data.length; i++) {\n promises.push(this.deleteCart(data[i].order_id));\n } // return all the promises as one\n\n\n return Promise.all(promises);\n },\n addtocart: function addtocart(variation_id) {\n var _this = this;\n\n console.log(\"addtocart\");\n this.getCarts().then(function (_ref2) {\n var data = _ref2.data;\n console.log('current user carts: data', data);\n\n _this.clearCarts(data).then(function () {\n console.log('all carts cleared'); // fill the cart with new product\n\n _restAxios.REST.post(\"/cart/add?_format=json\", [{\n \"purchased_entity_type\": \"commerce_product_variation\",\n \"purchased_entity_id\": variation_id,\n \"quantity\": _this.quantity\n }]).then(function (_ref3) {\n var data = _ref3.data;\n console.log('product added to cart: data', data);\n\n _this.closeModal(); // redirect to /cart\n // window.location.href = \"/cart\"\n // TODO: redirect to checkout instead of cart\n\n\n window.location.href = \"/checkout/\".concat(data[0].order_id.target_id, \"/order_information\");\n }).catch(function (error) {\n console.warn('Issue with product add to cart', error);\n Promise.reject(error);\n });\n });\n });\n }\n },\n components: {\n Modal: _Modal.default,\n LoginRegister: _LoginRegister.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -1110,7 +1110,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _LoginForm = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Form/LoginForm */ \"./web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.vue\"));\n\nvar _RegisterForm = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Form/RegisterForm */ \"./web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n name: \"LoginRegister\",\n data: function data() {\n return {\n loginEmail: null,\n password: null,\n registerEmail: null\n };\n },\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n userLogin: 'User/userLogin',\n userRegister: 'User/userRegister'\n })), {}, {\n onLogedIn: function onLogedIn() {\n this.$emit('onLogedIn');\n },\n onRegistered: function onRegistered() {\n this.$emit('onRegistered');\n }\n }),\n components: {\n LoginForm: _LoginForm.default,\n RegisterForm: _RegisterForm.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _LoginForm = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Form/LoginForm */ \"./web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.vue\"));\n\nvar _RegisterForm = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Form/RegisterForm */ \"./web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n name: \"LoginRegister\",\n data: function data() {\n return {\n loginEmail: null,\n password: null,\n registerEmail: null\n };\n },\n props: ['callbackargs'],\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n userLogin: 'User/userLogin',\n userRegister: 'User/userRegister'\n })), {}, {\n onLogedIn: function onLogedIn() {\n this.$emit('onLogedIn', this.callbackargs);\n },\n onRegistered: function onRegistered() {\n this.$emit('onRegistered', this.callbackargs);\n }\n }),\n components: {\n LoginForm: _LoginForm.default,\n RegisterForm: _RegisterForm.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -3227,7 +3227,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"article\",\n { staticClass: \"product\" },\n [\n _c(\"header\", [\n _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.product.title) } })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"content\" }, [\n _c(\"div\", {\n staticClass: \"description\",\n domProps: { innerHTML: _vm._s(_vm.product.body) }\n })\n ]),\n _vm._v(\" \"),\n !_vm.isAdherent\n ? _c(\n \"aside\",\n _vm._l(_vm.product.variations, function(variation) {\n return _c(\n \"div\",\n { key: variation.id, staticClass: \"variation\" },\n [\n _c(\"div\", {\n staticClass: \"variation-description\",\n domProps: { innerHTML: _vm._s(variation.description) }\n }),\n _vm._v(\" \"),\n _c(\n \"button\",\n {\n attrs: { type: \"button\", name: \"addtocart\" },\n on: {\n click: function($event) {\n $event.stopPropagation()\n return _vm.checkaddtocart($event)\n }\n }\n },\n [_vm._v(\"\\n Commander\\n \")]\n )\n ]\n )\n }),\n 0\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.showLoginModal\n ? _c(\n \"Modal\",\n {\n attrs: { styles: { width: \"500px\", height: \"300px\" } },\n on: { close: _vm.closeModal }\n },\n [\n _c(\n \"section\",\n { attrs: { id: \"pricing-modal-login-register\" } },\n [\n _c(\"h2\", [\n _vm._v(\n _vm._s(\n _vm.$t(\n \"materio.Please login or create a new account before ordering\"\n )\n )\n )\n ]),\n _vm._v(\" \"),\n _c(\"LoginRegister\", {\n on: {\n onLogedIn: _vm.onLogedIn,\n onRegistered: _vm.onRegistered\n }\n })\n ],\n 1\n )\n ]\n )\n : _vm._e()\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"article\",\n { staticClass: \"product\" },\n [\n _c(\"header\", [\n _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.product.title) } })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"content\" }, [\n _c(\"div\", {\n staticClass: \"description\",\n domProps: { innerHTML: _vm._s(_vm.product.body) }\n })\n ]),\n _vm._v(\" \"),\n !_vm.isAdherent\n ? _c(\n \"aside\",\n _vm._l(_vm.product.variations, function(variation) {\n return _c(\n \"div\",\n { key: variation.id, staticClass: \"variation\" },\n [\n _c(\"div\", {\n staticClass: \"variation-description\",\n domProps: { innerHTML: _vm._s(variation.description) }\n }),\n _vm._v(\" \"),\n _c(\n \"button\",\n {\n attrs: { type: \"button\", name: \"addtocart\" },\n on: {\n click: function($event) {\n $event.stopPropagation()\n return _vm.checkaddtocart($event, variation.id)\n }\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(_vm.$t(\"default.Add to cart\")) +\n \"\\n \"\n )\n ]\n )\n ]\n )\n }),\n 0\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.showLoginModal\n ? _c(\n \"Modal\",\n {\n attrs: { styles: { width: \"500px\", height: \"300px\" } },\n on: { close: _vm.closeModal }\n },\n [\n _c(\n \"section\",\n { attrs: { id: \"pricing-modal-login-register\" } },\n [\n _c(\"h2\", [\n _vm._v(\n _vm._s(\n _vm.$t(\n \"materio.Please login or create a new account before ordering\"\n )\n )\n )\n ]),\n _vm._v(\" \"),\n _c(\"LoginRegister\", {\n attrs: { callbackargs: _vm.showLoginModal },\n on: {\n onLogedIn: _vm.onLogedIn,\n onRegistered: _vm.onRegistered\n }\n })\n ],\n 1\n )\n ]\n )\n : _vm._e()\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index d4faf9df..3cf356f3 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -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; + } + } +} + // ___ _ // | __|__ ___| |_ ___ _ _ // | _/ _ \/ _ \ _/ -_) '_| diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue b/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue index 718ea77d..3e0ff51f 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue @@ -17,9 +17,9 @@ @@ -32,7 +32,11 @@ >

{{ $t("materio.Please login or create a new account before ordering") }}

- +
@@ -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) diff --git a/web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue b/web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue index c68e3c98..ecc7b072 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue @@ -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: {