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<!DOCTYPE html>
 2<html>
 3<head>
 4    {% include 'base/blocks/resources.html'%}
 5    {% include 'base/blocks/default_styles.html'%}
 6    {% block pagehead %}{% endblock %}
 7</head>
 8<body class=" shopyo-main-area">
 9    {% include "base/nav_base.html" %}
10    {% include 'base/blocks/flashed_messages.html'%}
11
12	<div class="container">
13
14	    <br>
15	    {% block content %}{% endblock %}
16	</div>
17</body>
18</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<!DOCTYPE html>
 2<html>
 3    <head>
 4        {% include get_active_front_theme()+'/sections/resources.html'%}
 5        {% include 'base/blocks/flashed_messages.html'%}
 6    </head>
 7<body class="">
 8    {% include get_active_front_theme()+'/sections/nav.html'%}
 9
10<div class="container">
11    <form action="{{url_for('contact.validate_message')}}" method="POST">
12
13        <div class="form-field">
14        {{ form.name.label }} <br>
15        <div class="input-group mb-3">
16            <div class="input-group-prepend">
17                <span class="input-group-text"><i class="fa fa-info"></i></span>
18            </div>
19            {{ form.name }}
20        </div>
21        </div>
22
23        <div class="form-field">
24        {{ form.email.label }} <br>
25        <div class="input-group mb-3">
26            <div class="input-group-prepend">
27                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
28            </div>
29            {{ form.email }}
30        </div>
31        </div>
32
33        <div class="form-field">
34        {{ form.message.label }} <br>
35        <div class="input-group mb-3">
36            <div class="input-group-prepend">
37                <span class="input-group-text"><i class="fa fa-pencil-alt"></i></span>
38            </div>
39            {{ form.message }}
40        </div>
41        </div>
42        <br>
43        <input type="submit" value="Submit" class="btn btn-info">
44        <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
45    </form>
46</div>
47
48
49    {% include get_active_front_theme()+'/sections/footer.html'%}
50</body>
51</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    Used to define global template values
3
4
5    Returns
6    -------
7    dict

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)