├── .babelrc ├── .env-sample ├── .github └── probots.yml ├── .gitignore ├── .postcssrc.js ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── slate.config.js └── src ├── assets └── .gitkeep ├── config ├── settings_data.json └── settings_schema.json ├── layout └── theme.liquid ├── locales └── en.default.json ├── scripts ├── layout │ └── theme.js ├── sections │ └── .gitkeep └── templates │ └── .gitkeep ├── sections └── .gitkeep ├── snippets └── .gitkeep ├── styles ├── theme.scss └── theme.scss.liquid ├── templates ├── 404.liquid ├── article.liquid ├── blog.liquid ├── cart.liquid ├── collection.liquid ├── customers │ ├── account.liquid │ ├── activate_account.liquid │ ├── addresses.liquid │ ├── login.liquid │ ├── order.liquid │ ├── register.liquid │ └── reset_password.liquid ├── gift_card.liquid ├── index.liquid ├── list-collections.liquid ├── page.contact.liquid ├── page.liquid ├── password.liquid ├── product.liquid └── search.liquid └── vue ├── components └── ExampleComponent.vue ├── mountVue.js └── store └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["shopify/web", "babel-preset-env", "vue"], 3 | "plugins": ["transform-async-to-generator"] 4 | } 5 | -------------------------------------------------------------------------------- /.env-sample: -------------------------------------------------------------------------------- 1 | SLATE_STORE= 2 | 3 | 4 | SLATE_PASSWORD= 5 | 6 | 7 | SLATE_THEME_ID= 8 | 9 | 10 | SLATE_IGNORE_FILES=/config/settings_data.json 11 | -------------------------------------------------------------------------------- /.github/probots.yml: -------------------------------------------------------------------------------- 1 | enabled: 2 | - cla 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # This file contains a list of files and folders to be ignored when 2 | # committing to a git repository. Ignored files are both Slate project 3 | # specific files as well as commonly ignored files on any project. 4 | 5 | # For more information on this .gitignore files, see GitHub's 6 | # documentation: https://help.github.com/articles/ignoring-files/ 7 | 8 | # Project # 9 | ################### 10 | node_modules 11 | dist 12 | upload 13 | deploy.log 14 | config/shopify.yml 15 | npm-debug.log 16 | .env 17 | .env.* 18 | 19 | 20 | # Compiled source # 21 | ################### 22 | *.com 23 | *.class 24 | *.dll 25 | *.exe 26 | *.o 27 | *.so 28 | 29 | # Packages # 30 | ############ 31 | # it's better to unpack these files and commit the raw source 32 | # git has its own built in compression methods 33 | *.7z 34 | *.dmg 35 | *.gz 36 | *.iso 37 | *.jar 38 | *.rar 39 | *.tar 40 | *.zip 41 | 42 | # Logs and databases # 43 | ###################### 44 | *.log 45 | *.sql 46 | *.sqlite 47 | 48 | # OS generated files # 49 | ###################### 50 | .DS_Store 51 | .DS_Store? 52 | ._* 53 | .Spotlight-V100 54 | .Trashes 55 | ehthumbs.db 56 | Thumbs.db 57 | 58 | # Custom # 59 | ###################### 60 | *.sass-cache* 61 | .cache/* 62 | _site 63 | /.idea 64 | /.vscode 65 | secrets.json 66 | .jekyll-metadata 67 | .ruby-version 68 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8.11.1" 4 | cache: 5 | yarn: true 6 | directories: 7 | - node_modules 8 | script: 9 | - yarn build 10 | notifications: 11 | email: false 12 | slack: 13 | secure: RvPL7N56A4CGjVaMdqm2Mcz9pPum7qDr1sn8lvSQvZdz0gHCA4340vhwbC+Ca7BpObE6hGGadsO6FrPVs6PXYQoISm5AW/WkSDmgKKebMxRrHqLrwmtn6Y3/jxNlIWsF5vaz8R/Teq204CGRclUMONfJHw7YbmNt7Qco2OYjU2BpRZo9DZ360nSWYFHa+Ohngh2hMHGWpQVBsYl5tayiy8l8C1/TPKU+Yo5j6rvmzAOviSd0mQtPiwWO5q7exJUJpoX0GKUK4vMFrrBSNdX9Q2LoCNH8RI9br58hHv3s2jeO06rEYV3txVhUViBrNwRY6SNv4Fy0eqFkstXJIXUy7nPVV10lkt/6vd9iRaW5Vansl4TMG4gP5wNRSiMqldxgntXT0geyHGFZezi1sO/wy5JJ7QtPzrLtR/7OpzOHfcHfEI9fvB2GH8/5Vs4vBBKT0rDf30nuhEbGlcvPWMIAnUVAMu6fmp7tdQtmYZC3pBhYAdVbnsddHF0yXcCvSSLUKOUWyxOwIqcjughFmoAzKlrDCl42MX2wohHNJr9ZDhYuu1e2eaVQ8ypg+Tkh6Ss/4lBjHrHFgF+YYoN1rTokA6ChCiTw8r8VEitrHkL/GT1vQKRvHr+f+PbbAfV4FCdLbv/k6OytMnsoPhmAQJ6tAcEbVqgiQouFaKN4Oh3PpeQ= 14 | on_success: change 15 | on_pull_requests: false 16 | template: 17 | - "%{repository_slug} (%{commit}) : %{message}" 18 | - "Build details: %{build_url}" 19 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct - from slate's original repository 2 | 3 | As contributors and maintainers of this project, and in the interest of 4 | fostering an open and welcoming community, we pledge to respect all 5 | people who contribute through reporting issues, posting feature 6 | requests, updating documentation, submitting pull requests or patches, 7 | and other activities. 8 | 9 | We are committed to making participation in this project a 10 | harassment-free experience for everyone, regardless of level of 11 | experience, gender, gender identity and expression, sexual orientation, 12 | disability, personal appearance, body size, race, ethnicity, age, 13 | religion, or nationality. 14 | 15 | Examples of unacceptable behavior by participants include: 16 | 17 | * The use of sexualized language or imagery 18 | * Personal attacks 19 | * Trolling or insulting/derogatory comments 20 | * Public or private harassment 21 | * Publishing other's private information, such as physical or electronic 22 | addresses, without explicit permission 23 | * Other unethical or unprofessional conduct 24 | 25 | Project maintainers have the right and responsibility to remove, edit, 26 | or reject comments, commits, code, wiki edits, issues, and other 27 | contributions that are not aligned to this Code of Conduct, or to ban 28 | temporarily or permanently any contributor for other behaviors that they 29 | deem inappropriate, threatening, offensive, or harmful. 30 | 31 | By adopting this Code of Conduct, project maintainers commit themselves 32 | to fairly and consistently applying these principles to every aspect of 33 | managing this project. Project maintainers who do not follow or enforce 34 | the Code of Conduct may be permanently removed from the project team. 35 | 36 | This Code of Conduct applies both within project spaces and in public 37 | spaces when an individual is representing the project or its community. 38 | 39 | Instances of abusive, harassing, or otherwise unacceptable behavior may 40 | be reported by contacting a project maintainer at . All complaints will be reviewed and investigated and will 41 | result in a response that is deemed necessary and appropriate to the 42 | circumstances. Maintainers are obligated to maintain confidentiality 43 | with regard to the reporter of an incident. 44 | 45 | This Code of Conduct is adapted from the Contributor Covenant, version 46 | 1.3.0, available from http://contributor-covenant.org/version/1/3/0/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | We ❤️ pull requests. If you'd like to fix a bug, contribute a feature or just correct a typo, please feel free to do so, as long as you follow our [Code of Conduct](https://github.com/Shopify/skeleton-theme/blob/master/CODE_OF_CONDUCT.md). 4 | 5 | If you're thinking of adding a big new feature, consider opening an issue first to discuss it to ensure it aligns to the direction of the project (and potentially save yourself some time!). 6 | 7 | ## Getting Started 8 | 9 | To start working on the codebase, first fork the repo, then clone it: 10 | 11 | ``` 12 | git clone git@github.com:your-username/skeleton-theme.git 13 | ``` 14 | 15 | _Note: replace "your-username" with your GitHub handle_ 16 | 17 | Install all package dependencies and link local packages: 18 | 19 | ``` 20 | yarn install 21 | ``` 22 | 23 | Write some features! 24 | 25 | ## Documentation 26 | 27 | If your change affects how people use the project (i.e. adding or removing 28 | functionality, changing the return value of a function, etc), 29 | please ensure the documentation is also updated to 30 | reflect this. 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Shopify Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## This is a vue starter template for slate, it is based on Shopify's starter template 2 | 3 | Thanks to [@dan-gamble](https://github.com/dan-gamble) for helping with the slate configurations 4 | 5 | This project is based off [shopify/skeleton-theme](https://github.com/shopify/skeleton-theme), checkout Slate for more information. 6 | 7 | ** do notice you should follow the slate guildlines for getting started, this is just a starter template, not a full project. 8 | 9 | #### Get started 10 | ``` 11 | $ yarn create slate-theme my-new-theme liron-navon/slate-vue-starter 12 | ``` 13 | 14 | ### How to work with slate for Shopify: 15 | 16 | - rename .env-sample to .env and setup your development store config. 17 | 18 | - run: npm start 19 | - slate will open your localhost, just ignore that, and go to your development store. 20 | - In the development store you should have your theme loaded 21 | - Changes will hot reload in the dev store. 22 | 23 | ### Using vue in shopify 24 | 25 | - Do notice that this is not meant to be an SPA, for that you can use storefront, vue here is purely to replace JQuery for logic operations and animations. 26 | 27 | #### How to pass store data to my vue components? 28 | 29 | Look at this snippet, this div element is going to be where our vue component will be rendered, 30 | You can pass `prop-` to it and fill in the data, in this example we will have a prop named `shopName` and it will receive the name of the shop 31 | 32 | ```html 33 |
36 | a vue component is rendered here (this text is replaced - but will show if js is disabled) 37 |
38 | ``` 39 | 40 | #### How to mount my components 41 | 42 | please use the helper function I made for it, it allows you to pass parameters from the liquid template to vue: 43 | 44 | ```js 45 | import ThemeComponent from '../../vue/layout/theme.vue'; 46 | import {mountVue} from '../../vue/mountVue'; 47 | 48 | // the component is rendered to replace the selected html element 49 | // and the props we defined will be passed to it 50 | mountVue(ThemeComponent, '#vue-theme-component'); 51 | ``` 52 | 53 | #### changes from the shopify barebone theme 54 | 55 | Do notice I tried to change as little as possible to allow this to be updated when shopify will change the starter template, 56 | The only files changed are: 57 | 1. scripts/layout/theme.js : added a function to load the vue component 58 | 2. layout/theme.liquid : added an anchor for vue to load on to 59 | 4. created /vue directory which contain all of the vue logic. 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slate-vue-starter", 3 | "version": "1.0.0", 4 | "private": true, 5 | "author": "Shopify Inc., Liron Navon", 6 | "description": "A barebones, Slate compatible, starting point for developing Shopify themes with vue.", 7 | "keywords": [ 8 | "shopify", 9 | "theme", 10 | "vue" 11 | ], 12 | "license": "MIT", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/liron-navon/slate-vue-starter.git" 16 | }, 17 | "devDependencies": { 18 | "@shopify/slate-tools": "^1.0.0-beta.18", 19 | "babel-core": "^6.26.3", 20 | "babel-loader": "^7.1.5", 21 | "babel-preset-env": "^1.7.0", 22 | "babel-preset-es2015": "^6.24.1", 23 | "babel-preset-es2016": "^6.24.1", 24 | "babel-preset-es2017": "^6.24.1", 25 | "babel-preset-shopify": "^16.6.0", 26 | "babel-preset-vue": "^2.0.2", 27 | "postcss-import": "^12.0.1", 28 | "postcss-url": "^8.0.0", 29 | "vue-loader": "^15.4.2", 30 | "vue-template-compiler": "^2.5.21" 31 | }, 32 | "scripts": { 33 | "start": "slate-tools start", 34 | "watch": "slate-tools start --skipFirstDeploy", 35 | "build": "slate-tools build", 36 | "deploy": "slate-tools build && slate-tools deploy", 37 | "zip": "slate-tools build && slate-tools zip" 38 | }, 39 | "dependencies": { 40 | "vue": "^2.5.21", 41 | "vuex": "^3.0.1", 42 | "vuex-persist": "^2.0.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /slate.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const path = require('path'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const {VueLoaderPlugin} = require('vue-loader'); 5 | const isDevelopment = process.env.NODE_ENV === 'development'; 6 | 7 | const alias = { 8 | jQuery: path.resolve('./node_modules/jquery'), 9 | $: path.resolve('./node_modules/jquery'), 10 | }; 11 | 12 | const part = { 13 | resolve: { 14 | alias, 15 | extensions: ['.js', '.css', '.json', '.vue'] 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.vue$/, 21 | loader: 'vue-loader' 22 | }, 23 | { 24 | test: /.js$/, 25 | loader: 'babel-loader', 26 | exclude: /node_modules/ 27 | } 28 | ] 29 | }, 30 | plugins: [ 31 | new VueLoaderPlugin() 32 | ] 33 | }; 34 | 35 | const styleLoader = { 36 | loader: 'style-loader', 37 | options: { 38 | hmr: isDevelopment 39 | } 40 | }; 41 | 42 | const cssLoader = { 43 | loader: 'css-loader', 44 | // Enabling sourcemaps in styles when using HMR causes style-loader to inject 45 | // styles using a tag instead of