Templating — Shopyo documentation

# Templating

## 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)