DOCSEARCHbyAlgolia
Submit Docs

LessJS Component Library

website·Indexed 38 days ago

https://lessjs.shoplazza.com/

A comprehensive collection of UI components for e-commerce storefronts, featuring specialized tools such as spz-product-form for variant handling, spz-search for intelligent product discovery, spz-variants for product options, and spz-order-detail for order management. The library includes a wide range of utility components like spz-countdown, spz-pagination, spz-carousel, and spz-render for data fetching and display.

Tokens
54.7K
Snippets
278
Records
407
Agent score
49%

What's inside LessJS

  1. Overview of Lessjs performance features

    Lessjs is a high-performance frontend component library based on Web Components. It achieves near-instant page loads through several core strategies:

    • Web Components: Builds powerful sites without requiring additional heavy JavaScript frameworks.
    • Reduced Style Recalculation: Uses a specialized layout system to help browsers infer element sizes more efficiently.
    • Resource Prioritization: Controls download priority, loading resources only for components currently within the viewport.
    • Asynchronous Execution: JavaScript within components is designed to be non-blocking.
    • Deferred Execution: Employs an event-based loading mechanism where component code executes only when actually needed.

  2. Overview of spz-action action listener

    spz-action is a logic-layer component used to monitor internal actions dispatched by other components. When a specified action is triggered, it calls a method on a target element. It is particularly useful for:

    • Synchronizing state changes from one component to multiple target elements.
    • Reacting to internal component events (e.g., a carousel slide change) to update other UI elements.
    • Isolating action listeners to specific DOM regions using scopes to avoid interference when multiple components of the same type exist on a page.

  3. Overview of spz-gallery component

    The spz-gallery component is an interactive stacked gallery used to display multiple content panels within a limited space. It is ideal for product details, image galleries, or information displays where users need to browse items one by one by clicking to expand them.

  4. Overview of spz-3d-carousel

    The spz-3d-carousel component is used to display multiple slides with a 3D parallax effect. It highlights the center slide while shrinking the surrounding slides to create a sense of spatial depth. It supports touch/mouse dragging, autoplay, and responsive layouts.

  5. Overview of Lessjs

    Lessjs is a frontend component library designed for building high-performance pages. It is developed based on Web Components and provides a variety of ready-to-use components such as carousels, videos, and waterfall layouts to improve user interface development efficiency.

  6. Overview of spz-animation

    The spz-animation component is a CSS-class driven animation controller. It allows developers to trigger CSS animations on target elements based on various events such as visibility (entering the viewport), scrolling, clicking, mouse movement, or manual method calls.

  7. Overview of the SPZCore global object

    The SPZCore object is mounted on the window object and is available globally. It provides a centralized set of utilities for layout definitions, DOM operations, and type validation.

  8. Overview of spz-observer

    The spz-observer component monitors specific conditions and automatically triggers corresponding events when those conditions are met. It is typically used with layout="logic" or layout="container".
    <spz-observer layout="logic" ...></spz-observer>

  9. Overview of spz-data-source component

    spz-data-source is a general-purpose data source component used to pull data such as products, albums (collections), and recently viewed items, providing this data to child components for rendering. It is typically used when you need to centrally manage data sources for components like spz-render, display specific product lists, or nest multiple data sources where a child source reads entries from a parent source.

  10. Overview of spz-ec Smart Express Checkout

    The spz-ec component provides a Smart Express Checkout experience by using backend algorithms to recommend a single optimal payment channel. It supports automatic fallback to the next best channel if the primary one is unavailable. It is typically used on product detail pages or cart pages/drawers to provide quick payment entry points.

  11. Overview of spz-state state management

    The spz-state component provides a way to persist page states (such as 'favorites' or 'read' markers) across page refreshes and synchronize state between multiple components. It supports storage in either localStorage or sessionStorage.

  12. Use spz-script for asynchronous JavaScript logic

    The spz-script component is used to implement special logic or data processing using JavaScript. By default, scripts are executed asynchronously within a Web Worker to prevent blocking the page load. Note that the script content size is limited to 15KB.