πŸ”₯πŸ’£πŸ”₯ Salesforce B2C Commerce Developer Certification Exam Practice Test Buy

Getting Data with Models and Sending Data with ViewModels

Introduction

We've discussed Controllers, Templates and briefly mentioned ViewModels but without many details, now we will discuss differences between models and view models and why SFRA architecture make use of view models.

It would be nice if you have previous experience in MVC pattern before going deeper, so if it's not the case, take a look to this link before continue.

MVCVM: It's mostly the same than MVC pattern but with an an extra layer called ViewModel (VM).

You see, in pure MVC the Models usually are the representation of our database tables. They are defined once and usually they represent a table in the database. But imagine that models can have dozens of fields.

What are the chances you need all of them on a page? And imagine how much-unused data is being sent over to the page. The more data we send, the more the loading time. Instead, we create what we call ViewModels.

To put it in simple terms, ViewModels are objects we create specifically for the pages we want to render, containing only the data that that specific page needs.

MVCVM SFRA Pattern

Our Controller gets data from the API (Models), creates a ViewModel object (basically a hashmap with key-value pairs) and sends it to the storefront (View).

Models: As mentioned before, Models usually represent our database tables. In SFCC you will notice we have 2 levels of Models.
We have the Models that are returned by the SFCC API.

SFCC Data Models

Using these Mgr classes we can get data from our API. But there is another type of model. One that we have access to the source and extend.

app_storefront_base cartridge models

These are models that we can customize. For better understanding we will focus on CartModel and Cart Controller

Cart model Salesforce Commerce Cloud

Did you notice that it receives the actual Basket as a parameter and adds more data when creating the model? To be sure this is really the Basket returned from the API let’s check the Cart Controller that renders the Cart page:

Cart controller Salesforce Commerce Cloud

In this case, it is really the case that our Model and ViewModel are the same as we just confirmed. That being said, the advantage of having these models is that we can extend them according to our own needs. In case we need to retrieve more data, for example, we can just add it do the model and whenever we call it, that data will be where.

Keep in mind that this might not always be the best approach. If you need this extra data only for one specific call, it might be a better idea to use getViewData and setViewData inside your controller instead.

How access view model data

Once data is send in our controller via setViewData() or via second parameter in res.render() function. It will be accessible in our templates via pdict variable as we learned in previous chapters. So, in our example, some model properties are used in cart.isml template, take a look!

Retrieving viewmodel data in SFCC

ViewModels

As we already mentioned before, in SFCC ViewModels are just objects that are created specifically for the page we are rendering or to the request, we are responding to.

Whenever you see data being sent through the res.render or res.json functions and the data is inside { and }, that's your ViewModel.

To access it on your page you just consider them as entries in your pdict object. Take for example the Search Controller, Refinebar endpoint:

Check how the search/searchRefineBar ISML template accesses the productSearch object because of the { } syntax: The objects are put inside pdict.

Retrieving viewmodel data in SFCC

πŸ“ Exercise: Extending the Cart Model

When loading the Cart page, we no longer have access to the notes (which the basket instance inherits from LineItemCtnr). But for the current project, when the user goes to the Cart page, we want to have access to those and if there are none, display the following message "You have no notes on your cart"

The basket notes are inside the basket object retrieved by BasketMgr.getCurrentBasket(). If you open the official documentation for the Basket class, you will find that it has an attribute notes containing what we want.

Inside CartModel, we have the basket instance, which contains the notes array. So let's just add it to the model.

πŸ”₯πŸ’£πŸ”₯ Salesforce B2C Commerce Developer Certification Exam Practice Test Buy