This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

Johnathan Heath
Johnathan Heath

Hi, currently I'm trying to turn a navbar partial into a snippet and have certain buttons or etc be editable via front-end without much effort and I've set up the snippet and posted it to the content section of my homepage. The pages plugin itself detects the tables I have set up on the partial and the values, but when I try to access them using {{ varName }} it doesn't work the values of the property don't display and I get 0 errors in console. I have tested the snippet itself to see if it does not work by manually setting it in the code itself with {{ varName|default('value') }} and that works fine. I am using menu items along side the snippets but they won't interact in any way aside from being part of the same navbar. I'm unsure if I'm missing something I have been messing around with this for a few days. I'm new to October CMS so I do apologize if I've missed something really small.

My viewbag/snippet code is as follows:


[viewBag]
snippetCode = "navbar"
snippetName = "NavBar"
snippetProperties[telNumber][title] = "varName"
snippetProperties[telNumber][type] = "string"
snippetProperties[telNumber][default] = ""
snippetProperties[telNumber][options][] = ""
snippetProperties[bookLink][title] = "varName"
snippetProperties[bookLink][type] = "string"
snippetProperties[bookLink][default] = ""
snippetProperties[bookLink][options][] = ""
snippetProperties[bookText][title] = "varName"
snippetProperties[bookText][type] = "string"
snippetProperties[bookText][default] = ""
snippetProperties[bookText][options][] = ""

Last updated

mjauvin
mjauvin

Can you post code of what you're trying to do?

Johnathan Heath
Johnathan Heath

mjauvin said:

Can you post code of what you're trying to do?

I can for some of it. This is the partial navbar.htm that I'm turning into a snippet and I'm unsure if I'm calling the navbar/variables correctly as I'm unable to get the vars to display where as the navbar I'm calling as a partial still.


[viewBag]
snippetCode = "navright"
snippetName = "NavBar"
snippetProperties[telNumber][title] = "Call Number"
snippetProperties[telNumber][type] = "string"
snippetProperties[telNumber][default] = ""
snippetProperties[telNumber][options][] = ""
snippetProperties[bookLink][title] = "Bookings Link"
snippetProperties[bookLink][type] = "string"
snippetProperties[bookLink][default] = ""
snippetProperties[bookLink][options][] = ""
snippetProperties[bookText][title] = "Bookings Text"
snippetProperties[bookText][type] = "string"
snippetProperties[bookText][default] = ""
snippetProperties[bookText][options][] = ""

[staticMenu navMain]
code = "navMain"

[staticMenu mobileMenu]
code = "mobile-menu"
==
<?php
function onStart(){
    $menuItems = $this->controller->findComponentByName('navMain')->menuItems();
    $menuItems = $this->controller->findComponentByName('mobileMenu')->menuItems();
}
?>
==
<div class="navbar-container fixed-top">
    <nav class="navbar navbar-expand-lg ">
        <a class="navbar-brand" href="/" aria-label=""><i class="ch-logo-small ch"></i><i class="ch ch-logo-large"></i></a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon" aria-label="Menu">
                <span class="icon-bar top"></span>
                <span class="icon-bar middle"></span>
                <span class="icon-bar bottom"></span>
            </span>

            <span class="icon-label">MENU</span>
        </button>

        <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
            <ul class="navbar-nav">
                {% for item in navMain.menuItems %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% if this.page.id != 'home' %}/{% endif %}{{ item.url }}" aria-label="Go to {{ item.title }}">{{ item.title }}</a>
                    </li>
                {% endfor %}

                {% for item in mobileMenu.menuItems %}
                    <li class="nav-item mobile">
                        <a class="nav-link" href="{{ item.url }}" aria-label="{{ item.title }}">{{ item.title }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="navbar-right">
            <ul class="navbar-nav mr-0">
                <li class="nav-item navbar-tel-mobile">
                    <a href={{ telNumber }}><i class="fa fa-phone"></i></a>
                </li>
                <li class="nav-item nav-cta">
                    <a href="{{ bookLink }}" target="_blank" id="navbar-cta" class="btn btn-main hvr-sweep-to-right" aria-label="{{ bookText }}">{{ bookText }}<i class="ch ch-arrow-alt"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</div>

Last updated

Johnathan Heath
Johnathan Heath

Please overlook the poor coding skills.. still got so much to learn haha. I do appreciate the help!

JenniferLopez
JenniferLopez

@Johnathan Could you post up the code of the static page for the particular page that you inserted the snippet into - it should be in the theme folder under content/static-pages. You can strip out any surrounding content if it's proprietary.

Johnathan Heath
Johnathan Heath

BennoThommo said:

@Johnathan Could you post up the code of the static page for the particular page that you inserted the snippet into - it should be in the theme folder under content/static-pages. You can strip out any surrounding content if it's proprietary.

@BennoThommo Will do so now. Had to remove a large chunk of it. Will post the home-template now as well.


[viewBag]
title = "home"
url = "/"
layout = "home-template"
is_hidden = 0
navigation_hidden = 0
==
<figure data-inspector-id="inspectorid-768904444834" data-property-address="test1" data-property-call="test2" data-property-email="test" data-snippet="footer3">&nbsp;</figure>

Last updated

Johnathan Heath
Johnathan Heath

This is the home-template.htm file in my layouts. For brevity I also removed most of the body so you could see the two sections I'm using which include the header and footer.


[staticPage]
useContent = 1
default = 0
==
<?php
function onInit()
{
    $themePath = 'themes/' . $this->theme->getDirName();
    $this->layout['styles'] = url(mix('assets/css/styles.css', $themePath));
    $this->layout['scripts'] = url(mix('assets/js/scripts.js', $themePath));
}
?>
==
    </head>
    <body>
        <!-- Navigation -->
        {% partial 'site/nav' %}

        <!-- Footer -->
        <footer id="layout-footer">
            {% partial 'site/footer' %}
        </footer>

        <!-- Scripts -->
        <script src="{{ this.layout.scripts }}"></script>
        {% framework extras %}
        {% scripts %}        
    </body>
</html>

Last updated

1-7 of 7

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.