Before You Begin

Adding child views in SuiteCommerce can enhance the functionality and arrangement of components in your application. This article outlines the methods for adding child views, explains the differences between short and verbose syntax, and provides practical examples to facilitate integration.

How Do You Add Child Views?

Before adding a child view, you need to complete two key steps:

• Choose Short or Verbose Syntax: Use the addChildView() for the short way or addChildViews() for a detailed approach.
• Find the ID of the Placeholder: Identify the target placeholder for your child view, which can be either data-view or data-cms-area.

Choose Short or Verbose Syntax

Short Syntax

The short syntax appends a view to the default view of the component without specifying its order. Here’s how you can implement it:

1. Retrieve the component instance.
2. Use addChildView() method with a specified placeholder ID and constructor function.

Short Syntax Example

1var cart = container.getComponent('Cart');
2if(cart) {
3  cart.addChildView('Quick.Order', function myViewConstructor() {
4    return new ExtensionView();
5  });
6}

This code snippet appends a view to the Quick.Order placeholder in the Cart component.

Verbose Syntax

The verbose syntax allows for greater control over the order and specific views being added. You define:

• Main view ID
• Placeholder ID
• Index for the child view's position
• A unique ID for the new view

Verbose Syntax Example

1var cart = container.getComponent('Cart');
2if(cart) {
3  cart.addChildViews(
4    cart.CART_MINI_VIEW,
5    {
6      'Header.MiniCartItemCell': {
7        'MyCustomView': {
8          childViewIndex: 5,
9          childViewConstructor: function () {
10            return new ExtensionView();
11          }
12        }
13      }
14    }
15  );
16}

In this case, the ExtensionView is inserted before the default view in the Header.MiniCartItemCell.

Find the ID of the Placeholder

To properly add a child view, discover the corresponding placeholder ID using either:

• Code from a Template Method: Review templates and look for the data-view attribute in your component files.
• Browser Code Inspector Method: Use tools like Google Chrome Developer Tools to inspect the UI element and find the relevant data-view.

The IDs must point to an existing attribute of a div element in your interface, ensuring the new child view displays correctly.

Conclusion

By leveraging the short and verbose syntax options for adding child views in SuiteCommerce, developers can create more customized and functional user interfaces. Following the guidelines above will ensure that your components display as intended, improving user engagement with your application.

Key Takeaways:

• Choose between short or verbose syntax based on your needs.
• Understand how to identify placeholder IDs for precise placement.
• Use examples provided to guide your implementations effectively.