Templates

Developing a template

Please see the Modules section on how to structure a module.

Having said that, this is the base file we are extending from.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    {% include 'base/blocks/resources.html'%}
    {% include 'base/blocks/default_styles.html'%}
    {% block pagehead %}{% endblock %}
</head>
<body class=" shopyo-main-area">
    {% include "base/nav_base.html" %}
    {% include 'base/blocks/flashed_messages.html'%}

	<div class="container">

	    <br>
	    {% block content %}{% endblock %}
	</div>
</body>
</html>

It includes:

  • space for user-supplied head (block pagehead)

  • space for user-supplied body (block body)

  • notification mechanism on the top right

Here is the contact form using the base:

 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
    <head>
        {% include get_active_front_theme()+'/sections/resources.html'%}
        {% include 'base/blocks/flashed_messages.html'%}
    </head>
<body class="">
    {% include get_active_front_theme()+'/sections/nav.html'%}

<div class="container">
    <form action="{{url_for('contact.validate_message')}}" method="POST">

        <div class="form-field">
        {{ form.name.label }} <br>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-info"></i></span>
            </div>
            {{ form.name }}
        </div>
        </div>

        <div class="form-field">
        {{ form.email.label }} <br>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
            </div>
            {{ form.email }}
        </div>
        </div>

        <div class="form-field">
        {{ form.message.label }} <br>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-pencil-alt"></i></span>
            </div>
            {{ form.message }}
        </div>
        </div>
        <br>
        <input type="submit" value="Submit" class="btn btn-info">
        <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
    </form>
</div>


    {% include get_active_front_theme()+'/sections/footer.html'%}
</body>
</html>

If you extend the base template, you will be able to use the notification mechanism used for shopyo api

Global values for templates

Global values for templates can be found in shopyoapi/enhance.py in this function

1
2
3
4
5
6
7


def get_active_theme_dir():
    active_theme_dir = os.path.join(
        current_app.config["BASE_DIR"],
        "themes",
        get_setting("ACTIVE_FRONT_THEME"),

Passing parameters to templates

here is a demo on returning template vars:

#
# ...
@module_blueprint.route('/abc')
def somefunc():
    context = {}
    form = PageForm()

    context.update({
        'form':form,
        'module_name': module_name
    })
    return render_template('page/dashboard.html', **context)

yo_render

yo_render simplifies your life

from shopyo.api.templates import yo_render
...
@module_blueprint.route("/render_demo")
def render_demo():
    context = {
        'fruit': 'mango'
    }
    return yo_render('blogus/render_demo.html', context)