HealthCARE Express

[joer80]

New website design for HealthCARE Express.  Used UIkit3 for the front end look.   Jquery Store locator for the locations page. 

PW Modules used: Hanna code, google map marker, Inputfield Ace Extended, MarkInPageTree, Video embed for YouTube/Vimeo, and an in house asset minification module.

Backend is pretty unique. Basically, I use the processwire templates for UIKit items instead of pages.  ie.  card.php, container.php, section.php. navbar.php, grid.php, slideshow.php.

I also add some extra things like page.php, inner_page_heading.php, image.php, page_snippet.php, text.php. (Page snippet is if I want to run php.)

Most of the root pages in the admin page tree use the page.php template.  Their children are either detail pages or layout rows for that page.  

I also have a blog.php that uses the page.php file, just because that lets me force the children to be blog posts.

The page and blog templates have fields like meta page title, meta page description, selected page layout, css, js, images, files. 

All markup is added through admin as well through things like the selected page layout.

I have one page in my page tree for page layouts and I add children for the markup.  ie.  I can add a "Service" page layout to the backend, and add a "page heading" child, an intro "section" child, a service "grid" child, etc.  You can check out screenshots.  

It basically gives me a page builder! 

The children of the grid page are forced to be cells, and have gui to select the columns and such. 

I have a css field and a js field attached to almost everything.  On page save, if that page has one, it pulls them all and merges them all into one css file and saves it to the server with a timestamp as filename.  That way all php, css, and js code is done through backend.  

 

 

 

Edited August 18, 2018 by joer80
Added demo video

[dragan]

Interesting setup, thanks for sharing.

Do only superusers have access to the PHP snippets? Or regular authors too? If the latter - I would see that as a potential security risk.

[joer80]

I don't have any templates locked down, just one root admin user and one programer on the project.  Graphics designers can go in and swap banners and such so it would probably be good to lock down the php related page snippet templates.

[pwired]

+1 for using UIKit3. Website looks really good. Why did you chose clickdesk instead of an opensource helpdesk chat ?

[joer80]

1 minute ago, pwired said:

+1 for using UIKit3. Website looks really good. Why did you chose clickdesk instead of an opensource helpdesk chat ?

The staff and old website were already using clickdesk.

[joer80]

The HTML Snippet Targets idea I borrowed from the markup regions idea. 

I wanted to be able for any sitewide or page layout snippet to target any major html tag.

One sitewide snippet may target inside bottom of head, and another after body/header/footer tag. 

 

 

 

 

 

[joer80]

How the banner pages work:

Add a slideshow to a page, its children are slides, and those can have layers.

So I set the transition on the slideshow, the background and content animation type on the slide, and the content on a child layer. (Image, text, links etc.)

[pwired]

Quote

Add a slideshow to a page, its children are slides, and those can have layers

Creative use of "everything is a page" is always welcome

[wbmnfktr]

Woah... that's a stunning backend!

[joer80]

2 hours ago, pwired said:

+1 for using UIKit3. Website looks really good. Why did you chose clickdesk instead of an opensource helpdesk chat ?

Have you used any of the open source options that would be a good alternative? 

[pwired]

 

Quote

Have you used any of the open source options that would be a good alternative? 

Yes I have:

https://github.com/LiveHelperChat

[louisstephens]

Just curious, since you are using child pages as uikit elements, how does this effect actual child pages? For example, if you had "Services" built out with the "sections"/child pages, but then you have actual child pages of Services. Does this not get a bit messy?

[joer80]

4 hours ago, louisstephens said:

Just curious, since you are using child pages as uikit elements, how does this effect actual child pages? For example, if you had "Services" built out with the "sections"/child pages, but then you have actual child pages of Services. Does this not get a bit messy?

There are a few ways to do this.

I actually have 2 page layouts per page.  One for the page itself, and one for any child/detail pages it has under it.

You could just force a page layout and add content there and never read children as content items/rows.

Or what I did this time, which let me do both, was to allow people to add a detail page or a /content/ child item to a page.  Anything put in a /content/ child is uikit stuff for that page only.  If you don't add a content child, the only option is adding them to the page layout selected.

The great thing about detail pages is you can still have that "fill out a form" experience when adding content, and still work as a page builder using the page layout page or a child content page as needed for one off things.

One thing I have not looked into is having a page.php for one and page2.php for another.  (To control what the children are used for.)
 

[szabesz]

Great looking site builder, thanks for sharing the screenshots too! Personally I do not like stuffing too much code into the database but a page/site builder can only do that. However, I guess there are loads of folks out there who definitely like to use such setups.

12 hours ago, joer80 said:

Used UIkit3 for the front end look.

Would it be possible for you to share the site specific global LESS/SCSS code? I would love to see how you did it under the hood.

[joer80]

9 hours ago, szabesz said:

Great looking site builder, thanks for sharing the screenshots too! Personally I do not like stuffing too much code into the database but a page/site builder can only do that. However, I guess there are loads of folks out there who definitely like to use such setups.

Would it be possible for you to share the site specific global LESS/SCSS code? I would love to see how you did it under the hood.

Any time I have css, there are 3 main places I can put it. 

There is a "Themes" template that acts as a parent to all themes, and I have the Theme templates under that.   The third is the page itself, which is usually a code snippet or a page layout or page.

The Themes page controls the selected/active theme and holds styles that apply to every theme in its CSS box.  The children are styles that only apply to themselves.  So you could do a red theme, blue theme, etc.

So in that case the navbar css that is not related to color goes to the parent, and all color related css would go to the child.  That way you can change the active child and swap colors, but the child is nothing but color data so it is very easy to edit.  They all get merged into one file on page save.

The third is all page layouts, pages and snippets have css boxes as well, so if you want to add css to just one row, or one page, or one feature, you can do that without adding clutter/bloat to your theme.

So if you add a sitewide snippet of "Thin Top Bar", you can add top bar css to itself so it is portable between websites.  You move that one page and no theme changes are necessary on the new website. 

In fact, every code snippet has the fields for images, files, css, js, php, and html, so the whole feature should be portable between websites without touching the theme unless you want to.

The module has 2 hooks.  One hooks before page save to update the current page css and the other hooks after page save and merges all pages that have css boxes. 

[joer80]

The role of my page.php page is to do this:

Get the themes page and set it as a variable for later use. (Anything can access this page to get the asset timestamp, active theme, etc.)

Set a variable for the selected page layout of the current page, so I know what uikit elements we are adding from that.  If there is not one on the current page, check the parent for a detail page layout.

Get a list of code snippets that target html tags for this page, sorted by priority.  (If they match the page layout, the page, or are sitewide, implement them by adding them to the snippet array.)

By implement, if its a code snippet type, it outputs the html or php using output buffer and adds to the snippet array. 

If its not a code snippet, it is a uikit item and I will start the output buffer also and include the template file directly. 

(I also set a variable for that page to use inside the template before I include it.  (The $page variable gets saved as the template name.)  So if its a section template, I save the $page data as a $section variable. 

In my "section" template, I can access itself with $section, or the root page it is on with $page. 

Inside the section template I can loop through $section children also, setting the children as $cell so the cell.php page can access itself with $cell->x

After the snippet array is built using code snippets and uikit page templates, I loop through the /html/ page and its children.  I pass that page to a render function, and it loops through the html tags listed and puts the snippets where they belong, outputting the result to the page.

This is a delayed outputting format that lets a snippet tweak other snippets if needed, since they are stored in an array before output, and any snippet can target various parts of the page.  ie.  The last snippet loaded can still add to the head section.

 

 

[gmclelland]

@joer80 that's an impressive looking setup.  I've tried reading through this several times, but I'm finding it hard to wrap my brain around everything.  Any way you could put up a quick screencast(or gif) showing how you would edit the homepage and how things can be easily moved or changed?  If not, no worries.  Thank you for sharing how you achieved this!

Another question, what's the reasoning behind having an "Admin Home" and a "Home?"

[joer80]

1 hour ago, gmclelland said:

@joer80 that's an impressive looking setup.  I've tried reading through this several times, but I'm finding it hard to wrap my brain around everything.  Any way you could put up a quick screencast(or gif) showing how you would edit the homepage and how things can be easily moved or changed?  If not, no worries.  Thank you for sharing how you achieved this!

Another question, what's the reasoning behind having an "Admin Home" and a "Home?"

Sure.  I will try to do a screen recording of building a page with a few rows attached.  Do you know of a free web based one I can use?

With the concept of having a page that either has detail pages as children or design rows as children, I didn't want to have pages under pages.

The Navigation page holds all of my navbar container rows, which select the html tag body->header and dump inside that. 

The children of navbar container can be a nav_logo, nav_bar, or nav_item.  (For buttons) . They have alignment and visibility options.

Nav_bar can have nav_links or nav_grid children for mega menus, or you can fill out the selector text box to add a group of pages that is always accurate.

[joer80]

The nav_link template and the button template has options for selecting a page so the link never breaks, a page section, which is just a child row of a page which is typically a section, or a url for external links. 

I also built in code that adds smooth scrolling if you did a section link and you happen to be on the same page already, for one page websites. 

I made this website today as an example that shows that part and an alternate header look.

I also made the external url field used on the button template support hanna codes, so I can use things like [[directions]] or tel:[[phone]] for the button link value.

The map row is just a uikit grid with the collapse option set in the gutter drop down.

https://www.hcederm.com/

[gmclelland]

Thanks joer80!

I use https://monosnap.com/welcome for taking screenshots and making recordings.  What OS are you using?

People on Windows recommend https://www.cockos.com/licecap/ for making gifs.  I'm not sure about a web based recorder?  Maybe somebody will chime in here?

I think on Macs you can also use the builtin Quicktime to record a portion of your screen.

I'm also interested in how you made the tabs that contain columns on https://www.healthcareexpress.us/services/urgent-care/ ?

[gmclelland]

This might help https://css-tricks.com/screen-recording-utilities-for-macos/

[joer80]

It is a little messy since I have not set the template families perfectly yet, and normalized the template name case, but this should give you an idea of how it flows so far.

I add a banner slide to the homepage, add a new basic page, and add a few sections to that basic page.  

The basic page layout is what adds the inner page title row.  That's the only item I have added to that since the nav is marked sitewide. I then add the test content to the page itself under a content item which allows the uikit items.  I could have added it to the page layout, but it would have gone to everything marked as a basic page.

 

[adrian]

17 hours ago, gmclelland said:

People on Windows recommend https://www.cockos.com/licecap/ for making gifs. 

I've been using Licecap on MacOS as well - seems to work pretty well, but honestly haven't investigated what else is out there.

[joer80]

3 hours ago, adrian said:

I've been using Licecap on MacOS as well - seems to work pretty well, but honestly haven't investigated what else is out there.

I ended up using mono snap.  Worked well!  It added an icon to my top bar on my mac and I can do a new recording and start and pause, and it gives me the option to add a small screen to the bottom for my web cam.   I can also do full screen or draw a box to just do part of the screen.

[gmclelland]

Joe, that was very helpful.  Thank you so much...from a fellow Texan(..DFW area)!

I really like how you can use Processwire's page hierarchy to build out your pages with components.

I'm still a little confused on what the difference between "Page Layout" and "Detail Layout" is?

If you set the Page Layout to "Basic Page", does that mean only uikit components can be added as children to the "Content" page below it?

If you set a Detail Page Layout to "Service", does that mean only "Service" type pages can be added as children to this page?

 

I'm also a little confused on the "Page Layouts" in your tree.  I'm assuming that those are for when you want to reuse the same layout with configured components between pages?  For example:  If you created two pages "Company Blog" and "Company News" that both use the "Blog" page layout that is under "Page Layouts" in the page tree? 

Sorry, I know lots of questions... I find this all eye opening and intriguing.  Thanks again