Overview

The Frontend Lazy package allow components and/or modules to be load dynamically. This is useful if some parts of your application don't need to be loaded until certain condition is met, avoiding extra page load time.

Import

frontend-lazy is already pre-installed on every Shogun Frontend store. To import:

import lazy from 'frontend-lazy'

Usage

In the example below, the CartPageEmpty component will be imported only when the condition where the cart is empty is met.

import React from 'react'
import lazy from 'frontend-lazy'
import PageWidth from 'Components/PageWidth'
import CartPageItem from 'Components/CartPageItem'
import CartPageFooter from 'Components/CartPageFooter'
import { useCart } from 'frontend-checkout'
import './styles.css'

// import CartPageEmpty from 'Components/CartPageEmpty'
const CartPageEmpty = lazy(() => import('Components/CartPageEmpty'))

const CartPage = () => {
  const [{ items }] = useCart()

  return (
    <PageWidth className="CartPage">
      <h1 className="CartPage-title">Cart</h1>
      {items.length > 0 ? (
        <React.Fragment>
          <div className="CartPage-header">
            <div className="CartPage-header-detail" />
            <div className="CartPage-header-quantity">Quantity</div>
            <div className="CartPage-header-total">Total</div>
          </div>
          <div className="CartPage-items">
            {items.map((item, i) => (
              <CartPageItem key={1} item={item} animationOrderNumber={i + 1} />
            ))}
          </div>
          <CartPageFooter />
        </React.Fragment>
      ) : (
        <CartPageEmpty />
      )}
    </PageWidth>
  )
}
export default CartPage

Examples

ResponsiveBackgroundImage

Video

Best Practices

CMS and Sections