1. Using Oracle Commerce
  2. Modify Your Storefront Using Code Editing Tools
  3. Use developer tools to customize your store

Use developer tools to customize your store

The Developer option in the Design page gives you access to extended coding features that allow you to change the text displayed to customers on your store and export and import design elements from one Oracle Commerce instance to another.

Customize your web store’s text

Text snippets enable you to directly access your web store’s customizable global text, which can include messages, labels and help tips. You can also customize the text contained within individual components. See Modify a component’s code for more details.

To customize your web store’s text:

  1. Open the Design page and click Developer.
  2. Select Text Snippet.
  3. Choose the Text Snippet Type from the drop down list, or begin typing the name in the filter box. All available values for your chosen type are displayed as editable links.
  4. Click the value you wish to edit.
  5. Enter the new value and confirm or reject the edits using either the Save or Close icons.

    Note: Text set between double underscore characters, such as __totalPrice__, represents a parameter that will be replaced with the appropriate value when the resource is displayed in your web store. Such parameters can be moved within a resource value or deleted from it. However, you should avoid changing the name of the parameter, or the replacement will not work.

    Text in brackets preceded by $t indicates an additional resource look-up is occurring. For example, $t(ns.common:resources.option) indicates that the value for the ‘option’ resource will be inserted at this position in the current resource value.

Customize your store’s code using the Design Code Utility tool

The Design Code Utility is a command-line tool that integrates Oracle Commerce with your IDE or code editor. It allows you to customize user-modifiable source code from a Commerce server and then upload it again.

To access the Design Code Utility:

  1. Open the Design page and click Developer.
  2. Select Developer Tools.
  3. Under Design Code Utility, click Download.
  4. Save the ZIP file to a location on your local machine and extract its contents.

    See Use the Design Code Utility for more details.

Use server-side extensions

Some Oracle Commerce features are implemented as server-side extensions that can run on the Node.js server associated with your Commerce environment. To use one of these features, you must download the extension from the Commerce administration server. You can then optionally customize the extension and upload it to your Node.js server.

To download a server-side extension:

  1. Open the Design page and click Developer.
  2. Select Server-Side Extensions. A list of files available for download is displayed.
  3. Find the ZIP file for the server-side extension you want to download.
  4. Click the associated Download Extension icon and save the file to a location on your local machine.

The list of files available for download includes application files and library files. For example, for the punchout feature, there is an application file named punchout-app.zip and a library file named punchout-lib.zip. The application file contains the complete extension (including the library module), so you typically need to download only it and not the library file. The library file contains the business logic for the extension, and it is provided as a separate download so you can obtain updates when they are supplied.

To customize a server-side extension you have downloaded, you must first extract the contents of the ZIP file. Note that when you customize the extension, you should not make any changes to the library module, which is found in the following directory in the extension:

node_modules/@oracle-commerce-cloud/<SSE_name>-lib

For example, the punchout library module is found here:

node_modules/@oracle-commerce-cloud/punchout-lib

When you have finished your modifications, reassemble the application ZIP file and use the POST /ccadmin/v1/serverExtensions endpoint to upload it to your Node.js server.

Update the library in a server-side extension

After you have downloaded the application file for a server-side extension and extracted the contents to a directory, you can replace the library module with an updated version (if one is available).

To update the library in a server-side extension:

  1. Download the library file for the extension. For example, for the punchout extension, download punchout-lib.zip.
  2. Extract the contents of the library file.
  3. Use the extracted contents of the library file to replace the library module in the extension application.
  4. Reassemble the application ZIP file and use the POST /ccadmin/v1/serverExtensions endpoint to upload it to your Node.js server.

For more information about developing server-side extensions, see the following post on the Oracle Partner Network:

https://community.oracle.com/groups/oracle-commerce-cloud-group/blog/2017/07/21/working-with-commerce-cloud-server-side-extensions

Change the storefront framework version

The storefront framework comprises the JavaScript and CSS files used to manage many of the widget and theme elements that can appear in your storefront, including code that has been customized by your developers. You can choose to restore the previous version of the storefront framework or upgrade to the latest version. See Restore or upgrade the storefront framework version for more details.