Storefront Template | YaaS Dev Portal

YaaS Storefront

The YaaS Storefront is a ready-to-use template, and can be set up as a fully transactional storefront within minutes, or you can use the template as a starting point to customize your own features and functionality. The storefront template is fully implemented with SAP Hybris commerce services and third-party services. It is also integrated with Builder modules for configuration and management of available functionality. The main attributes of the YaaS Storefront are the following:

Single-page application, written in AngularJS
Responsive, mobile-first design
Extensible architecture
Single and multi-tenant deployment modes
Multi-site and localization capabilities

The template’s source code is available at https://github.com/sap/yaas-storefront. You can download, use, and contribute to it openly. To clone the storefront and run it locally, follow the instructions in the Set Up a Storefront guide, and subscribe to the packages described in the Commerce as a Service guide.

The YaaS Storefront is a standardized and dynamic offering that helps speed up project implementation and business innovation by providing many benefits, such as:

Its vanilla design and clean codebase makes it easy to extend and create customized customer experiences.
It offers basic, end-to-end commerce functionality out of the box. Some of the main features and functionalities are:
- Customized homepage banners
- Navigation based on category taxonomy
- Product and price display
- Cart with tax estimation and coupon redemption
- Guest checkout, and customer accounts integrated with checkout
- Plug-ins for payment and tax
YaaS ensures continuous delivery of new features, improvements, and fixes to the codebase that are freely available for use.
It offers full flexibility and scalability to accommodate any growth.

Live demo

To see a live example of the YaaS Storefront template, visit the demo store at the following URL: http://shops.yaas.io/saphybriscaas/#!/home To place a test order, use the following payment test data:

Credit card number: 4242424242424242
Input any future card expiration date, in the form: MM/YYYY
Input any three numbers in the CVC field, such as: 123

The demo storefront is for demo purposes only, and any orders that are placed are not fulfilled.

Features and functionality overview

The features and functionality available out-of-the-box in the YaaS Storefront template are described in the table below:

Page	Features	Integrated Services	Builder Module Configuration and Management
Header	Site logo display Algolia search box Link to a pop-up modal to create an account and sign in with email and password, or social media application When signed in, a drop-down menu displays, with links to My account and Sign out Site and language selector One-click access to cart	Site Algolia Search Customer	Upload site logo in Site Settings Configure the Algolia account details in Algolia Settings Configure social media Application IDs, and set a password reset URL in Customer Settings.
Footer	Links to social sites Copyright
Navigation	Three-level category taxonomy navigation	Categories	Create and activate parent and child categories in Categories
Homepage	Layout that displays one large and two small banner images	Site	Upload homepage banners per site in Site Content Settings
My Account page	Manage account details such as title, name, contact email, and password Manage default and saved addresses in the address book Order history list	Customers Orders
Order Details page	Displays order history details for registered customers	Orders
Product Category and Search Result Listing pages	Breadcrumbs Displays product image, name, and price Infinite scroll	Product Details Category	Activate and inactivate display of products and categories under Products and Categories
Product Details page	Displays product image, name, price attributes, and description Link to pop-up modal which displays shipping information Select quantity to add to the cart Add to Cart button	Product Details	Add and manage product data in Products, link to categories, and add attribute values Manage shipping rates in Shipping Settings
Cart	Estimated order total calculation Shipping cost estimation Tax estimation Apply coupon Displays items in the cart Change quantity and remove items Continue Shopping and Checkout buttons	Cart	Manage tax display in Tax Settings Flat rate tax included in price does not display tax as a separate line item in order calculation Flat rate tax excluded in price displays tax as a separate line item in order calculation To enable tax estimations, configure Avalara Tax Create redeemable coupon codes in Coupons to enable customers to apply discounts to orders
Checkout page	Customer details Localized address forms Pre-populated addresses with an option to select from the address book for registered customers Delivery method options Order preview for display of final order total Payment details Order summary Place Order button	Cart Cart calculation Customer Stripe Checkout Shipping	Configure payment provider in Payment Settings
Order Confirmation page	Order summary Account creation for guest checkouts	Order	Add Social Application IDs in General settings to enable customers to create an account using social media login after checking out as a guest

Glossary

Term	Description
YaaS Storefront	A configurable storefront template that can be further customized for your needs.
account	An account created by a customer in the storefront.
account email	The login email of a customer account.
address book	Part of the customer account in which multiple addresses can be saved for use in checkout.
completed	An order status stating that the order has been completed.
confirmed	An order status stating that the order has been confirmed and is being processed by an order fulfillment worker.
coupon code	A unique code used to apply a discount percentage or amount off an order.
created	An order status stating that the order has been successfully created in the system.
delivery method	The shipping method(s) and fee(s) available and applied to an order.
estimated tax	The estimated amount of sales tax that will be applied to an order, based on the entered ZIP Code.
guest	A customer that places an order without being signed in to the storefront.
order history	Part of the customer account in which previously placed orders can be viewed.
order number	The unique identifier of an order.
order status	The current state of the order workflow.
order total	The final payable or paid amount of an order.
password	The login password of a customer account.
shipped	An order status stating that the order has been processed and picked up by a shipping carrier for delivery to the customer.
shipping	The shipping cost applied to an order.
shipping address	The address used for order delivery.
subtotal	The summed price of all items added to a cart or in an order.

Send feedback
If you find any information that is unclear or incorrect, please let us know so that we can improve the Dev Portal content.
Get Help
Use our private help channel. Receive updates over email and contact our specialists directly.
hybris Experts
If you need more information about this topic, visit hybris Experts to post your own question and interact with our community and experts.