You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 31, 2024. It is now read-only.
***default-theme:** srcset image display wrong incase url have space ([#1985](https://github.com/vuestorefront/shopware-pwa/issues/1985)) ([f7bad06](https://github.com/vuestorefront/shopware-pwa/commit/f7bad0666534caa743f29c822b9e5d18a8a034b8))
7
+
***default-theme:** sync up data in some filter component ([#2009](https://github.com/vuestorefront/shopware-pwa/issues/2009)) ([7b9685d](https://github.com/vuestorefront/shopware-pwa/commit/7b9685d1750b77a761015b37f4d25e87f28b1c61))
🙌 _As a Team, we'd like to thank you, the whole Community ❤️ for keeping this project so challenging and interesting! Hopefully the knowledge we all gathered will help us to create the next project even better! Join us and let's rock together with Shopware Composable Frontends!_
See the [official documentation](https://shopware-pwa-docs.vuestorefront.io) to get started.
50
-
51
-
You can find there: fundamentials, concepts, migration guides, cookbook, troubleshooting and many many more.
52
-
53
-
54
-
55
-
### About Shopware:
56
-
57
-
<ahref="https://github.com/shopware/platform">Shopware 6</a> is the next generation of open-source eCommerce software based on bleeding-edge technologies powered by Symfony and Vue.js. Focused on an API-first approach, Shopware provides more flexibility and less complexity.
58
-
59
-
PS: Check [StorefrontUI](https://github.com/DivanteLtd/storefront-ui/) - our UI library for eCommerce.
Try out our open demo and if you like it <strong> first give us some star on Github ★</strong> and then contact us on <a href="https://discord.vuestorefront.io">#shopware-pwa channel @ Vue Storefront Official Discord</a> or via contributors@vuestorefront.io. <br /><br /> This demo site is connected to <a href="https://github.com/shopware/platform">Shopware 6</a>. <br />
76
-
</td>
77
-
</tr>
78
-
</tbody>
79
-
</table>
80
-
81
-
## Video demo
82
-
83
-
[](https://youtu.be/t2JJgvvxMG8)
84
-
85
-
## Join the community on Discord
86
-
87
-
If you have any questions or ideas feel free to join our discord: https://discord.vuestorefront.io
88
-
89
-
## Quickstart
90
-
91
-
Before you start testing it locally, **try it out on CodeSandbox**
92
-
_(including shopware-pwa CLI commands in embedded terminal)_
It will ask for the address to your shopware instance, access token, and admin credentials to load plugins. Only the first two are required to start the instance, and default settings will point to our demo instance. Then you can just begin local development by typing:
113
-
114
-
```bash
115
-
yarn dev
116
-
```
117
-
118
-
Your application will be available on [http://localhost:3000](http://localhost:3000).
119
-
Now you have complete ShopwarePWA project running locally.
120
-
121
-
### Running on custom Shopware instance
122
-
123
-
You can simply invoke once again `shopware-pwa init` and pass data to your custom instance.
124
-
125
-
Another way of doing this:
126
-
127
-
1. edit file `shopware-pwa.config.js` inside the root of the newly created project
3. run again `npx @shopware-pwa/cli init` (to refresh plugins from instance) and then `yarn dev`
138
-
139
-
Read full instruction in `CHEATSHEET.md` file.
140
-
141
-
### Running with plugins
142
-
143
-
If you already have some Shopware PWA plugins installed (like [HelloCody](https://github.com/elkmod/SwagHelloCody) plugin example), then you can generate plugin files
144
-
145
-
```bash
146
-
npx @shopware-pwa/cli init
147
-
```
148
-
149
-
or, for CLI installed globally
150
-
151
-
```bash
152
-
shopware-pwa init
153
-
```
154
-
155
-
Will ask you for username and password for shopware instance, to load installed plugins.
156
-
157
-
## Development and contribution
158
-
159
-
When you create fork and clone repo, just type `yarn start` to install node dependencies and run the post-install script that builds and links packages, it also creates a test-project in root catalogue, which is ignored by git. Now, you're ready to develop. You can watch the compilation process by running `yarn dev` or `yarn dev:<package-name>`to specify the package that you will be working on. It also builds all necessary packages and
160
-
161
-
Please, remember to always during development have opened terminal with `yarn test --watch` command fired.
162
-
163
-
To see the project, go to `./test-project` and run `yarn dev`. The project will be available in your browser at http://localhost:3000.
164
-
You can test changes directly in ignored test-project directory or make changes inside packages (for example default-theme).
165
-
166
-
A more advanced development guide will be available soon.
167
-
168
-
---
169
-
170
-
## Introduction to Shopware-PWA
171
-
172
-
### What is Shopware-PWA?
173
-
174
-
It is a product, that will allow Shopware users to quickly set up a headless storefront for Shopware 6 eCommerce systems. It will provide all the PWA benefits like app-like experience, on-mobile-installation, service worker caching and more. Shopware-PWA by default will is equipped with a ready-to-go theme built on StorefrontUI.
175
-
176
-
It is a native integration dedicated for Shopware 6, which means all the Shopware developers will not have to learn new approaches and naming conventions. The goal of the product is to keep the entry threshold as low as possible to make further implementations fast and straightforward. The product will be compatible with the Shopware 6 Plugins Ecosystem.
177
-
178
-
### Tech stack
179
-
180
-
-[Vue Storefront](https://www.vuestorefront.io/)
181
-
- Shopware-6-Client based on Axios
182
-
-[StorefrontUI](https://www.storefrontui.io/)
183
-
-[VueJS](https://vuejs.org/)
184
-
-[TypeScript](https://www.typescriptlang.org/)
185
-
-[Jest](https://jestjs.io/)
186
-
-[TypeDoc](https://typedoc.org/)
187
-
-[VuePress](https://vuepress.vuejs.org/)
188
-
189
-
### What is Shopware-6-Client Library?
190
-
191
-
This is one of the critical components in Shopware-PWA architecture. It is a separate package built for TypeScript community to allow them to work with Shopware 6 API. It provides all the methods to work with SalesChannel-API of Shopware 6. Shopware-PWA uses that package for communication with Shopware backend.
192
-
193
-
### What is StorefrontUI?
194
-
195
-
It is an excellent design system for the UI layer of your eCommerce systems. Storefront UI is an independent, Vue.js-based, the library of UI components for developers, designers, and agencies striving to build fabulous storefronts.
196
-
197
-
Read more: https://www.storefrontui.io/.
198
-
199
-
### Caching approach
200
-
201
-
In Vue Storefront 1, we provided full offline support.
202
-
203
-
In Shopware-PWA we will go for a service worker caching. That means the product will use Shopware 6 logic through API instead of recreating all of the business logic in the frontend layer.
204
-
205
-
However, service workers will allow you to browse the catalogue offline.
206
-
207
-
---
208
-
209
-
## Software engineering standards
210
-
211
-
Before starting the implementation of Shopware-PWA, we’ve made an in-depth analysis of all our previous experience, that we earned during the implement of Vue Storefront 1. After gathering all the lessons learnt, we decided to build a tech-driven high-quality product, that will meet the business needs.
212
-
213
-
### Style Guide
214
-
215
-
We follow official VueJS coding standards - https://vuejs.org/v2/style-guide/.
216
-
217
-
We also setup Prettier (https://prettier.io/) on git pre-commit hook to automatically format all the code before pushing it to the remote repository. This way, we make sure that all the code’s been written using the same standards. It makes the process of learning the codebase of the product much easier and smoother for all the new developers.
218
-
219
-
### Coding standards
220
-
221
-
#### DO
222
-
223
-
##### Designing
224
-
225
-
- Always start working on a task by designing a view (define goals → state → actions).
226
-
- Every team member must accept "API interface".
227
-
228
-
##### Coding
229
-
230
-
- Follow official Vue.js style guide https://vuejs.org/v2/style-guide/
231
-
- Use Prettier locally.
232
-
- Run Linter before commit.
233
-
- Always change data by mutations.
234
-
- Log interactions with cache as this are hard to debug.
235
-
- Use Chrome debugger. Do not leave thousands of console.log().
236
-
- Use async awaits instead of promises.
237
-
238
-
##### Testing
239
-
240
-
- Write tests in Jest.
241
-
- Create one test file per method.
242
-
243
-
##### Tools
244
-
245
-
- Use Axios for handling HTTP requests.
246
-
- Experiment with Live Share for pair programming.
247
-
248
-
##### Code review
249
-
250
-
- At least one core team member must do a code review
251
-
252
-
##### Environment
253
-
254
-
- Always fix failing builds in CI as the top priority.
255
-
256
-
##### Committing
257
-
258
-
- Self-CR before commit. Do not assume others will check your dirty work.
259
-
- Delete pointless console.log() before commit.
260
-
- Adjust to commit message criteria to auto-generate changelog.
261
-
262
-
#### DO NOT
263
-
264
-
- Do not keep tokens in Vuex.
265
-
- Do not use EventBus.
266
-
- Do not make direct calls to UI from Vuex.
267
-
- Do not create callbacks hell. Do not overuse promises.
268
-
269
-
### Definition of Ready
270
-
271
-
#### User Stories
272
-
273
-
- Simplified User Story format to describe the issue is used - e.g., I want to `<goal>` So that `<reason>`.
274
-
- Epic (label) is assigned (the epic provides team members with background information and additional business value).
275
-
- Acceptance criteria are listed.
276
-
- Dependencies are identified, and no external dependencies would block the item from being completed (e.g. missing decision/information/implementation from other departments/development teams or missing tools).
277
-
- The user story is small enough to be completed in one sprint.
278
-
- The team knows what to do and do not see any blocking points.
279
-
280
-
#### Bugs
281
-
282
-
- The current behaviour is explained.
283
-
- Steps to reproduce are explained.
284
-
- The expected behaviour is defined.
285
-
- If possible, screenshot or gif is provided.
286
-
287
-
### Definition of Done
288
-
289
-
##### User Story
290
-
291
-
- All acceptance criteria are fulfilled.
292
-
- Code does not destroy build.
293
-
- All unit tests pass.
294
-
- Code meets our Coding standards.
295
-
- QA verifies the user story.
296
-
- The user story is tested on the newest browsers and newest-1 versions.
We use CircleCI for continuous integration tool. In the pipeline, we run a few necessary checks, and we check if the unit tests coverage did not decrease and we rebuild the application to verify if the new code does not break up the build.
306
-
307
-
### Test coverage
308
-
309
-
In the early stages of the development, we decided to keep 100% of unit tests code coverage. That means you will not be surprised by the changed behaviour of the methods in your storefront product. If you break it, you will be notified by the tests.
310
-
311
-
In the next phases of development, we will make the following decisions associated with testing. We will probably cover critical paths with end2end testing.
312
-
313
-
Right now, for testing, we use the Jest framework - https://jestjs.io/.
314
-
315
-
### Versioning
316
-
317
-
Versioning of Shopware-PWA is not dependent on Shopware 6 versioning. We will stick to semantic versioning. As we build the package - all the packages for Shopware 7 (and so on) will have separate versioning.
318
-
319
-
### Change log
320
-
321
-
We experimentally use conventional commit messages to generate the changelog automatically. https://www.conventionalcommits.org
322
-
323
-
---
324
-
325
-
## Checklists
326
-
327
-
### Performance QA Checklist
328
-
329
-
- Bundle size verified with `webpack-bundle-analyzer`.
330
-
- Size lower than 300 kB for JS loaded immediately.
331
-
- Everything that may exceed 300 KB must be lazy-loaded.
0 commit comments