User Defined Content

Bootstrap Studio Help
1

Hi all,

Need a little direction.

We do fairly basic static websites for our clients and Bootstrap Studio is proving fantastic for that. We don’t code. We are not super sophisticated users. Our websites are not hosted with Bootstrap but rather with our own choice of web hosting service.

At present, for each website we build, we write all the content, (product descriptions, a single place in the header where the price of the product shows, etc). What we would love to be able to do is to give our clients the option to input (and change as required) some bullet point descriptions of the product and allow them to change the price as needs be and for it to appear on the live website immediately. (ie: without any involvement from us).

In one particular website, we have used a Google Sheet, embedded in the website, and we give the client access to the Google Sheet and they update content as they please and it shows on the live website immediately. This works for this particular client but it is not elegant. It looks, as you’d imagine, like a Google Sheet embedded in a website rather than it feeling like a natural part of the website.

Can anyone think of a simple method for us to convert the content of a Google Sheet to html that would display naturally on a live, static website, or can anyone think of an alternative method that we could use to allow end users to alter website content in such a way. Whatever the solution, it needs to be relatively simple for us to implement but even more so, easy to explain to an end user.

I did search but couldn’t find any relevant posts. Any help/pointers/ideas greatly appreciated.

1 Like
2

I am not an expert on the subject, but what you’re basically describing is a CMS (content management system.) Traditionally, websites that employ content management systems need to have some “dynamic” ability - meaning the updateable content is generated “on the fly” by code that runs on the server. This code queries a database, and the contents of that database are entered only by users who access to the database via user accounts with logins and passwords. This is the basic description of a content management system.

The most popular and widely used CMS is WordPress. WordPress uses PHP (the server-side programming language) and MySQL (the database) to generate the dynamic content on its websites. The “front end” of a WordPress website is usually built using traditional HTML and CSS. This portion of the website is referred to as “the theme.”

So when we talk about a Bootstrap Studio generated website vs a WordPress generated website, we’re talking about a “static” website, vs a “dynamic” (or database-driven) website.

Other than the recently added Reflow e-commerce feature, Bootstrap Studio does not offer any dynamic features. Your idea of using a Google Sheet embedded in a page to which your customer has access is really not practical (or secure.) You need some sort of CMS running on your static Bootstrap Studio website if you want clients to be able to login and edit dynamically generated content.

Although I have not had any experience using them, there are what are called “flat file” CMS systems which do not use databases, and which can be incorporated into static websites, that I believe would provide a solution to your problem. There are other Forum members who know more about these systems than I do, so I’d wait to see if anyone else replies to your post, but in the interim, you can Google search for “flat file CMS” and you’ll find there are many options available (some free, and many paid.)

Hope this gets you started.

3

Did a quick search and found this

4

Instead of using a google sheet, use a google doc for each page.

Create a page on google docs add your text, then File>Share>Publish to Web

Copy the link in the publish to web dialog box

then in bss add the following js:

 

fetch('<URL to google doc>').then(function (response) {
 	return response.text();
}).then(function (html) {

 	var parser = new DOMParser();
	var doc = parser.parseFromString(html, 'text/html');
 	var content = doc.querySelector('.doc-content').innerHTML;
	 
document.getElementById("showcontent").innerHTML = content;

}).catch(function (err) {
	console.warn('Something went wrong.', err);
});

Create a div with the ID of showcontent where you want the content to show.

Updated code is now here:

1 Like
5

Huge thanks to printninja and richards for your helpful and constructive input. We really appreciate it and we will go and explore the ideas that you have put forward.

6

Nice find. That looks pretty useful and easy to implement. Will give that one a try.

7

I tried jocms out last year, it was quite buggy and had a few security issues. So test on a dummy site.

I might give it another go, see if it has improved

8

Looks like the developer stopped further development due to lack of time… unless someone else picks this up it seems like a dead end. Pity really.

9

Yes, its a shame as it did have potential, I was originally looking for an open-source alternative to cushycms.

10

Not my area of expertise, but there do seem to be quite a few open source flat file CMS’s out there…