# Installation
1. Add **OctoCart** plugin to a project.
2. Change plugin settings on the configuration page: **/backend/system/settings/update/xeor/octocart/settings**.
3. Create some products: **/backend/xeor/octocart/products**.
4. Create categories: **/backend/xeor/octocart/categories**.
5. Create pages: **Product**, **Category**, **Cart**, **Checkout**, **Success**, **Order**.
6. Add plugin components to a your pages.
#Backend
In the back-end user interface you can manage products, categories and orders.
# Components
Name | Page variable | Description
------------- | ------------- | -------------
Cart | `{% component 'cart' %}` | Show the contents of and process the user's cart
Category List | `{% component 'categories' %}` | Displays a list of categories on the page
Checkout | `{% component 'checkout' %}` | Displays Checkout form on the page
Order | `{% component 'order' %}` | Display a single order
Orders | `{% component 'orders' %}` | Displays a list of orders on the page
Product | `{% component 'product' %}` | Display a single product
Products | `{% component 'products' %}` | Displays a list of products on the page
##Cart Component
**Properties**
Property | Description | Example Value | Default Value
------------- | ------------- | ------------- | -------------
noProductsMessage | No products message | No products found | No products found
**Variables available in templates**
Variable | Description
------------- | -------------
`{{ cartPage }}` | link to cart
`{{ checkoutPage }}` | link to checkout page
`{{ count }}` | quantity of products in the cart
`{{ items }}` | product items
`{{ crossSells }}` | products that you promote in the cart, based on the current product
`{{ noProductsMessage }}` | no products message
`{{ totalPrice }}` | total price
**Example:**
{% if not items is empty %}
{% for itemId, item in items %}
{% set product = item.product %}
{% set quantity = item.quantity %}
{% set price = item.price %}
{% set attributes = item.attributes %}
{% if attributes is not empty %}
{% for name, value in attributes %}
{{ name }}: {{ value }}
{% endfor %}
{% endif %}
{% endfor %}
{% else %}
{{ noProductsMessage }}
{% endif %}
##Categories Component
**Properties**
Property | Description | Example Value | Default Value
------------- | ------------- | ------------- | -------------
Slug | Category slug | :slug | :slug
Display empty categories | Display empty categories | TRUE | FALSE
**Variables available in templates**
Variable | Description
------------- | -------------
`{{ categories }}` | all categories
`{{ categoryPage }}` | category page
`{{ currentCategorySlug }}` | reference to the current category slug
**Example:**
{% for category in categories %}
{% set productCount = category.product_count %}
{{ category.title }}
{% if productCount %}
{{ productCount }}
{% endif %}
{% if category.children.count %}
{% endfor %}
##Checkout Component
**Variables available in templates**
Variable | Description
------------- | -------------
`{{ successPage }}` | link to success page
##Order Component
**Properties**
Property | Description | Example Value | Default Value
------------- | ------------- | ------------- | -------------
ID | Order id | 1 | :id
**Variables available in templates**
Variable | Description
------------- | -------------
`{{ order }}` | order
`{{ items }}` | product items
##Orders Component
**Properties**
Property | Description | Example Value | Default Value
------------- | ------------- | ------------- | -------------
No Orders Message | No Orders Message | No orders found | No orders found
**Variables available in templates**
Variable | Description
------------- | -------------
`{{ orders }}` | orders
`{{ noOrdersMessage }}` | no orders message
**Example:**
{% for order in orders %}
Order №{{ order.id }} - {{ order.created_at|date('M d, Y') }}
{% else %}
-
{% partial __SELF__ ~ "::items"
categories=category.children
currentCategorySlug=currentCategorySlug
%}