Create custom theme

- First you need to instal demo template of ideas shop plugin, here

*** You may refer to theme footware (go with plugin footware) i created, link:

**Theme footware

** Plugin footware

- Then you create a scratch template, for example, name 'test' :

+ Create folder name 'test' in /themes

+ create file README.md

+ create file theme.yaml in folder 'test' : code example

name: Ideas Shop Template test
description: 'Test template for ideas shop'
author: Ideas Pro
homepage: 'http://ideaspro.net'
code: ''

+ create file version.yaml in folder 'test': code example

1.0.1: First version

- Use some libraries of demo template for template 'test': 

Copy folder 'assets' of template demo : '/themes/ideas_shop/assets' to '/themes/test/assets'

- Copy some partial of demo template to template 'test':

Copy folder 'partials' of template demo : '/themes/ideas_shop/partials/site' to '/themes/test/partials/site'

- Create layout for template 'test' : Create file /themes/test/layouts/default.htm

description = "Default layout"

[Ideas\Shop\Components\Cart Cart]
[RainLab\User\Components\Session Session]
==
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ seo_title }}</title>
    <meta name="description" content="{{ seo_keyword }}">
    <meta name="keywords" content="{{ seo_description }}">
    <meta name="author" content="ideasPro">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="ideaspro">
    <link rel="icon" type="image/png" href="{{ 'assets/images/ideas_shop.png'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/bootstrap/css/bootstrap.min.css'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/font-awesome/css/font-awesome.min.css'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/owl/assets/owl.carousel.min.css'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/owl/assets/owl.theme.default.min.css'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/xzoom/xzoom.css'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/bxslider/jquery.bxslider.min.css'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/select2/css/select2.min.css'|theme }}">
    <link rel="stylesheet" href="{{ 'assets/vendor/star_rating/rating.css'|theme }}">
    <!--<link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">-->
    {% styles %}
</head>
<body>

{% partial 'site/header' %}
<!-- Content -->
{% page %}
<!-- end content -->
{% partial 'site/footer' %}

{% partial 'site/modalConfirmCart' %}


<!-- Scripts -->
<script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
<script src="{{ 'assets/vendor/bootstrap/js/bootstrap.js'|theme }}"></script>
<script src="{{ 'assets/vendor/owl/owl.carousel.min.js'|theme }}"></script>
<script src="{{ 'assets/vendor/xzoom/xzoom.min.js'|theme }}"></script>
<script src="{{ 'assets/vendor/bxslider/jquery.bxslider.min.js'|theme }}"></script>
<script src="{{ 'assets/vendor/select2/js/select2.full.js'|theme }}"></script>
<script src="{{ 'assets/vendor/star_rating/rating.js'|theme }}"></script>
<!--<script src="{{ 'assets/js/theme.js'|theme }}"></script>-->

{% framework extras %}
{% scripts %}

</body>
</html>

=> There some js library for another components (product, cart, checkout, ...) :

+ bootstrap (required)

+ font awesome (required)

+ select2 (required)

+ owl carousel (optional - use for slider in theme)

+ bxslider (optional - use for product detail slider)

+ xzoom (optional - use for product zooming in product detail)

+ star rating (optional - use for review product)

=> notice: layout have to use two component Cart and session:

[Ideas\Shop\Components\Cart Cart]
[RainLab\User\Components\Session Session]

=> to run function add to cart and checkout

 

1. Create scratch home page

- in themes/test/pages , create file home.htm:

title = "Homepage"
url = "/"
layout = "default"
is_hidden = 0

[Ideas\Shop\Components\Theme Theme]
==

=> here, we just load components Theme to display menu top (without css)

 

2. Create scratch product page

- in themes/test/pages , create file product.htm:

url = "/:slug"
layout = "default"

[Ideas\Shop\Components\Product Product]
==

{% if (type == type_category) %}
    {% component 'Product::category' %}
    {% put scripts %}
    <script type="text/javascript" src="/plugins/ideas/shop/assets/components/js/category.js"></script>
    {% endput %}
{% else %}
    {% component 'Product::detail' %}
    {% put scripts %}
    <script type="text/javascript" src="/plugins/ideas/shop/assets/components/js/productDetail.js"></script>
    {% endput %}
{% endif %}


=> here, we create two page : list product and product detail (without css)

 

3. Create scratch cart page

- in themes/test/pages , create file cart.htm:

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

==

{% component 'Cart::cart' %}

 

4. Create checkout page

- in themes/test/pages , create file checkout.htm:

title = "Checkout"
url = "/checkout"
layout = "default"

[Ideas\Shop\Components\Checkout Checkout]
[Ideas\Shop\Components\UserExtend UserExtend]
[Ideas\Shop\Components\AnotherPayment AnotherPayment]

==

{% component 'Checkout::checkout' %}

5. Another component

You can see template demo code to know more detail