OctoberCMS Get Theme Settings data in Api/Web service - api

I have created an OctoberCMS theme which works very well. And i have my current and activated theme.yaml like this.
theme.yaml
name: 5P Group
description: '5P Group OctoberCMS theme. A client website that contains preconfigured pages for static pages, a blog and client area..'
author: Technobrave
homepage: 'http://technobrave.com/'
code: ''
form:
fields:
site_logo:
label: Site Logo
comment: The website logo as it should appear on the front-end
type: fileupload
mode: image
imageHeight: 32
imageWidth: 443
As you can see i have added a Site Logo label through which admin can upload a logo and i will show it up front, which is working fine as i am able to show logo at front area like this.
menu.htm
{% if this.theme.site_logo %}
<img src="{{ this.theme.site_logo.path }}" width="100%" height="auto"/>
{% else %}
<img src="{{ 'assets/images/logo.png'|theme }}" width="100%" height="auto"/>
{% endif %}
But the thing is i am also creating an api and i want to do the same thing in that api. This is what i am trying.
routes.php
use System\Classes\SettingsManager;
/* API to get Website Logo Dynamically Starts */
Route::post('/getWebsiteLogo', function ()
{
$settings = Settings::instance();
print_r($settings);
});
/* API to get Website Logo Dynamically Ends */
But i am having an error saying
Class 'Settings' not found
Can someone guide me or suggest me how can i accomplish the same thing, or say how to get the dynamic website logo in one of my apis ?
Thanks

Ok guys, thanks for your support .. eventually i have worked around like this.
routes.php
<?php
use Cms\Classes\ComponentBase;
use RainLab\Pages\Classes\Router;
use Cms\Classes\Theme;
/* API to get Website Logo Dynamically Starts */
Route::post('/getWebsiteLogo', function ()
{
$theme = Theme::getActiveTheme();
$logo_url = '';
if($theme->site_logo['attributes']['disk_name'])
{
echo $theme->site_logo->path;
}
}
?>
Thanks for help and support. Highly appreciated.

Related

Headless CMS and static pages? Content updates?

I am trying to use my first Headless CMS and I've tried both Prismic.io and Contentful.
For instance, this is the code from Contentful guide:
asyncData({ env }) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
content_type: env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
])
.then(([entries, posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],
posts: posts.items
}
})
.catch(console.error)
}
This works fine and I am able to fetch my blog posts in
<article v-for="post in posts" :key="post">
<h2>{{ post.fields.title }}</h2>
<p>{{ post.fields.content }}</p>
</article>
However, if I generate static pages with Nuxt, I understood the page will still load the latest version of the content from Contentful when live, while instead it just keeps the static content fetched on the pages when generated.
Am I missing the main point here?
Thanks
What you discovered is correct. Nuxt in its current version makes requests to the contentful API when new navigations occur. Afaik there are plans to write the data to disk during build time (e.g. Gatsby does it like that) but these are not implemented yet.
Personally, I'm running my private blog on exactly this tech stack and there is a small time window where static pages and the dynamically loaded part are different. This wasn't a bit problem for me so far. I can understand though that this could cause troubles.

Big Commerce: Insert Homepage Carousel on another page

I'm looking to add the homepage slider to a different page. So what I did was create a page called 'Homepage', set it as the homepage, and call a custom snippet so that I can use the {{{page.content}}} from that page on the homepage.
Problem is, when doing that, the carousel does not work when calling this:
{{#if carousel.slides.length}}
{{> components/carousel}}
{{/if}}
It seems that it doesn't see the carousel.slides.length.
Any ideas? Thanks!
After some more research, I figured it out.
You can use YAML / Front Matter
https://stencil.bigcommerce.com/docs/using-yaml-front-matter#syntax
in my page.html file, I added this to the top:
{{# if page.title "==" 'Homepage'}}
---
carousel: true
products:
featured:
limit: {{theme_settings.homepage-show-featured-products}}
new:
limit: {{theme_settings.homepage-show-new-products}}
---
{{/if}}
What that achieves is when the Homepage page loads, it puts that at the top which adds carousel functionality.

Adding Dynamic Account Links to homepage

I'm looking to add (what I call, might go by another name) Dynamic Account Links to my website, so when the user is logged out, the link would say "Sign In" and then "Sign Out" when the user is logged in.
I figured I'd put the Register link on the Sign In page.
I'm using Adobe Business Catalyst.
I've found related questions on here but they all seem to relate to Ruby and Magento.
Could anyone shed some light on this matter?
Many thanks.
If you have Liquid Markup enabled, you can serve just the correct html like this:
{% if globals.user.isLoggedIn -%}
...Sign Out link...
{% else -%}
...Sign In link...
{% endif -%}
Without Liquid Markup, you'll need to get CSS involved:
<div class="visible-iff-true--{module_isloggedin}">
...Sign Out link...
</div>
<div class="visible-iff-false--{module_isloggedin}">
...Sign In link...
</div>
.visible-iff-true--0,
.visible-iff-false--1 {
display: none;
}
.visible-iff-true--1,
.visible-iff-false--0 {
display: block;
}

$(...).tabs is not a function

I have this code on two pages on my site, but at one page the function doesn't work. Firebug shows me " $(...).tabs is not a function ". I don't understand why, can anyone tell me what is wrong ?
this is working:
http://www.invat-online.net/variante-rezolvate
this is not working:
http://www.invat-online.net/variante-explicate-limba-romana/varianta-01
Here is the code:
<div id="tabss">
<ul>
<li>Subiect I</li>
<li>Subiect II</li>
<li>Subiect III</li>
</ul>
<div id="SubiectI">content here</div>
<div id="SubiectII">content here</div>
<div id="SubiectIII">content here</div>
</div>
$(document).ready(function() {
$("#tabss").tabs();
});
You have relative paths to javascript files:
javascript/jquery-ui-1.9.2.custom.min.js
change them to absolute paths because you're using mod_rewrite module
/javascript/jquery-ui-1.9.2.custom.min.js
In first link the server is looking to the directory
http://www.invat-online.net/javascript/my_js_file.js (which exists)
but in the second one the path will be
http://www.invat-online.net/variante-explicate-limba-romana/javascript/my_js_file.js which do not exists
In my case:
I was using
jquery-ui-1.10.3.minimal.min.js
instead of
jquery-ui-1.10.3.custom.min.js
minimal version does not include ui.tabs.js, hence no ui.tabs function. Hope this helps someone else out there
The issue is that the jQuery UI js and css is not loading.
Try changing the path in you <script> tags to either the directory above ../javascript or the website root /javascript.
<script src="/javascript/head.min.js"></script>
<script src="/javascript/jquery-ui-1.9.2.custom.min.js"></script>
<link href="/stylesheets/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />
Your first demo loads:
http://www.invat-online.net/javascript/jquery-ui-1.9.2.custom.min.js
Your second demo attempts to load:
http://www.invat-online.net/variante-explicate-limba-romana/javascript/jquery-ui-1.9.2.custom.min.js
The last one results in a 404. You should correct the path of the later, perhaps instructing it to find jQuery UI in one directory above the current: ../jquery-ui-1.9.2.custom.min.js.
Try this:
#section scripts{
$(document).ready(function() {
$("#tabss").tabs();
});
}
Put #Scripts.Render("~/bundles/jqueryui") in the <body></body> of your layout.cshtml
The error Uncaught TypeError: $(...).tabs is not a function may also be produced when in a Django project on the Admin area and using django-tabbed-admin under the following setup:
Django = 1.10.5
django-tabbed-admin=1.0.4
DEFAULT_JQUERY_UI_JS = 'tabbed_admin/js/jquery-ui-1.11.4.min.js'
The problem is that the code in jquery-ui-1.11.4.min.js for this Django lib is as follows:
/*! jQuery UI - v1.11.4 - 2015-07-27
(...)*/
jQuery = jQuery || django.jQuery.noConflict(false);
and the code on django-tabbed-admin uses it this way (change_form.html):
<script type="text/javascript">
(function($) {
$(window).scrollTop()
$('#tabs').tabs({
{% if add %}
// when adding, don't select a tab by default, we'll do it ourselves
// by finding the first available tab.
selected: -1
{% endif %}
});
(....)
})(django.jQuery);
</script>
<!-- end admin_tabs stuff -->
To sort this out this should be what would be passed in to the IIFE instead of the (django.jQuery) as above:
<script type="text/javascript">
(function($) {
(....)
})((typeof window.jQuery == 'undefined' && typeof window.django != 'undefined')
? django.jQuery
: jQuery)
</script>
<!-- end admin_tabs stuff -->
I've reported this issue in the project and created a PR with a fix for it. Waiting on it to be approved, so in the meantime you can sort it following my simple fix.
I hope this helps someone out there.
Check your page you might have loaded multiple versions of jQuery
I had the same problem, I realized that I had jquery and bootstrap css imports that enter in conflict each other. Take a look to the ones you have imported and reduce those imports to the minimum to see which is the conflict.
Here there is an example of how to implement it, I took that example and worked, then I adapted to my application:
for jquery 1.9 (click on view source to see the code)
http://jqueryui.com/tabs/
for jquery 1.8 (check the example at the end of the page)
http://api.jqueryui.com/1.8/tabs/
Hope it helps!

DRY for displaying meteor templates for different urls

I am having trouble setting up a simple website with different webpages and staying DRY.
I have everything set up so I the last fragment of the url is the name of the template that needs to be loaded in the content part of the webpage. All I want to do now is load that template in a specific location based on the url.
In any examples, they do this:
{{#if showCreateDialog}}
{{> createDialog}}
{{/if}}
{{#if showInviteDialog}}
{{> inviteDialog}}
{{/if}}
I'd like to do something along the lines of
{{> {{template_name}} }}
Sadly, that doesnt work. I tried this as well:
{{{content}}}
Template.content.content = function () {
var url_frag = Session.get("url_frag");
return Template[url_frag]();
}
This didnt work either. Please help!
Edit:
hmm. perhaps, my error is not in loading the template but in capturing the url:
var TodosRouter = Backbone.Router.extend({
routes: {
"*url": "main"
},
main: function (url) {
Session.set("url", url.split('/'))
}
});
The error I am getting arises when url_frag is undefined...
var url_frag = Session.get("url_frag");
initially, this works, but upon changing webpages, it fails...
Solved. I just left backbone out of it
Template.content.content = function () {
var url = window.location.pathname.split('/');
var url_frag = url.pop()
return Template[url_frag]();
Then in the html:
<template name="content">
{{{content}}}
</template>
You could also try the router smart package at atmosphere, which also supports complex routes and filters.
https://atmosphere.meteor.com/package/router
Install meteorite using npm install -g meteorite
Install router using mrt add router
Add {{renderPage}} to body
Tada! /login now renders {{> login}}
Read the document here: https://github.com/tmeasday/meteor-router