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

refactored front pricing to use graphql, refactored to add 2 products (web & web+showroom) each one with 2 variations (monthly, annual)

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-01-04 22:11:11 +01:00
parent 830f5a5909
commit 7f027f322c
15 changed files with 967 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1432,6 +1432,9 @@ header[role="banner"] {
body.path-thematique header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #69cdcf; }
body.path-pricing header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #ff9f50; }
header[role="banner"] #block-materiosapisearchblock {
padding: 0; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .form-item, header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form input.button {
@@ -1501,7 +1504,14 @@ 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-field-description, article.node--type-frontpage #main-content > #pricing article.product section.content .description, #main-content > #pricing article.product section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content > #pricing article.product .views-field-body .description, #main-content > #pricing article.product .views-field-body article.node--type-frontpage .description,
article.node--type-frontpage #main-content > #pricing .views-row section.content .description, #main-content > #pricing .views-row section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content > #pricing .views-row .views-field-body .description, #main-content > #pricing .views-row .views-field-body article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content article.product section.content .description, #main-content .view-pricing-products .view-content article.product section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content article.product .views-field-body .description, #main-content .view-pricing-products .view-content article.product .views-field-body article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content .views-row section.content .description, #main-content .view-pricing-products .view-content .views-row section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content .views-row .views-field-body .description, #main-content .view-pricing-products .view-content .views-row .views-field-body article.node--type-frontpage .description {
font-size: 0.9em;
line-height: 1.3; }
@@ -1553,6 +1563,7 @@ article.node--type-frontpage .node__content > section.home-database {
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff;
color: #69cdcf; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home {
@@ -1594,6 +1605,7 @@ article.node--type-frontpage .node__content > section.home-showrooms {
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff;
color: #50aa3c; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
@@ -1672,6 +1684,7 @@ article.node--type-frontpage .node__content > section.home-blabla {
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff;
color: #9458aa; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
@@ -1740,6 +1753,7 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff; }
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) {
background-color: #69cdcf; }
@@ -2071,6 +2085,91 @@ article.card {
#showrooms article.showroom figure img {
max-width: 100%; }
#main-content > #pricing,
#main-content .view-pricing-products .view-content {
display: flex;
flex-flow: row nowrap; }
#main-content > #pricing article.product,
#main-content > #pricing .views-row,
#main-content .view-pricing-products .view-content article.product,
#main-content .view-pricing-products .view-content .views-row {
flex: auto;
text-align: center;
padding: 2em 0; }
#main-content > #pricing article.product > header h1,
#main-content > #pricing article.product .views-field-title,
#main-content > #pricing .views-row > header h1,
#main-content > #pricing .views-row .views-field-title,
#main-content .view-pricing-products .view-content article.product > header h1,
#main-content .view-pricing-products .view-content article.product .views-field-title,
#main-content .view-pricing-products .view-content .views-row > header h1,
#main-content .view-pricing-products .view-content .views-row .views-field-title {
font-size: 4em;
line-height: 1;
color: #fff; }
#main-content > #pricing article.product section.content,
#main-content > #pricing article.product .views-field-body,
#main-content > #pricing .views-row section.content,
#main-content > #pricing .views-row .views-field-body,
#main-content .view-pricing-products .view-content article.product section.content,
#main-content .view-pricing-products .view-content article.product .views-field-body,
#main-content .view-pricing-products .view-content .views-row section.content,
#main-content .view-pricing-products .view-content .views-row .views-field-body {
color: #fff; }
#main-content > #pricing article.product section.content .description p,
#main-content > #pricing article.product .views-field-body .description p,
#main-content > #pricing .views-row section.content .description p,
#main-content > #pricing .views-row .views-field-body .description p,
#main-content .view-pricing-products .view-content article.product section.content .description p,
#main-content .view-pricing-products .view-content article.product .views-field-body .description p,
#main-content .view-pricing-products .view-content .views-row section.content .description p,
#main-content .view-pricing-products .view-content .views-row .views-field-body .description p {
margin: 0; }
#main-content > #pricing article.product section.content span.price,
#main-content > #pricing article.product .views-field-body span.price,
#main-content > #pricing .views-row section.content span.price,
#main-content > #pricing .views-row .views-field-body span.price,
#main-content .view-pricing-products .view-content article.product section.content span.price,
#main-content .view-pricing-products .view-content article.product .views-field-body span.price,
#main-content .view-pricing-products .view-content .views-row section.content span.price,
#main-content .view-pricing-products .view-content .views-row .views-field-body span.price {
font-size: 2em;
font-weight: 700; }
#main-content > #pricing article.product button,
#main-content > #pricing .views-row button,
#main-content .view-pricing-products .view-content article.product button,
#main-content .view-pricing-products .view-content .views-row button {
display: inline-block;
font-size: 0.9em;
font-weight: bold;
padding: 0.7em 1em;
margin-bottom: 0.3em;
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff; }
#main-content > #pricing article.product:nth-child(1),
#main-content > #pricing .views-row:nth-child(1),
#main-content .view-pricing-products .view-content article.product:nth-child(1),
#main-content .view-pricing-products .view-content .views-row:nth-child(1) {
background-color: #69cdcf; }
#main-content > #pricing article.product:nth-child(1) button,
#main-content > #pricing .views-row:nth-child(1) button,
#main-content .view-pricing-products .view-content article.product:nth-child(1) button,
#main-content .view-pricing-products .view-content .views-row:nth-child(1) button {
color: #69cdcf; }
#main-content > #pricing article.product:nth-child(2),
#main-content > #pricing .views-row:nth-child(2),
#main-content .view-pricing-products .view-content article.product:nth-child(2),
#main-content .view-pricing-products .view-content .views-row:nth-child(2) {
background-color: #ff9f50; }
#main-content > #pricing article.product:nth-child(2) button,
#main-content > #pricing .views-row:nth-child(2) button,
#main-content .view-pricing-products .view-content article.product:nth-child(2) button,
#main-content .view-pricing-products .view-content .views-row:nth-child(2) button {
color: #ff9f50; }
body:not(.path-home) footer[role="contentinfo"] {
display: none; }

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

@@ -1206,7 +1206,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 _Product = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Product */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\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: \"Pricing\",\n // data() {\n // return {\n // items:[],\n // page:0\n // }\n // },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n pricing: function pricing(state) {\n return state.Pages.pricing;\n }\n })),\n created: function created() {\n if (!this.pricing.length) this.getPricing();\n },\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n getPricing: 'Pages/getPricing'\n })),\n components: {\n Product: _Product.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.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 _Product = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Product */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\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: \"Pricing\",\n // data() {\n // return {\n // items:[],\n // page:0\n // }\n // },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n products: function products(state) {\n return state.Pages.products;\n }\n })),\n created: function created() {\n if (!this.products.length) this.getProducts();\n },\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n getProducts: 'Pages/getProducts'\n })),\n components: {\n Product: _Product.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
/***/ }),
@@ -1535,7 +1535,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\n// import { JSONAPI } from 'vuejs/api/json-axios'\n// import { MA } from 'vuejs/api/ma-axios'\n// import qs from 'querystring-es3'\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n pricing: {}\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setPricing: function setPricing(state, page) {\n state.pricing = page;\n }\n },\n // actions\n actions: {\n getPricing: function getPricing(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n\n _restAxios.REST.get('/pricing_rest?_format=json', {}).then(function (_ref2) {\n var data = _ref2.data;\n console.log('pricing REST: data', data);\n commit('setPricing', data);\n }).catch(function (error) {\n console.warn('Issue with pricing', error);\n Promise.reject(error);\n });\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/store/modules/pages.js?");
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 _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _productsFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/products.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n products(ids: [\", \"]) {\\n ...ProductsFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n products_ids: [],\n products: []\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setProductsIds: function setProductsIds(state, ids) {\n state.products_ids = ids;\n },\n setProducts: function setProducts(state, p) {\n state.products = p;\n }\n },\n // actions\n actions: {\n getProducts: function getProducts(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n dispatch('loadProductsIds');\n },\n loadProductsIds: function loadProductsIds(_ref2) {\n var dispatch = _ref2.dispatch,\n commit = _ref2.commit,\n state = _ref2.state;\n\n _restAxios.REST.get('/pricing_rest?_format=json', {}).then(function (_ref3) {\n var data = _ref3.data;\n console.log('getProducts REST: data', data);\n var ids = [];\n\n for (var i = 0; i < data.length; i++) {\n ids.push(data[i].product_id);\n }\n\n commit('setProductsIds', ids);\n dispatch('loadProducts');\n }).catch(function (error) {\n console.warn('Issue with pricing', error);\n Promise.reject(error);\n });\n },\n loadProducts: function loadProducts(_ref4) {\n var dispatch = _ref4.dispatch,\n commit = _ref4.commit,\n state = _ref4.state;\n var ast = (0, _graphqlTag.default)(_templateObject(), state.products_ids, _productsFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (resp) {\n console.log('loadProductsGQL resp', resp);\n commit('setProducts', resp.data.data.products);\n }).catch(function (error) {\n console.warn('Issue with loadProducts', error);\n Promise.reject(error);\n });\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/store/modules/pages.js?");
/***/ }),
@@ -1623,6 +1623,18 @@ eval("\n var doc = {\"kind\":\"Document\",\"definitions\":[{\"kind\":\"Fragme
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql":
/*!****************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql ***!
\****************************************************************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/***/ ((module) => {
eval("\n var doc = {\"kind\":\"Document\",\"definitions\":[{\"kind\":\"FragmentDefinition\",\"name\":{\"kind\":\"Name\",\"value\":\"ProductsFields\"},\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"Product\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"title\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"uuid\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"bundle\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"body\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"path\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"variations\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"uuid\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"title\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"description\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"sku\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"price\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"value\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"currency\"},\"arguments\":[],\"directives\":[]}]}}]}}]}}],\"loc\":{\"start\":0,\"end\":194}};\n doc.loc.source = {\"body\":\"fragment ProductsFields on Product {\\n id\\n title\\n uuid\\n bundle\\n body\\n path\\n variations{\\n id\\n uuid\\n title\\n description\\n sku\\n price{\\n value\\n currency\\n }\\n }\\n}\\n\",\"name\":\"GraphQL request\",\"locationOffset\":{\"line\":1,\"column\":1}};\n \n\n var names = {};\n function unique(defs) {\n return defs.filter(\n function(def) {\n if (def.kind !== 'FragmentDefinition') return true;\n var name = def.name.value\n if (names[name]) {\n return false;\n } else {\n names[name] = true;\n return true;\n }\n }\n )\n }\n \n\n module.exports = doc;\n \n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql":
/*!*********************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql ***!
@@ -3215,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.field_description) }\n }),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"price\" }, [\n _vm._v(_vm._s(_vm.product.price__number))\n ])\n ]),\n _vm._v(\" \"),\n !_vm.isAdherent\n ? _c(\"aside\", [\n _vm.product.field_multiple\n ? _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.quantity,\n expression: \"quantity\"\n }\n ],\n attrs: {\n placeholder: \"quantity\",\n type: \"text\",\n name: \"quantity\",\n value: \"1\"\n },\n domProps: { value: _vm.quantity },\n on: {\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.quantity = $event.target.value\n }\n }\n })\n : _vm._e(),\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 : _vm._e(),\n _vm._v(\" \"),\n _vm.showLoginModal\n ? _c(\n \"Modal\",\n {\n attrs: { styles: { width: \"500px\", height: \"100%\" } },\n on: { close: _vm.closeModal }\n },\n [\n _c(\"h2\", [_vm._v(\"Please login or register before continue.\")]),\n _vm._v(\" \"),\n _c(\"LoginRegister\", {\n on: { onLogedIn: _vm.onLogedIn, onRegistered: _vm.onRegistered }\n })\n ],\n 1\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 \"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 [\n _vm._v(\n \"\\n Commander \" +\n _vm._s(variation.price.value) +\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: \"100%\" } },\n on: { close: _vm.closeModal }\n },\n [\n _c(\"h2\", [_vm._v(\"Please login or register before continue.\")]),\n _vm._v(\" \"),\n _c(\"LoginRegister\", {\n on: { onLogedIn: _vm.onLogedIn, onRegistered: _vm.onRegistered }\n })\n ],\n 1\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");
/***/ }),
@@ -3327,7 +3339,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 \"div\",\n { attrs: { id: \"pricing\" } },\n [\n !_vm.pricing.length\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _vm._l(_vm.pricing, function(product) {\n return _c(\"Product\", {\n key: product.uuid,\n attrs: { product: product }\n })\n })\n ],\n 2\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.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 \"div\",\n { attrs: { id: \"pricing\" } },\n [\n !_vm.products.length\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _vm._l(_vm.products, function(product) {\n return _c(\"Product\", {\n key: product.uuid,\n attrs: { product: product }\n })\n })\n ],\n 2\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options");
/***/ }),

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

@@ -356,6 +356,10 @@ header[role="banner"]{
color: #fff;
background-color: $color-base;
}
body.path-pricing & {
color: #fff;
background-color: $color-webshowroom;
}
}
}
@@ -483,13 +487,25 @@ aside.messages{
// | _| '_/ _ \ ' \ _|
// |_| |_| \___/_||_\__|
@mixin btn{
display: inline-block;
font-size: 0.9em;
font-weight: bold;
padding: 0.7em 1em;
margin-bottom: 0.3em;
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
}
article.node--type-frontpage{
%front-col-field__label{
font-size: 3.5em;
line-height: 1;
}
%front-col-descritpion{
%front-col-description{
font-size: 0.9em;
line-height: 1.3;
}
@@ -505,7 +521,7 @@ article.node--type-frontpage{
@extend %front-col-field__label;
}
.field__item{
@extend %front-col-descritpion;
@extend %front-col-description;
}
}
}
@@ -522,7 +538,7 @@ article.node--type-frontpage{
// @extend %front-col-field__label;
// }
// .field__item{
// @extend %front-col-descritpion;
// @extend %front-col-description;
// }
// }
// >div:nth-child(2){
@@ -543,7 +559,7 @@ article.node--type-frontpage{
@extend %front-col-field__label;
}
.field__item{
@extend %front-col-descritpion;
@extend %front-col-description;
}
}
>div:nth-child(2){
@@ -559,17 +575,6 @@ article.node--type-frontpage{
.node__content{
@mixin btn{
display: inline-block;
font-size: 0.9em;
font-weight: bold;
padding: 0.7em 1em;
margin-bottom: 0.3em;
background-color: #fff;
color: #000;
border-radius: 5px;
}
&>section{
&.home-intro{
@extend %part-centered-layout;
@@ -882,7 +887,7 @@ article.node--type-frontpage{
word-spacing: 30000px;
}
.field--name-field-description{
@extend %front-col-descritpion;
@extend %front-col-description;
padding:0.5em;
p{
margin: 0;
@@ -1135,7 +1140,6 @@ article.card{
}
}
// _____ _ _ _
// |_ _| |_ ___ _ __ __ _| |_(_)__ _ _ _ ___
// | | | ' \/ -_) ' \/ _` | _| / _` | || / -_)
@@ -1192,11 +1196,10 @@ article.card{
}
// ___ _ _ _
// | _ ) |__ _| |__| |__ _
// | _ \ / _` | '_ \ / _` |
// |___/_\__,_|_.__/_\__,_|
// ___ _ _ _
// | _ ) |__ _| |__| |__ _
// | _ \ / _` | '_ \ / _` |
// |___/_\__,_|_.__/_\__,_|
#blabla{
}
@@ -1333,10 +1336,10 @@ article.card{
}
}
// ___ _
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
// \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-<
// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
// ___ _
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
// \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-<
// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
#showrooms{
width: calc(100% + #{$column_goutiere});
article.showroom{
@@ -1360,7 +1363,59 @@ article.card{
}
// ___ _ _
// | _ \_ _(_)__(_)_ _ __ _
// | _/ '_| / _| | ' \/ _` |
// |_| |_| |_\__|_|_||_\__, |
// |___/
#main-content>#pricing,
#main-content .view-pricing-products .view-content{
display: flex;
flex-flow: row nowrap;
article.product,
.views-row{
flex: auto;
// flex:0 0 50%;
text-align: center;
padding: 2em 0;
>header h1,
.views-field-title{
font-size: 4em;
line-height: 1;
color: #fff;
}
section.content,
.views-field-body{
color: #fff;
.description{
@extend %front-col-description;
p{
margin: 0;
}
}
span.price{
font-size: 2em;
font-weight: 700;
}
}
button{
@include btn;
background-color: #fff;
}
&:nth-child(1){
background-color: $color-base;
button{
color: $color-base;
}
}
&:nth-child(2){
background-color: $color-webshowroom;
button{
color: $color-webshowroom;
}
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|

19
web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql Normal file
View File

@@ -0,0 +1,19 @@
fragment ProductsFields on Product {
id
title
uuid
bundle
body
path
variations{
id
uuid
title
description
sku
price{
value
currency
}
}
}

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

@@ -4,24 +4,16 @@
<h1 v-html="product.title" />
</header>
<section class="content">
<div class="description" v-html="product.field_description" />
<span class="price">{{ product.price__number }}</span>
<div class="description" v-html="product.body" />
</section>
<aside v-if="!isAdherent">
<input
v-if="product.field_multiple"
v-model="quantity"
placeholder="quantity"
type="text"
name="quantity"
value="1"
/>
<button
v-for="variation in product.variations"
type="button"
name="addtocart"
@click.stop="checkaddtocart"
>
Commander
Commander {{ variation.price.value }}
</button>
</aside>

12
web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue
View File

@@ -1,11 +1,11 @@
<template>
<div id="pricing">
<div class="loading" v-if="!pricing.length">
<div class="loading" v-if="!products.length">
<span>Loading ...</span>
</div>
<Product
v-else
v-for="product in pricing"
v-for="product in products"
v-bind:key="product.uuid"
:product="product"
/>
@@ -27,16 +27,16 @@ export default {
// },
computed: {
...mapState({
pricing: state => state.Pages.pricing
products: state => state.Pages.products
})
},
created(){
if(!this.pricing.length)
this.getPricing()
if(!this.products.length)
this.getProducts()
},
methods: {
...mapActions({
getPricing: 'Pages/getPricing'
getProducts: 'Pages/getProducts'
})
},
components: {

51
web/themes/custom/materiotheme/vuejs/store/modules/pages.js
View File

@@ -1,14 +1,17 @@
// import { JSONAPI } from 'vuejs/api/json-axios'
import { REST } from 'vuejs/api/rest-axios'
// import { MA } from 'vuejs/api/ma-axios'
// import qs from 'querystring-es3'
import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
import productsGQL from 'vuejs/api/gql/products.fragment.gql'
export default {
namespaced: true,
// initial state
state: {
pricing: {}
products_ids: [],
products: []
},
// getters
@@ -16,23 +19,53 @@ export default {
// mutations
mutations: {
setPricing (state, page) {
state.pricing = page
setProductsIds (state, ids) {
state.products_ids = ids
},
setProducts (state, p) {
state.products = p
}
},
// actions
actions: {
getPricing ({ dispatch, commit, state }) {
getProducts({ dispatch, commit, state }) {
dispatch('loadProductsIds')
},
loadProductsIds({ dispatch, commit, state }) {
REST.get('/pricing_rest?_format=json', {})
.then(({ data }) => {
console.log('pricing REST: data', data)
commit('setPricing', data)
console.log('getProducts REST: data', data)
let ids = [];
for (var i = 0; i < data.length; i++) {
ids.push(data[i].product_id)
}
commit('setProductsIds', ids)
dispatch('loadProducts')
})
.catch((error) => {
console.warn('Issue with pricing', error)
Promise.reject(error)
})
},
loadProducts({ dispatch, commit, state }) {
let ast = gql`{
products(ids: [${state.products_ids}]) {
...ProductsFields
}
}
${ productsGQL }
`
MGQ.post('', { query: print(ast) })
.then(( resp ) => {
console.log('loadProductsGQL resp', resp )
commit('setProducts', resp.data.data.products)
})
.catch(error => {
console.warn('Issue with loadProducts', error)
Promise.reject(error)
})
}
}
}