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.
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.
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).
{{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.
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}}.
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.
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.
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.
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.
