Modify a component’s code

You can modify a component’s code via the HTML template, style sheets, or text snippets.

1. Open the Design page and click Components.
2. Filter the components that are displayed by choosing from the Type or Source filters. You can also search for a specific component by entering details in to a Filter box.
3. A list of components displays which includes overview information on the component type, the number of associated instances, and the latest version number. There are also several customization options available.
4. Select the component you wish to edit and click either its name or the Details icon. The component details open to display overview information on the list of instances, the component type, the number of associated instances, the latest version number, and the layout(s) associated with the component.
5. (Optional) The Extend JavaScript button is visible for non-extension widgets. Click the button to open the JavaScript file and modify the code. For more information on this feature, see Use the JavaScript Code Layering User Interface feature.
   Note: The widget JavaScript is only editable for custom widgets that have had their editable JavaScript property activated.
6. Click the icon to go to the coding options page. The HTML Template window automatically opens, displaying lines of HTML code. Immediately above the menu tabs is the Settings icon, which you can select if you wish to make changes to the component settings.
7. Depending on the task you wish to perform, you can now either:

   • Modify the code within the HTML Template option.

   • Modify the Less/CSS by selecting the Style Sheet option. Oracle Commerce makes use of Less in the style sheets. Less is a CSS pre-processor which requires the style sheet files to be compiled to produce CSS and provides additional features such as variables and functions. For further details on Less, refer to http://lesscss.org.
   • Modify the component’s text by selecting the Text Snippets option. See Customize your web store’s text for more information on modifying your store’s global text.

     All available values for your chosen component are displayed as editable links.

     • Click to open the value you wish to edit.
     • Enter the new value and confirm or reject the edits using either the Save or Close icons.
8. (Optional) Click the Download Source button to download the widget file for each widget instance.
9. Click Save.