https://github.com/ecomclub/ecomplus-store-template

Template specifications for E-Com Plus ecommerce themes
https://github.com/ecomclub/ecomplus-store-template
ecommerce-framework ecommerce-store ecommerce-storefront javascript-library storefront vuejs2
Last synced: 28 days ago
JSON representation
Template specifications for E-Com Plus ecommerce themes
Host: GitHub
URL: https://github.com/ecomclub/ecomplus-store-template
Owner: ecomclub
License: other
Created: 2018-01-24T21:07:29.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2019-02-07T16:28:25.000Z (over 6 years ago)
Last Synced: 2025-06-05T23:41:35.337Z (4 months ago)
Topics: ecommerce-framework, ecommerce-store, ecommerce-storefront, javascript-library, storefront, vuejs2
Language: JavaScript
Homepage: https://developers.e-com.plus/docs/themes/
Size: 278 KB
Stars: 2
Watchers: 1
Forks: 2
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: COPYING.txt
Awesome Lists containing this project

README

          # Storefront theme

## Pages

1. [Storefront theme](./)

2. [Template structure](./structure/)

3. [JavaScript methods API](./methods/)

4. [Implement a search engine](./search/)

## Summary

1. [Introduction](#introduction)

2. [Getting started](#getting-started)

    * [Renderization callback](#renderization-callback)

3. [Guide](#guide)

    * [App main element](#app-main-element)

        * [Specifying store](#specifying-store)

        * [Specifying language](#specifying-language)

    * [Vue instances](#vue-instances)

        * [Store API objects](#store-api-objects)

            * [Object types](#object-types)

            * [Store info sample](#store-info-sample)

            * [Basic product sample](#basic-product-sample)

            * [List of objects](#list-of-objects)

            * [List of categories sample](#list-of-categories-sample)

        * [Search API objects](#search-api-objects)

            * [List items](#list-items)

            * [Products list sample](#products-list-sample)

            * [Search products by keyword](#search-products-by-keyword)

            * [List items from category or brand](#list-items-from-category-or-brand)

            * [List of specific products](#list-of-specific-products)

        * [List products from collection](#list-products-from-collection)

    * [Recommended CSS](#recommended-css)

{% raw %}

# Introduction

This document is intended to list predefined mustache tags,

HTML classes and attributes, and

JavaScript methods

(functions) for layout rendering with

ecomplus-store-render.

**It's possible to use any HTML template for E-Com Plus storefront.**

After reading this documentation, you will be able to customize a theme

(editing some elements only) or start a new theme from scratch.

If you want to create a new theme from scratch, be sure to follow

this template structure.

E-Com Plus storefront uses

Vue.js 2 framework, so

store template specifications follow the

Vue template syntax.

> After reading the docs,

> visit the Wiki

> to make suggestions or contribute with documentation content and examples.

> If you need help, feel free to

> open a new issue.

# Getting started

Your HTML file must include

Vue,

storefront JS SDK

and the

layout renderer app.

You can include storefront "all in one" JS file **(recommended)**:

```html

```

Or import the scripts one by one (not recommended):

```html

```

Then, start the layout rendering with JS below:

```javascript

Ecom.init()

```

The scripts should be loaded after the HTML content of the page,

so you have to put them before `

  

  

  

    Ecom.init()

  

  

`, but it's not a rule, you can use

a `
`, `` or any other:

```html

  

```

### Specifying store

By default, store will be defined in function of the site domain,

but you can also use the attributes `data-store` and `data-id`

with your _Store ID_ and _Store Object ID_ respectively:

```html



```

It's useful if the template is designed for one specific store only,

or if you want to work with multiple stores in the same storefront.

### Specifying language

If you don't want to use the store default language,

you can use the attribute `data-lang`:

```html



```

Use lowercase letters and separate lang of country (if any) by underline,

eg.: `pt_br`, `en_us`, `it`, `es`.

## Vue instances

Each HTML element with class `_ecom-el` will be an

Vue instance.

It represents an object declaration, preceded of a REST API GET request.

Inside `._ecom-el` elements you can use mustache tags and any

Vue template

attributes.

### Store API objects

Store API requests

are rendered from `._ecom-el` elements

with the attributes below:

| Attribute   | Description |

| :---:       | :---: |

| `data-type` | Type of object, with one of [these values](#object-types) |

| `data-id`   | API Object ID, the `_id` of the object you are getting from the API _(optional)_ |

In almost all cases, you will not create an HTML for each object,

for example, you will create only one HTML file for all products,

not one per product.

In these cases it's not possible to specify `data-id` (it's dynamic),

let the element without this attribute,

ID will be defined in function of page URL (slug).

The

instance data

will be an object with `body` property, `body` is the object returned from

Store API,

with the same properties.

#### Object types

Possible values for `data-type`:

| Type          | Object model |

| :---:         | :---: |

| `product`     | [Reference](https://ecomstore.docs.apiary.io/#reference/products/product-object) |

| `brand`       | [Reference](https://ecomstore.docs.apiary.io/#reference/brands/brand-object) |

| `category`    | [Reference](https://ecomstore.docs.apiary.io/#reference/categories/category-object) |

| `collection`  | [Reference](https://ecomstore.docs.apiary.io/#reference/collections/collection-object) |

| `customer`    | [Reference](https://ecomstore.docs.apiary.io/#reference/customers/customer-object) |

| `cart`        | [Reference](https://ecomstore.docs.apiary.io/#reference/carts/cart-object) |

| `order`       | [Reference](https://ecomstore.docs.apiary.io/#reference/orders/order-object) |

| `application` | [Reference](https://ecomstore.docs.apiary.io/#reference/applications/application-object) |

| `store`       | [Reference](https://ecomstore.docs.apiary.io/#reference/stores/store-object) |

#### Store info sample

The example below shows some of the current store information:

```html



  

    

  

   {{ body.name }} 

   {{ body.description }} 



```

In the example above, Vue data (inside mustache tags and `v-*` attributes) have the



properties listed here,

following the store object model, but only with public data.

#### Basic product sample

The example below is a simple implementation of a product page:

```html



  

    

      

        

          

          

        

      

    

    

       {{ name() }} 

    

    

      

        {{ body.currency_symbol }}

         {{ formatMoney(body.price) }} 

         {{ formatMoney(body.base_price) }} 

      

      

        {{ body.currency_symbol }}  {{ formatMoney(price()) }} 

      

    

    

       Buy 

       Out of stock 

    

    

      {{ body.body_html }}

    

  



```

If you are creating the HTML file for a specific product only,

or embedding one product inside a custom page, you must set `data-id`

with the product ID:

```html



```

Vue data (inside mustache tags and `v-*` attributes) follows this

object reference.

Note that you can use similar code for other types of objects (API resources).

#### List of objects

It's possible to render a list of Store API

categories,

brands or

collections,

to do that, you must add the attribute `data-list-all` to the `._ecom-el` element.

This is available only for elements with one of following `data-type`:

| Type          | Object model |

| :---:         | :---: |

| `brand`       | [Reference](https://ecomstore.docs.apiary.io/#reference/brands/all-brands) |

| `category`    | [Reference](https://ecomstore.docs.apiary.io/#reference/categories/all-categories) |

| `collection`  | [Reference](https://ecomstore.docs.apiary.io/#reference/collections/all-collections) |

#### List of categories sample

The example below is a simple implementation of a list of categories,

up to 1000 objects, with random order,

using Vue list:

```html



  

    

      {{ category.name }}

    

  



```

##### Sort list alphabetically

By default, the objects are randomly ordered on the list,

if you want alphabetical order, you can use the `alphabeticalSort` pre-built method:

```html



```

### Search API objects

Search API requests

are rendered from `._ecom-el` elements

with the `data-type` equal to `items` or `terms`,

and other attributes depending of search case.

The

Vue instance data

will be an object with `body` property, `body` is the object returned from

Search API,

with the same properties.

#### List items

To list products, `data-type` must be equal to `items`.

You can get more info and example of returned object from

API reference.

The `._ecom-el` element must also have the following attributes:

| Attribute         | Description |

| :---:             | :---: |

| `data-type`       | Equal to `items` |

| `data-term`       | Searched keyword _(optional)_ |

| `data-from`       | Results offset number _(optional)_ |

| `data-size`       | Maximum number of results _(optional)_ |

| `data-sort`       | Results ordering, one of [these enumered values](#sort-items-search-result) _(optional)_ |

| `data-ids`        | Filter by specific products IDs separated by `,` _(optional)_ |

| `data-brands`     | Filter by list of brands IDs separated by `,` _(optional)_ |

| `data-categories` | Filter by list of categories IDs separated by `,` _(optional)_ |

| `data-price-min`  | Filter by minimum price _(optional)_ |

| `data-price-max`  | Filter by maximum price _(optional)_ |

| `data-spec-*`     | Filter by product specification _(optional)_ |

#### Products list sample

The example below is a simple implementation of a list of trending products,

using Vue list:

```html



  

    

      

        

      

      

         {{ name(item) }} 

      

      

        

          {{ item.currency_symbol }}

           {{ formatMoney(item.price) }} 

           {{ formatMoney(item.base_price) }} 

        

        

          {{ item.currency_symbol }}

           {{ formatMoney(price(item)) }} 

        

      

      

         Buy 

         Out of stock 

      

    

  



```

It's possible to specify the maximum number of listed items with `data-size`,

the example below will list up to 12 most popular items:

```html



```

For pagination, you should use data-from (offset) together with data-size (limit).

The example below will list up to 12 items, starting from the 24º,

so, from 24º to 36º:

```html



```

##### Sort items search result

By default, items will be ordered by popularity (number of page views),

but you can use custom sort with `data-sort` attribute:

```html



```

It must have one of the number values below:

| Enum | Description |

| :--: | :---: |

| `1`  | Sort by sales, products that sells more appear first |

| `2`  | Sort by price ascending, products with lowest price appear first |

| `3`  | Sort by price descending, products with highest price appear first |

| `4`  | Sort by creation date, new products appear first |

#### Search products by keyword

To find products searching by name and/or keywords, you can use `data-term`:

```html



```

Here

you can check an complete example of store search engine implementation.

#### Filter items by specifications

It's possible to filter the resultant items list by product specs,

adding attributes of type `data-spec-*`, where the wildcard must be replaced

by the specification (property name):

```html



```

#### List items from category or brand

To list products from specific categories you should use

`data-categories` attribute.

Following example will list items from one category only, but you can

specify more than one by separating categories IDs with `,` (comma):

```html



```

Similar to categories, you can list products from specific brands using

`data-brands` attribute:

```html



```

#### List of specific products

You can also list specific items using the `data-ids` attribute, where

you should put the IDs of respective products separated by comma:

```html



```

Note that you can combine the attributes from all above

search and list examples to fit your needs.

### List products from collection

To list products of a collection you have to use both

[Store API](#store-api-objects) and [Search API](#search-api-objects).

The notation is such as the example below:

```html



  

     {{ body.name }} 

  

  

    

      

        

          

        

        

           {{ name(item) }} 

        

         SKU: {{ item.sku }} 

        

          

            {{ item.currency_symbol }}

             {{ formatMoney(item.price) }} 

             {{ formatMoney(item.base_price) }} 

          

          

            {{ item.currency_symbol }}

             {{ formatMoney(price(item)) }} 

          

        

         Buy 

         Out of stock 

      

    

  



```

In these cases you must use `data-type` and `data-id` as expected

for a [Store API object](#store-api-objects).

You also have to use the attribute `data-list` with

value `products`, by doing this, you will be listing the

collection products by IDs such as a [Search API object](#search-api-objects).

In addition, you can use the other

[attributes for a Search API items list](#list-items),

such as the `data-size` used in the above example.

## Recommended CSS

After the renderization of each `._ecom-el` element,

the class `rendered` is automatically added, to hide the non-rendered elements

we recommend to use the following styles:

```css

._ecom-el {

  opacity: 0;

}

._ecom-el.rendered {

  opacity: 1;

}

```

If you want to use fade effect:

```css

._ecom-el {

  opacity: 0;

}

._ecom-el.rendered {

  opacity: 1;

  animation: fadein 1s;

  -moz-animation: fadein 1s;

  -webkit-animation: fadein 1s;

  -o-animation: fadein 1s;

}

@keyframes fadein {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

/* Firefox */

@-moz-keyframes fadein {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

/* Safari and Chrome */

@-webkit-keyframes fadein {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

/* Opera */

@-o-keyframes fadein {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

```

Of course you can change the animation time from 1s to what you want.

{% endraw %}
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/ecomclub/ecomplus-store-template

Awesome Lists containing this project

README

{{ body.name }}

{{ name() }}

{{ name(item) }}

{{ body.name }}

{{ name(item) }}
