Salesforce Commerce Cloud Development Quickstart Guide

In this lesson, we will create a blank site using the SFCC's backend called the Business Manager.  It is also important to note that during the development stage, page caching needs to be disabled so that you can immediately view in the front-end whatever code changes you've done.  Page caching though, is highly advised to be enabled in production to optimize page loading and performance of the website facing the customers.

In the previous lesson, we created a blank site.  And disable the page cache and view the storefront.

This time, we will be importing SFCC's base e-commerce website called the SiteGenesis. SiteGensis is the default website proposed by SFCC.  And it has all the functions and features of an e-commerce website. SiteGenesis is a good startup point for creating an e-commerce website. All you need is to develop it based on your business requirements. And that's why you need a Certified Demandware Developer to develop and extend the existing codes for you.

After importing SiteGenesis, there will come a time that when you preview the storefront, it will display an error page or no products available.  To resolve this issue, please ensure that you have done the below 3 important things to do:

1. Disable the Page Cache

2. Trigger the Search Re-index

3. Disable the Storefront SEO-Friendly URL

CARTRIDGE (Project folder) is like structured folders and sub-folders where your codes are stored and are organized in a manner that is optimized to work well with SFCC.

In this lesson, we will create a code version of a cartridge and we will name it as "training".  We will also be setting our "training" cartridge as the priority cartridge, by making use of the cartridge path.

To be able to develop codes in SFCC, you need to install an IDE Kit called Eclipse plus the JDK 8.  Below are the recommended versions:

Install Eclipse Java EE IDE for Web Developers

• Eclipse: Version: Neon.3 Release (4.6.3)

• https://www.eclipse.org/neon/

Install Java SE Development Kit 8 (JDK 8)

• JDK 8: jdk-8u111-macosx-x64.dmg

• https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Run Eclipse and Create a workspace

  There are 2 versions of Eclipse that will work well on UX Studio.  The Mars version and the Neon version.  I'm currently using Eclipse Neon version, but the Mars version will do fine as well. Below are the Eclipse versions and the UX Studio version you must install respectively. 

  Mars - https://developer.salesforce.com/media/commercecloud/uxstudio/4.5

  Neon - https://developer.salesforce.com/media/commercecloud/uxstudio/4.6

  Once installed, don't forget to Enable UX Studio Perspective.

Installing UX Studio to Eclipse will give us the capability to modify and develop codes for our websites in real-time as we save our code.  It will give us the perspective of viewing how our cartridge are structured and where our codes are stored.

Connecting UX Studio to a sandbox requires 3 things:

• hostname

• BM username

• BM password

In you Eclipse IDE, UX Studio perspective, you can create a blank cartridge, by simply clicking File > New > New Cartridge.  Type a cartridge name, attach it to your digital server and click Apply/Save.  This will create a cartridge or a structured project folder with subfolders organized in a way that is recognized by SFCC.

In you Eclipse IDE, UX Studio perspective, to create a SiteGenesis Storefront cartridge, by simply clicking File > New > New SiteGenesis Storefront Cartridge.  Type a name that will be used as prefix to the 3 main cartridges of the a SiteGenesis website, attach it to your digital server and click Apply/Save.

the 3 main cartridges of SiteGenesis or any SFCC websites are the following:

• prefix_controllers

• prefix_core

• prefix_pipelines

NOTE: prefix is the name you type in when creating a new SiteGenesis storefront cartridge in UX Studio.  if you type "storefront" as a name, it will appear as the following:

• storefront_controllers

• storefront_core

• storefront_pipelines

Let's Create your first Controller, the HelloWorld.js controller.  We will add lines of codes into the controller which is Javascript in nature, and view how it should look in the storefront.

Passing a value from a controller to ISML is done through an expression called ${pdict.key} expression.  Since posting response directly from the controller is not a best practice and is highly discouraged, in this lesson, we will be posting the response coming from a controller and sent through an ISML template. 

In the previous lesson, we we have posted a value coming from a controller and sent through an ISML template.  In the lesson, we will try to re-use existing templates (header and footer) from SiteGenesis ISML template folder, and apply it to our existing helloworld.isml template.

On of the interesting object response in SFCC is pulling the URL parameters.  This is done through the use of the request.httpParameterMap.

https://www.example.com/default/Product-Show?pid=P0048

in the above URL, the variables storing the object of the request.httpParameterMap will be able to pass it to an ISML template as per below:

in Controller:
var myPid = request.httpParameterMap.pid

in ISML:
${pdict.myPid} will extract the value P0048

In this lesson, we will be fetch an existing product by using a Script API ProductMgr, as well as fetching the product ID based on the URL parameter, and display the result in the storefront.

Thank you so much guys for enrolling into this course.  This may not be everything, but this will be your first step into learning Salesforce Commerce Cloud development.  This is just a preview.  And if you want to explore further, you can checkout the link from salesforce I've shared in the description here.  They provide training that will help you boost your skills in developing with SFCC. And if you're ready, you can take the credential exam so that you can be a certified SFCC Developer.

Developing for Salesforce B2C Commerce (CCD101)
https://help.salesforce.com/HTTrainingCourseDetail?id=a230M000000wsMc

Earn your credential as a Certified B2C Commerce Developer
https://trailhead.salesforce.com/en/credentials/b2ccommercedeveloper

If you have any questions, please feel free to ask in the Q&A section and I will respond to you as soon as I can.

Once again, thank you so much, this is WhiteBeanieGuy, Happy Coding!