|
| 1 | +--- |
| 2 | +title: Use Your Own YaaS Project to Back your Storefront. |
| 3 | +description: By default, the StoreFront is wired to the YaaS Project default project (created by the StoreFront's own Team). This default project has already been wired up and populated with the Products (and Services) that you can browse. You will now use our own YaaS Project which you created earlier instead of the default one. |
| 4 | +tags: [ tutorial>intermediate, products>sap-hybris-as-a-service-on-sap-hana-cloud-platform>sap-hybris-as-a-service-on-sap-hana-cloud-platform ] |
| 5 | +--- |
| 6 | +## Prerequisites |
| 7 | + - **Proficiency:** Intermediate |
| 8 | + - **Background Knowledge:** If you are not already familiar with [Node.js](https://www.youtube.com/watch?v=pU9Q6oiQNd0), follow this link to learn more. You will use it in this tutorial. The YaaS Storefront is based on [Angular](https://docs.angularjs.org/guide/directive) and [Restangular](https://github.com/mgonto/restangular#starter-guide). If you are not already familiar with them and would like to dive into the code, you can follow the provided links to start learning. |
| 9 | + - **Tutorials:** |
| 10 | + - [Getting Started with YaaS](http://go.sap.com/developer/tutorials/yaas-getting-started.html) |
| 11 | + - [Download and Run the Default YaaS Storefront](http://go.sap.com/developer/tutorials/yaas-download-run-default-storefront.html) |
| 12 | + - [Use Your Own YaaS Project to Back your YaaS Storefront](http://go.sap.com/developer/tutorials/yaas-create-project-backing-storefront.html) |
| 13 | + |
| 14 | +## Next Steps |
| 15 | + - [Deploy a Micro Service Built on YaaS on the SAP HCP](http://go.sap.com/developer/tutorials/yaas-deploy-run-microservice-cloud.html) |
| 16 | + |
| 17 | +## Details |
| 18 | +### You will learn |
| 19 | +In this tutorial you will use our own YaaS Project which you created earlier instead of the default one. |
| 20 | + |
| 21 | +### Time to Complete |
| 22 | +**20 Min**. |
| 23 | + |
| 24 | +--- |
| 25 | + |
| 26 | +1. If you have not completed the Getting Started with YaaS tutorial, please do it now. This is necessary in order to follow the next steps. |
| 27 | + |
| 28 | +2. Take note of the YaaS **Project's identifier** and the YaaS **Client's identifier** and place these as the `PROJECT_ID` and `CLIENT_ID` values in the `gruntfile.js` in the `folder(1)` directory which you created in the previous tutorials. This is the root directory of your `yaas-storefront` project. |
| 29 | + - You Can find **Project's identifier** in the **Builder** under the **Administration** tab when you open your project. |
| 30 | + |
| 31 | +  |
| 32 | + |
| 33 | + - You can find the client identifier by selecting your client from the list of **Clients**. |
| 34 | + |
| 35 | +  |
| 36 | + |
| 37 | + - In the **Client Authorization** section, use the **SHOW** button. Now you should be able to see the **Client ID**. |
| 38 | + |
| 39 | +  |
| 40 | + |
| 41 | +3. Rebuild the Storefront by running the `grunt build` command from `folder(1)` directory. |
| 42 | + |
| 43 | +4. Rerun your Storefront by running the `npm start` command from `folder(1)` directory. The client will now be talking with your YaaS Project. |
| 44 | + |
| 45 | +5. Add some products to start populating your Storefront with material. |
| 46 | + - Go back to the builder and click on product / new product. |
| 47 | + - Add a name, an identifier, a price, a description and check active. |
| 48 | + |
| 49 | +  |
| 50 | + |
| 51 | + - Click on save. |
| 52 | + - (Optional) Add an image, click on save. |
| 53 | + |
| 54 | +  |
| 55 | + |
| 56 | + - Follow the same steps if you want to create additional products. |
| 57 | + - In the end if you reload your storefront, you will be able to see the products you added. |
| 58 | + |
| 59 | + > NOTE: It is important to set your products as **active**, otherwise they will not appear in your online store. |
| 60 | +
|
| 61 | +### Summary |
| 62 | +In this tutorial, you replaced the default storefront project credentials with your own YaaS project credentials. You added customized products to your storefront. |
| 63 | + |
| 64 | +## Next Steps |
| 65 | + - [Deploy a Micro Service Built on YaaS on the SAP HCP](http://go.sap.com/developer/tutorials/yaas-deploy-run-microservice-cloud.html)P |
| 66 | + |
| 67 | +### Optional |
| 68 | +6. Create a category and assign your products to it. |
| 69 | + - Go back to the Builder and open Categories. |
| 70 | + - Create a category and you can add image for it. |
| 71 | + - Add sub categories to your category. |
| 72 | + - Assign products to categories |
0 commit comments