Customize layout components

Layouts have access to a set of components in the form of widgets, slots, application JavaScript, and stacks, displayed within a component library. .

Before designing your store pages, you can choose which of these are visible, and which are hidden from view. Those which are visible are consequently available for use in the relevant layouts.

By default, the Quote Details and Request Quote widgets are automatically hidden. You will need to unhide these widgets if you are enabling quoting functionality on your web store.

Note: Choosing to hide components already in use has no impact on those particular instances.

To customize layout components:

1. Click the Design icon and display the Components tab.
2. Filter which component types are displayed by using the Type or Source filters. You can also search for a specific component by entering details in to a Filter box.

   An overview list of components displays. It includes the component type, the number of instances, and the latest version number.

3. (Optional) A green arrow next to the overview information indicates that an update is available for that particular component. Click the arrow to update the component to the latest version. If an update is not available, then a green check mark is displayed.
4. (Optional) To view all hidden components, click the Show Hidden Components button next to the filters - the eye icon overlaid with a strikethrough line indicates the hidden status.
5. (Optional) To view all unhidden components, which are the components that are available for use in layouts, click the Do Not Show Hidden eye icon button next to the filters.
6. Highlight your preferred component.
7. To hide your highlighted component from the component library, click the eye icon. Doing so means that this particular component will not be available within the Components menu of any associated layouts.

   Note: Any existing instances will remain in use.

8. To unhide your highlighted component from view, click the eye icon overlaid with a strikethrough line. This is now available for use in layouts.
9. Click the component name to expand the component’s details. From here you can select the following elements:
   • Extend JavaScript button: Opens a JavaScript file for a widget, which you can edit and save. This JavaScript will be applied to all instances of the widget. The Extend JavaScript button is visible for non-extension widgets. 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.

   • Go To Widget Code icon: Displays the coding options page. See Modify a component’s code for more details.
   • Widget Settings icon: Opens the configuration options available for that particular widget.
   • Download Source icon: Downloads the widget file for each widget instance.
   • Applies to all Sites check box: Ensures settings are applied across all sites, when running multiple instances of Oracle Commerce. This option applies only in the case of a global widget or an application JavaScript component.