Recently Browsing 0 members
- No registered users viewing this page.
Fieldtype Page Table Grid
This is a sneak preview of a side project I've been working on for quite some time now. A lot of work and thought has gone into this, so I will most likely release this as a commercial module at some point in the near future.
As a designer (and developer) I get the appeal of a WYSIWYG editor. After playing around with some WYSIWYG page builder tools, I always felt something was wrong about them. So I decided to build my own PW version based on PageTable.
Here is a small demo (using AdminThemeCanvas, but its working with other admin themes as well) :
There is also a complete website that I built for a friend of mine using this module and some custom blocks.
This fieldtype shares a lot of features with PageTableExtended: it's also an extension of PageTable and renders the block templates in the backend and frontend (native PW templates and fields). You can also add your own css via module settings.
The CSS grid layout manipulations are saved in a single field as a JSON array and used to generate a dynamic stylesheet that you simply include in your main template (no inline styles). The styles are saved within the breakpoint you select and cascade down to smaller breakpoints. That means you can specify just the basic breakpoint and adjust other breakpoints if needed. The exception is the mobile breakpoint which will display everything in one column as a default (you can change the layout here too).
The fieldtype also comes with an optional style panel to manipulate some additional CSS properties directly on the page. You can customize the panel or disable it completely from the module settings (and just use a CSS file that you include via module settings). The style panel is based on inputfields (nothing is saved to the database). This means that you just have to install the module and all fields are available to all blocks automatically (this can be customized). It also has the benefit that your installation is not flooded with fields; this module only installs one field.
Don't want to give your customer all that power? Design features can be disabled for certain roles. The grid editor role can just edit the content and use the inline editing feature to edit content quickly. You can then also grant access individually to the style panel, resize or drag functionality.
Blocks are just pages Blocks are defined by native PW templates and fields Manipulate CSS grid in a visual way to design fully responsive websites (or parts of them) Design features can be disabled for certain roles Inline editing of text, ckeditor and file fields The layout is 100% CSS grid (very small css file size) Simply drag and resize to manipulate grid items directly inside the backend Manipulate grid columns and rows directly on the page (use any number of columns you want) All style manipulations are saved as JSON and used to generate a dynamic stylesheet that you just include in your main template (no inline styles) Nested groups/grids (child pages of nested blocks are created under group parent) Global blocks work with page reference field (changes on one page, changes all blocks on all pages) Manual and auto placement of grid items Define custom icons for your blocks via native template settings (template -> advanced -> icon) Option to load lazysizes in the backend to enable lazy loading of assets with class lazyload Works with all default and ui-kit based admin themes If you have any questions or feedback, let me know.
Chäs & Co is a b2b cheese trader. They love good cheese and are proud of their excellent knowledge und connections to small cheese producers. They maintain a custom made database and used to copy/paste (!) the cheese infos to the former CMS (Contao). Since substituting the database with ProcessWire was no option, they export now the database to a csv file and import it to the new website (expanded version of module ImportPagesCSV).
From there, the pw magic begins. The staff works with the admin interface: They search and find products in notime using the build-in search field (using cheese names or id. Using ids only possible by adding hook, see this forum thread). They generate price lists easily based on a template, providing checkboxes and option buttons for some restrictions, choose i.e. the cheese origin and price audience (all implemented as page selectors). By saving the page a PDF list gets generated (using mpdf, a php pdf library).
The visitors can sort and filter the products using a form by shuffle.js. Product details are shown in a popup (fancybox). There's also the option for generating a nice pdf data sheet. No CSS framework being used.
Other modules used: ProcessJumpLinks, ProcessProMailer, ProcessWireUpgrade.
Visual design: Nicole Haller
First, this is production realestate site, big one. So please, if any chanse to fix this without touching database, it would be great
I have field "pstatus" as a PageReference,
In the tree under Status as children:
sold unavailable paused In the template "property" I have dropdown were I choose: empty (nothing); sold; unavailable or paused. If you do not choose anything, property will have active selling status.
I need help sorting property template in this order: show all empty and than show all sold.
1031 is Status, parent of the sold unavailable and paused.
$status = $pages->get('1031')->children('sort=pstatus'); $selector = "sort=price, pstatus!=$status"; But I got there all except from status. I need to list "sold" too.
On a site that lists events, I am using a repeater field 'event_time', which contains two Inputfield Time fields 'event_time_start' and 'event_time_end'. Some events take place multiple times, others just once. Here's an example for the data structure:
event1 title: First Event event_time (1): event_time_start: 08:00 event_time_end: 09:00 event2 title: Second Event event_time (1): event_time_start: 08:00 event_time_end: 09:00 event_time (2): event_time_start: 14:00 event_time_end: 18:00 event3 title: Third Event event_time (1): event_time_start: 07:00 event_time_end: 09:30 First, I'd like to generate a list of all events, sorted by event_time_start, with every repeater item added as an actual event (similar to a SQL JOIN clause). The desired output would be:
07:00-09:30 Third Event 08:00-09:00 First Event 08:00-09:00 Second Event 14:00-18:00 Second Event A selector like
$pages->find('template=event,event_time.event_time_start!=,sort=event_time.event_time_start'); would only return each event page once:
07:00-09:30 Third Event 08:00-09:00 First Event 08:00-09:00 Second Event without
14:00-18:00 Second Event Is there a possible alteration of the selector to take all different occurrences into account?
Also I'd like to filter for events taking place in the morning, using a selector like:
$pages->find('template=event,event_time.event_time_start>=06:00,event_time.event_time_start<=12:00,sort=event_time.event_time_start'); However, this would only return each 'event' page, which then contains also the afternoon version of event2.
While I have the impression these are rather simple tasks, I struggle finding a selector-based solution to it. In this example on opening times are some similarities, but it does not deal with multiple occurrences. I'd appreciate your ideas to it.