Using WordPress - ecellar/remote-widgets GitHub Wiki

If you are using WordPress for your site and would like to use the WordPress admin UI to add Designer Widgets, please review our 01 Getting Started page and then returning here for tips.

WordPress has a robust 3rd party plugin ecosystem. As a result, there can be many different ways to accomplish any given task. Below you will find one way to add the SPA to your site.

If you have not created a page for the SPA yet, here’s how:

1. Go to the Pages section of the admin area.
2. Click the “Add New” button.
3. Enter a page title (or leave it blank).
4. Make sure that the content area’s “Text” tab is selected.

Add this markup to the content area:

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

As described in 01 Getting Started, these empty @div@’s will get populated with content by the SPA. You may actually put these anywhere that you want on your page, but to get started, let’s just go with this.

Review the rest of your page settings (they may vary based on your WordPress template).

Look for a field to enter a “Slug” for your page. Enter something like “store” there and remember what you entered. It will act as the “root” for this instance of the SPA. You will need to use the same name for the pathRoot in your SPA Initialization Options.

Save your page by clicking the “Publish” button.

You will now need to add:

1. One <link> tag and one <script> tag to the HTML head area of your page.
2. One <script> tag to the bottom of of the HTML body area of your page.

We have found a WordPress plugin that will provide a way for you to do that:

CSS & Javascript Toolbox

The following instructions are for using that plugin.

First, add a code block for the <link> for our default theme:

1. Click the “New Code Block” button.
2. A “Create New Code Block” popup will open.
3. Give it a name like “ecp-theme”.
4. Check the “Activate” checkbox.
5. Select “Header” in the “Location Hook” dropdown.
6. Select “Last Block” in the “Initial Block Position” dropdown.
7. Click the “Create” button.

You will now see a new block on the main page. In the content area, add this:

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

To the right of the content area you will see some tabs. Open the “Page” tab and check the checkbox next to the name of the page that you made for the SPA.

Click the Save button to save the code block.

Now add a code block for your SPA initialization options:

Add a new code block the same way that you added the first code block, but give it a name like “ecp-options”.

In the main content area for the code block, add this:

<script>
  epubOptions = {
    APIKey: '<provided by eCellar>',
    initQueryString: true,
    pathRoot: '/<the WordPress URL Slug for your page>/'
  }
</script>

In the “Page” tab for the block, check the checkbox next to the name of the page that you made for the SPA.

Click the Save button to save the code block.

Lastly, add a code block for the SPA loader script:

This one is a little different than the others, because it has to be told to render code in the body area of your page.

1. Click the “New Code Block” button.
2. A “Create New Code Block” popup will open.
3. Give it a name like “ecp-loader”.
4. Check the “Activate” checkbox.
5. Select “Footer” in the “Location Hook” dropdown.
6. Select “Last Block” in the “Initial Block Position” dropdown.
7. Click the “Create” button.

In the main content area for the code block, add this:

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

In the “Page” tab for the block, check the checkbox next to the name of the page that you made for the SPA.

Click the Save button to save the code block.

You should now be able to go to your page and load one of the views from the SPA.

For example, if your page is at https://<www.yoursite.com>/store/, add ?view=joinlist to the end of that and try loading it. Like this:

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

If that works, great! You’re on your way!

You may now want to visit one of these pages:

01 Getting Started
02 Prepare Data
03 Site Settings
Initialization Options