Legacy Layout

WARNING

Note on Layout Legacy and Upcoming Changes

Please be aware that the current layout structure provided in the examples is part of our legacy system and is scheduled for replacement. We are working on a new layout framework that will offer enhanced features and improved performance.

Key Points to Note:

Legacy System: The existing layout variables and structure, including {{IsoLang}}, {{Assets}}, {{Version}}, and others, are part of the current theme management system.

Upcoming Changes: The new layout framework will introduce updated variables and a different approach to theme management. This transition aims to streamline the development process and improve the overall user experience.

Migration: Detailed documentation and guidelines will be provided to assist with the transition to the new layout system. We recommend staying informed about upcoming changes to ensure a smooth migration.

We appreciate your understanding and cooperation as we work to enhance the Shopranos platform.

Managing and Using Layout in Shopranos Themes

When developing themes on the Shopranos platform, you have the flexibility to manage layouts either through the VS Code plugin or directly within the Shopranos eCommerce platform. This guide will help you effectively manage your layouts and use them within your theme components.

Key Concepts:

Automatic Variable Replacement:

Any variable enclosed in {{variable}} is automatically replaced by Shopranos with the appropriate value. For example, {{IsoLang}} is replaced with the correct language code, and {{Assets}} dynamically generates the correct path for assets based on the environment (staging or production).

Example Layout Structure:

Below is a sample HTML structure to illustrate how variables and assets are managed in a Shopranos theme:

Explanation:

Dynamic Variables:

{{IsoLang}} ensures the correct language is set for the document.

{{RequiredHeaders}}, {{RequiredTemplates}}, and {{CustomCss}} are placeholders that Shopranos automatically fills with necessary content.

{{Assets}} dynamically generates the correct path for assets, ensuring compatibility across environments.

{{Version}} is used to manage asset caching, forcing browsers to reload assets when changes are made.

CSS and JS Files:

Links to CSS and JS files use {{Assets}} to refer to the correct environment-specific paths. The ?version={{Version}} parameter ensures that updates are correctly reflected, bypassing cached versions.

Dynamic Styling:

Variables such as {{PaletteThemeColor}} allow you to customize the theme dynamically based on user settings or configurations in the Shopranos platform.

Using Layouts in Components:

Layouts can include reusable components like headers, footers, or sidebars. These components can be dynamically inserted into layouts using placeholders such as {{SectionHeader}}, {{SectionBody}}, and {{SectionFooter}}.

Managing Layouts:

Via VS Code Plugin:

Manage layouts directly in your local development environment using the Shopranos VS Code plugin. Edits made here are instantly reflected in the staging environment, providing real-time feedback on changes.

Via Shopranos Admin Panel:

Manage and edit layouts directly within the Shopranos platform for a more hands-on approach.

By utilizing these tools and methods, you can efficiently manage and customize your Shopranos themes, ensuring a seamless and dynamic user experience.

Explanation of Variables in Shopranos Themes

When working with Shopranos themes, you will encounter several dynamic variables enclosed in {{ }}. These variables allow the platform to automatically insert specific values depending on the context, environment, or settings. Below is a detailed explanation of commonly used variables.

1. {{IsoLang}}

Description: Inserts the ISO language code of the current store’s language.

Usage: Sets the language attribute in the HTML tag to ensure the correct language is used for the page.

2. {{RequiredHeaders}}

Description: Automatically includes essential meta tags, scripts, and other necessary headers required by the Shopranos platform.

Usage: Typically placed within the <head> section.

3. {{Assets}}

Description: Generates the correct path to the assets folder for the environment (staging or production). This ensures that the correct URLs are used for static files like CSS, JavaScript, and images.

Usage: Prefixes asset URLs to make them environment-specific.

4. {{Version}}

Description: Appends the version number to asset URLs. This is primarily used to force the browser to reload assets (bypass the cache) when updates are made.

Usage: Ensures users see the latest versions of assets.

5. {{GoogleAnalytics}}

Description: Inserts the Google Analytics tracking ID configured for the store.

Usage: Automatically links the store with Google Analytics for tracking purposes.

6. {{ReCaptchaApiKey}}

Description: Inserts the API key for Google reCAPTCHA, used for spam protection on forms.

Usage: Ensures that reCAPTCHA works correctly by providing the necessary API key.

7. {{PaletteThemeColor}}

Description: Inserts the primary theme color configured for the store.

Usage: Used to style elements across the site according to the store’s color scheme.

8. {{PaletteThemeText}}

Description: Inserts the primary text color for the theme.

Usage: Ensures text is styled consistently with the theme’s color scheme.

9. {{PaletteSuccess}}

Description: Inserts the color used for success messages or indicators.

Usage: Style elements that represent successful actions or statuses.

10. {{PaletteWarning}}

Description: Inserts the color used for warning messages or indicators.

Usage: Style elements that represent warnings or alerts.

11. {{PaletteDanger}}

Description: Inserts the color used for error messages or indicators.

Usage: Style elements that represent errors or critical alerts.

12. {{PaletteHeaderTextColor}}

Description: Inserts the text color for the header section of the theme.

Usage: Ensures consistent text styling in the header.

13. {{PaletteHeaderBackgroundColor}}

Description: Inserts the background color for the header section of the theme.

Usage: Applies the correct background color to the header.

14. {{PaletteFooterTextColor}}

Description: Inserts the text color for the footer section of the theme.

Usage: Ensures consistent text styling in the footer.

15. {{PaletteFooterBackgroundColor}}

Description: Inserts the background color for the footer section of the theme.

Usage: Applies the correct background color to the footer.

16. {{PaletteBreadcrumbTextColor}}

Description: Inserts the text color for the breadcrumb navigation.

Usage: Styles the breadcrumb text for consistency with the theme.

17. {{PaletteBreadcrumbBackgroundColor}}

Description: Inserts the background color for the breadcrumb navigation.

Usage: Applies the correct background color to the breadcrumb area.

18. {{PaletteBodyPrimaryTextColor}}

Description: Inserts the primary text color for the body of the site.

Usage: Ensures the main content area text is styled according to the theme.

19. {{PaletteBodySecondaryTextColor}}

Description: Inserts the secondary text color for the body of the site.

Usage: Provides an alternative text color for the main content area.

20. {{PaletteBodyBackgroundFirstColor}}

Description: Inserts the primary background color for the body.

Usage: Sets the main background color for the site.

21. {{PaletteBodyBackgroundSecondColor}}

Description: Inserts the secondary background color for the body.

Usage: Provides an additional background color, often used for alternating sections.

22. {{PaletteTopBarTextColor}}

Description: Inserts the text color for the top bar of the site.

Usage: Styles the text in the top bar according to the theme.

23. {{PaletteTopBarBackgroundColor}}

Description: Inserts the background color for the top bar of the site.

Usage: Applies the correct background color to the top bar.

24. {{PaletteBodyBorderColor}}

Description: Inserts the color used for borders in the body of the site.

Usage: Ensures borders are styled consistently across the site.

25. {{CustomCss}}

Description: Inserts any custom CSS that has been configured for the theme.

Usage: Allows for the inclusion of additional CSS rules specific to the store.

26. {{SectionHeader}}

Description: Inserts the HTML and content for the header section of the site.

Usage: Placed where the header should appear in the layout.

27. {{SectionBody}}

Description: Inserts the HTML and content for the main body section of the site.

Usage: Placed where the main content should appear in the layout.

28. {{SectionFooter}}

Description: Inserts the HTML and content for the footer section of the site.

Usage: Placed where the footer should appear in the layout.

29. {{RequiredTemplates}}

Description: Inserts any additional templates that are required by the platform.

Usage: Typically placed near the end of the HTML document.

30. {{GlobalData}}

Description: Inserts global JavaScript variables and settings that are necessary for the functioning of the theme.

Usage: Ensures that necessary data is available throughout the theme.

Legacy Layout

Note on Layout Legacy and Upcoming Changes#

Managing and Using Layout in Shopranos Themes#

Key Concepts:#

Example Layout Structure:#

Explanation:#

Using Layouts in Components:#

Managing Layouts:#

Explanation of Variables in Shopranos Themes#

1. {{IsoLang}}#

2. {{RequiredHeaders}}#

3. {{Assets}}#

4. {{Version}}#

5. {{GoogleAnalytics}}#

6. {{ReCaptchaApiKey}}#

7. {{PaletteThemeColor}}#

8. {{PaletteThemeText}}#

9. {{PaletteSuccess}}#

10. {{PaletteWarning}}#

11. {{PaletteDanger}}#

12. {{PaletteHeaderTextColor}}#

13. {{PaletteHeaderBackgroundColor}}#

14. {{PaletteFooterTextColor}}#

15. {{PaletteFooterBackgroundColor}}#

16. {{PaletteBreadcrumbTextColor}}#

17. {{PaletteBreadcrumbBackgroundColor}}#

18. {{PaletteBodyPrimaryTextColor}}#

19. {{PaletteBodySecondaryTextColor}}#

20. {{PaletteBodyBackgroundFirstColor}}#

21. {{PaletteBodyBackgroundSecondColor}}#

22. {{PaletteTopBarTextColor}}#

23. {{PaletteTopBarBackgroundColor}}#

24. {{PaletteBodyBorderColor}}#

25. {{CustomCss}}#

26. {{SectionHeader}}#

27. {{SectionBody}}#

28. {{SectionFooter}}#

29. {{RequiredTemplates}}#

30. {{GlobalData}}#