Media Storefront

Note: Spartacus 4.x is no longer maintained. Please upgrade to the latest version.

Note: Spartacus 4.x was tested with SAP Commerce Cloud versions 1905 to 2205. Spartacus 4.x has not been verified to work with (and is not guaranteed to work with) SAP Commerce Cloud 2211 or later releases.

Note: This feature is introduced with version 3.1.0 of the TUA Spartacus libraries.

The Media Storefront feature enables customers browsing the Media SPA Store to see the product offerings and pricing details of the offerings that are defined by Business Administrators in the Backoffice. The product offerings are purchased from a dedicated product catalog.

To see a working example of the Media Storefront, see our public instance.

Table of Contents

Business Need

The feature is required as it allows customers to browse the Media SPA and purchase product offerings from a dedicated product catalog. Customers will be able to view all available product offerings and prices for each of the product offerings that are configured by Business Administrators in the Backoffice.

Business Use Case

As part of this feature, the customer can:

  • Browse media products in a dedicated store
  • Register new account and login to existing account
  • View details in the Account section
  • Add a product offering to cart
  • Update and / or remove a cart entry
  • Complete the checkout flow
  • Purchase a BPO through a guided selling
  • View prices and discounts for the product offerings
  • Search product offerings
  • Place an order
  • View order list or details of the existing order
  • View existing subscriptions and subscription usage details of the existing subscriptions

Media SPA Storefront Homepage

  1. Log in to TUA Spartacus. The Media SPA storefront homepage displays the following sections:
    • Upper: Navigation bar that includes WATCH TV, MOVIES, MERCHANDISE, and SUBSCRIPTION PACKAGES.
    • Middle: Includes two banners
    • Lower: Includes information related to ACCELERATOR, HYBRIS, POLICIES, and FOLLOW US.

    Media SPA Storefront Homepage

View Account Section – Order History

  1. Click the Account dropdown to view different sections that are listed.

    Account

  2. Select Order History to view the details of an existing order.

  3. Select the required Order number from the list of orders displayed. The Shipped section displays detailed information of the selected order.

    Order History: Shipped

View Account Section – Address Book

  1. Select Address Book to view the list of address that are already added.
  2. Click Add New Address to add a new address.
  3. Click Edit to update the existing address.

  4. Click Delete to delete the existing address.

    Address Book

View Account Section – Payment Details

  1. Select Payment Details to view if any payment related details are saved.
  2. Payment details such as card details are saved during the checkout flow when the customer places an order.

  3. Click Delete if the saved details need to be removed from this section.

    Payment Details

View Account Section – Personal Details, Password, Email Address

  1. Select Personal Details to update name-related details.
  2. Select Password to add a new password.
  3. Select Email Address to add and request for new email address.

View Account Section – Consent Management

  1. Select Consent Management to provide consent to store data and receive e-mails for marketing campaigns.

    Consent Management

View Account Section – Close Account

  1. Select Close Account to close the account permanently.

View Account Section – Subscription and Usage Details

  1. Select Subscriptions to view the available subscriptions.

    Subscription

  2. Click the required subscription to view details of the active plan such as contract start and end date, order number, contract duration, and order prices.

    Subscription Details

  3. Click Go Back To Subscriptions to go to the actual page from where the order was placed.

    <img src="/spartacus-docs/assets/images/telco/subscription-order-details.png" alt="Subscription Order Details>

  4. Click Usage Details for the required subscriptions in the MY SUBSCRIPTIONS page.

  5. The corresponding page displays usage related details in a pie chart format.

    Subscription Usage Details

Cart Product Offering - Add. Update, Remove

To add a product offering to the cart:

  1. Click the top banner to view the price details.

  2. Click Add To Cart.

    Underworld Banner

  3. Add or remove the quantity, if required.
  4. Click View Cart.

  5. Click Proceed to checkout.

    Proceed to Checkout

Checkout Flow and Order Placement

The checkout flow starts from here, and it is similar to the Telco SPA and the Utilities SPA.

  • Shipping Address
  • Delivery Mode
  • Payment Details
  • Review Order

The Shipping Address is selected by default. If required, you can add a new address.

  1. Click Continue.
  2. Select the required Delivery Mode from the Shipping Method section.
  3. Click Continue.
  4. In the Payment Details section. the payment method is selected by default. Either continue with the selected card or click Add New Payment to add a new card.
  5. Click Continue.
  6. Review the order details before placing the order.
  7. Select the check box in the ORDER SUMMARY section.

  8. Click Place Order.

    Review and Place Order

Order Confirmation – Order List and Order Details

The order is placed and a confirmation page with the order details is displayed.

Order List and Order Details of Placed Order

Purchase a BPO via a Guided Selling

  1. Go to Homepage and click the second banner. The configured guided selling page is displayed where the Tricast Channels pack is configured.

    Tricast Channel Page

  2. Click Select to add the YTV Channel to the channel.

    Added YTV Channel

  3. Click Tricast Channels Plans.
  4. Click Select to add the Tv Starter to the channel plan.
  5. Click Add To Cart.

  6. Click View Cart to view the cart details.

    CGS Cart Details

    These details can either be modified or deleted.

  7. Click Proceed To Checkout.
  8. Go to the CGS checkout flow tabs by clicking Continue.
  9. In the Review Order tab, select the check box in the ORDER SUMMARY section.

  10. Click Place Order.

    CGS Place Order

The order is placed and a confirmation page with the order details is displayed.

CGS Order Confirmation

Frontend and Backend Dependencies

Dependency Detail
Spartacus 1.x, 1.2x, < 3.0
Telco & Utilities Accelerator Version 2102 (latest patch - 21.02)
SAP Commerce Cloud Version 2011 (latest patch)

Configuring Media SPA

The client application allows customers to configure certain variables that are exposed through TmaB2cStorefrontModule so that the application is flexible.

Configure the values in app.module.ts in the imports section under TmaB2cStorefrontModule.withConfig({ ... }) config.

Configurable Variables Description Syntax Default Values
billingFrequency List of billing frequency and their value in months.
Used for converting billing frequency string into their value in months.		 Billing Frequency
billingFrequency: [
{
key:
,
value:
,
},
...
{
key:
,
value:
,
}
], 		billingFrequency
billingFrequency: [
{
key:
'yearly',
value: 12,
},
{
key:
'year',
value: 12,
},
{
key:
'annually',
value: 12,
},
{
key:
'annual',
value: 12,
},
{
key:
'monthly',
value: 1,
},
{
key:
'month',
value: 1,
},
{
key:
'quarterly',
value: 3,
},
{
key:
'quarter',
value: 3,
},
],