vuestorefront / shopware-pwa

Shopware PWA for eCommerce. Headless storefront solution for Shopware 6, which communicates through the SalesChannel-API. Always Open Source, MIT license. Made with :blue_heart: by shopware AG & Vue Storefront.

Shopware PWA

⚠️ Shopware PWA is now under security maintenance mode only. That means there will be no new features and no usual bug fixes managed.

Read more:

... or visit directly documenation page to see what we offer as a next toolkit to work with:

🙌 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!

📘 Documentation

👥 Community (#shopware-frontends & #shopware-pwa channel)

---

The only Official Modern Frontend with Progressive Web App features for Shopware 6.

Stay connected

Supported versions of Shopware 6

Shopware PWA version	Shopware 6 version
	&
	&

 

Documentation

See the official documentation to get started.

You can find there: fundamentials, concepts, migration guides, cookbook, troubleshooting and many many more.

 

About Shopware:

Shopware 6 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.

PS: Check StorefrontUI - our UI library for eCommerce.

See it in action

Try out our open demo and if you like it first give us some star on Github ★ and then contact us on #shopware-pwa channel @ Vue Storefront Official Discord or via [email protected]. This demo site is connected to Shopware 6.

Video demo

Join the community on Discord

If you have any questions or ideas feel free to join our discord: https://discord.vuestorefront.io

Quickstart

Before you start testing it locally, try it out on CodeSandbox (including shopware-pwa CLI commands in embedded terminal)

v1.0.1

Usage

Create a directory for your project and enter it

mkdir my-shopware-pwa
cd ./my-shopware-pwa

initialize project inside the directory

npx @shopware-pwa/cli init

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:

yarn dev

Your application will be available on http://localhost:3000.
Now you have complete ShopwarePWA project running locally.

Running on custom Shopware instance

You can simply invoke once again shopware-pwa init and pass data to your custom instance.

Another way of doing this:

1. edit file shopware-pwa.config.js inside the root of the newly created project
2. fill it with your data, current example:

module.exports = {
  shopwareEndpoint: "https://shopware6-demo.vuestorefront.io",
  shopwareAccessToken: "SWSCVJJET0RQAXFNBMTDZTV1OQ",
};

3. run again npx @shopware-pwa/cli init (to refresh plugins from instance) and then yarn dev

Read full instruction in CHEATSHEET.md file.

Running with plugins

If you already have some Shopware PWA plugins installed (like HelloCody plugin example), then you can generate plugin files

npx @shopware-pwa/cli init

or, for CLI installed globally

shopware-pwa init

Will ask you for username and password for shopware instance, to load installed plugins.

Development and contribution

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

Please, remember to always during development have opened terminal with yarn test --watch command fired.

To see the project, go to ./test-project and run yarn dev. The project will be available in your browser at http://localhost:3000. You can test changes directly in ignored test-project directory or make changes inside packages (for example default-theme).

A more advanced development guide will be available soon.

---

Introduction to Shopware-PWA

What is Shopware-PWA?

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.

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.

Tech stack

• Vue Storefront
• Shopware-6-Client based on Axios
• StorefrontUI
• VueJS
• TypeScript
• Jest
• TypeDoc
• VuePress

What is Shopware-6-Client Library?

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.

What is StorefrontUI?

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.

Read more: https://www.storefrontui.io/.

Caching approach

In Vue Storefront 1, we provided full offline support.

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.

However, service workers will allow you to browse the catalogue offline.

---

Software engineering standards

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.

Style Guide

We follow official VueJS coding standards - https://vuejs.org/v2/style-guide/.

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.

Coding standards

DO

Designing

• Always start working on a task by designing a view (define goals → state → actions).
• Every team member must accept "API interface".

Coding

• Follow official Vue.js style guide https://vuejs.org/v2/style-guide/
• Use Prettier locally.
• Run Linter before commit.
• Always change data by mutations.
• Log interactions with cache as this are hard to debug.
• Use Chrome debugger. Do not leave thousands of console.log().
• Use async awaits instead of promises.

Testing

• Write tests in Jest.
• Create one test file per method.

Tools

• Use Axios for handling HTTP requests.
• Experiment with Live Share for pair programming.

Code review

• At least one core team member must do a code review

Environment

• Always fix failing builds in CI as the top priority.

Committing

• Self-CR before commit. Do not assume others will check your dirty work.
• Delete pointless console.log() before commit.
• Adjust to commit message criteria to auto-generate changelog.

DO NOT

• Do not keep tokens in Vuex.
• Do not use EventBus.
• Do not make direct calls to UI from Vuex.
• Do not create callbacks hell. Do not overuse promises.

Definition of Ready

User Stories

• Simplified User Story format to describe the issue is used - e.g., I want to <goal> So that <reason>.
• Epic (label) is assigned (the epic provides team members with background information and additional business value).
• Acceptance criteria are listed.
• 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).
• The user story is small enough to be completed in one sprint.
• The team knows what to do and do not see any blocking points.

Bugs

• The current behaviour is explained.
• Steps to reproduce are explained.
• The expected behaviour is defined.
• If possible, screenshot or gif is provided.

Definition of Done

User Story

• All acceptance criteria are fulfilled.
• Code does not destroy build.
• All unit tests pass.
• Code meets our Coding standards.
• QA verifies the user story.
• The user story is tested on the newest browsers and newest-1 versions.
• At least minimal documentation is created.

Bugs

• Regression unit test is created.

Pipeline & Continuous integration / delivery / deployment

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.

Test coverage

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.

In the next phases of development, we will make the following decisions associated with testing. We will probably cover critical paths with end2end testing.

Right now, for testing, we use the Jest framework - https://jestjs.io/.

Versioning

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.

Change log

We experimentally use conventional commit messages to generate the changelog automatically. https://www.conventionalcommits.org

---

Checklists

Performance QA Checklist

• Bundle size verified with webpack-bundle-analyzer.
• Size lower than 300 kB for JS loaded immediately.
• Everything that may exceed 300 KB must be lazy-loaded.

shopware-pwa's Issues

[SPIKE] Research on tool for auto generating docs

I want to edit the details of my address So I can fix the eventual mistakes that I made

Context
Address management is the part of My Account. We want to edit existing addresses.

Acceptance Criteria

• I can access the list of My Addresses.
• I can see the button for editing the existing addresses.
• I can see the form with: salutation, country, first name, last name, street, zipcode, city.
• When I save the address with all the correct data in a form then updated address data is visible in the address list.
• When I open that address form once again then I see updated address data.
• When I try to save the address without required data in a form then I see validation error message.
• I can use that updated address in the cart/checkout later.

I want to see the discounts in the category page So I can be attracted by lower prices

Context
We may have Cart Price Rules and Catalog Price rules, which affect the price. The second ones might be displayed in the category page. We should be able to see these discounts in the category page.

The way of displaying it (just smaller range, strikethrough original price etc.) needs to be discussed.

Acceptance criteria

• When the product has some Catalog Price Discount then I can see that in a Catalog Page.
• When I add the product to the cart then I can see discounted price in a cart.

I want to remove the product from the cart As I do not want to buy it any longer

Context
In previous tasks we created a Cart Page and make it possible to add new cart line items. Now we want to make it possible to delete a single item, that customer does not want to buy anymore.

Acceptance Criteria

• In a Cart Page I can see buttons for deleting an item at each cart line item.
• I can click the button for deleting an item.
• I can see popup "Are you sure?".
• When I click YES in the popup then:
  • Cart line item no longer exists in a cart.
  • Totals are recalculated.
  • Cart Rules are recalculated.
  • When I refresh the page (F5) I do not see the deleted cart line item.
• When I click NO in the popup then I can still see the line item.

I want to open the specific category So I can see products inside

Context
After looking for an interesting category in a tree I want to open a category. In result, I want to see a listing of all the products available in that category.

Dependencies

• Blocked by #4

Acceptance criteria

• I can recognize, which category I opened.
• I see all products assigned to that category.

Create Category Service Interface

Category service should be using a Connection layer (based on axios library).
Each method of the service will contain specific types of parameters and return typed data (corresponding to data models' interface - #42 )

It's assumed that the context token is provided on request layer.

The proposed list of methods:

1. searchIds(params): <SearchResult<string|uuid[]> || findIds(params): <SearchResult<string|uuid[]> - search only for category ids for specific query
2. find(params): <Category> || findOne(params): <Category> - fetch the chosen category details
3. findAll(params):<SearchResult<Category[]> || list(params):<SearchResult<Category[]>- get the list of all categories fit all parameters passed

All the parameters should be converted into query string (or payload) just before sending a request.
Params converter was described here: #58

SearchCriteria interface described in #55

Parameters:

Ad. 1.

interface searchIdsParams extends SearchCriteria {
}

Ad. 2.

interface findParams {
  id: string # or uuid interface if any
}

Ad. 3.

interface findAllParams extends SearchCriteria {
}

The list of fields that can be used in the filter or sorting queries within the category:

id: string | uuid
afterCategoryId: string | uuid
parentVersionId: string | uuid
mediaId: string | uuid
displayNestedProducts: number # 1 if true, 0 otherwise
autoIncrement: number
level: number
path: string
type: string # page, link, folder
visible: number # 1 if true, 0 otherwise
active: number # 1 if true, 0 otherwise
name: string
cmsPageId: string | uuid

I want to delete existing address from the list of my addresses As I don't want to use it

Context
Address management is the part of My Account. In #27 we made it possible to add new addresses. Now we want to delete these.

Acceptance Criteria

• I can access the list of My Addresses.
• I can see the button for deleting a single address.
• I cannot delete default shipping and billing addresses (due to API error).
• After I click delete I can see kind of "Are you sure?" window.
• After I click YES in that popup window then the address no longer exists.
• I cannot use deleted address in the checkout.
• After I click NO in that popup window then the address still exists.

I want to see the prices in the product page So I know how much do I need to pay for the product

Context
In the product page there is a need to show the price of the product to the customer. This may be a strict constant price, price dependent on a quantity or rule based.

This task is about displaying the simple price only.

Acceptance criteria

• I can see the price of a single product in the product page.
• Helper is created.

Next

• Adjust to new data structures from Shopware.

I want to see a category tree So I can understand the structure of eCommerce's offer

Context
Starting the work on getting the data about categories and products we want to build and display a category tree for a customer. Category tree comes from Shopware 6 API and its structure needs to be displayed in a storefront.

Acceptance criteria

• I can see the category tree in a storefront.
• I can see a category name.
• Root level is visible.
• All the nested levels are visible.
• Categories are displayed in a correct order (to extract to another story? depending on the complexity).
• Structuring elements (special category type) are visible.
• Customization links (special category type) are visible.
• I can use a customization link (to extract to another story?).
• Not active categories are not visible.
• When I change the category tree in Shopware 6 then I can see the new structure in a Storefront after the page refresh.

Technical checklist:

• /sales-channel-api/v1/category is being used.
• Unit tests pass.

I want to login as a customer So I can access My Account details and continue shopping as recognized user

Context
Users in Shopware are based on sw-context-token. After successful login user we should get the new sw-context-token, which will be added to all the next requests.

Acceptance Criteria

• I can visit Login page.
• I can enter my username and password.
• I can see login button in the Login Page.
• When I click login having empty fields then I can see validation error.
• When I entered the correct data I am being logged in.
• New sw-context-token is assigned.
• When I entered invalid data then I can see an error message.
• Icon / text in a header for Login is changed to Logout context.

[SPIKE] Getting information on how to create Shopware Client Package

Context
Up to the latest decisions made by Patryk and Piotr there is a need to do additional research on the architecture. Within' that architecture we want to build Shopware Client Package for using the API. It should follow all the most useful standards for creating such tools. This task is to provide us with information required to make a final decision on how to build it.

I want to use Mega Menu for navigation So I can quickly get to nested categories

Context
Currently, I can use the navigation in the header (SfHeader component) to browse level 0 categories. Also, I can use the left-hand-side category tree in category pages.

Now, I want to use the Mega Menu component to quickly get access to nested categories.

Acceptance criteria

• Mega Menu component from Storefront UI is used.
• I can see level = 0 categories.
• I can see level = 1 categories.
• I can see level = 2 categories - TO REFINE / VERIFY.
• When I click on the link to a specific category then I am redirected to the correct one

Blocks

• #427 CMS content in mega menu

Determine the requests' parameters interfaces

The Criteria interface
All possible criteria should? be contained in one consistent object and gathers all methods to manipulate the ouput of every collection.

interface SearchCriteria {
  pagination?: Pagination
  filter?: Filter[]
  sort?: Sort[]
  term?: Term
  association?: Association[]
  aggregation?: Aggregation[]
  totalCountMode?: TotalCountMode
}

Limit and page

interface Pagination { 
  limit: number
  page: number
}

Filter
behaves as a term filter

interface Filter {
  field: string # depends on the entity Type.
  value: any # or only primitive types
}

# to consider: should have param converter function which translates it into a specific output in the request like filter[<entity>field]=value

other filters available in shopware but not documented on API side:

• EqualsAnyFilter
• EqualsFilter
• ContainsFilter
• RangeFilter
• ScoreQuery

Sort

interface Sorting {
  field: string # depends on the entity Type. could be a nested field as well: visibilities.id
  direction: string # asc || des
}

# depending on the entity's type, the only sortable field should be covered

Search

interface Term {
  name: string
}

Associations
include related entity by providing a path. Can be used as an array of associations

interface Association {
  name: string # for instance product.media.url or something nested
  filter?: Filter[] # nested filter on association
}

Aggregations
Allows you to gather statistical data about your executed query
Aggregates the result of specific type on specific field, for instance shows the amount (count) of all categories used in returned products' collection

interface Aggregation {
  name: string # name of the aggregation
  type: string # count , avg, max, min, stats, sum, filter, entity, terms, histogram
  field: string 
}

Total count mode
The total count mode allows you to configure the value of the total property of the result.

interface TotalCountMode {
  mode?: string # exact, next_pages, none (default)
}

I want to use sorting in the category page so I can change the order of the products to find these easily

Context
After opening specific category I want to sort the products in the products list to make it easier for me to find an interesting product.

Dependencies

• Blocked by #4
• Blocked by #7

Acceptance criteria

• I can see a list of available properties, that I can sort by for the current category.
• I can sort by [...] (to split by each sorting property to another stories?).
• When I use a sorting feature then products list gets updated (to extract to another story?).
• I can sort ascending (to extract to another story?).
• I can sort descending (to extract to another story?).

I want to use filters in category page So I can limit the products visible in the category page

Context
After opening specific category I want to use filters for narrowing the list of the products to make it easier to find the ones, that I am interested in.

Dependencies

• Blocked by #4
• Blocked by #7

Acceptance criteria

• I can see a list of available filters for the current category.
• I can filter by [...] (to split by each filters to another stories?).
• When I use a filter then products list gets updated (to extract to another story?).
• I can use a few filters at once (to extract to another story?).
• I can filter by nested field (not a field of top level object).

I want to change the variants of the product So I can easily switch between versions of the same master product

Context
In Shopware there are properties and options. Options are known as variants of the product that are being generated by a set of specific properties. Each option gets unique productId.

Acceptance criteria

• I can see product variants in the product page.
• I can switch between variants.
• When I click on different variant then I am being redirected to the page of that variant.
• I can see, which variant is currently opened.
• When I use Add to cart button then this specific variant is being added to the cart.

Next

• #15

Prepare TypeScript interfaces for Shopware models, that we will receive from Shopware API

Context
Before we prepare API client and methods for all the requests required in shopware-pwa, we would like to prepare Shopware models to make it much easier to operate the data structures that we will receive in responses.

In that task we want to prepare models required to get responses from sales-channel-api and its category, product, customer, cart, context, newsletter endpoint groups. For building the interfaces we may use our Postman for Shopware API (#3), symfony debug router and Shopware source code itself.

Shopware provides following structure of the root folder, that we should stick to:

• checkout,
• content,
• framework,
• system.

Right now, there is no need to copy the structures in 100%. Just the ones that seems to be reasonable to operate on the API. Within' the next tasks, when we implement API endpoints we will be able to adjust the models structure.

Acceptance criteria:

• All the models that seem to be required for operating on sales-channel-api endpoints exist in shopware-pwa.
• models directory exist in a tree and it contains checkout, content, framework, system subfolders.
• 1 level of nested folders below checkout, content, framework, system has been recreated bases on Shopware original structure. Levels below are not required at this moment.

I want to add a product to the cart So I can buy that in the next step

Context
One of the mail goals of every eCommerce system is to sell stuff. As a customer I want to have the possibility to add products from the Product Page to the Cart, to be able to buy it in the next steps.

Acceptance criteria

• I can see Add to cart button.
• I can click on Add to cart button.
• After I click on the button product is being added to my cart.
• If I click on the button once again and product already exists in a cart then quantity is being raised by 1 piece.

Next associated tasks:

• #13 I can select a quantity how many pieces I want to add to the cart.

I want to reset the password So I can get a new one when I forgot the current one

Context
In the previous tasks we made it possible to register user account, login and logout. Now we want to let users to reset theirs password if they forgot it.

Acceptance Criteria

• In the login page I can see the possibility to reset the password.
• I can enter my login / email of the account that I want to reset.
• I can successfully click the Reset My Password button.
• According to the Shopware logic I probably get an email from Shopware.
• After I change my password I can successfuly login.

I want to review the product gallery So I can see how the product looks like

Context
In product page we want to see all the photos of the product. We can hold many photos to attract the customer with the produduct more. Images are stored as MediaEntity in Shopware. We should figure it out if we need to fetch the whole media or basic image infromation only.

Acceptance criteria

• I can see a gallery with 1 image in the product page.
• I can see a gallery with many images in the product page.
• I can switch the images.
• I can see image title when I put cursor above the image.
• I can read valid ALT parameter.

I want to choose a shipping method So it may get calculated into the cart totals

Context
We must be able to select the shipping method in a cart as it may affect the totals of the cart. Each shipping method may have a different value.

Acceptance Criteria

• In a Cart Page I can see the possibility to select the shipping methods.
• I can select only the methods available for me according to Shopware logic.
• After I select the shipping method then Shipping Cost and Totals get recalculated.
• Default shipping method is set by default. : )

I want to choose the payment method So I can choose how to pay for an order

Context
TO REFINE. Not sure if it should be the part of the Cart or Shopware Checkout?

I want to proceed to the external checkout So I can place the order

Context
We decided to postpone implementation of the Checkout in Shopware-PWA because of amount of additional development for integration with payment and shipping providers. This is why we want to redirect the user to Shopware 6 original checkout.

Acceptance criteria

• When I am in the cart I can see a button "Proceed to checkout".
• When I click the button then I am redirected to Shopware checkout.
• After I finish the checkout I am redirected back to the Shopware-PWA.

Next tasks

• Thank You Page - #23

I want to mark existing address as default billing address So I do not have to choose it every order

Context
There is a special flag in the addresses, which is Default Billing Address. I want to be able to set existing address as the default one for the billing.

Acceptance Criteria

• In My Addresses link I can see the possibility of setting an address as default billing address.
• I can see which address is currently set as default billing address.
• After I change the default billing address then I can see the flag at the new default billing address.
• Default billing address is used by default in a checkout.

Prepare TypeScript interfaces for API.Category

Context

Acceptance criteria

• TypeScript interface for GET /sales-channel-api/v1/category endpoint is created.
• All the fields from GET /sales-channel-api/v1/category endpoint are included.
• TypeScript interface for /sales-channel-api/v1/category/{categoryID} endpoint is created.
• All the fields from GET /sales-channel-api/v1/category{categoryID} endpoint are included.

Create Shopware Client package

Context
After the research we want to build a Shopware Client package and include all the TypeScript interfaces (#41, #42, #43, #44, #45, #46, #47) inside. The purpose of the package is to let all the JS developers work with Shopware API.

Dependencies

• Blocked by #37

Acceptance criteria

• Shopware Client package is created up to the standards defined in #37

I want to see the discounts in the product page So I can be attracted by lower prices

Context
We may have Cart Price Rules and Catalog Price rules, which affect the price. The second ones might be displayed in the product page. We should be able to see these discounts in the product page.

The way of displaying it (just smaller range, strikethrough original price etc.) needs to be discussed.

Acceptance criteria

• When the product has some Catalog Price Discount then I can see that in a Product Page.
• When I add the product to the cart then I can see discounted price in a cart.
• Helper for getting the discount works.

Next

• Adjust to new data structures from Shopware.

I want to use pagination in the category page So I don't have to load all the products within' the category at once

Context
In huge categories, that may not be readable to display all the products in one page. As long as we do not decide to create infinity loading we should be able to paginate the products in opened category.

Dependencies

• Blocked by #4
• Blocked by #7

Acceptance criteria

• I can move to another page.
• I can change the number of products in a single page.
• After I change the page I can recognize, which page is active.

I want to open a product page So I can see the details of the product

Context
After looking for a product in category page I want to be able to go to the product page to get all the detailed information about the specific product.

Dependencies

• Blocked by #4
• Blocked by #7

Acceptance criteria

• When I am in category page I can go to product page.
• I can enter product page by using exact URL, that I know.
• After I open a product page I can see basic information about a product:
  • Product name.
  • Product description.
  • Product image.

Create Product Service Interface

Product service should be using a Connection layer (based on axios library).
Each method of the service will contain specific types of parameters and return typed data (corresponding to data models' interface - #41 )

It's assumed that the context token is provided on request layer.

The proposed list of methods:

1. searchIds():<SearchResult<Product[]> || findIds():<SearchResult<Product[]> - search only for category ids for specific query
2. find():<Product> || findOne():<Product> - fetch the chosen category details
3. findAll():<SearchResult<Product[]> || list():<SearchResult<Product[]> - get the list of all categories fit all parameters passed

All the parameters should be converted into query string (or payload) just before sending a request.
Params converter was described here: #58

SearchCriteria interface described in #55

Parameters:

Ad. 1.

interface searchIdsParams extends SearchCriteria {
}

Ad. 2.

interface findParams {
  id: string # or uuid interface if any
}

Ad. 3.

interface findAllParams extends SearchCriteria {
}

The list of fields that can be used in the filter and sorting queries within the product area:

id: string | uuid
parentVersionId: string | uuid
mediaId: string | uuid
autoIncrement: number
visible: number # 1 if true, 0 otherwise
active: number # 1 if true, 0 otherwise
stock: number
availableStock: number
displayGroup:  string | uuid
manufacturerId: string | uuid
unitId: string | uuid
taxId: string | uuid
coverId: string | uuid
price: number
manufacturerNumber: string
ean: string
productNumber: string | uuid
isCloseout: # 1 if true, 0 otherwise
purchaseSteps: number
maxPurchase: number
minPurchase: number
purchaseUnit: number
referenceUnit: number
shippingFree:  # 1 if true, 0 otherwise
purchasePrice: number
markAsTopseller:  # 1 if true, 0 otherwise
weight: number
width: number
height: number
length: number
releaseDate: date

As a Team We want to setup cloud test environment for Shopware-PWA So we can work and test together NEW

Context
In the beginning of the project we want to setup shared test environment. We want to use Divante's technology for that, which allows us to host that in a cloud.

Acceptance Criteria

• Test environment is running in Divante VueStorefront Cloud.
• Test environment is available under domain shopware-pwa.storefront.io.
• Documentation describes how to access test environment. For now it should be in Confluence: https://divante.atlassian.net/wiki/spaces/SHOP/pages/1479049282/Test+environment
• Test environment is not secured by password.
• DivanteLtd/shopware-pwa is pulled to test environment.
• @patzick can access test environment.
• @rmakara can access test environment.
• @mkucmus can access test environment.

I want to mark existing address as default shipping address So I do not have to choose it every order

Context
There is a special flag in the addresses, which is Default Shipping Address. I want to be able to set existing address as the default one for the shipping.

Acceptance Criteria

• In My Addresses link I can see the possibility of setting an address as default shipping address.
• I can see which address is currently set as default shipping address.
• After I change the default shipping address then I can see the flag at the new default shipping address.
• Default shipping address is used by default in a checkout.

I want to register as a new customer So I can later login to My Account

Context
In #24 and #25 tasks we managed to login and logout to/from existing user account. Now we want to let users to create a new account.

Acceptance Criteria

• I can go to Registration Page.
• I can successfully create a new user account.

Not in the scope

• I can fill all the necessary infromation for Shopware: Salutation, First name, Last name, Email, Street, Zipcode, City, Country.
• Validation for the fields work well.
• When I do not fill the form correctly and I use Register button then I can see validation errors.

As a Team We want to be able to deploy new changes to test environment So we can use test environment smoothly

Context
After setup of the test environment we want to start automating the process by creating a CI pipeline.

Depencencies

• Blocked by #1

Acceptance Criteria

• Github pipelines is created.
• Image is being sucessfully built.
• Docker image is being pushed to Divante's registry.
• Docker image is being sucessfully run as a container in cloud's Kubernetes.

Prepare TypeScript interfaces for API.Cart

I want to see the confirmation / thank you page So I am sure the order was placed successfuly

Context
In #21 we moved the user to external checkout. After he/she finishes the checkout process we want to get him/her back to the Thank You Page.

Acceptance Criteria

• After successful checkout process user is redirected back to Shopware-PWA application.
• User can see a Thank You Page.
• Content of the Thank You Page is displayed in aesthetic way.

Prepare TypeScript interfaces for API.Product

I want to open the cart So I can see the current state of my shopping basket

Context
Cart is dedicated for storing the current state of my shopping journey. Within' that task I want to be able to open the Cart Page and see basic information in there.

Acceptance criteria

• In all the pages I can see an icon linking to the Cart (at this moment icon does not need to be interactive in any way, link to cart only).
• I can see the list of products in the Cart.
• I can see quantities in each line of the cart.
• I can see prices in each line of the cart.

Next tasks

• Cart totals - #22

I want to see the prices (ranges) in the category page So I know how much do I need to pay for the product

Context
Products in category page will appear in some product boxes. Each box may be associated with a single product or with many variants. I want to see specific price of the product or a range if different variants have different prices.

Dependencies

• Blocked by #4
• Blocked by #7
• Blocked by #1076

Acceptance criteria

• I can see the price of a single product.
• I can see price minimum if variants have different prices.
• I can see price maximum if variants have different prices.
• I can see price minimum if price is dependent on some rules, that should be shown in a range in the category page.
• I can see price minimum if price is dependent on some rules, that should be shown in a range in the category page.

blocked by vuestorefront/storefront-ui#1401

I can see the totals in the cart So I know the values before I decide on placing an order

Context
In task #20 we prepared the cart, which displays the line items. Now we want to add the totals.

Acceptance criteria

• I can see total net value.
• I can see total vat value.
• I can see total gross value.
• I can see total discount value.
• Math works well.
• Numbers are correctly rounded to 2 decimal places.

Prepare TypeScript interfaces for API.Newsletter

I want to add new address to the list of my addresses So later I can easily place the orders

Context
Address management is the part of My Account. We want to add new addreses to use these later.

Acceptance Criteria

• I can access the list of My Addresses.
• I can add the new address.
• I can see the form with: salutation, country, first name, last name, street, zipcode, city.
• When I save the address with all the correct data in a form then address is visible in the address list.
• When I try to save the address without required data in a form then I see validation error message.
• I can use that address in the cart/checkout later.

I want to edit the quantity of the product before adding it to the cart

Context
In the Product Page customer may want to set the quantity before adding the product to the cart.

Acceptance Criteria

• I can see a field, that allows me to change the quantity.
• I can set only positive numbers.
• It is not possible to set negative quantity.
• When I set quantity 4 and click Add to cart button in a product that is not in the cart, then it gets added to the cart with quantity 4.
• When I set quantity 4 and click Add to cart button in a product that is exists in the cart with quantity 2 then the quantity in a cart is being raised to 6.

Include a tool for auto generating docs in a project

As a Team We want to use Postman Collection for Shopware 6 So we operate API faster

Context
In the VueSF <-> Shopware 6 integration we will use Shopware 6 API a lot. By sharing a Postman Collection, we will be able to save time of team members because they will let them immediately call the endpoints.

Dependencies

• No dependencies.

Acceptance criteria

• All the endpoints from Shopware6 Sales Channel API are in the collection.
• Domain is configurable.
• IDs are stored as variables in the collection.
• sw-access-key is stored as variable in the collection.
• Collection is shared with other team members.

I want to logout

Context
In #24 I logged in. Now I want to logout by calling the valid Shopware API endpoint, which terminates the sw-context-token

Acceptance criteria

• When I am logged in I can see a Logout button.
• When I am not logged in I cannot see a Logout button.
• When I click on the Logout button then I am logged out.
• I can see information that I got logged out.
• All the user-related data is being refreshed from Shopware API.

I want to see the homepage (cms page) when I enter the shop so I can proceed to shopping after that

Context
"The journey of a thousand miles begins with one step.". When I open the shop I want to see its homepage. As far as I know the entry point is being configured in Shopware.

Blocked by:

• #8

Acceptance criteria

• I can see the content of the starting CMS page.
• I can see navigation so I can proceed to the next sites.

Prepare TypeScript interfaces for API.Context

I want to see the history of my orders So I can track the progress of its realization

Context
After I place many orders in the shop I want to review its history. The part of that task is to display just a table of the historical orders, that I placed. At this stage it should not be possible to open details of the orders.

Acceptance Criteria

• In My Account I can see the possibility to open My Orders.
• I can see the grid with all the orders, that I places.
• I can see order date, order number, status, total value net, total value vat, total value gross.

Prepare TypeScript interfaces for API.Customer.Address