New Layout

Transition to New Layout Framework

As we transition to the new layout framework for Shopranos themes, we want to highlight a significant benefit of this upgrade:

Real-Time Preview Updates: The new layout framework introduces a powerful feature where changes made in the content editor are instantly reflected in the preview. This is achieved through the new page designer, which provides a seamless editing experience by updating the content preview in real-time. This enhancement streamlines the design process, allowing for immediate feedback and adjustments without the need for a page refresh.

Example New Layout Code

Key Features of the New Layout

Dynamic CSS Variables: Variables like {{PaletteThemeColor}} and {{PaletteHeaderTextColor}} are used for theming, allowing for easy customization and updates.

Vue.js Integration: The layout utilizes Vue.js for dynamic rendering and state management, providing a reactive and interactive user experience.

Component-Based Structure: Header and footer components are managed through Vue.js, enabling modular and maintainable design.

Version Management: CSS and JavaScript files include versioning for cache-busting and ensuring that users receive the latest updates.

Please transition to this new layout framework to benefit from the improved performance and flexibility it offers. Detailed documentation and migration guidelines will be provided to facilitate this update.

Sure, here’s an explanation of each variable placeholder used in the HTML template:

HTML Template Variables Explained

{{IsoLang}}:

Purpose: Specifies the language code for the HTML document (e.g., en for English, fr for French).

Usage: <html lang="{{IsoLang}}">

{{RequiredHeaders}}:

Purpose: Placeholder for any additional meta tags, links, or headers required for the page.

Usage: Inside the <head> tag.

{{Assets}}:

Purpose: Base URL or path where asset files (CSS, JavaScript) are located.

Usage: <link rel="stylesheet" href="{{Assets}}/css/simplebar.min.css?version={{Version}}">

{{Version}}:

Purpose: Cache-busting version number for assets to ensure users get the latest version.

Usage: In the asset URLs, e.g., simplebar.min.css?version={{Version}}.

{{Path}}:

Purpose: Base URL for JavaScript files or other assets that need to be loaded.

Usage: <script type="text/javascript" src="{{Path}}/templatedata.js?version={{Version}}"></script>

{{Root}}:

Purpose: Root URL for custom stylesheets or other resources.

Usage: <link rel="stylesheet" href="{{Root}}/Custom.css">

{{pagedata}}:

Purpose: Placeholder for dynamic data related to the page, typically injected into the script for rendering.

Usage: Inside the <script> tag.

{{ComponentTemplates}}:

Purpose: Placeholder for injecting component templates required for the Vue.js application.

Usage: Near the end of the <body> tag.

{{GlobalData}}:

Purpose: Placeholder for any global data or configuration needed by the scripts on the page.

Usage: Near the end of the <body> tag.

10.

{{palette}}:

Purpose: Placeholder for the color palette used to style various elements on the page.

Usage: Inside the Vue.js component methods for setting colors.

Example of Vue.js Data and Methods

In the Vue.js part of the template:

globalStores: An object to store global data for the app.

headerData: Array to hold header components.

footer: Array to hold footer components.

selComp: Variable to track the selected component.

customCssUrl: URL for the custom CSS file.

Vue.js Methods for Handling Data

addStore(id, data): Adds data to the globalStores object.

getStore(id): Retrieves data from globalStores by ID.

setPage(page): Sets the current page.

setCssFile(url): Dynamically sets the URL for the custom CSS file.

setTemplate(template): Sets header and footer data based on the provided template and applies color settings.

setSelectedComponent(component): Sets the selected component.

setColors(palette): Updates CSS custom properties with colors from the provided palette.

This structure allows for dynamic updates and customization of the page without requiring a page refresh, leveraging Vue.js for a reactive and responsive design experience.

Transition to New Layout Framework#

Example New Layout Code#

Key Features of the New Layout#

HTML Template Variables Explained#