04 SPA Quick Launch - ecellar/remote-widgets GitHub Wiki

Overview

If you are able to directly edit the HTML files (or templates) of your site or are already familiar with Designer Widgets, here’s a quick launch guide for setting up the SPA.

For detailed information, see our 01 Getting Started page.

For more advanced examples, see our 05 Initialization Examples page.

Create a page for the SPA

Add a page to your site at the URL that you would like to use as the “root” for the SPA. For example:

/store/index.html

Include all of your site’s usual trimmings (header, footer, sidebar, etc), and leave the main content area empty: views from the SPA will be loaded there.

Add these to the HTML <head> section of the page:

<link rel="stylesheet" type="text/css" href="https://cdn.ecellar-rw.com/1/css/ecp-theme.css"/>

<script>
    epubOptions = {
      APIKey: '<given to you by eCellar>',
      initQueryString: true,
      pathRoot: '<path to your new page>'
    }
  </script>

Add these somewhere in the <body> section of the page:

<div data-ecp-minicart></div>
<div data-ecp-wrapper="true" class="ecp-wrapper"></div>

Add this at the end of the <body> section of the page:

<script src="https://cdn.ecellar-rw.com/js/loader.js"></script>

Save your page.

Test It

We used initQueryString: true in the epubOptions. That instructs the SPA to load views based on a query string passed to your page with a view parameter and value.

Add ?view=joinlist to the full URL for your page and navigate to it in a browser.

For example:

https://<www.yoursite.com>/store/index.html?view=joinlist

If the SPA is working, you will see:

- a small bit of cart information
- a form for joining the mailing list

If you don’t see those…

Check your epubOptions:

1. The value for APIKey should match what eCellar has provided for you, in quotes.
2. The value for initQueryString should be true with no quotes around it.
3. The value for pathRoot should match the path to your page.

Check your divs: make sure that they are copies of the ones above.

Make sure that the last <script> tag is after all of the divs.

To learn more

You may find these of value:

01 Getting Started
02 Prepare Data
03 Site Settings
Initialization Options
Using WordPress
Using SquareSpace

If you still have questions, visit the eCellar Designer Widgets Forum.