New default template theme for Vue Storefront, based on Storefront UI. 90% of the Capybara code is closed in the Storefront UI library. Thanks to it, Capybara can maintain its flexibility, but minimize the risk of errors.
🔨 Current status: Developer's preview
We have prepared short introduction to our coding standards and conventions we are using in Capybara theme.
|
Try out our open demo and if you like it first give us some star on Github ★ and then contact us on Vue Storefront Official Slack or via [email protected]. This demo site is connected to Magento2. |
Capybara theme provides out of the box ready to use elements, like Cart, Checkout, Modals or Product-related components - to name only a few of them, which all are based on awesome Storefront UI. It provides new look & feel for the Vue Storefront with simpler development experience. You can just grab it and use it, or you can play around to re-design existing components and build something new easily.
If you're new and need some guidance feel free to visit out forum or reach anyone from the core team on our slack:
- Tomasz Kikowski - @qiqqq
- Tomasz Kostuch - @gibkigonzo
- Paweł Smyrek - @psmyrek
- Rafał Makara - @rmakara
We are currently in the early developer’s preview phase. If you would like to help us improve this beautiful theme we'd be more than happy if you want to contribute! Here you can find all the required information how to start.
To be able to use new Capybara theme in your Vue Storefront installation, you need to:
-
Install
lerna
globally:npm install -g lerna
or
yarn global add lerna
-
Configure
vsf-capybara
repository as a git submodule in theme path of your Vue Storefront workspace, and then trackmaster
branch:git submodule add -b master https://github.com/DivanteLtd/vsf-capybara.git src/themes/capybara
-
Fetch all the data:
git submodule update --init --remote
-
Update Vue Storefront configuration by copying
local.json
file fromvsf-capybara
to rootconfig
directory. -
Update TypeScript compiler option in
tsconfig.json
in root directory: change value forcompilerOptions
.paths
.theme/*
from default theme["src/themes/default/*"]
to brand new Capybara theme:["src/themes/capybara/*"]
. -
Download all dependencies and start development server:
lerna bootstrap && yarn dev
-
That’s all! Now after opening your development server (http://localhost:3000 by default) you should see Vue Storefront with Capybara theme! 🎉