{"id":19622174,"url":"https://github.com/commercetools/sunrise-spa","last_synced_at":"2025-02-26T19:17:55.365Z","repository":{"id":33960761,"uuid":"134430251","full_name":"commercetools/sunrise-spa","owner":"commercetools","description":"SUNRISE shop template as a single-page application","archived":false,"fork":false,"pushed_at":"2024-07-16T19:49:21.000Z","size":32441,"stargazers_count":51,"open_issues_count":34,"forks_count":76,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-02-25T14:56:10.027Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sunrise-spa.now.sh","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/commercetools.png","metadata":{"files":{"readme":"Docs/Readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-22T14:47:32.000Z","updated_at":"2024-05-16T21:53:34.000Z","dependencies_parsed_at":"2024-07-16T23:54:47.763Z","dependency_job_id":null,"html_url":"https://github.com/commercetools/sunrise-spa","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fsunrise-spa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fsunrise-spa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fsunrise-spa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fsunrise-spa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commercetools","download_url":"https://codeload.github.com/commercetools/sunrise-spa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240917722,"owners_count":19878308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T11:26:27.269Z","updated_at":"2025-02-26T19:17:55.339Z","avatar_url":"https://github.com/commercetools.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fashion store front end web example\n\n## On this page\n\n- [Filter products](#Filter-products)\n- [Locale and location](#Locale-and-Location)\n- [Category menu](#Category-Menu)\n- [Payment](#Payment)\n- [Product item](#Product-Item)\n- [Store selector](#Store-selector)\n- [My orders](#My-orders)\n- [Change password](#Change-password)\n- [Discount codes](#Discount-codes)\n- [Forgot password](#Forgot-password)\n- [Pagination](#Pagination)\n- [Return items](#Return-items)\n- [Environment variables](#Environment-variables)\n\n## Filter products\n\nShow a list of products that can be filtered by category, location, store or customer group.\n\nCategory filtering is implemented where the category slug is provided on the [route](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/router/routes.js#L33-L41). This value is passed to [ct/useProducts](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/ct/useProducts.js#L202).\n\nThe following logic is used to set [currency](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useCurrency.js), [country](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useLocation.js), [customerGroup](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useCustomerTools.js#L47-L51), [channel/store](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useSelectedChannel.js), [category slug](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useProducts.js#L38-L42), [sku](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useProducts.js#L46) (for single product), [search](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useSearch.js#L7), [locale](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useLocale.js), [pagination](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/usePaging.js) and [sorting](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useProducts.js#L13-L30).\n\nExpand is used to [query](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/ct/useProducts.js#L9-L102) more detail from a product, this is used when querying for a [single product](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/presentation/fashion/PageProductDetail/PageProductDetail.js#L11)\n\n## Locale and Location\n\nLocale will show the site in the locale selected, for example German or English. Location will show products that are available in the selected location in the price for that location, for example USD if location is US.\n\nLocales and locations should be stored in your project data as [countries](https://github.com/commercetools/commercetools-sunrise-data/blob/master/data/project.json#L6-L11) and [languages](https://github.com/commercetools/commercetools-sunrise-data/blob/master/data/project.json#L12-L15) and should be configured in sunrise.config as [countries](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/sunrise.config.js#L46-L49) and [languages](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/sunrise.config.js#L42-L45), make sure you define a [currency for every country](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/sunrise.config.js#L52-L65) and that products have prices in that currency/country. If you do not care for country and only want price selection on currency you can remove [that selection](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/ct/useProducts.js#L178).\n\nValues for locale and country are stored in the [router](https://github.com/commercetools/sunrise-spa/blob/64a8e7191c64a91e7b103901e4ec3af893782794/src/router.js#L40-L41).\n\nThe value is optional but when it is [missing](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useDefaultRouteParams.js#L60-L81) from local storage or url then the first from [sunrise.config](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useDefaultRouteParams.js#L27-L44) is used.\n\nLocale and location are set by [modifying a route paramater](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useDefaultRouteParams.js#L94-L113), changes are watched in the [root component](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useDefaultRouteParams.js#L87-L93) and saved to local storage.\n\nNote that when you have items in your cart you cannot change location and store because if you would do this then you can't check out your cart as no valid shipping method can be found for carts that have items from mixed locations. This is not a limitation of the commercetools api but just a simplification of check out logic when all products on the cart are shipped to the same country.\n\n## Category Menu\n\nShows a menu created from categories that when clicked on an item will show products of only that category.\n\nOnly [root categories](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/presentation/fashion/components/CategoriesMenu/defaultMenu/CategoriesMenu.js#L10) (categories with no parent) are [queried](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/ct/useCategories.js#L32) for the menu, if you would like a nested menu or different menu then you can create one [here](https://github.com/commercetools/sunrise-spa/tree/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/presentation/fashion/components/CategoriesMenu) and configure it to be used [here](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/presentation/fashion/components/CategoriesMenu/index.js) by setting an environment variable named `VUE_APP_MENU_TYPE`\n\nEven though you can completely change all logic of the menu the [products route](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/router/routes.js#L34-L40) still treats the url parameter to be a category slug.\n\n## Payment\n\nPayment methods can be defined [here](https://github.com/commercetools/sunrise-spa/blob/171950e08fe0143a7b77a23a549d0b87780a3be9/src/presentation/fashion/PageCheckout/OrderOverview/PaymentMethod/PaymentMethod.js#L3-L14) after \"Place Order\" is clicked the cart will update with the addresses and then navigate to the [pay](https://github.com/commercetools/sunrise-spa/blob/171950e08fe0143a7b77a23a549d0b87780a3be9/src/presentation/fashion/PageCheckout/PageCheckout.js#L43-L46) route. This is handled in pay.js where it currently just [creates the order from cart](https://github.com/commercetools/sunrise-spa/blob/171950e08fe0143a7b77a23a549d0b87780a3be9/src/presentation/fashion/Pay/Pay.js#L20-L23) passing a method, this method is used to create a [payment](https://github.com/commercetools/sunrise-spa/blob/171950e08fe0143a7b77a23a549d0b87780a3be9/composition/useCartMutation.js#L85-L89), then [add the payment to the cart](https://github.com/commercetools/sunrise-spa/blob/171950e08fe0143a7b77a23a549d0b87780a3be9/composition/useCartMutation.js#L91-L99) and finally [create an order](https://github.com/commercetools/sunrise-spa/blob/171950e08fe0143a7b77a23a549d0b87780a3be9/composition/useCartMutation.js#L103-L105) from this cart.\n\n## Product Item\n\nShows a single product with more details about the product.\n\nThe [product route](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/router/routes.js#L42-L50) will show a product details. In these details you can select a variant of the product such as color and size. You can configure what variant to select in product detail page in the [sunrise.config](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/sunrise.config.js#L167). In the config you can select [what attribute](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/sunrise.config.js#L168) to show in the title of the product and [what attributes](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/sunrise.config.js#L117-L166) to show in the product details.\n\n## Store selector\n\nSelect a store and when a store is selected then show products from this store with the prices from this store.\n\nStores are channels, for a store to show up in google maps you have to give them a [geoLocation](https://github.com/commercetools/commercetools-sunrise-data/blob/master/data/channels.json#L31-L37). The component will list stores that are found within a [range distance](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/ct/useChannels.js#L38-L43) of the selected location.\n\nWhen a store is selected it will set store information in the [local storage](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useSelectedChannel.js#L5-L9).\n\nIf a store is set then it will be used by the [product query](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/ct/useProducts.js#L179-L184) price selection so only products will be listed from selected store with price of that store.\n\nWhen items are in your cart you cannot open select store to prevent a cart to contain products from different locations as that would over complicate checking out your cart (shipping methods and such).\n\nSelecting stores only works when you have `view_products` [scope](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useAccessRules.js#L7-L19).\n\n## My orders\n\n'My Orders' is a tab located in 'My Account' that shows information about user's orders.\n\n[Order list](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/router/routes.js#L113-L117) is a child route of [user](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/router/routes.js#L88-L129) and shows a table of all the orders created by logged in user, it is not available for anonymous orders.\n\nBy clicking 'View' button it [opens](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/router/routes.js#L103-L107) details for the certain order. From here user can [Return item](#Return-items)\n\n## Change password\n\nComponent [TabChangePassword](https://github.com/commercetools/sunrise-spa/tree/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/presentation/fashion/User/TabChangePassword) calls [updateMyCustomerPassword](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useCustomerTools.js#L113-L128) that [mutates](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/ct/useCustomerTools.js#L162-L197) the customer record.\n\nAfter entering old and new passwords and clicking 'Change Password' it runs the mutation and then [logs in](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/composition/useCustomerTools.js#L126) with new credentials using the login method from [auth](https://github.com/commercetools/sunrise-spa/blob/ff92ce46a7c5f40ddbaad0a949c59e93789dcc1b/src/apollo/auth.js#L121-L143).\n\n## Discount codes\n\nIn order to apply a discount code in cart, [AddDiscountCodeForm](https://github.com/commercetools/sunrise-spa/tree/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/CartDetail/AddDiscountCodeForm) will call [applyDiscount](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/composition/useCartMutation.js#L145).\n\n## Forgot password\n\nForm to reset password at the login page.\n\nWhen the user [ForgotPassword](https://github.com/commercetools/sunrise-spa/tree/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/Login/ForgotPassword) creates a [reset token](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/Login/ForgotPassword/ForgotPassword.js#L21). You need `manage_customers` scope to ask for this token. In a production environment this request would be made by your server and then that token will be used to email a reset password url to the client to reset their password. In the demo the reset password url will be opened when [we got the token](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/Login/ForgotPassword/ForgotPassword.js#L23-L26).\n\nIn the [reset password route](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/router/routes.js#L79-L87) a token is stored in a url parameter. When the user [submits the new password](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/User/ResetPassword/ResetPassword.vue#L20) that token will be used to [reset the password](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/User/ResetPassword/ResetPassword.js#L33-L37) and when the password is successfully reset the user will be [re routed](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/composition/useCustomerTools.js#L83-L88) to the login page.\n\n## Pagination\n\nReusable hook/composition api that allows to have pages, for example in products list or orders.\n\nIt takes [2 parameters](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/composition/usePaging.js#L14):\n\n- **pageSize**: number of items per page\n- **page**: current page number\n\nThe component takes [3 parameters](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/components/Pagination/Pagination.js#L7-L23)\n\n- **pageSize**: number of items per page\n- **page**: current page number\n- **total**: total number of items\n- **setPage**: function to change current page\n\n## Return items\n\nPage shows order items that can be returned.\n\nThis can only work with [manage_orders](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/composition/useAccessRules.js#L23-L34) scope permission in the API client.\n\nIt sends all selected items with the [mutation](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/composition/useCustomerTools.js#L102-L103). After a successful update it will [evict the apollo cache](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/composition/useCustomerTools.js#L104-L106) and navigate to the [order detail](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/composition/useCustomerTools.js#L107-L110).\n\n## Environment variables\n\nYou can store environment variables in .env.local that will be used by the project.\n\nThe following come from merchant center [api client](https://docs.commercetools.com/tutorials/getting-started#creating-an-api-client) for mobile and single page application exported for `Sunrise spa`.\n\n```\nVUE_APP_CT_PROJECT_KEY\nVUE_APP_CT_CLIENT_ID\nVUE_APP_CT_CLIENT_SECRET\nVUE_APP_CT_SCOPE\nVUE_APP_CT_AUTH_HOST\nVUE_APP_CT_API_HOST\n```\n\n`CT_CLIENT_ID` and `CT_CLIENT_SECRET` are the client id and secret from the api client used for cypress end to end testing.\n\n`VUE_APP_PAGE_SIZE` sets [DEFAULT_PAGE_SIZE](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/constants.js#L6-L8) that is used in page size for product list and order list.\n\n`VUE_APP_GOOGLE_MAPS_API_KEY` configures the google maps [api key](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/main.js#L19) used for the [store selector](https://github.com/commercetools/sunrise-spa/blob/247dce6d042f23477a1eea24de3089451dfcf168/src/presentation/fashion/Stores/StoreLocator.vue#L9-L20).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercetools%2Fsunrise-spa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommercetools%2Fsunrise-spa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercetools%2Fsunrise-spa/lists"}