Static store pages

Static store page endpoints allow you to generate an HTML snapshot of Ecwid store home page or specific category/product pages.

You can use that snapshot to display a lightweight starting page for the site visitors, while loading a full-functioning Ecwid store in background. This significantly speeds up store loading.

How to use static snapshots

  • When a visitor opens your store page, request a prerendered version of the home page from storefront.ecwid.com endpoint.
  • In response, you will get a link to the CSS file and the HTML code of the rendered store home page
  • Display the prerendered version right away so that the visitor can see your store Home page and featured products
  • Start loading Ecwid product browser in a hidden div on the same page, so you will have two blocks: static storefront and dynamic storefront
  • Include JS file that will handle all clicks and replace the HTML snapshot with a regular storefront when needed

Example

See it in action and see source code here: https://d35z3p2poghz10.cloudfront.net/apps/ecwid-static-pages/examples/static-page-demo.htm

Hints and best practices

Preload the store home page HTML snapshot in advance. For example, when a visitor opens the site home page (before they navigate to the store page). This way, the store home page will apear instantly.

See Loading speed for more info.

Limitations

Public applications and customizations may not work on the snapshot version of store pages. For heavily customized stores it make sense to disable prerendering and always display regular Ecwid storefront.

The examples above should be considered as alpha version. We will make the JS code cleaner in the future so it will be easier to handle snapshot/storefront switch in real usecases.

Instruction

You can insert the static version of the storefront into your pages in the specified div container, and automatically load the dynamic version of the storefront in the adjacent div container in the background.

After the full loading of the dynamic version, an automatic substitution of statics for dynamics takes place. Replacement is automatic if the flag is set:

ec.storefront.staticPages.autoSwitchStaticToDynamicWhenReady = true;

This is implemented through the Ecwid Storefront SDK: https://djqizrxa6f10j.cloudfront.net/ec-sdk/storefront/2.1.0/storefront.js

Default auto-switch flow.

  1. Send a GET request to get the CSS, HTML and JS files of your home, category or product page.
  2. Use these files to display a static snapshot of your store. Here's an example of the HTML page with static snapshot:
<html lang="en-EN">
	<head>
		<script type='text/javascript' src='https://djqizrxa6f10j.cloudfront.net/ec-sdk/storefront/2.1.0/storefront.js'></script>
	</head>

    <body>
        <script data-cfasync="false" data-no-optimize="1" type="text/javascript">
            ec.storefront.staticPages.staticStorefrontEnabled = true;
            ec.storefront.staticPages.staticContainerID = 'static-ec-store-container';
            ec.storefront.staticPages.dynamicContainerID = 'dynamic-ec-store-container';
            ec.storefront.staticPages.autoSwitchStaticToDynamicWhenReady = true;
        </script>

        <div id="dynamic-ec-store-container">
            <div>
			  <script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?<store_id>&data_platform=code&data_date=2021-12-29" charset="utf-8"></script>
			  <script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list");</script>
            </div>
        </div>

        <div id="static-ec-store-container" >
            <CSS file here>

            <HTML file here>

            <JS file here>
        </div>
    </body>
</html>

New lazy auto-switch flow.

Recently we've released the lazy loading mechanism, that aims to improve the website score.
In order for the new mechanism to work, you need to load the new version of Ecwid Storefront SDK (the old mechanism also remained unchanged):

https://djqizrxa6f10j.cloudfront.net/ec-sdk/storefront/2.0.0/storefront.js

or its minified version:

https://djqizrxa6f10j.cloudfront.net/ec-sdk/storefront/2.0.0/storefront.min.js

Then, make just a few small changes of the HTML code of the page where the storefront is embedded:

  1. Remove the automatic loading https://app.ecwid.com/script.js and xProductBrowser(...) initialization from the <div id="dynamic-ec-store-container">.
  2. Add <div id="dynamic-ec-store"></div> to the <div id="dynamic-ec-store-container">. At this point, it should look like this:
<div id="dynamic-ec-store-container">
		<div id="dynamic-ec-store"></div>
</div>
  1. Add new variable ec.storefront.staticPages.lazyLoading;:
ec.storefront.staticPages.lazyLoading = {
		scriptJsLink: 'https://app.ecwid.com/script.js?<?=$store?>&data_platform=code&data_date=2021-12-29',
		xProductBrowserArguments: ["categoriesPerRow=3", "views=grid(20,3) list(60) table(60)", "categoryView=grid", "searchView=list", "id=dynamic-ec-store"]
}
  1. Add a check for hashes and automatic forced loading of dynamics (dynamics will be loaded automatically if necessary):
<script>
        window.ec.storefront.staticPages.forceDynamicLoadingIfRequired();
</script>

Once you make all the necessary changes, the page should look like this:

<html lang="en-EN">
	<head>
        <script type='text/javascript' src='https://djqizrxa6f10j.cloudfront.net/ec-sdk/storefront/2.0.0/storefront.min.js'></script>
	</head>

    <body>
        <script data-cfasync="false" data-no-optimize="1" type="text/javascript">
            ec.storefront.staticPages.staticStorefrontEnabled = true;
            ec.storefront.staticPages.staticContainerID = 'static-ec-store-container';
            ec.storefront.staticPages.dynamicContainerID = 'dynamic-ec-store-container';
            ec.storefront.staticPages.autoSwitchStaticToDynamicWhenReady = true;
            ec.storefront.staticPages.lazyLoading = {
		          scriptJsLink: 'https://app.ecwid.com/script.js?<?=$store?>&data_platform=code&data_date=2021-12-29',
		          xProductBrowserArguments: ["categoriesPerRow=3", "views=grid(20,3) list(60) table(60)", "categoryView=grid", "searchView=list", "id=dynamic-ec-store"]
            }
       </script>

        <div id="dynamic-ec-store-container">
	        	<div id="dynamic-ec-store"></div>
        </div>

        <div id="static-ec-store-container" >
            <CSS file here>

            <HTML file here>

            <JS file here>
        </div>

	<script>
	        window.ec.storefront.staticPages.forceDynamicLoadingIfRequired();
	</script>
    </body>
</html>