hubble PWA Docs
PWA
Demo
Website
Github
PWA
Demo
Website
Github
  • What is hubble PWA?
    • Overview
    • Techstack
    • Requirements
    • Installation
    • Roadmap
    • Contact
    • Troubleshooting
  • Architecture

    • Shop Connector
    • File-based inheritance
    • Pages
      • Static Routes
      • Dynamic Routes
      • Dynamic Page Structure
        • Default Structures
    • Preinstalled Modules
    • User Session
    • Layouts
    • Components
  • Configuration
  • Theming

    • Default Theme
  • Shopware 6
    • How to set up Shopware 6 to work with hubble PWA
    • Shopware 6 Plugins
    • Shopware 6 Emotionworlds
    • i18n
    • Trade-offs
  • Module Development
    • Contribution Guide PWA
    • Tests
    • Hubble Coding Guidelines for Contributors
    • API Clients

Pages

See the pages on github

hubble PWA Pages

Static Routes

Use the usual nuxt file-based routing to generate the static routes. hubble uses static page routes for the following page types:

  • Checkout Pages
  • Customer Pages
  • Cart
  • Home
  • Search Result Page

Dynamic Routes

If the requested route is not a static route, the dynamic route component /pages/[...slug].vue takes effect. This component fetches the requested route from the API and resolves dynamically to components.

hubble uses dynamic page routes for the following page types:

  • Category / Product Listing
  • Product Detail Page
  • CMS Page

Dynamic Page Structure

The dynamic page resolves dynamic components and assumes the provided data to have a specific format we call the structure.

  • A structure consists of sections
  • sections consists of blocks
  • blocks consists of slots
  • slots display the corresponding data directly or via a reusable component

Default Structures

Platforms like Shopware 6 provide such generic data with their Emotionworlds. In case of your platform doesn't provide structural data for requested pages and only response entities' data, hubble comes with some default structures for the most common page types.

Example for set default structure entity / page type:

if (mappedPage.structure === null) {
    const {
        hblSetDefaultStructures,
        hblGetDefaultStructureByType
    } = hblUseDefaultStructure()
    hblSetDefaultStructures()
    mappedPage.structure = hblGetDefaultStructureByType(mappedPage.type)
}
Prev
File-based inheritance
Next
Preinstalled Modules