jploch

Thx for your input! Just to be sure we are on the same page here. Iam talking about the parent page with my grid field, that holds all the childpages, lets call them blocks. So cloning this parent page from the page tree with the copy button, causes all the blocks on the clone to change their page id (need to be unique) and page name, the page title however will not change, so setting the title as the JSON ID will keep the styling information without any need for a comparison of IDs or additional fields. As I understand it, going with ids would need a hook on page add/clone to handle the switch of IDs or all the styling information is lost. Using the title field or a custom field to simply copy the same JSON id to the new page (page clone does this automatically) worked well so far. Iam worried when external pages that already exists in the page tree are added to the page grid field (eg. via api) it would not be a good idea to use the title field here, because it maybe be accidentally changed by the user and lose its connection with the JSON id. Also not sure I was clear, the JSON data lives on the parent page, I only need a way to connect the blocks with the JSON id. Hope that makes sense ?

Hey folks! Just wanted to give you an update on this. Iam close to an alpha release now. I added a lot of features (containers/groups, more styling options, api functions, optional webfonts/google fonts integration, UI improvments etc.) and bug fixes and now it feels quite stable. I still have to do some testing and some UI stuff. Iam really exited to show you the new version soon! ? Before I can post a final release date I have to think a little bit about how the JSON for the styling is saved and make sure that it's solid. I have two approaches and can't decide which one is best. Maybe someone, who used page table (my module uses templates/fields just like page table), can help me figure this out. It works like this: When a new block/page is added to the page table, my module auto generates a title and a name. The title is generated based on the name of the template the page item is using plus the page id. I title could look like this: block_image_5143 This title (with sanitizer) is then used as an ID to save all the styling information for that item/page to my JSON field (it's also used to generate a css class name). The ID has to be unique in the context of the page containing the page table items. I figured I can't use the page id or the page name, because when a page containing a page table grid is cloned, all the items/pages added to the page table get duplicated and change their name and ids, so the clone loses all the styling information. So while it works great with the title field, it has the downside, that when the user changes the title, the connection to the ID/title in the JSON gets lost. So an alternative approach Iam considering now is to add an extra field to every page table item template automatically via api (pupulated on item/page creation), eg. pgrid_id. This field only has superuser access or is completly hidden. While this adds a little more overhead, it may be the better approach. What do you guys think is better?

Gumroad looks very promising! Will take a closer look, that might just be what I need. From what I can see it's even possible to inform the customer of new versions of the module and adding subscriptions for support etc. Sweet!

That seems simple enough, but that would not prevent the use of my module on multiple unregistered domains. Also not sure what you mean with "compare with your database entry at some future date"?

@rick thanks! Seems like there is no easy solution. I would rather like to focus on the module itself, than on the protection of it. Maybe I will use a ready made solution like Easy Digital Downloads, but that seems to be made for wordpress. Is there anything similar that someone has used to sell digital products with licensing?

Hi folks, Iam working on a rather complex pagebuilder module, which took a lot of time to build. Now the module is almost ready and my plan is to release it as a commercial module at some point. This will help me to support the module in the future as well as cover some of the time/costs it took to make it. There will be 3 licenses: - Single website – 3 websites – 10 websites To protect the module from being used without a license, Iam looking for a simple way to generate a license key, that is tied to a domain. It don't has to be the most secure methode. If possible it will work without making a connection to an external server to check the key? I have no experience with this but I picture it may work like this: 1. When the user buys the module, he/she needs to enter a domain, or multiple domains (based on the license). 2. The user can download the module and gets a license key (generated based on the domains entered?) 3. After installing the module in the backend, the user needs to enter the license key 4. The module checks if the url matches the key and grant/denies acess. Another idea might be to use the userAuthSalt stored in the config file of PW to generate the key. But then the key needs to be generated after the module is installed. How would you generate the license key?

Doing a redirect would be an easy solution. As I understand it, Google allows two redirects without a penalty. The only other redirect that could happen is the http to https or www to non-www. There are no subdomains planned, it's a very small website that is unlikely to grow much in the future. Do you think in this case the redirect would be ok?

That will work, exept that the URL for the homepage would be casamani.com and not casamani.com/location-1. Or is there any way around this? Not sure Iam thinking it through.

fixed! ?

Hey folks, currently Iam working on a website for one of my clients and I need some advice on how to approach this in PW. The website is for a company, that offers holiday houses in two locations. The client wants the homepage to show the first location. Normally I just have a home template for the first page, but here the URL should reflect that you are in Location 1. So when you visit the URL casamani.com it should redirect to casamani.com/location-1. Not sure if this makes sense at all. Whould it be bad for SEO and performance reasons to redirect home to the Location-1 page? Another approach would be to render the Location-1 template on the home template or do an include like discussed here. Here is how the tree looks: – Home – Location 1 (Homepage) – Creation – Adventure – Sustainability – Location 2 – Creation – Adventure – Sustainability Thanks for looking into this!

thx! it's working now calling the function like this. Cool! $CssClasses = $modules->get('InputfieldPageGrid')->getCssClasses();

One more question to finally understand php classes a little bit better: If I have this simple class: class PageGridCSS { public $cssClasses = 'test classes'; public function getCssClasses() { return $this->cssClasses; } } How can I call the function getCssClasses from outside the file it is declared in? So far I was able to call it from within the same file only by doing this: $PageGridCSS = new PageGridCSS(); $PageGridCSS->getCssClasses();

@MoritzLost Thanks again! This seems to be the best way to handle it. I will further investigate if it complicates my current setup too much. But I get the benefits now. Hopefully this will help others too. I'm generally ok with making some assumptions in my case, because you can change the CSS stuff inside the backend for each item (and the breakpoints you want) anyway, also its easy enough to overwrite some css rules with plane css/scss. Maybe I provide some api options and helper functions along the way, so this is definitely helpful. Here is a preview of the module I'm developing to give you a little more context:

I'm still a little lost on how to implement my JSON decode method and use WireArray as a representation of my data. My module builds a dynamic stylesheet, based on the JSON file. This dynamic stylesheet is just a php file that the user can include in his/her main template file. The JSON is saved in one field, that live on the page holding all the PageTable items. Since I need the CSS to be rendered in the backend and frontend and I wanted to give the user more freedom on where to include the CSS I thought this is a good approach. Not sure if it's really clever to have this in a separate file instead of my module file. This is my working code I have in the dynamic stylesheet file: <style> <?php namespace ProcessWire; $backend = 0; $p = $this->page; if($isAdmin = $this->page->rootParent->id == 2) { $p = $this->pages->get((int) wire('input')->get('id')); $backend = 1; } $css=''; $settingsArrayPage=json_decode($p->pgrid_settings); if( !(empty($settingsArrayPage))) { foreach($settingsArrayPage->items as $item) { foreach($item->breakpoints as $breakpoint) { if ($backend) { $css.='.breakpoint-'. $breakpoint->name . ' '; } else { $css .= $breakpoint->size . '{ '; } $css .= '.' . $item->cssClass. '{ '; foreach($breakpoint->css as $style=> $val) { $css .= $style . ': ' . $val . '; '; } $css .= ' } '; if (!$backend) { $css .= ' } '; } } } echo $css; } ?> </style> First of all where would you put the WireArray code? Is it better to have this in my module file or in the dynamic stylesheet file? Here is my code so far. class PageGridData extends WireArray { public function getItemKey($item) { // here I would place the JSON decode method from above and return the items? return $item->id; } } Sorry this is a bit outside of my comfortzone ?

@MoritzLost Thank you for the detailed answer! I'm still at a very beginner level with php, all I know about it, I basically learned from using PW and it's api. Doing mainly frontend development, this is the first bigger module I'm building. So I'm still new to how classes work. Now that I have another look at it, what you sad makes a lot of sense. I will try to implement the class approach with my own utility methods. I will also have a look at WireArray, this seems like a nice solution. Thanks again for your help. I might come back at you if I hit another roadblock.

@bernhard Thanks for your examples. It does look simple to create a migration. It would be nice if a non technical person could then easily paste that code into the backend, click a button and everything is imported. Is that possible with your module? I don't want that person to open an editor, that person might not even have access to FTP. With adrians migrator module it's possible to import the code/JSON in the backend and create all the pages, templates and fields in one import. I'm not saying that this is somehow better than how your module works, it just might be better suited for my usecase. Your module clearly has a lot of benefits compared to migrator.

I saw this a while ago, but just had a brief look at it. I will play around with this some more, but this might be even too complicated for my needs. The target group for my module are not only web developers, but also non technical people like designers, experienced editors, or marketers. I need a way for these people to import new blocks as well.

here is another possible structure { "items": [{ "id": "3252", "cssClass": "pgrid-main", "breakpoints": { "base": { "css": { "grid-column-end": "auto", "grid-row-end": "auto", "grid-column-start": "auto", "grid-row-start": "auto", "align-self": "auto", "z-index": "auto", "padding-left": "60px", "padding-right": "60px", "padding-top": "60px", "padding-bottom": "60px", "background-color": "rgb(255, 255, 255)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } }, { "id": "3686", "cssClass": "test_global", "breakpoints": { "base": { "css": { "grid-column-end": "-1", "grid-row-end": "span 1", "grid-column-start": "1", "grid-row-start": "auto", "align-self": "auto", "z-index": "auto", "padding-left": "0px", "padding-right": "0px", "padding-top": "0px", "padding-bottom": "0px", "background-color": "rgba(0, 0, 0, 0)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } }, { "id": "3687", "cssClass": "block_editor-3687", "breakpoints": { "base": { "css": { "grid-column-end": "span 5", "grid-row-end": "span 2", "grid-column-start": "2", "grid-row-start": "2", "align-self": "auto", "z-index": "98", "padding-left": "0px", "padding-right": "0px", "padding-top": "0px", "padding-bottom": "0px", "background-color": "rgb(255, 204, 204)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } }, { "id": "3696", "cssClass": "block_editor-3696", "breakpoints": { "base": { "css": { "grid-column-end": "span 2", "grid-row-end": "span 1", "grid-column-start": "auto", "grid-row-start": "auto", "align-self": "auto", "z-index": "auto", "padding-left": "0px", "padding-right": "0px", "padding-top": "0px", "padding-bottom": "0px", "background-color": "rgba(0, 0, 0, 0)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } }], "breakpointActive": "base", "breakpointActiveSize": "@media (min-width: 576px)" }

@MoritzLost Thanks for your explanation! Helps me to understand this a little bit better. Iam not sure the data will ever be relevant to the user, for now I just use the JSON internally (creating JSON with js and decoding it with PHP). What I meant with "using objects instead of arrays" here is just how I decode the JSON in php: json_decode($jsonString) instead of (json_decode($jsonString, true). This gives me easy access to the items (which are just pages, so I thought it would be nice to be able to access them by page id like the pw api works). To be able to do this I also need to create the JSON structure like in the example above (with JS). Hope that makes sense. Not sure if the cons you listed matter that much in this case. I will think about it. This sounds interesting. Maybe you can provide an example how to extend WireArray?

I just added some new features. – All blocks can be cloned now. Which makes adding content very fast – More options to control access of blocks individually. You can lock editing of blocks completely or disable features such as cloning, styling or content editing for certain roles I was also thinking about the best approach to copy blocks between PW installations or to share them with others. The easiest way I found was to export/import a page, with all the blocks you want added, using adrians migrator module. The export code together with the block template files could be shared with others or imported into existing installations. So this would be an option until we hopefully have something in the core to make migrations work better. An alternative would be to store everything as JSON (including the content) and using something similar to the Mystique Module to let the developer add fields based on config files. That also has the benefit of being able to have the files version controlled. The downside of using the JSON only approach would be inferior searchability of fields. Also making it work with every fieldtype would be a challenge. I'm interested how others feel about this.

cool! but still can someone look at my code and tell me if the JSON structure is fine?

@ukyo Thanks! Your module looks great! However I already have a way to build my JSON based on inputfields, wich is just needed to save some internal css of my module. All the real content is saved in the database with regular pw fields. I would like to keep it that way, but was looking to get some feedback on my JSON structure. Specially I'm not sure if it's valid to have numerical keys (page id)? Everything is working fine, so if it's not bad practise for some reason, I will just keep it that way. Doing it all in JSON (including the content) with your module would have the benefit of being able to transfer the templates to other installations without importing the database and also have it version controlled, right? But the downside is that it's not searchable as well as native fields and also that not all fields are supported?

Hey folks, for a module (a pagebuilder based on PageTable) I need to save some settings as JSON. The values are saved for each page table item (a pw page). It's working well, but I am looking for ways to improve the structure I have. As I'm not that experienced with JSON, maybe someone more experienced can take a look and tell me if my approach is good practice. My goal is to make all the items accessible by page id, without looping over them (using objects instead of arrays): // access from template with pw page var $jsonObject->items->{$page}->cssClass; Her is an example of my JSON structure: { "items": { "3252": { "id": "3252", "cssClass": "pgrid-main", "breakpoints": { "base": { "css": { "grid-column-end": "auto", "grid-row-end": "auto", "grid-column-start": "auto", "grid-row-start": "auto", "align-self": "auto", "z-index": "auto", "padding-left": "60px", "padding-right": "60px", "padding-top": "60px", "padding-bottom": "60px", "background-color": "rgb(255, 255, 255)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } }, "3686": { "id": "3686", "cssClass": "test_global", "breakpoints": { "base": { "css": { "grid-column-end": "-1", "grid-row-end": "span 1", "grid-column-start": "1", "grid-row-start": "auto", "align-self": "auto", "z-index": "auto", "padding-left": "0px", "padding-right": "0px", "padding-top": "0px", "padding-bottom": "0px", "background-color": "rgba(0, 0, 0, 0)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } }, "3687": { "id": "3687", "cssClass": "block_editor-3687", "breakpoints": { "base": { "css": { "grid-column-end": "span 2", "grid-row-end": "span 1", "grid-column-start": "auto", "grid-row-start": "auto", "align-self": "auto", "z-index": "auto", "padding-left": "0px", "padding-right": "0px", "padding-top": "0px", "padding-bottom": "0px", "background-color": "rgba(0, 0, 0, 0)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } }, "3696": { "id": "3696", "cssClass": "block_editor-3696", "breakpoints": { "base": { "css": { "grid-column-end": "span 2", "grid-row-end": "span 1", "grid-column-start": "auto", "grid-row-start": "auto", "align-self": "auto", "z-index": "auto", "padding-left": "0px", "padding-right": "0px", "padding-top": "0px", "padding-bottom": "0px", "background-color": "rgba(0, 0, 0, 0)", "color": "rgb(0, 0, 0)" }, "size": "@media (min-width: 576px)", "name": "base" } } } }, "breakpointActive": "base", "breakpointActiveSize": "@media (min-width: 576px)" }

It's just the regular page editor. You can also combine my fieldtype with other fields on the same page. In my example I was using AdminThemeCanvas, maybe that was a little confusing, it will look more like the regular page edit screen with the default theme.

Hey folks! Iam exited to finally show you a preview of my pagebuilder fieldtype I'm working on for quite some time now. It's based on PageTable and takes a lot of inspiration from PageTableExtended. @MadeMyDay Thanks for your work on PageTableExtended, it helped me a lot in figuring this out! Let me know what you think