Skip to Content

Use Your Own YaaS Project to Back your Storefront.

Previous

Use Your Own YaaS Project to Back your Storefront.

By Seyedehmorvarid Khademhaghighat

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.

You will learn

In this tutorial you will use our own YaaS Project which you created earlier instead of the default one.

Details


Step 1: Complete Getting Started with YaaS

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.

Please log in to access this content.
Step 2: Set project ID and client ID

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.

  • You Can find Project’s identifier in the Builder under the Administration tab when you open your project.

    Project Identifier
  • You can find the client identifier by selecting your client from the list of Clients.

    Client Credentials
  • In the Client Authorization section, use the SHOW button. Now you should be able to see the Client ID.

    Show Credentials
Please log in to access this content.
Step 3: Rebuild the Storefront

Rebuild the Storefront by running the grunt build command from folder(1) directory.

Please log in to access this content.
Step 4: Rerun your Storefront

Rerun your Storefront by running the npm start command from folder(1) directory. The client will now be talking with your YaaS Project.

Please log in to access this content.
Step 5: Add products

Add some products to start populating your Storefront with material.

  • Go back to the builder and click on product / new product.
  • Add a name, an identifier, a price, a description and check active.Add Product
  • Click on save.

  • (Optional) Add an image, click on save.Add Image
  • Follow the same steps if you want to create additional products.

  • In the end if you reload your storefront, you will be able to see the products you added.

NOTE: It is important to set your products as active, otherwise they will not appear in your online store.

Please log in to access this content.

Summary

In this tutorial, you replaced the default storefront project credentials with your own YaaS project credentials. You added customized products to your storefront.

Next Steps

  • Deploy a Micro Service Built on YaaS on the SAP Cloud Platform

Optional

Create a category and assign your products to it.
- Go back to the Builder and open Categories.
- Create a category and you can add image for it.
- Add sub categories to your category.
- Assign products to categories

Updated 03/23/2017

Time to Complete

20 Min.

Beginner

Prerequisites

  • Background Knowledge: If you are not already familiar with Node.js, follow this link to learn more. You will use it in this tutorial. The YaaS Storefront is based on Angular and Restangular. 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.
  • Tutorials:
  • Getting Started with YaaS
  • Download and Run the Default YaaS Storefront
  • Extend the YaaS Storefront’s Functionality With a Micro Service

Next Steps

  • Deploy a Micro Service Built on YaaS on the SAP Cloud Platform
Next
Back to top