I am planning to create a demo site for the theme I am developing.
I like the idea of having a clickable settings button so that users can experiment with the custom options allowed in the theme and wonder if anyone who has done similar might be willing to give some pointers on what it involves?
many thanks
having though a bit about this I can’t think of any good options:
it does not seem possible to reuse the Ghost core custom options functionality since the option selections are made before the handlebars templates are rendered as html (and so effect all users on the site)
… and trying to manipulate the rendered html would mean reimplementing the handlebars options logic in all the templates as javascript.
perhaps I have missed a simple solution, but for now I think I will cheat and just create a few templates with hardcoded combinations of options and let the user pick between them when viewing the demo site.
Any better ideas gratefully received!
in the end I decided to do it like this:
<form><select><option> html with the options in it (this is added to the site content so it can be shown as a pop up window)<body> element based on how the user selects items in the pop-up options modal.most of my custom options already worked on the presence/absence of a class on the body element, so these were handled by the above. Where the custom option was used in the handlebars code to include/exclude specific chunks of html, I use the presence of the relevant <body> class to either display:none or display: blah the relevant section.
It all works fine. With a bit more work it would be possible to automate the creation of the initial javascript object based on package.json, although I am happy to just maintain the options in two places (well, three if you include the handlebars logic).
Hope that helps someone else, and feel free to comment if you have alternative suggestions (I am sure there are other ways to do the same thing!)
