Download PDF
Download page Configuring Templates.
Configuring Templates
You can open the repository folder on your local machine to check the setup.
A new folder named node_modules is created. You should never modify anything in the node_modules folder. This folder is not part of the repository. All the third-party dependencies get installed in this folder. Whenever you run an npm command, the dependencies are overridden in this folder.
Salesforce Credentials
As part of the setup, a sf.json file is created that contains the credentials for deploying the application. If you want to deploy your Storefront in a different org, you can update the credentials in this sf.json file.
Configuration Parameters
During the npm install phase, a configuration file named config.ts is automatically created. This is a runtime configuration for the application. This file is different from the sf.json file. The config.ts file contains runtime specific variables that help the application to operate. You must set it up with the following parameters:
Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
production | Boolean | Yes | - | Specify the environment where you want the application to run. |
organizationId | String | Yes | - | Specify the org ID of the application. For details, see the Contact Support section. |
defaultImageSrc | String | No | - | Specify the URL of the default image to use when no image is found. |
defaultCountry | String | Yes | US | The default country code is "US". |
defaultLanguage | String | Yes | en-US | The default locale is "en-US". |
enableErrorLogging | Boolean | Yes | True | Set this to True, in non-production mode, to send error logs. |
enableErrorReporting | Boolean | Yes | True | When set to True, in non-production mode, it shows a model window to provide user feedback. |
enableMultiCurrency | Boolean | No | False | If using a multi-currency enabled org, set it to true to enable currency fields on models. |
enableErrorPrinting | Boolean | Yes | True | |
enableQueryLogs | Boolean | No | True | Set to true to print query requests and results in the browser console. |
enablePerformanceLogs | Boolean | No | True | Set to true to print performance metrics of requests in the browser console. |
defaultCurrency | String | Yes | USD | The default currency to use for guest users. Defaults to "USD". |
bufferTime | Number (milliseconds) | No | 200 | The number in milliseconds to wait before sending requests. A larger number will batch requests into a single network callout, but may decrease performance. |
maxBufferSize | Number | No | 10 | The maximum number of requests to batch into a single callout. |
disableBuffer | Boolean | No | False | When set to true, will disable buffered requests entirely. 1 request = 1 network callout. |
| subqueryLimit | Number | No | 20 | |
| pricingMode | 'default' | 'turbo' | No | default | The default pricing mode is "default". To use TurboPricing as the pricing mode, set the value to "turbo". |
disableCache | Boolean | No | False | When set to true, data returned from requests will not be cached. |
encryptResponse | Boolean | No | True | When set to true, responses from the server will be encrypted. 
Encryption payload is limited to 1 MB. |
productIdentifier (Deprecated) | String | No | Id | The API name of the field on the product to use as the unique identifier in the application. |
cartRetryLimit | Number | No | 10 | The maximum number of times the CPQ reprice operation should be attempted when the state of the cart changes. |
debounceTime | Number (milliseconds) | No | 200 | The amount of time the application should wait for user input before batching DML operations. |
storageAccount (Deprecated) | String | No | - | |
tenantId (Deprecated) | Number | No | - | |
tenant (Deprecated) | String | No | - | |
proxy | String | No | - | The login proxy to use to bypass CORS restrictions on login. |
useIndexedDB | Boolean | No | False | When set to true, data cache will be persisted in browser IndexedDB. |
| skipPricing | Boolean | Yes | True | When the user changes an existing cart, Digital Commerce skips pricing. Setting this flag to False allows Digital Commerce to perform pricing when the user changes an existing cart. |
| skipRules | Boolean | Yes | False | When the user changes an existing cart, Digital Commerce evaluates the rules. Setting this flag to True skips rules when the user changes an existing cart. |
| pricingFallback | Boolean | Yes | False | When TurboPricing fails, an error message is displayed without any further action. Setting this flag to True enables the system to use CPQ pricing. |
| packageNamespace | String | Yes | - | |
storefront | String | Yes | Null | |
expandDepth | Number | No | 10 | The maximum number of queries that should be executed to populate subquery data. |
| hashRouting | Boolean | No | False | |
| queryDepth | Number | No | 2 | The maximum depth of relationships to be used in a query. |
| endpoint | String | Yes | - | Specify the URL you set on the community sites. |
sentryDsn | String | No | - | |
| runTimeDebugMode | Boolean | Yes | False | |
connectedApp | ConnectApp | Yes | - | |
| defaults | Defaults |
Setting Up Proxy for Local Development
There is also a proxy.config.json file that gets installed in the root directory as part of the deployment. To configure the proxy.config.json file, you must provide the Community URL in both the target locations. This allows you to make SOAP API calls from your local development server (for functionality like login and reprice cart). Populate the 'target' attributes in that file with the instance URL of your community.
All the code for the templates is open sourced into the library we just cloned and installed. It consists of all the modules such as cart page, home page, account page, and more. We can go into any template, for example, Home page layout where you can see some of the components of the underlying component library. For example, apt-jumbotron. This is a component library that gets installed as part of the apttus/ecommerce. You don't need to essentially build a code for this component. This is a component with the npm package. You just need to modify a single line of HTML code to reference and use it.
You can reference your configuration and import them into your main application module from the app.module.ts file. This app.module.ts file contains an ApttusModule and a CommerceModule. These two modules are getting referenced from the underlying libraries. You must import them into the root module or application to use them.
Importing the app modules in the root module
Add two lines for the following:
- ApttusModule.forRoot - The module runs all the underlying state management, caching, communication with the Salesforce org. You must import the configuration from the config.ts file.
- CommerceModule.forRoot - In the forRoot method of the CommerceModule declare the storefront that you want to use. For example, CommerceModule.forRoot('Tier 1')
This defines the Storefront for your application.
Setting Up Subset of Categories
You can set up specific categories or subset of categories from the header.component.ts file.
Turning Off Sentry for a Customer
Our angular application is wired into Sentry, any errors that occur for customers are sent to sentry. You can view those in sentry, along with stack trace, and debug them. If customers don't want such information to be sent to us, you may consider turning it off for customers.
Go to config.ts and do the following:
- enableErrorLogging - Set this to False.
- enableErrorReporting - Set this to False.