Jump to content
joer80

Medical Practice Success Medical Billing Company

Recommended Posts

Frontend built in UIkit 3.  Backend is a modified version of what I did for HealthCARE Express.  

I am using the top level pages to hold information only, so no design rows as children.  Children are always sub pages.  The page builder area is under a settings page that has children for things like the navigation menus, and themes.  (The themes hold the page layouts, color schemes and uikit and theme components.)

Here is a video showing adding an intro section to a basic page. (Basic page has an inner page heading row already added.) . Instead of adding a text item, I could have added a code item and echoed text tied to the basic page.  I may also make a hook for auto creating the layout page to save that step, and add a link on the front end for adding new rows without needing to visit the backend settings area.

I put menus under settings so you can design the top menus, main menu, and footer column menus from one spot, and every widget that reads them gets set at one time.  You can also control if they open in the same or new windows, and add off site links this way.  I just feel like depending on only hidden and non hidden root pages is not enough.   Also, an incoming theme can default to reading a menu named a certain way.  Menus are primarily set via selector, so you do not need to edit it them every time you add a service for example, like if you wanted to have a service menu in wordpress.

So if I do a page template for a Service, there can still be a rich text box and image field for that service attached to the page template, so there is no way for someone to mess up the design just to edit, and to reduce confusion, but if you want to use the page builder to add rows, you can dig into that settings page and edit the rows for the page.  I also have front end editing turned on so you can double click almost anything to edit, and added a small drop down at the top right of the page that loops through all rows on your page so you have a shortcut to edit just that row from the backend.

The page builder rows are matched by path. ie. /about/ would match /settings/themes/selectedtheme/bypage/about/ and might match /settings/themes/selectedtheme/bytemplate/basic-page/ also, if the about page was a basic page template.  Everything will match the sitewide folder.   This type of thing lets you do things like add a call to action on a group of pages by adding that row to the template instead of the page. Or add a css file or javascript file to a group or sitewide.

The layouts template holds the layout types, like per page or per template, and layout types can have children like sections, containers, grids, cells, images, text, accordions, php or html code, etc.  I have also played with doing a page group layout type so you can group a few pages together and add a row or code snippet to those as well.

This output method does not require php eval.  I actually just start an output buffer and include. That gets added to a snippet array variable that I can sort and edit until the very end when it is time to output. The first level in the array is 8 slots that works as placeholders, and then each of those 8 slots holds the rows or code snippets for that placeholder.  ie. before html, head, body-top, body-header, body-main, body-footer, body-bottom, after html are the default placements code can target. 

The second level also has weights. In addition to targeting a placeholder, a section will also have a priority drop down of highest, high, medium, low, lowest.  That way a bottom call to action can be tied to the body-main spot as low priority, and no matter if it is added to the template, page group, page or sitewide, it will always sink to the bottom.

Plugins used: Inputfield Ace Extended, MarkInPageTree, Breadcrumb Dropdowns, Prev/Next Tabs (for switch from row to row), Hanna Code

The page builder has almost all of UIkit added so you can add a grid to a section and set the child width by drop downs, or you can use drop downs to set them on the child cell pages individually.  The cell pages would allow you to add heading, text, images, accordions, etc.   

If you add a text item to a cell for example, the first tab is content for the rich text editor, and the second tab is design for things like text alignment per device. (So you can say center on mobile or left align on desktop without writing any code!) . The advanced tab holds an id over ride, extra classes box, and a javascript and css box that will minify on page save and be included into your website.  This allows any item to add advanced css or js in a portable way.   

I will attach some screenshots!

https://www.medpracticesuccess.com/

Screen Shot 2019-04-22 at 9.00.51 AM.png

 

Screen Shot 2019-04-22 at 9.12.53 AM.png

 

Screen Shot 2019-04-22 at 9.12.37 AM.png

 

Screen Shot 2019-04-22 at 9.12.17 AM.png

 

Screen Shot 2019-04-22 at 9.06.52 AM.png

 

Screen Shot 2019-04-22 at 9.05.37 AM.png

 

Screen Shot 2019-04-22 at 9.05.13 AM.png

 

Screen Shot 2019-04-22 at 9.05.04 AM.png

 

Screen Shot 2019-04-22 at 9.04.32 AM.png

 

Screen Shot 2019-04-22 at 9.04.04 AM.png

 

Screen Shot 2019-04-22 at 9.03.36 AM.png

 

Screen Shot 2019-04-22 at 9.03.05 AM.png

 

Screen Shot 2019-04-22 at 9.02.16 AM.png

 

Screen Shot 2019-04-22 at 9.01.08 AM.png

 

Screen Shot 2019-04-22 at 9.47.52 AM.png

 

Screen Shot 2019-04-22 at 9.48.09 AM.png

 

Screen Shot 2019-04-22 at 9.55.37 AM.png

 

Screen Shot 2019-04-22 at 9.55.47 AM.png

 

Screen Shot 2019-04-22 at 9.59.50 AM.png

  • Like 8

Share this post


Link to post
Share on other sites

I have background color, gradient and background image groups on design templates like sections.  (This website used for page headings and footers also.)

The entire website was designed within processwire.  I only have one physical template file and everything runs through that. (It pulls the sitewide, template, and page rows designed from backend.  Supports parent and child themes.)

 

Screen Shot 2019-04-22 at 10.52.00 AM.png

Screen Shot 2019-04-22 at 10.55.25 AM.png

  • Like 2

Share this post


Link to post
Share on other sites

Yet another great example of the power of processwire! I was curious, since you have one template file, how do you handle all the "blocks", though conditional statements? I really like this approach and actually was working on something similar, but tbh, I kinda got lost in all of my conditional logic.

Share this post


Link to post
Share on other sites

I have one selector that pulls all children of the different layout type pages in one query using "or groups", and I just loop through the results. 

Each item will have itself for the data side but the items template file is not really used for logic or html.  The magic is I load a component file for the logic and html bones.

So when a child section is loaded, say an intro section, the variable is saved as $section, and I check for the existence of the section component.  If there I include it, if not I make it and include it.   ie.   $filename = '../assets/cache/PHP/component_' . $snippet->template . '.php';

If not there you can get that templates component file and make the file like this: template=component,name=' . $snippet->template.

When you edit the component via ace php text editor, you clear the cache/php/ folder.  That way no extra database work is needed, it just includes the file with the proper path like processwire would a normal template file.  The difference is instead of all of my template files being in processwire folder and needing to be uploaded, I can sort them into folders like uikit or template, and organize them and version control them and never upload.  An example of a theme component may be a page heading, php snippet, footer, header, blurbs, etc.

This also has the advantage of almost never needing to sync code changes between servers in a load balanced environment.  All php code is in the database and saved into cached files that can be cleared or rebuilt at any time if a new instance spins up.  I do need to sync assets like uploaded files and images though.

So the section template has the fields, but the section component has the logic and html.

 

Screen Shot 2019-04-22 at 1.26.19 PM.png

Screen Shot 2019-04-22 at 1.27.01 PM.png

Screen Shot 2019-04-22 at 1.26.32 PM.png

  • Like 1

Share this post


Link to post
Share on other sites

Another advantage of storing the template code in the database is you can attach all php/html, js, css, and images/files, into the one page so it is completely portable.  

So you could import a component page into your theme folder, and everything that is needed is there. And to uninstall you just delete the one page.

  • Like 3

Share this post


Link to post
Share on other sites

I had an edit button that edits the page you are on, but I am playing with just making it highlight all of the sections on the page and make an edit button for that section.  See this video. 

I don't like how it doesnt give you live preview though, so I am playing with vue to do this.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...