# Theme setup

Once the plugin is installed and configured, follow the steps below to set up your theme.

TIP

You can take a look at the official demo theme on how to set up a theme. You can even use it as a base for your own custom theme.

# Layout

# mallDependencies

The mallDependencies component includes all required frontend assets.

The component should be placed on each layout that provides shop functionality.

Make sure to include it inside the <head> tag.



 








description = "Default Layout"

[mallDependencies]
==
<!DOCTYPE html>
<html>
<head>    
    {% component 'mallDependencies' %}
</head>
...
1
2
3
4
5
6
7
8
9
10

# session

RainLab.Users's session component should be placed on every layout that provides shop functionality. This makes sure the user remains logged in while browsing your store.



 




description = "Default Layout"

[mallDependencies]
[session]
==
<!DOCTYPE html>
1
2
3
4
5
6

# Scripts

Make sure to include the scripts tag in your layout. All JavaScript code will be injected where the placeholder is.

...
{% scripts %}
</body>
</html>
1
2
3
4

# Framework extras

oc-mall's components require October's AJAX framework to work. Make sure to include the framework either by using one of the Combiner aliases or the {% framework extras %} tag.

...
{% framework extras %}
</body>
</html>
1
2
3
4

# Static pages menu

If you are using the RainLab.Pages plugin, you can add the All mall shop categories entry to your navigation.

This will render a tree of all available categories in your theme.

# Pages

In this section you can find a minimal demo implementation of each CMS page oc-mall needs.

You are free to change them as you wish. Just make sure to keep the required url parameters.

TIP

To get started quickly simply copy and paste the markup to the respective cms page file.

# product.htm

The product page displays a single product using the Product component.

title = "Product"
url = "/product/:slug/:variant?"
layout = "default"

[product]
product = ":slug"
variant = ":slug"
==
{% component 'product' %}
1
2
3
4
5
6
7
8
9

# category.htm

The category page displays all products in a category using the Products component. The products can be filtered using the ProductsFilter component.

title = "Category"
url = "/category/:slug*"
layout = "default"
is_hidden = 0

[products]
category = ":slug"
setPageTitle = 1
includeVariants = 1
includeChildren = 1
perPage = 9

[productsFilter]
category = ":slug"
showPriceFilter = 1
==
<div class="container">
    <div class="row">
        <div class="col-12 col-md-4">
            {% component 'productsFilter' %}
        </div>
        <div class="col-12 col-md-8">
            <h2>{{ products.category.name }}</h2>
            {% component 'products' %}
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# cart.htm

The cart displays the cart to the user using the Cart component.

title = "Cart"
url = "/cart"
layout = "default"
is_hidden = 0

[cart]
showTaxes = 0
==
{% component 'cart' %}

{% if cart.products.count > 0 %}
    <a href="{{ 'checkout' | page }}" class="btn">
        Begin checkout
    </a>
{% endif %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# checkout.htm

The checkout page hosts the complete checkout process.

title = "Checkout"
url = "/checkout/:step?"
layout = "default"
is_hidden = 0

[signUp]
[checkout]
step = "{{ :step }}"
==
{% if not user %}
    {% component 'signUp' %}
{% else %}
    {% component 'checkout' %}
{% endif %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# myaccount.htm

The my account page displays an account overview to the user using the myAccount component.

title = "Account"
url = "/account/:page?"
layout = "default"
is_hidden = 0

[session]
security = "user"
redirect = "login"

[myAccount]
page = "{{ :page }}"
==
{% component 'myAccount' %}
1
2
3
4
5
6
7
8
9
10
11
12
13

# address.htm

The address page displays an edit form for a user's address using the AddressForm component.

title = "Address"
url = "/address/:address?/:redirect?/:set?"
layout = "default"
is_hidden = 0

[session]
security = "user"
redirect = "home"

[addressForm]
address = "{{ :address }}"
redirect = "{{ :redirect }}"
set = "{{ :set }}"
==
{% component 'addressForm' %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# login.htm

The login form displays a signup form for unregistered users using the signUp component.

title = "Login"
url = "/login"
layout = "default"
is_hidden = 0

[signUp]
redirect = "/account"
==
{% component 'signUp' %}
1
2
3
4
5
6
7
8
9

# Take a look around

At this point your shop is configured and set up correctly.

TIP

Run php artisan mall:check again to make sure there are no problems left.

TIP

In case you missed it: You can seed the shop with demo data. Visit the Installation Page to find out more.

If you don't have a navigation in your theme yet, simply visit some of these URLs to get a first impression of your new online store.

INFO

The following URLs only work if you copied the default URL structure. Adapt the links to your custom URLs if you made any changes.

  • http://example.test/category/bikes
  • http://example.test/product/cruiser-1500
  • http://example.test/login
  • http://example.test/cart