├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── Shoppable_Campaign.png
├── babel.config.js
├── example.env
├── package.json
├── public
    ├── favicon.png
    └── index.html
├── src
    ├── App.vue
    ├── Info.vue
    ├── assets
    │   ├── Boilerplatedemo.png
    │   ├── Shoppable_Campaign.png
    │   ├── boilerplate.jpg
    │   ├── logo.png
    │   └── slackButton.png
    ├── main.js
    ├── router
    │   └── index.js
    ├── styles
    │   └── index.scss
    └── views
    │   ├── Cart.vue
    │   ├── CartItem.vue
    │   ├── CategoryFilter.vue
    │   ├── Checkout.vue
    │   ├── Confirmation.vue
    │   ├── PageNotFound.vue
    │   ├── ProductItem.vue
    │   └── ProductLanding.vue
├── vue.config.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 200
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2020, Chec|Commerce.js
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | 1. Redistributions of source code must retain the above copyright notice, this
10 |    list of conditions and the following disclaimer.
11 | 
12 | 2. Redistributions in binary form must reproduce the above copyright notice,
13 |    this list of conditions and the following disclaimer in the documentation
14 |    and/or other materials provided with the distribution.
15 | 
16 | 3. Neither the name of the copyright holder nor the names of its
17 |    contributors may be used to endorse or promote products derived from
18 |    this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Commerce.js Vue Boilerplate Header](https://github.com/chec/commercejs-vuejs-boilerplate/blob/master/src/assets/boilerplate.jpg)
 2 | 
 3 | ## Introduction
 4 | 
 5 | This boilerplate was developed to help developers build quick eCommerce sites in the Commerce.js ecosystem. Included is a complete, unstyled, product listing, cart, and checkout workflow to aid in fast and easy development using the Vue.js framework.
 6 | 
 7 | ![](https://github.com/chec/commercejs-vuejs-boilerplate/blob/master/src/assets/Boilerplatedemo.png)
 8 | 
 9 | ## Features
10 | 
11 | - Listing page view for your products.
12 | - A complete cart that calculates totals and allows for editing and removing products.
13 | - Fully featured checkout with Shipping and Tax calculations. 
14 | - Thank you page template.
15 | - 404 page template
16 | 
17 | ## Installation
18 | 
19 | ### Download
20 | 
21 | Clone the git repo into the folder of your choice - `git clone https://github.com/chec/commercejs-vuejs-boilerplate.git`
22 | 
23 | Alternatively, you can [download](https://github.com//chec/commercejs-vuejs-boilerplate/archive/master.zip) the project as a zip file to your computer.
24 | 
25 | ### Project setup
26 | 
27 | Simply run `npm install` or `yarn install` if you use [Yarn Package Manager](https://yarnpkg.com/) from the root of your project folder. This will install all the necessary packages required to run the boilerplate. 
28 | 
29 | ### Copy example env and add Chec credentials
30 | 
31 | This boilerplate ships with an example.env file that you will need to copy and fill with your Commerce.js credentials.   
32 | 
33 | First create a copy of the example.env file named .env in the root of your project.  You can do this by running cp example.env .env in the root folder.  The .env will look something like this:
34 | 
35 | ```
36 | NODE_ENV=local
37 | VUE_APP_CHEC_PUBLIC_KEY={YOUR_API_KEY}
38 | VUE_APP_CHEC_API_URL=https://api.chec.io`
39 | ```
40 | 
41 | Add in your Commerce.js public API key which can be found in the developer's settings of the [dashboard](https://dashboard.chec.io/settings/developer).
42 | 
43 | ## Working with the boilerplate
44 |  
45 | ### Compile and hot-reload for development
46 | 
47 | To aid in building your site, this boilerplate ships with a development environment which supports hot-reload on save. Run  `npm run serve` or `yarn serve` from the root of the project. After it has compiled, you will be able to view the boilerplate in your browser by visiting `http://localhost:8080/#/`.
48 | 
49 | 
50 | ### Compiles and minifies for production
51 | 
52 | When you are ready to ship your project, simply run `npm run build` or `yarn build` from the root of your project. This will create a production ready version of your project.
53 | 
54 | 
55 | ### Lints and fixes files
56 | 
57 | `npm run lint` or `yarn lint` to run the linter. You can configure the linting rules via the `eslintConfig`  field in the `package.json`  file.
58 | 
59 | See the [ESLint documentation](https://eslint.org/docs/user-guide/configuring) for further detail.
60 | 
61 | 
62 | ### Customize configuration
63 | See [Configuration Reference](https://cli.vuejs.org/config/).
64 | 
65 | 
66 | ### Whats next?
67 | 
68 | At this point you should have the project fully up and running ready for you to add your theme or custom integrations. We look forward to seeing what you come up with!
69 | 
70 | ## Additional Resources
71 | 
72 | ### Join us on Slack
73 | 
74 | Join us on Slack with other eCommerce developers and designers. 
75 | 
76 | [![Join Us on Slack](https://github.com/chec/commercejs-vuejs-boilerplate/blob/master/src/assets/slackButton.png)](http://slack.commercejs.com)
77 | 
78 | 
79 | ### Documentation
80 | [Commerce.js SDK Docs](https://commercejs.com/docs/).  
81 | [Commerce.js API Docs](https://commercejs.com/docs/api/#introduction).  
82 | 
83 | ### Examples
84 | [Styled boilerplate demo](https://shoppable-campaign-demo.netlify.app/#/)
85 | 
86 | ## ⚠️ Note
87 | 
88 | ### This repository is no longer maintained
89 | However, we will accept issue reports and contributions for this repository. See the [contribute to the commerce community](https://commercejs.com/docs/community/contribute) page for more information on how to contribute to our open source projects. For update-to-date APIs, please check the latest version of the [API documentation](https://commercejs.com/docs/api/).
90 | 


--------------------------------------------------------------------------------
/Shoppable_Campaign.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chec/commercejs-vuejs-boilerplate/cd3b8f630f48291252ba85015b8cad1b17a47ffe/Shoppable_Campaign.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/example.env:
--------------------------------------------------------------------------------
1 | NODE_ENV=local
2 | VUE_APP_CHEC_PUBLIC_KEY=
3 | VUE_APP_CHEC_API_URL=https://api.chec.io


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "commerce-js-boilerplate",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@chec/commerce.js": "^2.0.1",
12 |     "core-js": "^3.6.4",
13 |     "jquery": "^3.5.1",
14 |     "popper.js": "^1.16.1",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.1.6"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "~4.3.0",
20 |     "@vue/cli-plugin-eslint": "~4.3.0",
21 |     "@vue/cli-plugin-router": "~4.3.0",
22 |     "@vue/cli-service": "~4.3.0",
23 |     "@vue/eslint-config-airbnb": "^5.0.2",
24 |     "babel-eslint": "^10.1.0",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-import": "^2.20.2",
27 |     "eslint-plugin-vue": "^6.2.2",
28 |     "node-sass": "^4.14.1",
29 |     "sass-loader": "^8.0.2",
30 |     "vue-template-compiler": "^2.6.11"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "@vue/airbnb"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     },
44 |     "rules": {}
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not dead"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chec/commercejs-vuejs-boilerplate/cd3b8f630f48291252ba85015b8cad1b17a47ffe/public/favicon.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.png">
 8 |     <title>CommerceJs Boilerplate</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but the store doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <cart
  4 |       :cart="cart"
  5 |       @checkout="checkout"
  6 |       @clear-cart="clearCart"
  7 |       @remove-from-cart="removeFromCart"
  8 |     />
  9 |     <hr>
 10 |     <router-view
 11 |       @add-to-cart="addToCart"
 12 |       @remove-from-cart="removeFromCart"
 13 |       :products="products"
 14 |       :merchant="merchant"
 15 |       :checkout-token="checkoutToken"
 16 |       :cart="cart"
 17 |       :orderRef="orderRef"
 18 |     />
 19 |   </div>
 20 | </template>
 21 | <script>
 22 | import Cart from './views/Cart.vue';
 23 | 
 24 | export default {
 25 |   name: 'app',
 26 |   components: {
 27 |     Cart,
 28 |   },
 29 |   data() {
 30 |     return {
 31 |       merchant: {
 32 |         business_name: 'Loading...',
 33 |       },
 34 |       products: [],
 35 |       cart: null,
 36 |       orderRef: null,
 37 |       checkoutToken: null,
 38 |     };
 39 |   },
 40 |   created() {
 41 |     this.getProducts();
 42 |     this.getMerchantInformation();
 43 |     this.getCart();
 44 |   },
 45 |   watch: {
 46 |     cart() {
 47 |       if (this.cart.line_items.length) {
 48 |         this.generateToken();
 49 |       }
 50 |     },
 51 |   },
 52 |   methods: {
 53 |     /**
 54 |      * Retrieves the list of products and stores them in the data object.
 55 |      * https://commercejs.com/docs/sdk/products#list-products
 56 |      *
 57 |      * @return {object} product list object.
 58 |      */
 59 |     getProducts() {
 60 |       this.$commerce.products.list().then((result) => {
 61 |         this.products = result.data.map((product) => product);
 62 |       }).catch((error) => {
 63 |         console.error(`Product Error: ${error.message}`);
 64 |       });
 65 |     },
 66 |     /**
 67 |      * Retrieves the the merchant data object and stores it in the data object.
 68 |      * https://commercejs.com/docs/sdk/full-sdk-reference#merchants
 69 |      *
 70 |      * @return {object} merchant data object.
 71 |      */
 72 |     getMerchantInformation() {
 73 |       this.$commerce.merchants.about().then((result) => {
 74 |         this.merchant = result;
 75 |         document.title = `${this.merchant.business_name} - Boilerplate`;
 76 |       }).catch((error) => {
 77 |         console.error(`Merchant Error: ${error.message}`);
 78 |       });
 79 |     },
 80 |     /**
 81 |      * Creates the cart object and stores it.
 82 |      * https://commercejs.com/docs/sdk/cart#retrieve-cart
 83 |      *
 84 |      * @return {object} The initial cart object.
 85 |      */
 86 |     getCart() {
 87 |       this.$commerce.cart.retrieve().then((result) => {
 88 |         this.cart = result;
 89 |       }).catch((error) => {
 90 |         console.error(`Cart Error: ${error.message}`);
 91 |       });
 92 |     },
 93 |     /**
 94 |      * Add's the selected product to the live cart object.
 95 |      * https://commercejs.com/docs/sdk/cart#add-to-cart
 96 |      *
 97 |      * @param {string} Product item Id.
 98 |      * @param {number} Quantity of product to be added.
 99 |      * @param {string} Product variant id.
100 |      *
101 |      * @return {object} The updated cart object.
102 |      */
103 |     addToCart({ productId, productAmount, productVariant }) {
104 |       this.$commerce.cart.add(
105 |         productId,
106 |         productAmount,
107 |         productVariant,
108 |       ).then((result) => {
109 |         this.cart = result.cart;
110 |       }).catch((error) => {
111 |         console.error(`Add to Cart Error: ${error.message}`);
112 |       });
113 |     },
114 |     /**
115 |      * Clear's all items from the live cart object.
116 |      * https://commercejs.com/docs/sdk/cart#empty-cart
117 |      *
118 |      * @return {object} The updated, now empty, cart object.
119 |      */
120 |     clearCart() {
121 |       this.$commerce.cart.empty().then((result) => {
122 |         this.cart = result.cart;
123 |       }).catch((error) => {
124 |         console.error(`Clear Cart Error: ${error.message}`);
125 |       });
126 |     },
127 |     /**
128 |      * Removes a single item from the cart object.
129 |      * https://commercejs.com/docs/sdk/cart#remove-from-cart
130 |      *
131 |      * @param {string} Product Item Id.
132 |      *
133 |      * @return {object} The updated, cart object.
134 |      */
135 |     removeFromCart(itemId) {
136 |       this.$commerce.cart.remove(itemId).then((result) => {
137 |         this.cart = result.cart;
138 |       }).catch((error) => {
139 |         console.error(`Remove from Cart Error: ${error.message}`);
140 |       });
141 |     },
142 |     /**
143 |      * Navigates to the checkout page.
144 |      */
145 |     checkout() {
146 |       this.$router.push('/checkout');
147 |     },
148 |     /**
149 |      * Generates the checkout token from the cart ID that can be used
150 |      * to initiate the capturing of an order.
151 |      * https://commercejs.com/docs/sdk/checkout#generate-token
152 |      *
153 |      * @return {object} Checkout token object containing everything needed
154 |      * for a checkout page.
155 |      */
156 |     generateToken() {
157 |       this.$commerce.checkout.generateToken(
158 |         this.cart.id,
159 |         { type: 'cart' },
160 |       ).then((result) => {
161 |         this.checkoutToken = result.id;
162 |       }).catch((error) => {
163 |         console.log(error);
164 |       });
165 |     },
166 |   },
167 | };
168 | </script>
169 | <style lang="scss">
170 |   @import 'styles/index.scss';
171 | </style>
172 | 


--------------------------------------------------------------------------------
/src/Info.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="text-align: center; margin-top: 10rem; color:#283341">
 3 |     <svg fill="#41556C" style="display: block; margin:2rem auto;" width="95" height="90" xmlns="http://www.w3.org/2000/svg" data-v-00a1771e="" class=""><path d="M53.688 0.756117C54.6961 -0.252039 56.3307 -0.252039 57.3394 0.756117L92.1756 35.5982C93.1838 36.6063 93.1838 38.2414 92.1756 39.2502L88.9904 42.4353L50.5034 3.94245L53.688 0.756117Z" data-v-00a1771e=""></path><path d="M61.0131 22.2828L39.8008 1.07695C38.7926 0.0687988 37.1564 0.0687982 36.1494 1.07813L1.75597 35.4926C0.747814 36.5014 0.747815 38.1365 1.75714 39.1446L21.1455 58.526C22.1537 59.5335 23.7858 59.5347 24.7957 58.5271L46.9259 36.4398L69.1211 58.54C70.1275 59.5423 71.7533 59.5435 72.762 58.5424L84.8833 46.5108L61.0131 22.2828ZM29.884 36.9559C25.8907 36.9559 22.783 33.7045 22.783 29.8548C22.783 26.0034 25.8907 22.7532 29.884 22.7532C33.8774 22.7532 36.9851 26.004 36.9851 29.8548C36.9839 33.7056 33.8762 36.9559 29.884 36.9559Z" data-v-00a1771e=""></path><path d="M32.4299 30.4688C32.4229 30.1357 32.288 29.8372 32.0247 29.5739C31.8282 29.3768 31.6159 29.2618 31.3895 29.2284C31.159 29.1921 30.9391 29.205 30.7291 29.2683C30.5221 29.3287 30.2605 29.4266 29.9438 29.5633C29.6535 29.6929 29.4318 29.785 29.2788 29.8384C29.1251 29.8847 28.9902 29.9029 28.8735 29.8935C28.7603 29.88 28.6536 29.8231 28.5533 29.7234C28.4131 29.5832 28.3533 29.4266 28.3732 29.253C28.3932 29.0795 28.4337 28.893 28.7668 28.5592L29.4295 27.8965L28.9896 27.4567L28.5034 27.9429C28.48 27.9528 28.4618 27.9511 28.4483 27.9382L28.0829 27.5528C28.0665 27.5364 28.0466 27.5294 28.0225 27.5329C27.9991 27.5294 27.9791 27.5364 27.9627 27.5528L27.5721 27.9429C27.5557 27.9599 27.5475 27.981 27.5475 28.008C27.5475 28.0279 27.5557 28.0461 27.5721 28.0631L27.9522 28.4232C27.9651 28.4367 27.9668 28.4549 27.9568 28.4783C27.7299 28.785 27.6202 29.0988 27.6267 29.419C27.6366 29.7357 27.7686 30.0207 28.0219 30.2741C28.2184 30.4712 28.4307 30.5896 28.6571 30.6289C28.8805 30.6659 29.1005 30.6524 29.3169 30.5896C29.5339 30.5263 29.7972 30.426 30.1075 30.2894C30.3907 30.1726 30.6095 30.0905 30.7626 30.0442C30.9162 29.9908 31.0529 29.9709 31.1731 29.9838C31.2898 29.9938 31.3948 30.0454 31.488 30.1392C31.6247 30.2753 31.6863 30.4377 31.6728 30.6242C31.6628 30.8072 31.5848 31.026 31.3877 31.2224L30.4212 32.1544L30.8388 32.6042L31.5027 32.0054C31.5262 31.9954 31.5443 31.9972 31.5578 32.0107L31.888 32.3508C31.9044 32.3672 31.9232 32.3755 31.9431 32.3755C31.9695 32.3755 31.9918 32.3672 32.0082 32.3508L32.3988 31.9608C32.4153 31.9438 32.4223 31.9245 32.4188 31.9004C32.4217 31.8769 32.4153 31.857 32.3988 31.84L32.064 31.5145C32.0505 31.5016 32.0487 31.4828 32.0587 31.4594C32.3132 31.1321 32.437 30.8019 32.4299 30.4688Z" data-v-00a1771e=""></path></svg>
 4 |     <h3>CommerceJs API Key Not Found</h3>
 5 |     <p style="width: 50%; margin:1rem auto">
 6 |       Looks like you havent provided a CommerceJs API key!
 7 |       You can find your API key in the settings section of the Dashboard.
 8 |       Please visit the link below to get started!
 9 |     </p>
10 |     <a style="color:#41556C; text-decoration: underline;" href="https://dashboard.chec.io/">Visit Chec Dashboard</a>
11 |   </div>
12 | </template>
13 | <script>
14 | export default {
15 |   name: 'info',
16 | };
17 | </script>
18 | <style lang="scss">
19 |   @import 'styles/index.scss';
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/assets/Boilerplatedemo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chec/commercejs-vuejs-boilerplate/cd3b8f630f48291252ba85015b8cad1b17a47ffe/src/assets/Boilerplatedemo.png


--------------------------------------------------------------------------------
/src/assets/Shoppable_Campaign.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chec/commercejs-vuejs-boilerplate/cd3b8f630f48291252ba85015b8cad1b17a47ffe/src/assets/Shoppable_Campaign.png


--------------------------------------------------------------------------------
/src/assets/boilerplate.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chec/commercejs-vuejs-boilerplate/cd3b8f630f48291252ba85015b8cad1b17a47ffe/src/assets/boilerplate.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chec/commercejs-vuejs-boilerplate/cd3b8f630f48291252ba85015b8cad1b17a47ffe/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/slackButton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chec/commercejs-vuejs-boilerplate/cd3b8f630f48291252ba85015b8cad1b17a47ffe/src/assets/slackButton.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Commerce from '@chec/commerce.js';
 2 | 
 3 | import Vue from 'vue';
 4 | import App from './App.vue';
 5 | import Info from './Info.vue';
 6 | import router from './router';
 7 | 
 8 | Vue.config.productionTip = false;
 9 | 
10 | /**
11 |  * Instantiates the Commercejs SDK.
12 |  */
13 | const commerce = (typeof process.env.VUE_APP_CHEC_PUBLIC_KEY !== 'undefined')
14 |   ? new Commerce(process.env.VUE_APP_CHEC_PUBLIC_KEY, true)
15 |   : null;
16 | 
17 | Vue.mixin({
18 |   beforeCreate() {
19 |     this.$commerce = commerce;
20 |   },
21 | });
22 | 
23 | new Vue({
24 |   router,
25 |   render: (h) => h((commerce !== null) ? App : Info),
26 | }).$mount('#app');
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | 
 4 | Vue.use(VueRouter);
 5 | 
 6 | const routes = [
 7 |   {
 8 |     path: '/',
 9 |     name: 'Products',
10 |     component: () => import('../views/ProductLanding.vue'),
11 |   },
12 |   {
13 |     path: '/checkout',
14 |     name: 'Checkout',
15 |     component: () => import('../views/Checkout.vue'),
16 |   },
17 |   {
18 |     path: '/order-confirmation',
19 |     name: 'Order Confirmation',
20 |     component: () => import('../views/Confirmation.vue'),
21 |   },
22 |   {
23 |     path: '*',
24 |     name: 'Page Not Found',
25 |     component: () => import('../views/PageNotFound.vue'),
26 |   },
27 | ];
28 | const router = new VueRouter({
29 |   routes,
30 |   scrollBehavior() {
31 |     return { x: 0, y: 0 };
32 |   },
33 | });
34 | 
35 | export default router;
36 | 


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Muli:wght@400;600;700;900&display=swap');
2 | 
3 | body{
4 |   font-family: 'Muli';
5 | }


--------------------------------------------------------------------------------
/src/views/Cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cart">
 3 |     <div @click="cartVisible = !cartVisible">
 4 |       <span v-if="!cartVisible">
 5 |         Cart
 6 |       </span>
 7 |       <span v-else>
 8 |         Close
 9 |       </span>
10 |       <span v-if="cart !== null">({{this.cart.total_items}})</span>
11 |     </div>
12 |     <div v-if="cartVisible">
13 |       <h3>Cart</h3>
14 |       <button @click="$emit('clear-cart')">Clear Cart</button>
15 |       <div v-if="cart.line_items.length">
16 |         <div class="item-listing">
17 |           <CartItem
18 |           @remove-from-cart="$emit('remove-from-cart', $event)"
19 |           v-for="(item, index) in cart.line_items"
20 |           :key="index"
21 |           :item="item"
22 |         />
23 |         </div>
24 |         <hr>
25 |         <button @click="$emit('checkout')">Checkout</button>
26 |         <div>Total: {{cart.subtotal.formatted_with_symbol}}</div>
27 |       </div>
28 |       <div class="no-cart" v-else>
29 |         <p class="text-center">Your cart appears to be empty</p>
30 |       </div>
31 |     </div>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import CartItem from './CartItem.vue';
37 | 
38 | export default {
39 |   name: 'Cart',
40 |   props: ['cart'],
41 |   components: {
42 |     CartItem,
43 |   },
44 |   data() {
45 |     return {
46 |       cartVisible: false,
47 |     };
48 |   },
49 | };
50 | </script>
51 | 
52 | <style lang="scss">
53 |   .cart{
54 |     .item-listing{
55 |       display: grid;
56 |       grid-template-columns: repeat(2, 1fr);
57 |     }
58 |     background-color: WhiteSmoke;
59 |   }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/views/CartItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cart-item">
 3 |     <hr>
 4 |     <img :src="item.media.source" alt="">
 5 |     <h5>{{item.name}}</h5>
 6 |     <p>Quantity: {{item.quantity}}</p>
 7 |     <p
 8 |       v-if="item.variants.length"
 9 |     >Size: {{item.variants[0].option_name}}</p>
10 |     <button @click="$emit('remove-from-cart', item.id)">
11 |       Remove
12 |     </button>
13 |     <p><strong>{{item.line_total.formatted_with_symbol}}</strong></p>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: 'CartItem',
20 |   props: ['item'],
21 |   data() {
22 |     return {
23 |       cartVisible: false,
24 |     };
25 |   },
26 | };
27 | </script>
28 | 
29 | <style lang="scss">
30 |   .cart-item{
31 |     max-width: 200px;
32 |     img{
33 |       max-width: 100%;
34 |     }
35 |   }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/views/CategoryFilter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="Object.keys(categories).length > 0">
 3 |     <button @click="selectedCategory = ''">
 4 |       Clear
 5 |     </button>
 6 |     <div>
 7 |       <select v-model="selectedCategory">
 8 |         <option value="">Filter Categories...</option>
 9 |         <option
10 |           :value="category.name"
11 |           :key="index"
12 |           v-for="(category, index) in categories.data"
13 |         >
14 |           {{category.name}}
15 |         </option>
16 |       </select>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: 'CategoryFilter',
24 |   props: ['categories'],
25 |   data() {
26 |     return {
27 |       selectedCategory: '',
28 |     };
29 |   },
30 |   watch: {
31 |     selectedCategory() {
32 |       this.$emit('input', this.selectedCategory);
33 |     },
34 |   },
35 | };
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/views/Checkout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section>
  3 |     <div v-if="liveObject !== null">
  4 |       <div v-if="message.copy !== ''"
  5 |         style="color:red"
  6 |       >
  7 |         <strong>Holy guacamole!</strong> an error occured:
  8 |         <p v-html="message.copy">Loading...</p>
  9 |       </div>
 10 |       <h1 class="checkout-heading">Checkout</h1>
 11 |       <h4>Customer Details</h4>
 12 |       <label for="">First Name</label>
 13 |       <input v-model="fields.customer.firstname" type="text">
 14 |       <label for="">Last Name</label>
 15 |       <label for="">Email</label>
 16 |       <input v-model="fields.customer.email" type="text">
 17 |       <h4>Shipping Details</h4>
 18 |       <label for="">Name</label>
 19 |       <input v-model="fields.shipping.name" type="text">
 20 |       <label for="">Street</label>
 21 |       <input v-model="fields.shipping.street" type="text">
 22 |       <label for="">City/Town</label>
 23 |       <input v-model="fields.shipping.town_city" type="text">
 24 |       <label for="">Province</label>
 25 |       <input v-model="fields.shipping.county_state"
 26 |         type="text"
 27 |       >
 28 |       <label for="">Country</label>
 29 |       <input v-model="fields.shipping.country" type="text" disabled="">
 30 |       <label for="">Postal/Zip</label>
 31 |       <input
 32 |         v-model="fields.shipping.postal_zip_code"
 33 |         type="text"
 34 | 
 35 |       >
 36 |       <h4>Shipping Options</h4>
 37 |       <label for="">Shipping Method</label>
 38 |       <select
 39 |         v-model="fields.fulfillment.shipping_method"
 40 |         name=""
 41 |       >
 42 |           <option value="">Choose...</option>
 43 |           <option
 44 |             :key="index"
 45 |             v-for="(option, index) in shippingOptions"
 46 |             :value="option.id"
 47 |           >
 48 |             {{option.description}}
 49 |           </option>
 50 |       </select>
 51 |       <h4>Payment Details</h4>
 52 |       <label for="">Card Number</label>
 53 |       <input v-model="fields.payment.card.number" type="text">
 54 |       <label for="">Expiry Month</label>
 55 |       <input v-model="fields.payment.card.expiry_month" type="text">
 56 |       <label for="">Expiry Year</label>
 57 |       <input v-model="fields.payment.card.expiry_year" type="text">
 58 |       <label for="">CVC</label>
 59 |       <input v-model="fields.payment.card.cvc" type="text">
 60 |       <label for="">Postal Code</label>
 61 |       <input v-model="fields.payment.card.postal_zip_code" type="text">
 62 |       <hr>
 63 |       <h1>Cart</h1>
 64 |       <div>
 65 |         <CartItem
 66 |           @remove-from-cart="$emit('remove-from-cart', $event)"
 67 |           v-for="(item, index) in cart.line_items"
 68 |           :key="index"
 69 |           :item="item"
 70 |         />
 71 |         <div v-if="shippingOptions.length">
 72 |           <strong>Shipping:</strong> {{shippingOptions[0].price.formatted_with_symbol}}
 73 |         </div>
 74 |         <div v-if="liveObject.tax.amount.raw !== 0">
 75 |           <strong>Tax:</strong> {{liveObject.tax.amount.formatted_with_symbol}}
 76 |         </div>
 77 |         <div>
 78 |           <strong>Total:</strong> {{liveObject.total_due.formatted_with_symbol}}
 79 |         </div>
 80 |       </div>
 81 |       <button
 82 |         @click="captureCheckout()"
 83 |       >Confirm Order</button>
 84 |     </div>
 85 |     <div v-else>
 86 |       <h5>Your cart appears to be empty</h5>
 87 |       <a href="/">Take me home</a>
 88 |     </div>
 89 |   </section>
 90 | </template>
 91 | 
 92 | <script>
 93 | import CartItem from './CartItem.vue';
 94 | 
 95 | export default {
 96 |   name: 'Checkout',
 97 |   props: ['cart', 'merchant', 'checkoutToken'],
 98 |   components: {
 99 |     CartItem,
100 |   },
101 |   data() {
102 |     return {
103 |       fields: {
104 |         customer: {
105 |           firstname: 'John',
106 |           lastname: 'Doe',
107 |           email: 'john.doe@example.com',
108 |         },
109 |         shipping: {
110 |           name: 'John Doe',
111 |           street: '123 Fake St',
112 |           town_city: 'San Francisco',
113 |           county_state: 'CA',
114 |           postal_zip_code: '94103',
115 |           country: 'US',
116 |         },
117 |         fulfillment: {
118 |           shipping_method: '',
119 |         },
120 |         payment: {
121 |           gateway: 'test_gateway',
122 |           card: {
123 |             number: '4242 4242 4242 4242',
124 |             expiry_month: '01',
125 |             expiry_year: '2023',
126 |             cvc: '123',
127 |             postal_zip_code: '94103',
128 |           },
129 |         },
130 |       },
131 |       shippingOptions: [],
132 |       message: {
133 |         status: 'alert-danger',
134 |         copy: '',
135 |       },
136 |       liveObject: null,
137 |     };
138 |   },
139 |   watch: {
140 |     checkoutToken() {
141 |       this.generateLiveObject();
142 |       this.getShippingMethods(this.checkoutToken, this.fields.shipping.country);
143 |     },
144 |     selectedCountry() {
145 |       if (this.selectedCountry !== '' && this.selectedCounty !== '') {
146 |         this.getShippingMethods(this.checkoutToken, this.fields.shipping.country);
147 |       }
148 |     },
149 |     selectedPostal() {
150 |       this.calculateTax(this.fields.shipping);
151 |     },
152 |     selectedCounty() {
153 |       this.calculateTax(this.fields.shipping);
154 |     },
155 |     selectedFullfillment() {
156 |       this.checkShippingMethods(this.fields.fulfillment.shipping_method, this.fields.shipping);
157 |     },
158 |     message: {
159 |       handler() {
160 |         setTimeout(() => {
161 |           this.message.copy = '';
162 |         }, 3000);
163 |       },
164 |       deep: true,
165 |     },
166 |   },
167 |   computed: {
168 |     selectedCountry() {
169 |       return this.fields.shipping.country;
170 |     },
171 |     selectedPostal() {
172 |       return this.fields.shipping.postal_zip_code;
173 |     },
174 |     selectedCounty() {
175 |       return this.fields.shipping.county_state;
176 |     },
177 |     selectedFullfillment() {
178 |       return this.fields.fulfillment.shipping_method;
179 |     },
180 |   },
181 |   mounted() {
182 |     if (this.checkoutToken == null) {
183 |       return;
184 |     }
185 |     this.generateLiveObject();
186 |     this.getShippingMethods(this.checkoutToken, this.fields.shipping.country);
187 |   },
188 |   methods: {
189 |     /**
190 |      * Gets the available shipping options
191 |      * https://commercejs.com/docs/sdk/full-sdk-reference#checkout
192 |      *
193 |      * @param {string} Checkout Token
194 |      * @param {object} Selected Country
195 |      *
196 |      * @return {object} List of available shipping options as defined
197 |      * by the merchant.
198 |      */
199 |     getShippingMethods(checkoutToken, country) {
200 |       this.$commerce.checkout.getShippingOptions(checkoutToken, { country }).then((result) => {
201 |         this.shippingOptions = result;
202 |       }).catch((error) => {
203 |         console.error(`Product Error: ${error.message}`);
204 |       });
205 |     },
206 |     /**
207 |      * Capture the order and payment.
208 |      * https://commercejs.com/docs/sdk/checkout#capture-order
209 |      *
210 |      * @param {string} Checkout Token.
211 |      * @param {object} Selected products, customer information,shipping information,
212 |      * fullfillment option selected and payment information.
213 |      *
214 |      * @return {object} Order object to be used for reciepts.
215 |      */
216 |     captureCheckout() {
217 |       this.$commerce.checkout.capture(
218 |         this.checkoutToken,
219 |         {
220 |           line_items: this.lineItemsSanitized(this.cart.line_items),
221 |           customer: this.fields.customer,
222 |           shipping: this.fields.shipping,
223 |           fulfillment: this.fields.fulfillment,
224 |           payment: this.fields.payment,
225 |         },
226 |       ).then((result) => {
227 |         this.$parent.orderRef = result.customer_reference;
228 |         this.$parent.getCart();
229 |         this.$router.push('/order-confirmation');
230 |       }).catch((error) => {
231 |         this.message.copy = `<strong>${error.data.status_code}</strong>: ${error.data.error.message}`;
232 |       });
233 |     },
234 |     /**
235 |      * Sanitize the line items and get them ready for the order capture.
236 |      */
237 |     lineItemsSanitized(lineItems) {
238 |       return lineItems.reduce((data, lineItem) => {
239 |         const item = data;
240 |         let variantData = null;
241 |         if (lineItem.variants.length) {
242 |           variantData = {
243 |             [lineItem.variants[0].variant_id]: lineItem.variants[0].option_id,
244 |           };
245 |         }
246 |         item[lineItem.id] = {
247 |           quantity: lineItem.quantity,
248 |           variants: variantData,
249 |         };
250 |         return item;
251 |       }, {});
252 |     },
253 |     /**
254 |      * Retrieves the live object for use displaying the live cart,
255 |      * shipping, tax and total costs.
256 |      * https://commercejs.com/docs/sdk/checkout#get-the-live-object
257 |      *
258 |      * @param {string} Checkout token.
259 |      *
260 |      * @return {object} Live checkout object.
261 |      */
262 |     generateLiveObject() {
263 |       this.$commerce.checkout.getLive(this.checkoutToken)
264 |         .then((response) => {
265 |           console.log('liveObject');
266 |           console.log(response);
267 |           this.liveObject = response;
268 |         })
269 |         .catch((error) => {
270 |           this.message.copy = `<strong>${error.data.status_code}</strong>: ${error.data.error.message}`;
271 |         });
272 |     },
273 |     /**
274 |      * Validates the selected shipping method and applies it to the order.
275 |      * https://commercejs.com/docs/sdk/checkout#check-shipping-method
276 |      *
277 |      * @param {string} Shipping option id.
278 |      * @param {string} Country Code eg: US
279 |      * @param {string} Region Code eg: CA
280 |      */
281 |     checkShippingMethods(shippingId, shippingData) {
282 |       this.$commerce.checkout.checkShippingOption(this.checkoutToken, {
283 |         shipping_option_id: shippingId,
284 |         country: shippingData.country,
285 |         region: shippingData.county_state,
286 |       })
287 |         .then(() => {
288 |           this.generateLiveObject();
289 |         })
290 |         .catch((error) => {
291 |           this.message.copy = `<strong>Error:</strong>: ${error.data.error.message}`;
292 |         });
293 |     },
294 |     /**
295 |      * Sets the tax zone to the order based on location.
296 |      * https://commercejs.com/docs/sdk/checkout#set-tax-zone
297 |      *
298 |      * @param {string} Checkout token.
299 |      * @param {string} Country Code eg: US
300 |      * @param {string} Region Code eg: CA
301 |      * @param {string} Postal/ZIP Code
302 |      *
303 |      * @return {object} Live checkout object.
304 |      */
305 |     calculateTax(shippingData) {
306 |       this.$commerce.checkout.setTaxZone(this.checkoutToken, {
307 |         country: shippingData.country,
308 |         region: shippingData.county_state,
309 |         postal_zip_code: shippingData.postal_zip_code,
310 |       })
311 |         .then(() => {
312 |           this.generateLiveObject();
313 |         })
314 |         .catch((error) => {
315 |           this.message.copy = `<strong>Error:</strong>: ${error.data.error.message}`;
316 |         });
317 |     },
318 |   },
319 | };
320 | </script>
321 | 


--------------------------------------------------------------------------------
/src/views/Confirmation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Thank you!</h1>
 4 |     <h3>Your order has been received</h3>
 5 |     <p><strong>Order Reference:</strong> {{orderRef}}</p>
 6 |     <p>
 7 |       Contact us by email at
 8 |       <a :href="'mailto:' + merchant.support_email">{{merchant.support_email}}</a>
 9 |     </p>
10 |     <button>
11 |       Back to Home
12 |     </button>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'Confirmation',
19 |   props: ['orderRef', 'merchant'],
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/views/PageNotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section>
 3 |         <h1>404</h1>
 4 |         <h3>holy guacamole! Looks like this page doesnt exist.</h3>
 5 |         <a href="/" class="button-primary">
 6 |             <span>Back to Home</span>
 7 |         </a>
 8 |         <p>
 9 |             Contact us by email at
10 |             <a :href="'mailto:' + merchant.support_email">
11 |             {{merchant.support_email}}
12 |         </a>
13 |         </p>
14 |     </section>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: 'Error',
20 |   props: ['merchant'],
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/views/ProductItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="product-item" v-if="product">
  3 |       <hr>
  4 |       <img :src="product.media.source" alt="">
  5 |       <h3>{{product.name}}</h3>
  6 |       <div v-html="product.description">
  7 |         Loading...
  8 |       </div>
  9 |       <div v-if="product.variants">
 10 |           <div
 11 |               :key="index"
 12 |               v-for="(variant, index) in product.variants">
 13 |               <div>${{product.price.formatted}}</div>
 14 |               <select
 15 |                   v-model="selectedVariant"
 16 |                   :name="variant.name"
 17 |                   placeholder="Choose..."
 18 |               >
 19 |                   <option value="">Choose...</option>
 20 |                   <option
 21 |                     :value="option"
 22 |                     :key="index"
 23 |                     v-for="(option, index) in variant.options"
 24 |                   >
 25 |                     {{ option.name }}
 26 |                   </option>
 27 |               </select>
 28 |           </div>
 29 |       </div>
 30 |       <div>
 31 |         <label for="">Quantity</label>
 32 |         <input
 33 |           v-model="selectedAmount"
 34 |           type="text"
 35 |         >
 36 |       </div>
 37 |       <div>
 38 |         <button
 39 |           @click="addToCart()"
 40 |           :disabled="quantityWarning.enabled"
 41 |         >
 42 |           <span>Add to Cart</span>
 43 |         </button>
 44 |       </div>
 45 |     </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | export default {
 50 |   name: 'ProductItem',
 51 |   props: ['product', 'index'],
 52 |   data() {
 53 |     return {
 54 |       selectedVariant: '',
 55 |       selectedAmount: 1,
 56 |       quantityWarning: {
 57 |         enabled: false,
 58 |         amount: '',
 59 |       },
 60 |     };
 61 |   },
 62 |   methods: {
 63 |     /**
 64 |      * Checks the instock quantity for the product
 65 |      * and disables the add to cart button if
 66 |      * not enough stock is available.
 67 |      */
 68 |     checkQuantity() {
 69 |       this.quantityWarning.enabled = false;
 70 |       let amount = this.product.quantity;
 71 |       if (this.product.variants) {
 72 |         amount = this.selectedVariant.quantity;
 73 |       }
 74 |       if (amount < this.selectedAmount) {
 75 |         this.quantityWarning.enabled = true;
 76 |         this.quantityWarning.amount = amount;
 77 |       }
 78 |     },
 79 |     /**
 80 |      * Add the product to the cart.
 81 |      */
 82 |     addToCart() {
 83 |       let variant = null;
 84 |       if (this.product.variants.length !== 0) {
 85 |         variant = { [this.product.variants[0].id]: this.selectedVariant.id };
 86 |       }
 87 |       this.$emit('add-to-cart', {
 88 |         productId: this.product.id,
 89 |         productAmount: this.selectedAmount,
 90 |         productVariant: variant,
 91 |       });
 92 |     },
 93 |   },
 94 | };
 95 | </script>
 96 | 
 97 | <style lang="scss">
 98 |   .product-item{
 99 |     margin: 0.5rem 1rem;
100 |     img{
101 |       max-width: 50%;
102 |     }
103 |   }
104 | </style>
105 | 


--------------------------------------------------------------------------------
/src/views/ProductLanding.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <CategoryFilter
 4 |       :categories="categories"
 5 |       v-model="selectedCategory"
 6 |     />
 7 |     <div v-if="this.filteredItems"
 8 |       class="product-listing"
 9 |     >
10 |         <ProductItem
11 |           @add-to-cart="$emit('add-to-cart', $event)"
12 |           v-for="(product, index) in filteredItems" :key="index"
13 |           :product="product"
14 |           :index="index"
15 |         />
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import CategoryFilter from './CategoryFilter.vue';
22 | import ProductItem from './ProductItem.vue';
23 | 
24 | export default {
25 |   name: 'ProductLanding',
26 |   props: {
27 |     products: {
28 |       type: Array,
29 |       default: () => [],
30 |     },
31 |     merchant: {
32 |       type: Object,
33 |       default: () => [],
34 |     },
35 |   },
36 |   data() {
37 |     return {
38 |       selectedCategory: '',
39 |       categories: [],
40 |     };
41 |   },
42 |   components: {
43 |     CategoryFilter,
44 |     ProductItem,
45 |   },
46 |   mounted() {
47 |     this.getCategories();
48 |   },
49 |   computed: {
50 |     /**
51 |      * Filters the visible products based on the category
52 |      * selected. If no category is selected, it returns
53 |      * all products.
54 |      */
55 |     filteredItems() {
56 |       let filteredProducts = this.products;
57 | 
58 |       if (this.selectedCategory !== '') {
59 |         filteredProducts = this.products.filter((product) => product.categories.length > 0
60 |           && product.categories[0].name === this.selectedCategory);
61 |       }
62 | 
63 |       return filteredProducts;
64 |     },
65 |   },
66 |   methods: {
67 |     /**
68 |      * Retrieve a list of the categories.
69 |      * https://commercejs.com/docs/sdk/products#list-categories
70 |      *
71 |      * @return {object} List of categories.
72 |      */
73 |     getCategories() {
74 |       this.$commerce.categories.list().then((result) => {
75 |         this.categories = result;
76 |       }).catch((error) => {
77 |         console.error(`Category Retreval Error: ${error.message}`);
78 |       });
79 |     },
80 |   },
81 | };
82 | </script>
83 | 
84 | <style lang="scss">
85 |   .product-listing{
86 |     display: grid;
87 |     grid-template-columns: repeat(2, 1fr);
88 |   }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | // module.exports = {
 2 | 
 3 | //   publicPath: '/',
 4 | 
 5 | //   css: {
 6 | //     loaderOptions: {
 7 | //       sass: {
 8 | //         prependData:
 9 | //         `@import "@/styles/_variables.scss";
10 | //         @import "@/styles/_styles.scss";`,
11 | //       },
12 | //     },
13 | //   },
14 | // };
15 | 


--------------------------------------------------------------------------------