diff --git a/LegacyDeveloperDocumentation.pdf b/LegacyDeveloperDocumentation.pdf new file mode 100644 index 00000000..b3c3a402 Binary files /dev/null and b/LegacyDeveloperDocumentation.pdf differ diff --git a/legacydocs.md b/legacydocs.md new file mode 100644 index 00000000..e7ae09a1 --- /dev/null +++ b/legacydocs.md @@ -0,0 +1,17576 @@ +HTTP/2 200 content-type: text/html date: Sat, 24 Jan 2026 02:02:25 GMT +server: Jetty(11.0.26) vary: Accept-Encoding + +::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +1/158 + +Legacy Developer Documentation Contents + +1\. UX Studio 1.1. Install or Update UX Studio 1.2. Create a Workspace +1.3. Connect to Your Server + +1.3.1. Create a Proxy Server Connection for Studio 1.3.2. Create Version +Directories 1.3.3. Configure Your Salesforce B2C Commerce Server +Connection 1.3.4. Troubleshoot Your Server Connection + +1.4. Create a Storefront Project 1.5. Studio File System 1.6. +Configuring Automatic Updates for Studio 1.7. Studio Perspectives 1.8. +Configuring Studio Views + +1.8.1. Studio Properties View 1.8.2. Studio Outline View + +1.9. Studio Editor Area 1.9.1. Enabling Code Completion for Controllers +1.9.2. Code Completion/Syntax Highlighting 1.9.3. Code Checking 1.9.4. +Enable Content Assist in UX Studio 1.9.5. Form Autocomplete 1.9.6. +Setting Studio Preferences + +1.10. Troubleshooting Studio 1.11. Upload Cartridges 1.12. Import +Cartridges into Your Storefront 1.13. Add Existing Cartridges to Your +Storefront 1.14. Reassign Cartridges from One Server Connection to +Another 1.15. Using a Custom Builder 1.16. Code Deployment 1.17. +Creating a New Template + +2\. Site Genesis 2.1. Getting Started with SGJC + +2.1.1. Site Genesis Learning Path Resources 2.2. SGJC Setup 2.3. +SiteGenesis JavaScript Controller (SGJC) Model-View-Controller +Development Model 2.4. SiteGenesis JavaScript Controllers (SGJC) +Standards Compliance 2.5. SiteGenesis Modules and Hooks 2.6. SiteGenesis +and CSS 2.7. Migrating Your Storefront to SGJC Controllers + +2.7.1. Pipeline to Controller Conversion 2.7.2. TLS Browser Detection +2.7.3. Configuring Storefront Preferences 2.7.4. Categories Don\'t Show +in Storefront 2.7.5. Cookies Notification/Opt-in for European Cookie Law +2.7.6. SiteGenesis and Web Content Accessibility Guidelines (WCAG) +2.7.7. SiteGenesis Features + +2.7.7.1. SiteGenesis Locale and Multicurrency 2.7.7.2. SiteGenesis +JavaScript Controller (SGJC) Cart Calculation 2.7.7.3. SiteGenesis +CAPTCHA and Rate Limiting 2.7.7.4. SiteGenesis Content Sharing 2.7.7.5. +SiteGenesis Dynamic Payment Processing 2.7.7.6. SiteGenesis Gift +Registry and Wish List Features 2.7.7.7. SiteGenesis Forgot Password +2.7.7.8. SiteGenesis Passwords 2.7.7.9. SiteGenesis Infinite Scrolling +2.7.7.10. SiteGenesis Mini Images Code Example 2.7.7.11. SiteGenesis +Promotions + +2.7.7.11.1. SiteGenesis Choice of Bonus Product Discount Implementation +2.7.7.11.2. SiteGenesis Coupons 2.7.7.11.3. SiteGenesis Source Codes + +2.7.7.12. SiteGenesis Recommendations 2.7.7.12.1. SiteGenesis +Recommendation Examples + +2.7.7.13. SiteGenesis Responsive Design 2.7.7.14. SiteGenesis Search + +2.7.7.14.1. SiteGenesis Search Triggered Banner 2.7.7.14.2. SiteGenesis +Search Pipelines 2.7.7.14.3. SiteGenesis Search Scripts 2.7.7.14.4. +Result Attributes in the Search Grid 2.7.7.14.5. Result Attributes in +Product Detail Pages 2.7.7.14.6. Refinement Bar Customization +2.7.7.14.7. Manually Changing Search Attributes and Settings 2.7.7.14.8. +SiteGenesis Search Properties Files + +2.7.7.15. SiteGenesis in-Store Pickup 2.7.7.15.1. Understanding in-Store +Pickup + +2.7.7.16. SiteGenesis Taxes +::: + +:::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +2/158 + +2.8. Common Page Components 2.9. Development Components 2.10. Import +Reference Application Data into a Sandbox 2.11. SGJC Forms + +2.11.1. What Is a Form Definition 2.11.2. Object Binding with Forms +2.11.3. Extracting Form Field Parameters from Metadata 2.11.4. Form +Element Naming Conventions 2.11.5. Cross Site Request Forgery Protection +2.11.6. Form Validation 2.11.7. Using API Form Classes 2.11.8. Form +Definition Elements + +2.11.8.1. Action Form Element 2.11.8.2. Field Form Element 2.11.8.3. +Option Form Element 2.11.8.4. Options Form Element 2.11.8.5. Group Form +Element 2.11.8.6. Include Form Element 2.11.8.7. List Form Element + +2.11.9. Developing Forms with Pipelines 2.11.9.1. How Pipelines Process +Forms 2.11.9.2. Salesforce B2C Commerce Forms Components + +2.11.9.2.1. Using Business Objects with Forms 2.11.9.2.2. Creating a +Form Definition 2.11.9.2.3. Using Forms in Templates 2.11.9.2.4. Using +Form Pipelets 2.11.9.2.5. Using Interaction Continue Nodes with Forms +2.11.9.2.6. Form Components Working Together + +2.11.9.3. Forms Tutorial 2.11.9.3.1. Using Transitions with Forms + +2.11.9.3.1.1. Transitions with Forms 2.11.9.3.2. Forms Tutorial: +Business Manager + +2.11.9.3.2.1. 1 Forms Tutorial: Extend Profile System Object +2.11.9.3.2.2. 2 Forms Tutorial: Create Preferences Attribute Group + +2.11.9.3.3. Forms Tutorial: UX Studio 2.11.9.3.3.1. 1 Forms Tutorial: +Create Form Definition 2.11.9.3.3.2. 2 Forms Tutorial: Update Content +Asset 2.11.9.3.3.3. 3 Forms Tutorial: Add Templates 2.11.9.3.3.4. 4 +Forms Tutorial: Add Localizable Text Messages 2.11.9.3.3.5. 5 Forms +Tutorial: Modify the Pipeline 2.11.9.3.3.6. 6 Forms Tutorial: Final +Results + +2.12. Working with SGJC Controllers 2.13. Comparing Pipelines and SGJC +Controllers 2.14. Debugging Scripts + +2.14.1. Configuring a Script Debugging Session 2.14.2. Setting +Breakpoints 2.14.3. Running the Script Debugger 2.14.4. Using the +Breakpoints View 2.14.5.  Stepping Through a Script 2.14.6. Using Other +Views with Script Debugger + +3\. Pipelines 3.1. System Pipelines and Controllers 3.2. Pipeline +Scripting Quick Start Example 3.3. Pipeline Elements + +3.3.1. Pipeline Building Blocks 3.3.2. Start and End Nodes 3.3.3. +Subpipelines + +3.4. The Pipeline Dictionary 3.5. Database Transaction Handling 3.6. +Pipeline Execution Steps 3.7. Error Handling 3.8. Debugging Pipelines +3.9. Analyze Performance with Pipeline Profiler 3.10. Excluding +Pipelines from Permission Checks + +Legacy Developer Documentation + +Documentation in this section describes legacy B2C Commerce +functionality. + +UX Studio + +UX Studio provides a storefront development environment as a plugin for +the Eclipse IDE. With UX Studio, you have control over storefront +customization while linked to your development server. You + +make changes within UX Studio on your PC, then view the effect on your +storefront, thus speeding storefront customization delivery. + +Site Genesis SiteGenesis JavaScript Controllers (SGJC) is a +demonstration ecommerce reference application that enables you to +explore Salesforce B2C Commerce and its capabilities. You can use it as +the basis of your + +own custom site, although SFRA is recommended for new projects. + +Pipelines + +Pipelines predated controllers and are similar in terms of functionality +they provide. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::: + +:::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +3/158 + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1\. UX Studio + +UX Studio provides a storefront development environment as a plugin for +the Eclipse IDE. With UX Studio, you have control over storefront +customization while linked to your development server. You make changes +within UX Studio on your PC, then view the effect on your storefront, +thus speeding storefront customization delivery. + +Using UX Studio you can: + +Create new storefront functionality + +Create new business processes + +Integrate with external applications + +After you install the UX Studio plugin, you can open UX Studio by +selecting the Commerce Cloud Development perspective. + +Related tasks + +Create an Access Key for Logins + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.1. Install or Update UX Studio + +UX Studio is a plug-in for Eclipse IDE for Java EE Developers. + +The UX Studio plug-in requires JDK 8 and supports the following Eclipse +versions. + +Mars - Eclipse 4.5 + +Neon - Eclipse 4.6 + +Note: Newer versions can work, but have not been tested and are not +supported. + +If you are updating Eclipse, first close the Salesforce B2C Commerce +Development perspective. + +UX Studio is installed as a plug-in for Eclipse. First, install Eclipse. +Then, start the program and install the UX Studio plug-in. + +1\. (Windows only) In your Eclipse directory, open the eclipse.ini file +and add the following line under the -vmargs option if it is not already +there. + +-Djava.net.preferIPv4Stack=true + +2\. Run Eclipse. + +3\. Select Help \> Install New Software. + +4\. Click Add. + +5\. Enter UX Studio as the name. + +6\. Enter a location according to your Eclipse version and instance +type. To access different instance types, install different Eclipse +instances with different Studio versions. + +Mars + +Sandbox + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::: + +::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +4/158 + +https://developer.salesforce.com/media/commercecloud/uxstudio/4.5 + +PIG (Production, Staging, or Development) + +https://developer.salesforce.com/media/commercecloud/uxstudio_pr/4.5 + +Extended Preview or Early Access Sandbox + +https://developer.salesforce.com/media/commercecloud/uxstudio_ea/4.5 + +Neon + +Sandbox + +https://developer.salesforce.com/media/commercecloud/uxstudio/4.6 + +PIG (Production, Staging, or Development) + +https://developer.salesforce.com/media/commercecloud/uxstudio_pr/4.6 + +Extended Preview or Early Access Sandbox + +https://developer.salesforce.com/media/commercecloud/uxstudio_ea/4.6 + +7\. Select Salesforce B2C Commerce, and click Next. Eclipse verifies +compatibility. + +8\. Click Next. + +9\. Select I accept the terms of the license agreements, and click +Finish. + +10\. When the installation finishes, click Yes to restart Eclipse. If +you experience problems, make sure that JDK 8 is installed. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.2. Create a Workspace + +In Studio, you create and modify cartridges in a workspace. You can only +work in one workspace at a time. In the workspace, you can create one or +more server projects. + +If you are working on multiple sites, create a workspace for each site. + +If you have multiple workspaces, you can select which one is shown when +you open UX Studio. + +1\. In your extraction file location, double-click eclipse.exe. + +See Eclipse documentation. + +2\. In Eclipse, create a workspace on your local machine with sufficient +space to store your project. + +3\. Click OK. + +4\. Select I accept the terms of the license agreements, and click OK. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.3. Connect to Your Server + +After you create your workspace, specify your server connection to your +Salesforce B2C Commerce to upload code to your Sandbox or Staging +instance. To simplify connection management, we recommend that you +create only one server connection per workspace. Usually, the server you +want to connect to the one for your assigned Sandbox instance. + +1\. In Eclipse, click and select B2C Commerce Development. + +2\. Click File \> New \> B2C Commerce Server Connection. + +3\. For Project Name, enter your instance name (dev01), or accept the +default (CommerceCloudServer). + +4\. Accept Use default location. This is the location of your workspace. +You can specify a different location, but the server connection must be +inside the workspace. Otherwise, unexpected results can occur. We +recommend that you accept the default workspace. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::: + +:::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +5/158 + +5\. For the host name, enter the fully qualified domain name (FQDN). + +Example: If you are connecting to your sandbox instance via a browser, +the FQDN portion of the URL looks similar to: +dev01.web.mycompany.demandware.net. + +6\. For the user name, enter a name that has Site Developer rights, such +as admin. These rights are assigned in Business Manager. Contact your +administrator for information about a user name and password. + +7\. Enter the password (case sensitive). + +If you or someone else changes the password later in Business Manager, +Studio detects the change and requires you to update the information in +Studio. + +8\. Select Remember Password. By default, this option is disabled. + +The B2C Commerce Server Connection password isn\'t saved locally. You +are prompted to enter your password the first time you perform any +operation that requires server interaction. The password is retained in +memory only for the period of time configured in the UX Studio +preferences in Eclipse. The default is 4 hours. + +If you stop and restart Studio and the password isn\'t remembered, you +are prompted to update your configuration information the first time +Studio tries to upload files to the server. + +9\. For Use Certificate Authentication, which enables two-factor +authentication on the server: + +For Sandbox instances, do not select it. You are connecting to a Sandbox +instance if your host name starts with dev. + +For Staging instances, select this option and enter the location of the +keystore file and its password. If the keystore file and password +combination are correct, the keystore file is saved in the local server +project directory. You are connecting to a Staging instance if your host +name starts with staging. + +Note: Two-factor authentication must be enabled at the server for the +Staging instance. Two-factor authentication is a basic security +precaution. Code is directly uploaded only to Sandbox and Staging +instances. For Development and Production instances, code is replicated +from Staging. + +10\. Click Yes. + +11\. Select the target upload directory. + +For a new sandbox, this is always version1. + +The server uses the code version in the Active directory field. Select +this version if you want your code changes to be visible in the +storefront. + +12\. Whether you click Next or Finish depends on whether you are +creating storefront cartridge. If you are following the Developer +Getting Started trail, you have not yet created a cartridge. + +If you haven\'t yet created a cartridge, click Finish. + +If you\'ve already created a cartridge, click Next to associate the +cartridge with the server. + +Select the cartridges you want to associated with the server, and click +Finish. + +If the Do you want to download the API source cartridges now? message +appears, click Yes. These cartridges let you take advantage of new B2C +Commerce features, providing a strong foundation for your ecommerce +storefront. + +13\. Click Yes. + +During the download, the log output scrolls in the Studio console. When +the download is complete, the Cartridge Explorer view appears within +Studio. + +14\. Refresh the server connection and verify that the latest B2C +Commerce API is downloaded to your Studio workspace. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.3.1. Create a Proxy Server Connection for Studio + +If the Salesforce B2C Commerce instance is behind a firewall, it can +prevent you from accessing the instance from your local computer vial +Studio. For personal firewall\--disable the firewall. For corporate +server\--use a proxy server. + +Windows-based proxy servers or Windows-based networks require NTLM +authentication, and you must use the native provider. Other systems can +use a director or manual provider. + +Note: Studio interacts with remote servers via HTTPS. If your Proxy +Server is configured for HTTPS traffic, use the HTTPS scheme in the +Eclipse proxy preferences. However, if your Proxy Server is configured +to use the HTTP, use the HTTP scheme in the Eclipse proxy preferences. + +1\. (Windows) To use the native provider, first configure the proxy +server information in Internet Explorer. + +a\. In Internet Explorer, select Tools \> Internet Options. + +b\. On the Connections tab, click LAN Settings. + +c\. In the Proxy server section, click Advanced. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::: + +:::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +6/158 + +d\. Configure the proxy information in the HTTP entry fields. + +e\. Select Use the same proxy server for all protocols. + +2\. In Studio, select Window \> Preferences. + +3\. Under General, select Network Connections. + +4\. Select one of the following options for the Active Provider: + +Direct\--Instead of using a proxy, Studio uses a direct connection to a +remote server. + +Manual\--Studio uses the proxy settings that you configured. + +Windows\--Studio uses the local system\'s proxy configuration. The +information that you configured via Internet Explorer, is displayed in +the Network Connections dialog box. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.3.2. Create Version Directories + +You can create version directories on your server instance via the +Business Manager if you have the appropriate permissions. + +When developing your application in Studio, you can select which +directory to upload files. Using version directories lets you retain +previous versions while saving your changes to a specific server +directory so that you can retest the application against an older +version. + +In Business Manager, define your directories and set one of them as +active. In Studio, each time you create a project, define the upload +directory. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.3.3. Configure Your Salesforce B2C Commerce Server Connection + +You can configure your B2C Commerce server connection in several +locations in Eclipse. + +To configure Navigate to + +Server connection timeout + +Server connection password expiration + +Directories to exclude from upload + +1\. From Eclipse main menu: + +On Windows, select Window\> Preferences. + +On a Mac, select Eclipse \> Preferences. + +2\. In the list, expand UX Studio. + +3\. Click Server. + +B2C Commerce connection settings as an Eclipse project In the Navigation +pane, right-click the server connection and select Properties. + +B2C Commerce password for connecting to the server + +1\. In the Navigator view, right-click the server connection. + +2\. Select B2C Commerce Server \> Change Upload Staging Directory. + +3\. Enter the password for your connection, and click Next. + +4\. Select the directory to upload your changes. + +or + +1\. In the Studio toolbar, click + +2\. Select B2C Commerce_Server_Connection \> Change Upload Staging +Directory. + +3\. Enter the password for your connection, and click Next . + +4\. Select the directory to upload your changes. + +B2C Commerce server connection host name or certificate information + +Note: You must first communicate with Salesforce Customer Support to get +the files required to set up two-factor authentication. See Creating and +Using Certificates for Code Deployment. . + +1\. In the Navigator view, right-click the server connection. + +2\. Select B2C Commerce Server \> Update Server Connection. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::: + +::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +7/158 + +To configure Navigate to + +or + +1\. In the Studio toolbar, click + +2\. Select B2C Commerce_Server_Connection \> Update Server +Configuration. + +Automatic upload of code to your instance + +1\. In the Studio toolbar, click + +2\. Click Auto-Upload. + +Related concepts + +Code Upload + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.3.4. Troubleshoot Your Server Connection + +If you don\'t see your code changes on the server, check your server +connection. These instructions use CommerceCloudServer, which is the +default name for a server connection. + +Only one server is active at a time, and a server must be configured to +automatically upload. + +Check that the server connection has Active Server and Auto Upload +selected + +1\. Do one of the following: + +In Studio, on the Navigator tab, view the CommerceCloudServer connection +folder icon. + +On the Studio toolbar, click the Salesforce B2C Commerce Server icon, +and select the CommerceCloudServer connection. + +Click B2C Commerce Server, and ensure that Active Server and Auto Upload +are selected. + +Check the Server Connection Configuration + +1\. In Studio, on the Navigator tab, right-click CommerceCloudServer. + +2\. Select B2C Commerce Server \> Update Server Configuration. + +Check that the correct instance is configured. + +Check that the correct user and password are entered. + +Check Whether a Firewall is Interfering with Your Connection + +It's possible that Studio can't access the B2C Commerce instance if your +local computer is behind the firewall. Create a proxy server to +establish a connection. See Creating a Proxy Server Connection for +Studio. Creating a Proxy Server Connection for Studio. + +Upload the Cartridge + +To force an upload, on the Studio toolbar, click the Commerce Cloud +server button \> the CommerceCloudServer connection \> Upload +Cartridges. This might give you more information about the problems you +are experiencing. + +Reassign the Cartridge + +See Reassign Cartridges from One Server Connection to Another. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::: + +:::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +8/158 + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.4. Create a Storefront Project + +How you create a storefront project depends on whether you are using +SFRA or SGJC. + +If you are using SFRA, see Adding Custom Cartridges. + +If you are using SGJC, perform the steps below. + +When you have installed UX Studio and downloaded the API source +cartridges, you can create a cartridge for your code. + +1\. Start UX Studio. + +2\. Select File \> New \> SiteGenesis Storefront Cartridges. + +3\. Select a Salesforce B2C Commerce Server, and click Next. + +4\. Configure the cartridge, and then click Finish. + +a\. Name: Enter a root name for the Storefront Cartridges. The name must +begin with a letter and can include only letters, numbers, and +underscores (\_). We suggest using the naming convention +HostnameProjectname. + +b\. Location: enter a location for the project or accept the default, +which is a projects directory outside t the workspace. + +c\. Attach to B2C Commerce Servers: select the server connection to the +instance where you want to upload code. + +Note: Use the controller cartridge. The cartridge is included for legacy +projects that are migrating to controllers. + +5\. Create a tern project, which provides code completion in the editor. +If you do not create the tern project, code completion isn\'t available +when editing scripts with Commerce Cloud APIs in Eclipse. + +Troubleshooting Cartridges + +If you don\'t see a cartridge named myname_storefront_core, it\'s likely +that you created a New B2C Commerce Cartridge instead of a B2C Commerce +Storefront Cartridge. + +Fix: Delete the cartridge, and create the cartridge again. + +If the server connection doesn\'t have two checkmarks next to it. + +Fix: Delete the cartridge, and create the cartridge again. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.5. Studio File System + +When you install and configure UX Studio, you choose the location of the +various files. + +Files Location example Notes + +Executable UX Studio files c:\\studio\\Studio (default) Microsoft +Windows only. + +Workspace c:\\projects\\workspace + +Should be different from executable file location. + +Server and property files are stored in Workspace folders. These files +change infrequently and are usually specific to the local Studio +environment. + +Consists of projects, files and directories + +Can contain multiple projects from multiple repositories + +Files are created as standard files, which allows use of tools/editors + +Contains .metadata (plug-in subdirectories) + +Server files c:\\projects\\CommerceCloudServer + +CAUTION: + +Cannot be the same as the Workspace location, or unexpected results will +occur. + +You can create multiple server connection cartridges within your Studio +workspace. + +Contains .settings and .project files. + +Warning: Don\'t modify server files, or unexpected results will occur. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::: + +::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=0... +9/158 + +Files Location example Notes + +Project-specific files, including new cartridges, pipelines and +templates + +c:\\projects\\MyStore Use separate (project) folders to store cartridges +and other files that change frequently. These files should also be under +source control. + +Can be opened, closed, built or shared + +Can consist of one or more cartridges + +Each cartridge contains directories for forms, pipelines, scripts, +static files, templates, webreferences files and a +\.properties file, which enables the system to load and +run the cartridge. + +You can store cartridges in one or more local directories. + +You can rename cartridges + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.6. Configuring Automatic Updates for Studio + +You can configure Studio to automatically update to a new version if one +becomes available. + +Note: Studio automatically checks for updates to the Salesforce B2C +Commerce API for your server and downloads them. No configuration is +necessary for the automatic download to occur. If you are not +downloading updates, there might be some problem with your connection to +your B2C Commerce server. + +1\. On Windows, select Window \> Preferences. + +2\. On a Mac, select Eclipse \> Preferences. + +3\. Expand Install/Update. + +4\. Select Automatic Updates. + +5\. Select the Automatically find new updates and notify me box. + +6\. Configure the Update schedule, Download options, and When updates +are found options. + +7\. To see the changes in Studio you must close the perspective and +reopen it. + +a\. Right-click the blue cloud icon in the upper right corner of +Eclipse: + +b\. From the popup menu, select Close. + +c\. From the main menu, select Window \> Perspective \> Open Perspective +\> Other. + +d\. In the popup window, select B2C Commerce Development. + +Note: You must close the perspective as described in order to see the +changes. Opening and closing Eclipse, switching workspaces, or switching +perspectives will not work. Unless you close the perspective as +described, you don\'t see changes from the update in the interface. This +might include new types of files to create or new options for your +server connection. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.7. Studio Perspectives + +The Salesforce B2C Commerce Development perspective defines a selection +of views and their layout within the UX Studio window. While creating a +storefront, you will work primarily in this perspective. However, +several perspectives are available. + +To change the perspective + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::: + +::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +10/158 + +1\. Click Window \> Perspective \> Open Perspective \> Other. + +2\. Select a different perspective. + +B2C Commerce Development Perspective + +The B2C Commerce Development perspective is initially configured with: + +View Use for\... + +Cartridge Explorer Navigating cartridge contents. + +Editor area Editing pipelines, scripts and templates. + +Outline Viewing and navigating pipeline outlines as well as scripts and +templates. + +In the case of a pipeline, it shows the entire pipeline, which is useful +for navigating large pipelines. + +Properties Viewing and editing the properties of the currently selected +object. + +Problems Viewing errors and linking to them in the source. + +Console Viewing processing steps. + +The Commerce Cloud Development perspective also includes the following +views: + +View Use for\... + +Navigator Exploring project file structures. All projects in your +workspace are presented here. + +Pipelets Providing an alphabetical list of all pipelets, based on filter +settings. Click a column to sort by that field. + +Pipelines Providing an alphabetical list of all pipelines, based on +filter settings. Click a column to sort by that field. + +Scripts Providing an alphabetical list of all scripts, based on filter +settings. Click a column to sort by that field. + +Templates Providing an alphabetical list of all templates, based on +filter settings. Click a column to sort by that field. + +The Search filter is accessible via the popup menu icon (arrow) in the +corner of each view. With this filter, you can find specific items by +character, string or string end. You can also search by name, group, +type, path or cartridge, depending on the item. + +Search Dialog Box + +Click the Search \> File menu, then click the B2C Commerce Cartridge +Search tab to perform a more detailed search. +::: + +:::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +11/158 + +For this dialog box, you can: + +Search using an expression. + +Search by property or element. + +Search all or selected cartridges. + +Create a working set, within which to search. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.8. Configuring Studio Views + +You can configure views to show elements based on filter settings. Click +the down-arrow in the upper right corner of a view to access these +settings. + +The settings are as follows: + +Setting Description + +Link With Editor The navigational view links to the editing view, which +helps you keep track of what you are working on. The default is +unchecked. + +Show Information Area The Information Area (pane) appears below the +navigational pane. The default is unchecked. + +Show Resource Part A Resources pane appears below the navigational pane, +showing the element\'s path. The default is unchecked. + +Show Column You can select the columns that appear in the navigational +pane. The default is that all of them appear. + +Scope Type You can specify the cartridges you want to view. + +Cartridge - uses the cartridge selected for Cartridge in Scope. + +All Cartridges - all cartridges are searched, including API library +cartridges + +Project Cartridges - only your local project cartridges are searched and +API library cartridges are ignored. + +Cartridge in Scope You can select one of the cartridges that are +available to you, thus helping you focus on a particular area. + +Filters You can specify the following filters: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::: + +::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +12/158 + +Setting Description + +Hide Overridden Elements + +Hide Invisible Elements + +Shortcuts + +You can also use these shortcut icons (not all of these icons appear in +every view): + +Icon Use to . . . + +Refresh selected items + +Show the property of the selected item in the Property view. + +Link the selected object with the Editor area. + +Toggle between showing the information area and hiding it. + +Toggle between showing resources view and hiding it. + +Collapse the navigation tree. + +Show the entire tree, with the current selection highlighted in place. + +Reset the root back to the original root, with that root highlighted. + +Set the current selection as root and shows the tree beneath it. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.8.1. Studio Properties View + +The Properties view is where you can view and set properties for +templates, scripts, pipelines and pipelets. In this area you can also +view the Problems log and Console. + +The following is an example of the Properties view for the List +pipeline. Click in the Value field to enter or select values. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.8.2. Studio Outline View + +The Outline view helps you navigate more quickly to the area you want to +investigate or change. + +Pipelines + +When a pipeline is open in the Editor area, the blue area in the Outline +view represents the portion of the pipeline that appears in the Editor +area. You can drag the blue area to change the view. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::: + +::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +13/158 + +This is an example of a pipeline appearing in its entirety in the +Outline view, with the portion being edited indicated by a blue +rectangle. Use the icons in the Outline view to render the editor +information differently. + +Scripts + +When a script is open in the Editor area, its outline is visible in the +Outline view. Click a function in the Outline view and the appropriate +segment of the script appears in the Editor area, with the specific +function highlighted. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.9. Studio Editor Area + +The Editor area is where you create and modify templates, scripts and +pipelines. + +When you double-click an object in the Cartridge Explorer view, the +object opens in the Editor area. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.9.1. Enabling Code Completion for Controllers + +To allow for syntax checking and code completion for controllers, you +must convert your projects into Tern projects. + +Tern is a third-party plugin that supplies code completion and linting. + +Convert the Cartridge to a Tern Project + +1\. Right-click the cartridge in the Eclipse in the Cartridge sidebar. + +Note: If you don\'t see the Cartridge sidebar, change your perspective +to the Salesforce B2C Commerce Development perspective. + +2\. In the popup menu, select Configure \> Convert to Tern Project. + +Important: Each cartridge in your workspace must be a separate project +in order for it to be converted into a Tern project. + +3\. In the dialog, select the Commerce Cloud module. + +If the dialog doesn\'t appear in the last step, you must make sure that +the B2C Commerce API is associated with the cartridge so that content +assist works in the Eclipse JavaScript editor (JSDT). + +To associate the B2C Commerce API with the cartridge: + +1\. Right-click the cartridge in the Eclipse in the Navigation sidebar. + +2\. In the popup menu, select Properties. + +3\. Expand Tern node and select Modules. + +4\. Select the Commerce Cloud checkbox in the Modules list. + +5\. Click OK. + +Enable Linting Support for Tern + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::: + +:::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +14/158 + +Note: eslint is the standard linter used by B2C Commerce for the +project, but Tern does not support all of the rules used by the project +when the linter is run from the command line, because the version of +eslint included with Tern is different from that used from the command +line. If you intend to contribute to the SiteGenesis project, use the +command line configuration for eslint. + +1\. Right-click the Tern project. + +2\. In the popup menu, select Properties \>Tern \> Validation. + +3\. From the list of linters, select the linter you want to use. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.9.2. Code Completion/Syntax Highlighting + +Salesforce B2C Commerce\'s script file editor provides syntax +highlighting, code completion and code checking. + +This graphic is an example of syntax highlighting and code completion. + +When we entered a variable in a script (in the above example), the +editor provided a list of potential codes to complete the statement. The +editor also highlighted the particular line and marked it with an X, +because it did not conform to syntax standards. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.9.3. Code Checking + +Code checking results appear in the Problems view. Double-click a +problem in this view and the specific problem will appear in the editor. + +For information on code autocomplete, see Using Tern with Studio + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::: + +:::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +15/158 + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.9.4. Enable Content Assist in UX Studio + +UX Studio supports content assist in Eclipse for both the B2C Commerce +Script API and functions in other JavaScript files, such as controller +model scripts. For the Script API, UX Studio converts cartridges to tern +projects by creating a \_.tern-project\_ file in the cartridge root +directory. If you want to use content assist with functions defined in +other script files, you must update the project\'s properties. + +1\. Select Properties from the popup menu. + +2\. Expand the Tern node. + +3\. Click Script Paths. + +4\. Add files, folders, and projects. See +https://github.com/angelozerr/tern.java/wiki/Tern-Eclipse-IDE for more +information on Tern for Eclipse. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.9.5. Form Autocomplete + +The UX Studio plugin provides form autocomplete for Salesforce B2C +Commerce forms. + +To use autocomplete, make sure that you have created a standard xml form +that contains the following: + +\ \
+ +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.9.6. Setting Studio Preferences + +With UX Studio, you can change preferences at any time. + +To specify Studio preferences on Windows, click Window \> Preferences, +then select UX Studio. + +To specify Studio preferences on a Mac, click Window \> Preferences, +then select UX Studio. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::::: + +::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +16/158 + +Window Examples + +Appearance Define the colors of invisible or overridden elements. + +Show pipelet members, show pipeline members, organize members in groups, +show display names instead of resource names. + +Generation Templates Create, edit or remove templates. + +Pipeline Editor Synchronize the outline view selection with the pipeline +editor. + +Automatically layout transitions. + +Enforce join node usage. + +Specify the default zoom level. + +Problem Annotations Detect problems during development. + +Script Editor Specify language background colors, general, JavaScript +and XML styles. + +Server Connection Specify the connection timeout and the directories to +include in the upload. + +In the Preferences page, you can configure the behavior and appearance +of the several editors. To find the preferences, enter the name of the +editor in the search box at the top of the page. + +Editor Examples + +Script Specify visual details such as: + +Displayed tab width (value) + +Undo history size (value) + +Highlight current line + +Show print margin + +Show line numbers + +Appearance color options + +CSS Select the default operating system whose line delimiter you want to +use when creating or saving files: + +UNIX + +Mac + +Windows + +No translation + +Select the default encoding to apply when creating files: + +ISO Latin-1 + +Central/East European (Slavic) + +Southern European + +Arabic, Logical + +Arabic + +Template Select the default operating system whose line delimiter you +want to use when creating or saving files: + +UNIX + +Mac + +Windows + +No translation +::: + +::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +17/158 + +Editor Examples + +Select the default encoding to apply when creating files. + +Select the encoding to apply when loading files (or check the box to +accept workbench encoding). + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.10. Troubleshooting Studio + +We recommend several tasks to troubleshoot problems with UX Studio. + +Update Problems + +If you run an update for Studio, but don\'t see expected changes: + +1\. From the popup menu, select Close. + +2\. From the main menu, select Window \> Perspective \> Open Perspective +\> Other. + +3\. In the popup window, select Salesforce B2C Commerce Development. + +Note: You must close the perspective as described in order to see the +changes. Opening and closing Eclipse, switching workspaces, or switching +perspectives will not work. Unless you close the perspective as +described, you don\'t see changes from the update in the interface. This +might include new types of files to create or new options for your +server connection. + +Editor Problems + +If you experience problems in the editor, such as: + +When pasting text in a file or deleting text (for example, the error +\"Paste did not complete normally. See the log for more information. +Reason: Argument not valid\" appears). + +When entering data into a file, the cursor doesn\'t move but the +characters appear. + +Something might have happened on your local machine that causes these +problems. Run the clean option In Studio. + +DemandwareStudio.exe -clean + +If that doesn\'t help, uninstall and then reinstall Studio. + +Error: Pipelet Descriptions and Behavior Don\'t Match After an Upgrade + +When you upgrade UX Studio to the latest version and download the new +API, if it appears that a mixture of old pipelet descriptions and new +pipelet behavior exist in Studio, run UX Studio with the -clean option +to refresh Studio with the latest pipelets and API calls. + +DemandwareStudio.exe -clean + +Upload Problems + +Auto-Upload automatically Disabled + +When UX Studio receives a build request, it determines if the active +server has the Auto-Upload option enabled. If so, then cartridge files +are uploaded to the server. + +Under certain error conditions, auto-upload is automatically disabled so +that the error messages are not shown repeatedly. For example, if your +server is unreachable, the upload file operation continually shows an +\'unable to connect\' error dialog. + +Studio disables auto-upload under the following conditions: + +studio encounters errors connecting to the server + +your API is out-of-date and you choose not to download the new API, then +we disable auto-upload. If you eventually download the new API, +auto-upload is no longer disabled. + +the upload staging directory doesn\'t exist. + +If Studio detects that auto-upload is disabled when an upload is +started, it shows a message that lets you enable auto-upload. + +Full build after incomplete Build + +When a file is changed, UX Studio receives a build event and attempts to +push the file to the remote Salesforce B2C Commerce server. If Studio +can\'t push the file because of server communication issues, Studio +flags the build as being incomplete. The next time Studio receives a +build event, it performs a full build to ensure that files that were not +previously uploaded are pushed to the server. + +See also Troubleshooting Your Server Connection. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::: + +::::::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +18/158 + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.11. Upload Cartridges + +You can configure a server project to automatically upload cartridges +whenever their code is changed. You can also manually upload cartridges +to the server. A cartridge can be associated with multiple server +projects, and a server project can be associated with multiple +cartridges. + +To configure a server project in Studio to automatically upload +cartridges, right-click it in the Navigator view, and select Digital +Server \> Auto-Upload. To upload cartridges manually, follow these +steps. + +Note: Cartridge and server configurations do not affect manual uploads. +Be careful not to upload a cartridge to the wrong server project. + +Note: The name of the directory that contains the cartridges can have no +more than 50 characters. + +1\. In the Navigator view, right-click the server project and select +Properties. + +2\. In the right pane of the Properties dialog, select Project +References. + +3\. In the left pane, select the cartridges to upload. + +4\. Click OK. + +5\. On the menu bar, click . + +6\. Click Upload cartridges. + +7\. On the Update Server Password dialog, enter the connection settings +and click OK. + +Related concepts + +Code Upload + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.12. Import Cartridges into Your Storefront + +You can import an existing Eclipse project into your workspace. + +This task assumes that the cartridge is an Eclipse project. If it\'s +not, see Add Existing Cartridges to Your Storefront to add the cartridge +to your workspace. + +1\. Click File \> Import. + +2\. Expand General. + +3\. Click Existing project into workspace, and click Next. + +4\. Click Select root directory, and navigate to the location of the +project you want to import. Select the folder that contains the project +files, not the parent folder. For example: +C:\\projects\\CommerceCloudServer\\sources\\cartridges\\mycartridge. + +Note: The folder can only contain one project. + +5\. Click Finish. + +The Salesforce B2C Commerce plugin validates the folder structure of +imported cartridges and displays any problems in the Problems tab. +Right-click a warning and click Quick Fix (if available) to fix the +problem. If Quick Fix isn't available, use the information in the +warning to fix the structural problem manually. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.13. Add Existing Cartridges to Your Storefront + +You can add cartridges provided by Salesforce or Link partners to your +workspace. + +If you want to import an Eclipse project, see Import Cartridges into +Your Storefront. + +1\. Place the cartridge in the folder where you want to access it. By +default, Studio usually creates a +projects\\server_name\\sources\\cartridges folder for B2C Commerce +cartridges. + +2\. In UX Studio, click File \> New \> Cartridge \> . + +The Cartridge dialog opens. + +3\. In the Name field, enter the name of the cartridge. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::::::::: + +::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +19/158 + +4\. For the Location field, browse to the folder containing the +cartridge. For example: +C:\\projects\\CommerceCloudServer\\sources\\cartridges\\mycartridge. + +5\. In the Attach to B2C Commerce Servers field, select the server +connection you want to use with this cartridge. Usually, you select the +server connection for your storefront's Sandbox. + +6\. Click Finish. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.14. Reassign Cartridges from One Server Connection to Another + +You can reassign cartridges between servers as long as they all exist in +the same workspace. + +Remember that you can only connect to one server at a time. + +1\. In Eclipse, open the workspace containing the cartridge, new server +connection, and old server connection. + +2\. Add cartridges to a server by following these steps. + +a\. In the Navigator view, right-click the server connection you want to +add cartridges to and select properties. + +b\. Select the Project References tab. + +c\. Check the cartridges that you want to add and click OK. + +d\. Make sure that the cartridges are uploaded to the server. They +upload automatically if the server connection you add the cartridges to +is your active server. If not, manually upload the cartridges. + +3\. Remove cartridges from a server by following these steps. + +a\. In the Navigator view, right-click the server connection you want to +remove cartridges from and select properties. + +b\. Select the Project References tab. + +c\. Uncheck the cartridges you want to remove and click OK. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.15. Using a Custom Builder + +Starting in 15.1, UX Studio supports custom builders. + +A custom builder enables you to manipulate cartridge files after they +are built but before they are uploaded to the Salesforce B2C Commerce +server. A custom builder calls a runnable object―executable program, Ant +script, or system script file―that is configured as an external tool. A +custom builder can be invoked by UX Studio whenever you build any of +your cartridge files. When the custom builder is invoked, it can process +the cartridge files in a useful way before they are uploaded. + +Custom builders can perform a variety of useful processing tasks, such +as: + +Merging and minifying JavaScript and CSS files + +Executing unit tests + +Linting JavaScript files + +Generating properties files + +Prior to 15.1, UX Studio built cartridge files and uploaded the files +directly to the B2C Commerce server. Starting in 15.1, UX Studio is able +to temporarily place the files into a special build directory, allowing +a custom builder to manipulate the files before UX Studio uploads them. + +How Custom Builders Work + +UX Studio supports two build modes: + +Full: Indicates that a project was fully built. + +Incremental: Indicates that one or more folders or files have changed +(new, modified, deleted, moved). + +Whenever a full or incremental build is started, UX Studio determines if +a custom builder has been configured for the B2C Commerce server. If +so,UX Studio: + +Copies files and folders to the server\'s build directory. + +Creates a manifest of the build changes and puts it in build directory. +This manifest is written to a file named manifest.json. + +Invokes the custom builder with the location of build directory, passing +this location as an environment variable named DW_BUILD_DIR. + +If the custom builder\'s external tools configuration has the +environment variable expression \${env_var:DW_BUILD_DIR} in its +arguments list, UX Studio replaces this expression with the file path of +the build directory. + +Uploads all files from the build directory to the remote server when the +custom builder process completes. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::: + +::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +20/158 + +If the custom builder reports an error, UX Studio cancels the build +operation and reports the error. If the custom builder exceeds the +configured timeout value (120 second default), UX Studio cancels the +build operation and reports the error. UX Studio doesn\'t copy files in +the build area back into the Demandare source cartridges. + +While the custom builder is running, UX Studio redirects all system.out +and system.err messages to the Console view + +Structure of the manifest.json file + +The manifest.json file is a JSON file that contains three key-value +pairs: + +Key Value + +version Version number of the manifest. + +buildDir File path of the build directory. + +resources Array of resources. The structure of the elements in the array +depends on whether the build is full or incremental. + +For incremental builds, each array element consists of two name-value +pairs. The name of the first pair is \"operation\"; and the value is +either \"added,\" \"changed,\" or \"removed.\" The name of the second +pair is either \"file\" or \"folder\"; and the value is the file path of +the file or folder. + +For full builds, each array element consists of a single name-value +pair. The name of the pair is \"full,\" and the value is the name of a +cartridge that was built. + +Here is a sample manifest.json file for an incremental build: + +{ \"version\": \"1.0.0\", \"buildDir\": +\"C:\\\\studio\\\\workspaces\\\\luna\\\\CommerceCloudServer\\\\customBuild\", +\"resources\": \[ { \"operation\": \"changed\", \"file\": +\"\\\\TestFullBuild\\\\cartridge\\\\scripts\\\\account\\\\Utils.ds\" }, +{ \"operation\": \"changed\", \"file\": +\"\\\\TestFullBuild\\\\cartridge\\\\scripts\\\\cart\\\\CartUtils.ds\" } +\] } + +Here is another sample manifest.json file for a full build: + +{ \"version\": \"1.0.0\", \"buildDir\": +\"C:\\\\studio\\\\workspaces\\\\luna\\\\CommerceCloudServer\\\\customBuild\", +\"resources\": \[ { \"full\": \"Storefront\" }, { \"full\": +\"Storefront_richUI\" } \] } + +Configuring a Custom Builder + +To configure a custom builder, you create two different types of +configurations: an external tools configuration, and a custom builder +configuration. The external tools configuration specifies information +about the runnable object you want to execute after a build is performed +but before the files are uploaded to the B2C Commerce server. The custom +builder configuration specifies which external tools configuration to +use as your custom builder. You can create multiple external tools +configurations, but you can only use one at a time as a custom builder. + +To create an external tools configuration, perform the following steps: + +1\. In UX Studio, select Run \> External Tools \> External Tools +Configurations\.... + +2\. In the left-hand pane of the External Tools Configurations window, +double-click Program. + +3\. In the Name field, enter the name you want to give the +configuration. + +4\. In the Location field in the Main tab, enter the pathname to a +runnable object. + +5\. In the Arguments field in the Main tab, optionally enter arguments +you want passed to the runnable object. +::: + +::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +21/158 + +If you specify the variable expression \${env_var:DW_BUILD_DIR} as an +argument, the expression resolves to the file path of the build +directory. + +To create a custom builder configuration, perform the following steps: + +1\. In UX Studio, click on the UX Studio toolbar and select Custom +Builder\.... + +2\. Click the External Tools Configuration drop-down and select an +external tools configuration that you previously created. + +3\. In the Timeout field, enter a timeout in seconds. + +The timeout determines how long your runnable object can execute before +it\'s terminated. The default is 120 seconds. + +Custom Builder Example + +Suppose you are on a windows machine and you want to use a +CustomBuilderTest.bat file as your custom builder\'s runnable object. + +This file contains two lines: + +dir /S %DW_BUILD_DIR% more %DW_BUILD_DIR%\\manifest.json + +When the custom builder is run, this file recursively lists the files in +the server\'s build directory; it also shows the contents of the +manifest.json file. + +The following screenshot shows the relevant external tools +configuration: + +The following screenshot shows the relevant custom builder +configuration: + +With these configurations in place, UX Studio calls the custom builder +whenever you initiate a build action, either full or incremental. + +The console output from a sample execution of the CustomBuilderTest.bat +file is shown below: + +C:\\studio\>dir /S +C:\\studio\\workspaces\\luna\\CommerceCloudServer\\customBuild Volume in +drive C is OS Volume Serial Number is 6E76-A54D + +Directory of +C:\\studio\\workspaces\\luna\\CommerceCloudServer\\customBuild + +01/20/2015 01:05 PM \ . +::: + +::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +22/158 + +01/20/2015 01:05 PM \ .. 01/20/2015 01:05 PM \ +CustomBuilderStorefront 01/20/2015 01:05 PM 195 manifest.json 1 File(s) +195 bytes + +Directory of +C:\\studio\\workspaces\\luna\\CommerceCloudServer\\customBuild\\CustomBuilderStorefront + +01/20/2015 01:05 PM \ . 01/20/2015 01:05 PM \ .. 01/20/2015 +01:05 PM \ cartridge 0 File(s) 0 bytes + +Directory of +C:\\studio\\workspaces\\luna\\CommerceCloudServer\\customBuild\\CustomBuilderStorefront\\cartridge + +01/20/2015 01:05 PM \ . 01/20/2015 01:05 PM \ .. 01/20/2015 +01:05 PM \ scripts 0 File(s) 0 bytes + +Directory of +C:\\studio\\workspaces\\luna\\CommerceCloudServer\\customBuild\\CustomBuilderStorefront\\cartridge\\scripts + +01/20/2015 01:05 PM \ . 01/20/2015 01:05 PM \ .. 01/20/2015 +01:05 PM \ common 0 File(s) 0 bytes + +Directory of +C:\\studio\\workspaces\\luna\\CommerceCloudServer\\customBuild\\CustomBuilderStorefront\\cartridge\\scripts\\common + +01/20/2015 01:05 PM \ . 01/20/2015 01:05 PM \ .. 01/20/2015 +01:04 PM 1,634 libStringUtilsExt.ds 1 File(s) 1,634 bytes + +Total Files Listed: 2 File(s) 1,829 bytes 14 Dir(s) 343,317,491,712 +bytes free + +C:\\studio\>more +C:\\studio\\workspaces\\luna\\CommerceCloudServer\\customBuild\\manifest.json +{ \"version\": \"1.0.0\", \"buildDir\": +\"C:\\\\studio\\\\workspaces\\\\luna\\\\CommerceCloudServer\\\\customBuild\", +\"resources\": \[ { \"operation\": \"changed\", \"file\": +\"cartridge\\\\scripts\\\\common\\\\libStringUtilsExt.ds\" } \] } + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.16. Code Deployment + +When you have finished development in your sandbox, you use UX Studio to +upload your code to the sandbox instance. + +To transfer your code to a Staging instance, you create a new server +connection and upload your code to the staging instance. Your staging +server connection should be a secure connection. + +You can deploy code from UX Studio directly to your Sandbox instance, +via your server connection. + +To manually upload a cartridge: + +1\. On the Studio toolbar, click B2C Commerce Server and select a +connection, and then select Upload Cartridges. + +See Configuring Your B2C Commerce Server Connection and Troubleshooting +Your Server Connection for information on configuring auto upload. For +best practice information on code deployment, see General Deployment and +Replication Details. + +Code Versions and the Active Version + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::: + +:::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +23/158 + +B2C Commerce lets you have multiple custom code versions uploaded to the +system at the same time. The code is arranged in a top-level directory, +called Version Directories. You can name each directory in accordance +with your versions, for example, v12 or summer_release. + +When developing your storefront, you select one active code version with +which to work. Select Administration \> Site Development \> Code +Deployment. Select a version directory as the active version for a site. +All templates, pipelines, scripts and images are taken from this active +version. Studio also connects to this version. + +B2C Commerce automatically and asynchronously removes the oldest code +versions on all instance types. The active code version and the +previously active code version are not included in this process. You can +configure the number of retained code version. + +You can rollback your storefront to a previous version if necessary; and +develop your application with a newer version while maintaining an +active storefront on a stable code base. + +B2C Commerce no longer lets you upload code using a .zip file containing +a distinct code version. Instead, you must upload your cartridge. Most +development teams have a regular method for uploading code to staging. + +1\. In Studio, right-click your B2C Commerce Server and select B2C +Commerce Server \> Change Upload Staging Directory. + +The Change Upload Staging Directory dialog box appears. + +2\. In the Target version directory list, select the active version. + +Note: The active version is shown under the list box. + +Troubleshooting Tip for Code Versioning + +If you get the following error when you try to view the storefront, +check that you are uploading your cartridge to the current code version. + +Technical Page There were technical problems while the request was being +processed! Executed Request: Default Technical Details: System template +default used directly or indirectly in custom site + +However, you can also upload a cartridge to the correct version in +Studio, usually to your Sandbox. + +CAUTION: + +Plan to test a new code version first on a Staging instance before +moving it to the Production instance. + +Code Uploads to an Active/Inactive Version + +Best practice is to upload code into an inactive version on a Staging +instance and subsequently replicate the code to a Development or +Production instance. + +Code uploads into an active version are only allowed on Staging, +Development, and Sandbox instances. Production instances reject WebDAV +based code uploads that occur directly into the currently active +version. Code uploads onto a Production instance can only be to an +inactive version. + +Code Compatibility Mode + +You can also specify the active compatibility mode (API version). B2C +Commerce lets you activate a new compatibility mode or revert to the +previously active compatibility mode. + +You can replicate code to another system. Code Replication transports +the active code version from the staging instance to the target +production or development instance. + +Note: The term Compatibility Mode is interchangeable with the term API +Version. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +1.17. Creating a New Template + +You can use UX Studio to create a template. + +To create a new template + +1\. Open UX Studio. + +2\. Click File \> New \> ISML template. + +3\. The dialog box appears. + +4\. Select the cartridge for which you want to create a template. + +5\. Click Next. + +6\. Enter the template name (for example, MyWebFront.isml). CAUTION: + +Template and folder names can\'t contain spaces. + +7\. Select or specify a parent folder. + +8\. Click Finish. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::: + +:::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +24/158 + +An empty editor window appears. (You can set preferences for template +generation.) + +9\. Add basic HTML tags (for example, \, \, \ and +\). + +10\. Add text within the \ tags. + +11\. Include ISML tags. + +12\. Assign your template to the right pipeline. + +13\. Test the results in the Salesforce B2C Commerce storefront. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +2\. Site Genesis + +SiteGenesis JavaScript Controllers (SGJC) is a demonstration ecommerce +reference application that enables you to explore Salesforce B2C +Commerce and its capabilities. You can use it as the basis of your own +custom site, although SFRA is recommended for new projects. + +Features specific to SGJC can be unfamiliar if storefront is based on an +earlier version of SiteGenesis. Most of the features described here +focus on reusability of code and can be useful when migrating your +storefront code. . + +SiteGenesis uses the following features: + +CommonJS Modules and Require + +ImportPackage vs. Require + +Hooks + +Hook Definition + +Running Multiple Hooks for an Extension + +Error Logging + +CommonJS Modules and Require + +CommonJS modules let you create scripts with reusable functionality. A +module is a .ds or .js file. You can place a module either in a +cartridge's script folder or in a modules folder that is at the same +level as other cartridges. You can access modules that are in your +cartridge, in other cartridges, and in the modules folder. + +The modules folder is a peer of cartridge folders. Salesforce recommends +using it for globally shared modules, such as third-party modules. + ++\-- modules +\-- mymodule1.js + ++\-- My_Cartridge_1 +\-- cartridge +\-- scripts + ++\-- mymodule2.js +\-- My_Cartridge_2 +\-- cartridge +\-- scripts + ++\-- mymodule3.js + +Accessing Modules + +Salesforce B2C Commerce supports CommonJS paths to access modules and +relative paths. + +Use the following syntax: + +\~ - the current cartridge name. Example: require +(\'\~/cartridge/scripts/guard\') + +. - same folder (as with CommonJS). Example: require(\'./shipping\'); + +.. - parent folder (as with CommonJS). Example: require(\'../../util\') + +ImportPackage vs. Require + +In previous versions of SiteGenesis, the ImportPackage statement was +always used to import B2C Commerce packages into your scripts. + +You can also use require to import B2C Commerce script packages. For +example: require('dw/system/Transaction') + +Salesforce recommends using the require method to import B2C Commerce +script packages, or other JavaScript or B2C Commerce script modules +instead of ImportPackage. + +Important: + +Using the require() function to load a module has an impact on +performance. To handle a request, a controller is loaded and then +executed on a global level, just as exported methods are executed. When +the controller module is initialized, the actual controller function is +invoked. + +If the dependencies to other modules are initialized on a global level, +many modules can be loaded unnecessarily. If possible, place require() +statements in the most limited scope that is appropriate (for example, +as local variables within a function body). If your require() statements +are placed at a global level, they are loaded for every request. For +example, require() statements at the top of a controller file are loaded +with each request. Globally required modules are loaded even if they are +not needed in the current execution context. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::::: + +::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +25/158 + +If all modules execute their require() statements globally, all modules +are loaded for every request. This overhead can significantly degrade +performance, depending on the number of modules. We suggest, instead, +that you move the require() calls for non-API modules into the function +bodies so that they are resolved only when necessary. A require() isn\'t +an import; it\'s a real function call. An import in Java, in contrast, +is only a compiler directive and has no effect at run time. + +Hooks + +Hooks configure a piece of functionality to be called at a specific +point in your application flow or at a specific event. + +There are three types of hooks you can use with SiteGenesis: + +OCAPI hooks -- B2C Commerce provides extension points that let you +automatically call scripts before or after specific OCAPI calls. + +B2C Commerce hooks -- B2C Commerce provides onSession and onRequest +hooks to replace onSession and onRequest pipelines. It also provides +hooks for Apple Pay on the web. + +Custom hooks -- you can define custom extension points and call them in +your storefront code using the B2C Commerce script System package +HookMgr class methods. + +Hook Definition + +The package.json file points to the hook file for a cartridge, using the +hooks keyword. + +Example: package.json + +{ \"hooks\": \"./cartridge/scripts/hooks.json\" } + +The hook file defines a uniquely named extension point and a script to +run. Hook scripts must be implemented as CommonJS modules. Therefore, +the script identifier is a module identifier and can be a relative path +or any other valid module identifier. + +Example: hook.json + +{ \"hooks\": \[ + +{ \"name\": \"dw.ocapi.shop.basket.calculate\", \"script\": +\"./cart/calculate.js\" + +}, { + +\"name\": \"dw.system.request.onSession\", \"script\": +\"./request/OnSession\" }, { + +\"name\": \"app.payment.processor.default\", \"script\": +\"./payment/processor/default\" + +} \] + +} + +This example shows an OCAPI hook, a controller hook, and a custom hook. +The OCAPI hook runs a script to calculate the cart. The controller hook +calls the OnSession.js script in the scripts/request directory. You can +call the custom hook by using the HookMgr class's callHook method. + +Example: calling a custom hook + +return dw.system.HookMgr.callHook(\'app.payment.processor.default\', +\'Handle\', { Basket : cart }); + +Running Multiple Hooks for an Extension Point + +It\'s possible to register multiple scripts to call for an extension +point. However, you can\'t control the order in which the scripts are +called. Also, if you call multiple scripts, only the last hook called +returns a value. + +At run time, B2C Commerce runs all hooks registered for an extension +point in all cartridges in your cartridge path. It runs them in the +order of the cartridges on the path. + +Note: Hooks are called in the order of the cartridges on the path. +Therefore, if you change the order of the cartridges, you also change +the order in which hooks are called. + +Error Logging + +Controller and script logging is available in the: + +Custom error log -- this log contains the hierarchy of controller and +script functions and line numbers related to exceptions thrown. This log +is intended for use by developers to debug their code. + +System error log -- this log is primarily useful for Commerce Cloud +Support. + +Example: Custom error log +::: + +:::::::::::::::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +26/158 + +Error while executing script +\'test_cartridge_treatascustom/cartridge/controllers/TestController.js\': +Wrapped com.demandware.beehive.core. at +test_cartridge_treatascustom/cartridge/controllers/TestController.js:21 +(isml) at +test_cartridge_treatascustom/cartridge/controllers/TestController.js:52 +(anonymous) + +Back to top. + +Getting Started with SGJC + +For developers, Site Genesis provides sample code---pipelines, scripts, +and ISML templates. For merchants, it offers sample configurations for +catalogs, categories, and products. + +SiteGenesis Modules and Hooks + +SiteGenesis and CSS + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +2.1. Getting Started with SGJC + +For developers, Site Genesis provides sample code---pipelines, scripts, +and ISML templates. For merchants, it offers sample configurations for +catalogs, categories, and products. + +SGJC Reference Application + +The demo instance is available with every realm. Open a browser and +enter the URL for your sandbox, replacing the sub-domain name. + +demo.web.yourcompanyname.brand.com + +Important: Don\'t store important data on the demo site. The demo +sandbox is reinitialized with each release, which erases any data stored +on the instance. Therefore, don\'t use the demo site for development. + +You can get the SiteGenesis code in two ways. + +Download the cartridge from Business Manager on your demo instance. + +In Eclipse, use the Digital plug-in to create a new storefront +cartridge. + +You can use the code as the starting point for your own storefront and +upload it to your Sandbox instance for customization or development. + +CAUTION: + +Never import SiteGenesis into an instance in your PIG, but you can +import SiteGenesis into each instance in your SIG. However, if you +import SiteGenesis into a sandbox that contains other customized sites, +you could overwrite existing attributes and lose data. It is safe to +import SiteGenesis into an empty sandbox. If you also want to import +custom sites into the empty sandbox, import SiteGenesis first to retain +you custom sites\' attributes for your custom sites are retained if +there are conflicts, as your custom attributes will overwrite the +imported SiteGenesis custom attributes. If there are conflicts between +your attributes and SiteGenesis, your custom attributes overwrite the +imported Site Genesis custom attributes. If this occurs, The Site +Genesis site might not function properly, but your customer data is kept +intact. After importing SiteGenesis, you can validate its behavior by +comparing it to the site running on the dedicated instance. + +Site Genesis Learning Path Resources A collection of structured +resources to get you on your way with Site Genesis. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +2.1.1. Site Genesis Learning Path Resources + +A collection of structured resources to get you on your way with Site +Genesis. + +Comparing SG vs SFRA (and migration options) + +Javascript Controllers Quick Guide + +Modules 1 & 2 - Sandbox Setup and UX Studio Installation + +Module 3 - Cartridges + +Module 4 - Javascript Controllers + +Module 5 - ISML (Part 1) + +Module 5 - ISML (Part 2) + +Module 6 - Content Slots + +Module 7 - Scripts + +Module 8 - Forms Framework + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::::::::::::::::: + +::::::::::::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +27/158 + +Module 9 - Custom Objects + +Module 10 - Data Binding & Explicit Transactions + +Student Guide (circa 2017) + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +2.2. SGJC Setup + +SiteGenesis is a full-featured demonstration ecommerce site to explore +Salesforce B2C Commerce and its capabilities. You can use it as the +basis of your own custom site. For developers, it provides sample +code---pipelines, scripts, and ISML templates. For merchants, it offers +sample configurations for catalogs, categories, products, and so on. + +Topic information: + +Download SiteGenesis + +Set Up Your Local Machine + +Import SiteGenesis Data into an Instance + +Build SiteGenesis + +Automated Testing + +Build JSDoc and the Styleguide + +Customize Your Application + +Build and Testing Tools + +If you are creating a storefront project, choose whether you want to +base the project on controllers or pipelines. If you include both +options, the controller cartridge is used. + +In these examples, demo is the name you gave your storefront cartridge +when you created it. + +demo.web.yourcompany.demandware.net + +Do not store important data on the demo site. The demo sandbox is +reinitialized with each release, which erases any data stored on the +instance. Therefore, do not use the demo site for development. + +You can also create SiteGenesis storefront cartridges in Eclipse, after +you install the B2C Commerce plug-in. + +Download SiteGenesis + +You can download the source code from GitHub at the Salesforce Commerce +Cloud repository for Site Genesis. + +Note: If you are updating an existing version of SiteGenesis and want to +check the version you have, you can check this in the package.json file. + +Set Up Your Local Machine + +These instructions assume you are using the MacOS and a bash shell. + +1\. Expand the downloaded .zip files. + +2\. From a command-line prompt, navigate to the +demandware-sitegenesis-community directory. + +3\. Download and install Node.js, if it is not already installed. You +can test whether the node is installed by entering: + +node -v + +If node is already installed, this command returns a version number. + +Note: B2C Commerce only uses Node.js for npm dependency management. + +4\. Use npm to install the modules included with SiteGenesis. + +npm install + +Important: Run this command any time you download a new version of +SiteGenesis, because the dependencies included with the application +might have changed. + +5\. Install one of the following build systems (not both) that watches, +processes, and concats SASS code. + +Gulp + +npm install -g gulp + +Grunt + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::::::::::::::: + +:::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +28/158 + +npm install -g grunt-cli + +Upload Code from Your Local Machine to a B2C Commerce Instance + +You upload code via a B2C Commerce plug-in to Eclipse. + +Note: As of Release 16.1, you must explicitly list the cartridges you +want to use. If you are using your demo instance to test your +cartridges, We recommend removing the SiteGenesis cartridges that are +added to the cartridge path for demo instances. Don\'t use demo +instances for development. + +Import SiteGenesis Data into an Instance + +To view products in a SiteGenesis storefront site, you must import the +standard SiteGenesis data. The standard data includes product +information and images. + +If you import the SiteGenesis code without importing the data, a broken +footer appears. If you are using SiteGenesis in the same sandbox as your +custom site, we recommend exporting your current site, importing the +site data from the demo_data_no_hires_images directory and then +importing your site again. + +Never import SiteGenesis into an instance in your PIG, but you can +import SiteGenesis into each instance in your SIG. However, if you +import SiteGenesis into a sandbox that contains other customized sites, +you could overwrite existing attributes and lose data. + +It is safe to import SiteGenesis into an empty sandbox. If you also want +to import custom sites into the empty sandbox, import SiteGenesis first +to retain you custom sites\' attributes for your custom sites are +retained if there are conflicts, as your custom attributes will +overwrite the imported SiteGenesis custom attributes. + +If there are conflicts between your attributes and SiteGenesis, your +custom attributes overwrite the imported Site Genesis custom attributes. +If this occurs, The Site Genesis site might not function properly, but +your customer data is kept intact. After importing SiteGenesis, you can +validate its behavior by comparing it to the site running on the +dedicated instance. + +Import High-Resolution Data + +The standard SiteGenesis import data contains low-resolution images, a +catalog, and other data. If you want to view and work with +high-resolution data, you can import it from the SiteGenesis site. + +1\. Download the high-resolution images from the SiteGenesis space. + +2\. Upload and import the standard import data. Because the hi-res data +does not include most catalog and product data, you must import the +basic data first to have all the data required for the site. + +3\. Upload and import the hi-res images. + +After importing SiteGenesis, you can validate its behavior by comparing +it to the site running on the latest version of SiteGenesis, available +on GitHub. + +Note: Because SiteGenesis is on a different release schedule than B2C +Commerce, it is possible that the application you download might be more +advanced than the version of the application available on the demo +instance, which always tracks to the latest B2C Commerce release. + +Configure SiteGenesis + +You can switch some SiteGenesis features on or off in Business Manager. + +To use SiteGenesis, you must have cookies enabled in your browser. + +If you do not have cookies enabled, you might see entries similar to the +following in the error logs. + +ERROR PipelineCallServlet\|\"TypeError: Cannot read property +\"calloutMsg\" from null +(\[Template:slots/category/TrendingNow:\${slotcontent.cal System +Information + +Build SiteGenesis + +The JavaScript and CSS used in SiteGenesis is modularized. You can +compile it into a single app.js and style.css to optimize performance +and prevent namespace collisions. If you don\'t compile the appropriate +files using the build, the storefront does not appear the same, because +it does not use JavaScript: + +Before Build After Build + +Detect File Changes During the Build Process + +You can use the SiteGenesis build tools to detect changes to files. The +SiteGenesis build compiles all the .css files into the style.css file, +and the client-side JavaScript files into the app.js file. Client-side +JavaScript files are in the cartridge scripts/js directory. + +To watch files and build if there are changes: + +::: annotation + +::: +:::: + +:::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +29/158 + +1\. Open a command-line terminal and navigate to the top level in your +SiteGenesis download. + +2\. Enter the following command: + +grunt watch + +This command runs the default task in the background and watches for +changes in \*.scss or \*.js files. If changes are detected, the task +recompiles the style.css and app.js files. Don\'t close the tab or enter +other commands in the terminal if you want the build to continue to +watch. + +Note: + +When you use watching to build, Watchify is used instead of browserify +for faster bundling by taking advantage of caching. This shouldn\'t +result in any differences in the resulting compiled files. + +Note: To upload the compiled files to your sandbox, you must have Studio +open with the style.css and app.js files open. + +Build Manually + +This section describes all commands in grunt, but similar commands can +also be run in gulp. + +To run any build command, open a terminal and navigate to the top +directory of the SiteGenesis repo. This is the parent directory for the +app_storefront_controllers folder. + +To perform all compilation tasks for SiteGenesis: + +1\. Open a command-line terminal, and navigate to the top level in your +SiteGenesis download. + +2\. Enter the following command. You can also use gulp. + +grunt build + +Summary of build commands + +Command Description + +grunt Runs grunt in watch mode, compiling changed \*.scss files into +style.css and \*.js files into app.js as needed. + +grunt css Compiles the .scss code into the style.css file and runs +Auto-Prefix to set vendor prefixes. This task is also run automatically +on any .scss file change by using the gulp watch task. + +grunt js Compiles the client-side JavaScript files into the app.js file. + +The JavaScript modules rely on Browserify to compile JavaScript code +written using the CommonJS modules standard. + +The entry point for browserify is app_storefront/cartridge/js/app.js, +and the bundled JavaScript is output to +app_storefront/cartridge/static/default/js/app.js. + +grunt jshints Runs JSHint on all \*.js files. + +grunt jscs Runs jscs on all \*.js files. + +JSHint detects errors and potential problems in your JavaScript code. +This runs jshint on every.js file and creates a report of any problems +it finds. The SiteGenesis team uses this on every commit to check out +JavasScript code and we encourage its use by all of our customers and +partners. + +grunt \--sourcemaps Creates the source maps for the \*.scss and \*.js +files. + +You can create mappings between app.js and source files that, when +uploaded, let you set JavaScript breakpoints directly in the source +files (such as pages/account.js) rather than only in the huge app.js +file. You set breakpoints in your browser (Chrome, Safari, or Firefox. + +Using sourcemaps, you can quickly identify the source JavaScript file +the code you are inspecting refers to and debug issues more easily. +Likewise, source files for \*.scss files are identified when inspecting +elements so that you can quickly identify and modify the relevant +\*.scss file while editing the pages in your browser. + +SiteGenesis only supports external sourcemaps because Eclipse tends to +crash with inline sourcemaps. As a result, if you use Grunt, sourcemaps +are only available when the build steps are run explicitly and a type is +specified. + +For example: grunt js \--sourcemaps. + +Note: + +Sourcemaps are not enabled if you are using watching to build. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::: + +:::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +30/158 + +Command Description + +grunt test:unit Runs all the unit tests in the test/unit directory. + +grunt test:application Runs all the application tests in the +test/application directory. + +grunt test:application + +\--suite checkout + +Runs all the tests in the test/application/checkout directory. + +grunt doc Generates the client-side and server-side documentation and +style guide and serves all resources over a static server at port 5000. + +The style guide demonstrates all styles used by your project. + +To access the generated doc, use http://localhost:5000/ + +See Build and Testing Tools and consult the README files in the +app_storefront_core/cartridge/scss directory and the +app_storefront/cartridge/js directory. + +Automated Testing + +SiteGenesis has a series of application tests and unit tests that are +run from the command line using either grunt or gulp. Application tests +are used for specific test cases, and unit tests exercise specific areas +of functionality. These tests are enhanced and changed with each release +to reflect the features in the application. + +The SiteGenesis automated testing strategy is built on a set of tools +that include: + +Selenium and phantomjs - Selenium server is used for unit tests. +phantomjs is an option for running tests. However, we do not guarantee +that all tests will pass if using phantomjs, because phantomjs is used +primarily for headless testing, and some tests require the site user +interface to run correctly. + +Webdriver for multiple browser and headless testing. + +Mocha is a JavaScript test framework. + +Tests are written in JavaScript and executed via grunt and gulp on the +command line of a terminal window. + +Directory Structure for Testing + +The test directory contains all the files needed to configure and +execute these tests. + +test ├── README.md ├── application │ ├── homepage │ │ └── general.js │ +├── productDetails │ │ └── index.js │ └── webdriver │ ├── client.js │ +├── config.json │ └── config.sample.json └── unit └── util └── index.js + +Installing and Configuring the Tests + +1\. Install all dependencies. + +\% npm install + +2\. Install phantomjs and the standalone Selenium driver. + +\% npm install -g phantomjs % npm install \--production -g +selenium-standalone@latest % selenium-standalone install + +Run the Tests + +After installing the dependencies, start the Selenium server each time +you want to run the tests. + +\% selenium-standalone start + +It\'s important to keep this command-line instance running in the +background. Do not enter other commands or close the terminal. + +Unit Tests + +::: annotation + +::: +:::: + +:::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +31/158 + +Run this command to test JavaScript methods without accessing a server. +It uses mock data to simulate server responses, which means that the +tests execute quickly. They do not need a browser in which to run. + +\% grunt test:unit + +Application Tests + +The application tests require a browser (either a real one or a, +headless browser that represents a site in memory, but does not render +the user interface). They also contact the server and compare the HTML +generated by a server with the expected responses in the tests. + +To run all the application tests: + +\% grunt test:application + +To run just the tests contained in a single subdirectory suite use: + +\% grunt test:application \--suite checkout + +Build the Jsdoc and Styleguide + +To build a representation of the styles compiled in the style.css: + +1\. Open a terminal and navigate to the top directory of your +repository. + +2\. Enter: + +grunt doc + +This starts a server that is used to host the documentation. Don\'t +close the terminal or enter other commands. + +3\. In your browser, navigate to: http://localhost:5000/. + +Development Settings in Business Manager + +Caching + +You might want to turn off caching for the site you are working on +during development. If you are working with SiteGenesis, to disable +caching. See also Disabling Page Caching for Development. + +Site URLs + +You might want to use the standard B2C Commerce URL syntax in the early +phases of development. + +1\. Select site \> Merchant Tools \> Site Preferences \> Storefront URL. + +2\. On the Storefront URL Preferences page, make sure the Enable +Storefront URLs option is not selected. + +This lets you enter a URL such as +https://localhost/on/demandware.store/Sites-SiteGenesis-Site/default/Hello-World +directly in your browser to test new controllers or pipelines. + +Customizing SiteGenesis Features + +When using SiteGenesis as the basis of your storefront application, you +might want to take advantage of existing or new features that might not +be automatically included in the storefront. These features, typically +configured as custom preferences, include slide show effects, responsive +design, and multi-shipping. See Configuring Storefront Preferences. + +Country, Locale, and Multicurrency + +Analytics Reporting + +Inventory + +Active Data + +Product Reviews + +See the SiteGenesis wireframes for application details. + +See SiteGenesis and CSS for details on customizing the look and feel of +your storefront. + +Build and Testing Tools + +The following tools can be automatically installed using npm, a feature +of node. js. + +Tool / technology + +Description + +Gulp The gulp.js build system used to watch, process, and concatenate +SASS code. + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::::: + +:::::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +32/158 + +Tool / technology + +Description + +Grunt Also a build system, similar to gulp. Parallel SiteGenesis build +tasks exist in both gulp and Grunt. + +SCSS SCSS (Sassy CSS) is a syntax used for Sass (Syntactically Awesome +StyleSheets), a CSS extension. + +Autoprefixer Compiles and processes SASS files into CSS files. + +Jscs Used for code linting and style checking. + +Use JSCS to programmatically enforce your programming style guide. This +runs jscs on every client-side JavaScript file and creates a report of +any problems it finds. The SiteGenesis team uses this on every commit to +check out JavaScript code and we encourage its use by all of our +customers and partners. + +Browserify Compiles JavaScript code written in CommonJS standard. +Assuming a modular JavaScript architecture. + +Selenium Used for web browser automation. + +Webdriver Used for multiple-browser testing. + +Mocha Used for the test framework. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +2.3. SiteGenesis JavaScript Controller (SGJC) Model-View-Controller +Development Model + +SiteGenesis uses the Model-View-Controller (MVC) development model to +isolate changes and reuse functionality in the application. + +Components + +In traditional MVC application design, the model implements +functionality for specific problem domains, independent of the user +interface. The model directly manages the data, logic, and rules of the +application. A view can be any output representation of information, +such as a page, dialog, or message. The third part, the controller, +accepts input and converts it to commands for the model or view. + +Controllers + +Controllers are the backbone of Salesforce B2C Commerce application +development. Controllers define the URL endpoints and process URL +parameters or forms and then delegate to models. Controllers send +commands to the model to update the model\'s state, such as editing a +document. It can also send commands to its associated view to change the +view\'s presentation of the model, such as scrolling through a document. + +Models + +In traditional MVC, models store the data that is used to populate the +view. For applications running on B2C Commerce, you can use the B2C +Commerce Script API to access data. For this reason, B2C Commerce +application models do not store system data, but instead provide helper +classes. + +Most models have the AbstractModel class as a super class. The super +class: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +:::::::::::::: + +::::::::::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +33/158 + +Provides methods for inheritance. + +Provides getValue() and setValue() methods to safely access custom +attributes. + +Wraps a system object as the .object member of the ProductModel. + +For example, consider a ProductModel instance that wraps a +dw.catalog.Product object and provides methods to get the bread crumbs +or the title of the product detail page. The dw.catalog.Product object +can be accessed as ProductModel.object, because it is the object that +ProductModel wraps. Similarly, the CartModel wraps a Basket object, and +the Basket can be accessed as CartModel.object. + +Templates use the model rather than containing the logic, making it +easier to change behavior across templates. Also, when you call a method +on the model instance that the model does not define, it calls the +method of the wrapped instance. This pattern lets you \"overload\" +Commerce Cloud API methods at the model level if needed. + +Views + +Views get information necessary to render templates. The View.js module +adds keys to an object, which are then available in the template via the +pdict variable. The View.js module also renders a given template. While +views are mostly used to pass information to a template, they can become +a powerful tool in project implementations. You can also add your own +manager classes to the view if necessary. + +In addition to the View.js module, there are a few view scripts with +extra helper methods for rendering templates with complex objects, such +as the cart. These scripts contain helper methods that are secure, +tested, and tested for performance and error handling. + +© Copyright 2000-2023, Salesforce, Inc. All rights reserved. Various +trademarks held by their respective owners. Show URL Submit Feedback +Privacy Policy + +2.4. SiteGenesis JavaScript Controllers (SGJC) Standards Compliance + +This topic covers the following standards and supported browser +versions. + +Cookies Notification/Opt-in for European Cookie Law + +Browsers + +CSS Input Field Types + +SiteGenesis and Web Content Accessibility Guidelines (WCAG) + +Consent Tracking in SGJC + +Downloading a Shopper\'s Personal Information in SGJC + +Cookies Notification/Opt-in for European Cookie Law + +European Cookie Law requires websites to notify customers that cookies +are being used and how. The SiteGenesis application uses an optional +content asset, called cookie_hint, to contain this notice. + +If this asset is\... Then\... + +Missing or offline No notice is given. The cookies are set as they +always have been. This approach is used in the USA, for example. + +Present and online\* The cookie_hint content appears. Clicking I ACCEPT +sets the cookies and causes the popup to not appear again. + +Note: \* If customers want a more relaxed interpretation of the Cookie +Law, the can add a Close button. We exclude the Privacy page so that it +can be read without seeing the notification. + +Browsers + +SGJC officially supports the following browsers, and one version +earlier. + +Desktop + +Chrome 53+ + +Firefox 49+ (including the latest Extended Support Release (ESR) that +is, 45) + +Microsoft Edge 38+ + +Microsoft Internet Explorer 11 + +Safari 10+ + +Mobile + +iOS 10+: Chrome (most recent) + +Safari (most recent) + +See Business Manager User Interface. + +Supported Browsers Desktop (supporting the latest browser version): + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: + +::: annotation + +::: +::::::::::::: + +::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +34/158 + +Commerce Cloud Store supports the latest version of the browsers listed +above, as well as one version earlier. Refer to documentation for more +details. The plus(+) sign signifies support of both major and minor +browser releases following the listed browser version. End of Support +for Opera As of January 1, 2017, Commerce Cloud will no longer support +Opera due to infrequent client use. We continue to evaluate browser +usage throughout 2018, and if we see changes with browser adoption, we +consider supporting it. Implications of These Changes To ensure optimal +performance, we encourage all clients to upgrade to a supported browser +prior to January 1, 2017. Commerce Cloud continues to test and fix bugs +in all supported browsers. Customers are welcome to use any browser they +want, but there can be noticeable performance issues with unsupported +browsers. If you encounter any issues with a supported browser, open a +ticket with Commerce Cloud Support. + +CSS Input Field Types + +The SiteGenesis application supports HTML5 input field types: + +color + +date + +datetime + +datetime-local + +email + +month + +number + +range + +search + +tel + +time + +url + +week + +Note: Not all of these types are relevant for the SiteGenesis +application. + +For more information, see +http://www.w3schools.com/html/html5_form_input_types.asp. + +SiteGenesis and Web Content Accessibility Guidelines (WCAG) + +The Web Content Accessibility Guidelines (WCAG) provide a single shared +standard for web content accessibility that meets the needs of +individuals, organizations, and governments internationally. WCAG +documents explain how to make web content more accessible to people with +disabilities. See http://www.w3.org/WAI/intro/wcag. + +Note: Salesforce B2C Commerce does not guarantee or certify compliance +of SiteGenesis with any WCAG level. + +The SGJC application was changed to better conform to the WCAG +guidelines. The list of changes shown here is intended to provide +examples of how you can make your storefront application more +accessible: + +Added context in the titles of category refinements, folder refinements, +and price refinements. + +Added prefixes in the set/bundle products titles for added context. + +Mini cart button has the title Go to Cart and not the same text as the +button. + +The compare checkboxes on the category landing page product tiles now +have unique label text. The unique text appends the product name to the +text and visually hides it. Then, a span was added with just the text +\"Compare\". + +Removed the title from the image and added it to the link. The image +only requires alt, not a title. + +Made the title different and more contextual from the text. + +Removed invalid hypertext reference and added visually hidden text. + +Added visually hidden label to email form element in demo data. + +Removed unnecessary titles from images, added alt where missing, and +ensured that previous changes were not affected. + +The user-links in headercustomerinfo.isml now include a title that adds +more context to the links. + +Added visually hidden text to buttons. + +Changed titles of color refinement swatches to add more context. + +The password reset link now has a title that adds context. + +Changed demo data in library.xml for the footer content assets and added +(or modified) footer titles. + +Store locator and user icons now have titles that add more context. + +Product item names in the cart have more contextual titles. + +Added visually hidden text to the link of category landing page\'s slot +banner. + +Changed the size chart link title to add more context. + +::: annotation + +::: + +::: annotation + +::: +::::: + +::::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +35/158 + +Made product action titles are different from text and add context. + +Changed the title of color and size to add more context. + +Added prefixes to titles. + +Added visually hidden text to the social sharing links. + +Added address and add credit card pages titles have more context. + +Added titles to paging. + +Product tile titles now contain prefixes for more context. + +Removed the invalid hypertext reference error by removing the href +attribute. + +Breadcrumb titles have a prefix for added context. + +The WCAG guidelines followed were: + +Level A: 2.4.4 Link Purpose (In Context) + +Level AAA: 2.4.9 Link Purpose (Link Only) + +The title-related corrections to SiteGenesis use technique H33 +(http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H33). The link +text is supplemented with the title attribute to add more context, +making it easier for people with disabilities to determine the purpose +of the link. + +Consent Tracking in SGJC + +Commerce Cloud enables merchants to track personal information about +their shoppers, and use this information to improve their shoppers' +overall shopping experience. Some merchants can decide to provide their +shoppers a way to deny or grant their consent to such tracking. + +This topic describes a sample implementation for consent tracking in +SGJC. The purpose of this sample implementation is to suggest how you +can implement this capability on a storefront adapted from SGJC. This +sample implementation is meant to be informative, but not prescriptive. + +This sample implementation uses: + +A content asset for displaying a consent request message to the shopper + +A site-specific preference, Tracking, to disable tracking by default + +A session-specific flag to allow tracking if the shopper grants consent + +More details about the sample implementation are provided later in this +document. + +Content Asset for the Consent Request Message + +To display a consent message to the shopper, the sample implementation +uses a content asset whose internal ID is consent_tracking_hint. This +content asset contains meaningless text, which you can replace with your +own message. + +Site-Specific Preference (Tracking) + +The Tracking site preference determines the default tracking behavior +for a site. If set to Opt-in, personal information is not tracked by +default for all shoppers visiting the site; otherwise, personal +information is tracked. + +To set this preference, select Merchant Tools \> site \> Site +Preferences \> Privacy. + +The sample implementation assumes that the Tracking preference is set to +Opt-In. + +Session Tracking Flag + +The sample implementation presents a consent request message to the +shopper, who can choose to allow tracking. If the shopper allows +tracking, the sample implementation enables tracking during the +shopper's session. + +You can enable tracking on a session by calling the following method: + +dw.system.Session.setTrackingAllowed(boolean) \-- If you call this +method with a value of true, the method enables tracking for the current +session; false, disables tracking. + +You can determine the current value of the tracking flag by calling the +following method: + +dw.system.Session.isTrackingAllowed() \-- This method returns the +current state of the session's tracking flag (true indicates that +tracking is enabled; false, disabled). + +Extra Implementation Details + +The sample implementation uses a server-side endpoint to set the session +tracking flag based on the value of a URL parameter. The shopper's +choice to grant or deny consent determines the value of this parameter. + +The server-side endpoint is named Account-consentTracking: + +function consentTracking() { var consent = +request.httpParameterMap.consentTracking.value == \'true\'; +session.custom.consentTracking = consent; + +::: annotation + +::: + +::: annotation + +::: +::::: + +::: page +3/16/23, 2:11 PM Legacy Developer Documentation + +https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/LegacyDevDoc/LegacyDevDoc.html&cp=... +36/158 + +session.setTrackingAllowed(consent); } + +The result of the shopper's decision is stored in the server-side +variable session.custom.consentTracking. It is important to communicate +the state of this variable with the client-side code running on your +storefront, so the sample implementation places this information in a +global location that is accessible to all SGJC-based storefront pages +(footer_UI.isml). + +The client-side implementation can check the state of this variable and +store it in a client-side variable (consent). The client-side +implementation can then use the value of the variable to determine +whether to display the consent request message to the shopper. + +Several other changes to the client side complete the sample +implementation. + +The following properties are added to the 'resources' object in the +Resource.ds file: + +TRACKING_CONSENT: Resource.msg(\'global.tracking_consent\', \'locale\', +null), TRACKING_NO_CONSENT: Resource.msg(\'global.tracking_no_consent\', +\'locale\', null), + +The following properties are added to the 'urls' object in the +Resource.ds file: + +consentTracking: URLUtils.url(\'Page-Show\', \'cid\', +\'consent_tracking_hint\').toString(), consentTrackingSetSession: +URLUtils.url(\'Account-ConsentTracking\').toString(), + +The client-side variable (consent) is set before app.js is included in +the footer_UI.isml template: + +\var consent = \${session.custom.consentUser};\ +\