### PHP: Activate Developer Mode Configuration Source: https://docs.layouthub.com/development/getting-started This PHP code snippet demonstrates the constructor for activating developer mode in LayoutHub. It sets the developer path and URL, typically used for local development environments. ```php public function __construct() { $this->developer = array( 'path' => PATH.'DEV', 'url' => 'http://localhost/LayoutHub/DEV' ); } ``` -------------------------------- ### settings.js - Example Field Registration Source: https://docs.layouthub.com/development/reference/settings.js Provides a concrete example of a setting field registration, showing properties like name, label, type, default value, and description. This structure is used to define individual settings. ```javascript [ { name : 'title', label : 'Title', type : 'text', value : 'Default title', description : 'Enter your title text ' } ] ``` -------------------------------- ### LayoutHub LLM Arguments Source: https://docs.layouthub.com/development/reference/settings.js/picker Defines the structure and properties of arguments used for configuring settings within the LayoutHub LLMs framework. Each argument specifies its data type, a placeholder or example value, and a description of its function and constraints. ```APIDOC Arguments: Argument Name: type Type: string Value: picker Description: The type of setting. Argument Name: name Type: string Value: {field_name} Description: The unique name that will be used in the template. Argument Name: label Type: string Value: _(optional)_ Description: The label that appears above the setting field. Argument Name: description Type: string Value: _(optional)_ Description: The description that appears above or under the setting field. Argument Name: tooltip Type: string Value: _(optional)_ Description: The long description that appears on the tooltip when hovered over. Argument Name: value Type: object Value: _(optional)_ Description: The default value that will be used for the first time. Argument Name: on Type: object Value: _(optional)_ Description: Add listener events for the setting field. ``` -------------------------------- ### Conditional Statements: if, elseif, else, unless Source: https://docs.layouthub.com/development/reference/liquid-in-section Provides examples of conditional logic using @if, @elseif, @else, and @endif directives, mirroring JavaScript's conditional syntax. It also shows the @unless directive for negating conditions. ```ruby @if (section.settings.limit_items < 5) Product items limit less than 5 @elseif ( section.settings.limit_items < 10) Product items limit less than 10 @else Product items limit greater than 10 @endif ``` ```ruby @unless (section.settings.show_logo == 'yes') Customer don't want to show logo @endunless ``` -------------------------------- ### Image Field Configuration Source: https://docs.layouthub.com/development/reference/settings.js/image-library Provides JavaScript examples for configuring 'image' type fields. It demonstrates setting up a single image field and a multiple image field with specific layout options. ```javascript [ { name: 'image', label: 'Select an image', type: 'image', value:{ thumbnail: '%URL%thumbnail.jpg', value: '%URL%thumbnail.jpg', name: 'Default' } }, { name: 'images', label: 'Images Gallery', type: 'image', value: [ { thumbnail: '%URL%thumbnail.jpg', value: '%URL%thumbnail.jpg', name: 'Default' }, { thumbnail: '%URL%thumbnail.jpg', value: '%URL%thumbnail.jpg', name: 'Default' } ], options: { multiple: true, layout: 'list' } } ] ``` -------------------------------- ### Looping Structures: for, elsefor Source: https://docs.layouthub.com/development/reference/liquid-in-section Details the implementation of for loops using @for and @endfor directives, including handling empty collections with @elsefor. Examples cover looping through objects, arrays, and sequential ranges. ```ruby // Loop JSON object @for (object as key => item)

@print(key): @print(item)

@elsefor

No items

@endelse // Loop an array @for (array as item)

@print(item)

// The current index is: _i @endfor // Loop sequentially @for (var i=0; i<10; i++)

@print(i)

@endfor ``` -------------------------------- ### LayoutHub Include Statement and Component Example Source: https://docs.layouthub.com/development/reference/includes Demonstrates the LayoutHub include statement, which copies code from a specified file into the current file. This snippet shows a basic LayoutHub component structure with an include directive and a Vue-like template. ```lh {section-folder}/section.lh
Your first setting is {{settings.first}}
``` -------------------------------- ### Section Settings Configuration (settings.js) Source: https://docs.layouthub.com/development/reference/create-section Provides the configuration structure for section settings, defining tabs, individual settings with labels, input types (e.g., text), and default values. This file dictates the options available in the section editor. ```javascript [ { tab_name:"General", settings:[ { name: 'one', label: 'The first setting', type: 'text', value: 'The default value' }, { name: 'two', label: 'The second setting', type: 'text', value: 'The default value 2' }, { name: 'name', label: 'The text', type: 'text', value: 'Hello Component' } ] } ] ``` -------------------------------- ### While Loop Structure Source: https://docs.layouthub.com/development/reference/liquid-in-section Demonstrates the usage of while loops with the @while and @endwhile directives, allowing for iterative execution of code blocks as long as a specified condition remains true. ```ruby @var i=10 @while (i > 0)

@print(i--)

@endwhile ``` -------------------------------- ### LayoutHub .lh File Structure with Javascript Source: https://docs.layouthub.com/development/reference/javascript-in-section Demonstrates the structure of a LayoutHub .lh file, including schema definition, HTML content, and embedded Javascript for dynamic behavior. The example shows how to define metadata, vendor assets, and include client-side scripting. ```lh @schema { "name" : "First Section", "author" : "LayoutHub Team", "website" : "https://www.LayoutHub.com", "version" : "1.0", "vendors" : { "hub_vendor_css": "assets/css/base.css" }, "configs" : {} } @endschema
Your first setting is {{section.settings.first}}
@javascript /* Javascript code in here */ alert('This is demo section'); @endjavascript ``` -------------------------------- ### Section Definition and Logic (.lh) Source: https://docs.layouthub.com/development/reference/create-section Defines the schema, HTML structure, JavaScript event handling, Vue component integration, and SCSS styling for a LayoutHub section. It includes metadata, dynamic content rendering, and interactive elements. ```liquid @schema { "name": "Product single", "author": "Layouthub Team", "website": "https://www.layouthub.com", "version": "2.0", "category": "Product single", "platform": "shopify", "vendors": ["js_swiper_slider","css_layouthub_base"], "dev": "LayoutHub core team" } @endschema ``` ```html

The setting value:

``` ```javascript let $this = jQuery(this); $this.find('.lh-button').click(function(e){ e.preventDefault(); $this.find('.lh-color-red').toggle();//Show hide a element }); ``` ```vue export default { data:{ }, computed: { combined () { return `${this.settings.one} - ${this.settings.two}`; } }, methods: { callme(item) { return 'item name: '+item.name; } } } ``` ```scss .lh-color-red{ color:red; } ``` -------------------------------- ### GetResponse API Key Generation Source: https://docs.layouthub.com/user-guides/integration/getresponse Instructions to obtain your GetResponse API key. This key is essential for authenticating your requests to the GetResponse API. Navigate to the API settings page within your GetResponse account to generate or copy an existing key. ```APIDOC API Key Retrieval: 1. Log in to your GetResponse account. 2. Navigate to https://app.getresponse.com/api. 3. Copy an existing API key or click "Generate API key". ``` -------------------------------- ### LayoutHub Font Picker Schema and HTML Example Source: https://docs.layouthub.com/development/reference/settings.js/font-picker This snippet defines the schema for the Font Picker component and shows how to integrate it into an HTML structure. It includes linking Google Fonts via a stylesheet and applying the selected font to an HTML element using LayoutHub's attribute binding syntax. ```ruby @schema { "name" : "Font Picker", "author" : "LayoutHub", "website" : "https://www.LayoutHub.com" } @endschema

Sample Text

``` -------------------------------- ### Create Product Tab using Heading 4 Source: https://docs.layouthub.com/user-guides/featured-elements/product-page/general This describes the process of creating a specific tab for a product by formatting text within the product description. Any text designated as 'Heading 4' will be converted into a tab, with the content following it becoming the tab's content. It's important that the content does not include disallowed HTML tags like 'div', 'script', or 'main'. ```APIDOC Feature: Product Tab Creation Description: Allows users to create product-specific tabs by formatting text within the product description. Process: 1. Navigate to the product editing section. 2. Select the 'Description' area. 3. Format desired text as 'Heading 4' (e.g., using a UI button or by directly inputting H4 tags). 4. Ensure content within the tab does not contain 'div', 'script', or 'main' tags. 5. Save the product changes. Result: 'Heading 4' text becomes a tab title, and subsequent content forms the tab's body. Limitations: - Disallowed tags: 'div', 'script', 'main'. - Tabs are generated automatically based on H4 formatting. ``` -------------------------------- ### GetResponse Supported Fields Source: https://docs.layouthub.com/user-guides/integration/getresponse Lists the fields that are supported for data transfer when interacting with the GetResponse API. ```APIDOC Supported Fields: - email - first_name - last_name ``` -------------------------------- ### Unless Directive (@unless) Source: https://docs.layouthub.com/development/reference/engine-syntax Provides an example of the @unless directive, which is a convenient shorthand for @if (!condition), allowing for rendering content when a condition is not met. ```markup @unless (section.settings.show_logo == 'yes') Customer don't want to show logo @endunless ``` -------------------------------- ### Product Form Configuration Options Source: https://docs.layouthub.com/user-guides/featured-elements/product-page/general Details the settings available for customizing the product display form, including linking to external affiliate products and controlling the visibility of the 'Buy Now' button. ```APIDOC Product Form Settings: 1. Enable External/Affiliate Product: - Description: Allows linking a product to an external store URL (e.g., Amazon, Alibaba, eBay). - Functionality: Replaces the standard 'Add to Cart' functionality with a link to a specified external URL. - Configuration: Typically a toggle or a field to input the external URL. 2. Enable Buy Now Button: - Description: Controls the visibility of the 'Buy Now' button on product pages. - Functionality: When enabled, a 'Buy Now' button is displayed, allowing customers to bypass the cart and proceed directly to checkout with the selected product. - Configuration: A simple boolean toggle (enable/disable). ``` -------------------------------- ### Switch Case Statements Source: https://docs.layouthub.com/development/reference/liquid-in-section Illustrates the use of switch case statements with @switch, @case, @break, @default, and @endswitch directives for handling multiple conditions based on a variable's value. ```ruby @switch (section.settings.head) @case 'one'

The case one of variable section.settings.head<1> @break @case 'two'

The case two

@break @default

The default

@break @endswitch ``` -------------------------------- ### settings.js - Basic Structure Source: https://docs.layouthub.com/development/reference/settings.js Demonstrates the basic structure for registering setting fields as a JSON array of JavaScript objects. This format allows for custom functions and fields. ```javascript [ {Setting field 01}, {Setting field 02}, {Setting field 03} ] ``` -------------------------------- ### Reusable Component Template (MyComponent.lh) Source: https://docs.layouthub.com/development/reference/create-section A template for a reusable Vue component used within a section. It demonstrates how to display data passed via settings, using Vue's templating syntax. ```vue ``` -------------------------------- ### Liquid Interpolation and Attributes Source: https://docs.layouthub.com/development/reference/liquid-in-section Demonstrates how to print dynamic data using @print() and escaped variables into HTML attributes using @attr(). It shows embedding Liquid variables like shop.name and section settings. ```markup {% assign shop_name = shop.name %}

Hello @print(section.settings.name)! Welcome to the {{ shop.shop_name }}

```