06 Setting Up Your Store - ecellar/remote-widgets GitHub Wiki

One of the first things that you will probably want to do after getting the SPA up and running is to start setting up your store.

If you don’t have the SPA running yet, visit our 01 Getting Started page.

For your store, you will need to:

1. Setup products and categories in the ACP. You will want to make sure that product names, images, descriptions, statuses and more are all setup in a way that will present well in your store.

2. Learn how to create URLS for displaying category lists, product lists and product details.

3. Decide on a URL that will act as your store’s “entry point”. You will need to provide that URL to us (eCellar) so that buttons like “Continue Shopping” in various views will automatically go to your store’s main entry point.

4. Decide on which of your own site templates to use as a wrapper for your store.

5. Decide on any customizations that you might want to do for our HTML templates and CSS theme.

The guide below will explain each of these things in some detail.

The SPA provides a set of views that can display products and categories in your store. Each view can be loaded by passing a specific query string to the SPA.

The view names are:

Each of those view names must also be passed a product or category “slug” that the SPA will use to fetch the data that will be used to render the view.

By default, product and category names are used as slugs, but they may be changed to anything via the eCellar Admin Control Panel (ACP).

For complete information about setting up products in the ACP, please see our 02 Prepare Data page.

To create a URL with query string that will load a specific view with a specific slug, follow this format:

https://yoursite/pathRoot?view=viewname&slug=slug

The pathRoot should match what you used in your SPA’s epubOptions.

For example, if your pathRoot is ‘/store/index.html’ and you want to display a list of products for the category slug ‘Chardonnay’, your URL would look like this:

https://<yoursite>/store/index.html?view=products&slug=Chardonnay

If your pathRoot is something like ‘/store/’, your URL should look like this:

https://<yoursite>/store/?view=products&slug=Chardonnay

The same approach works for the other two views.

For example, to display a list of sub categories for a specific category, if the category slug is “White Wines” (with a space), you would do something like this:

https://<yoursite>/store/?view=categories&slug=White%20Wines

(the URL must be encoded: spaces are replaced by ‘%20’)

And to display the detailed view for a product, you would do something like this:

https://<yoursite>/store/?view=product&slug=2015%20Cabernet%20Sauvignon

Note: You will typically only need to be concerned about replacing spaces in slug names if you plan on using a URL for a menu item or other link in your site: otherwise the SPA will automatically handle adding them as your site visitor moves around the store.

If your site is using URL Rewrites, your store URLS will follow the rules described in our URL Rewrites page.

Everything that the SPA renders gets its styling from:

1. CSS inherited from your site.
2. One or more of our HTML templates.
3. Our CSS theme.

If you have been able to get some products and categories to load, you may wonder what control you have over how things look. You have many options for tweaking the layout and styling as-needed.

Primarily, you should focus on the data related to your products and categories: wording and images. You can find a lot of information about that at our 02 Prepare Data page.

After getting at least one product list, one product detail view and, optionally (if your store needs it), one category list working and displaying sufficient data and images from the database, you can start thinking about whether to create any customizations.

For products, you will want at least:

1. A product title (required in the ACP).
2. A product display title (short description for display in product lists)
3. Three different sized images: header, image 1 and thumbnail. The header image is displayed in the product detail view. Image 1 is displayed in product lists and the thumbnail image is used in the cart.
4. Optionally: featured text (acts as a subtitle for a product, may be given a start/end date for display)
5. And for the product detail view: a longer description, optional technical notes, secondary notes, reviews and/or a PDF file for downloading.

In the ACP, you may use HTML for all written content related to a product, except the product name.

For categories, you will want at least:

1. The category name (required in the ACP).
2. A header image (if using the categories view).

Our CSS Theme is designed to be mobile-first, so that everything looks good on small devices. For desktop displays, we have left some of the styling decisions up to you. You may want to put your store’s main SPA element wrapper (<div data-ecp-wrapper="true" class="ecp-wrapper"></div>) in the content area of a page that has a multi-column display when viewed at desktop resolutions. If you don’t, the mobile-first layouts may appear “wider” than you expect.

You may also override any of our CSS, add media queries, etc. We’ve tried to make working with our theme as easy as possible.

See our 07 Themes page.

If you think that a pure-CSS customization will not suit your needs, you may create your own custom html templates.

See our 09 Custom Templates page.