OS2.1 Theme​

The OS2.1 theme is a set of feature improvements that make themes and theme apps easier to build, more flexible, and easier to maintain.

How to distinguish between old and new themes​

Currently we have three versions of the theme:

• 1.0
• 2.0
• 2.1（latest）

You can judge by the themeTypeVersion attribute of window.Shopline, the type is number.

Featured​

The OS2.1 theme is designed for developers, and its underlying architecture has a more efficient rendering mechanism. It helps developers build themes that are more flexible and easier to maintain.

Best practices for theme development can be found in the development documentation.

Web Components​

We use the Web Components feature in the OS2.1 theme. Using this feature, theme components can be easily encapsulated and reusable. And this feature is a native browser capability and has better performance.
Using Web Components can also further simplify the logic of fragment rendering of components in the editor. You no longer need to care about events emitted by the editor. Initialization is automatically triggered when an element is inserted into the browser.

Better opening capabilities​

Enhanced Helper Capabilities​

We have further improved the capabilities of the helper and expanded the number of helpers. We have consolidated certain functionalities and provided standardized outputs to enhance the development efficiency of theme developers. For example:

• We provide the image_tag helper, which can output standardized img tags after passing in image data.
• We offer the capture helper for more efficient string generation.
• We introduce the case helper that allows for conditional checks similar to a switch statement.

Enhanced Object Fields​

We have optimized the Object for all store data, applying a standardized approach that eliminates the need for complex calculations. For example:

• If the field returns image data, it will now be represented as an image object, rather than just a string containing the image URL.
• The data provided for picker has also been standardized, allowing direct mapping to the properties of the corresponding Object. For instance, the product_picker can be accessed using section.settings.xxx.title, which outputs the title of the product configured by the merchant.
• We have implemented a unified approach for navigating to different pages, enabling the use of the routes object to output the corresponding page's navigation link. This link automatically handles the logic for market-specific paths.

Enhanced loadFeatures capabilities​

We have consolidated certain common functionalities, allowing developers to utilize specific capabilities without having to worry about the implementation details. For example:

• The logic for sending a verification code to a mobile phone number on the registration page can now be easily invoked by simply using the loadFeatures function.

Breaking Changes in OS2.1 Theme​

1. We have deprecated the routing for activity pages in the OS2.1 theme template, so there are no activity page templates in the theme files.
2. Global open events, such as add-to-cart events, have been removed. Developers will need to manipulate the DOM to implement related logic.
3. We prioritize native syntax for development and aim to minimize the use of third-party libraries. Therefore, we have removed JQuery and image lazy-loading libraries. Image lazy-loading now utilizes native lazy-loading capabilities.