Template-Specific Styles in SuiteCommerce for Customization

TL;DR Opening

Template-specific styles in SuiteCommerce allow developers to extend base Sass styles for unique templates, enabling tailored design components for an enhanced user experience. This hierarchical structure consists of base styles, application-level designs, and framework for customizing individual elements.

Understanding Template-Specific Styles

In SuiteCommerce, styles are organized in a hierarchy that facilitates the efficient reuse and extension of design components. The overall structure consists of:

• Base Sass Styles: Fundamental reusable components for styling.
• Template-Specific Styles: Customized styles specific to each page or template, built on base components.
• Application-Level Styles: Unique styles defined per application experience (e.g., Shopping, My Account, Checkout).

Base Sass Styles

Base Sass styles serve as the foundation for creating sophisticated templates and pages. Found within the BaseSassStyles folder at Workspace/<THEME_DIRECTORY>/Modules/BaseSassStyles@sc-<release>, these components are categorized as follows:

• Atoms: Basic elements like buttons and forms.
• Molecules: Combinations of atoms serving specific functions across various contexts.
• Variables: Common styling rules including spacing and typography that can be referenced by atoms and molecules.

The Role of Template-Specific Styles

Each module in SuiteCommerce contains a Sass folder that sets styling rules for its templates. The logic here is straightforward: base components are leveraged to create templates tailored to specific requirements. Typically, each template file has a corresponding Sass file within the module’s Sass folder.

Example of Template-Specific Sass Usage:

Class Referenced in Template File:

{{#if showRemoveButton}}
   <button class="address-details-remove-address" data-action="remove" data-id="{{internalid}}" {{#if isInvalidAddressToRemove}}disabled{{/if}}>
      {{translate 'Remove'}}
   </button>
{{/if}}

Class Defined in Sass File:

.address-details-remove-address {
    @extend .button-edit;
    margin-right: $sc-base-margin-lvl2;
    cursor: pointer;
}

Application-Level Styles

In addition to template-specific styles, each application can have a unique design. The Shopping, My Account, and Checkout modules each support specific style extensions. These styles are organized in a layout Sass file for each application:

• Workspace/<THEME_DIRECTORY>/Modules/ShoppingApplication/Sass/_shopping-layout.scss
• Workspace/<THEME_DIRECTORY>/Modules/MyAccountApplication/Sass/_myaccount-layout.scss
• Workspace/<THEME_DIRECTORY>/Modules/CheckoutApplication/Sass/_checkout-layout.scss

Application dependencies for base styles or custom tweaks can also be added in the theme manifest file. Each entry must be included in the corresponding application's sass object to ensure proper deployment of styles. Refer to the documentation on Editing the Theme Manifest for further details.

Who This Affects

• Developers: Those customizing SuiteCommerce templates.
• UI/UX Designers: Professionals focusing on creating tailored experiences through styling.

Key Takeaways

• Template-specific styles allow for effective customization of SuiteCommerce templates.
• Using base styles enhances consistency and reduces duplication in design.
• Each application can maintain a unique look while sharing base styles.

Source: This article is based on Oracle's official NetSuite documentation.