Jonathan Lahijani

As a former (well, still current WP developer due to certain clients), I can tell you that your search is in fact over.

Hi Felix, I remember giving Masonry a shot, but at the time, I think I hit some sort of limitation that I believe now really isn't a limitation. I'm going to give Isotope another look however now that the dust has settled on this site. I'm also probably going to swap out the Blueimp Gallery with Slick Carousel. Horst... thanks for pointing that out. Jonathan

Nicely done. One little recommendation I have on the frontend is to utilize Slick Carousel instead of Bootstrap's carousel. It's much more powerful and has touch support, among many other features. I will eventually be switching some carousels I've done in the past to it. Zurb Foundation also recommends it now instead of their built in carousel (Orbit Slider, which is being deprecated). - Jonathan

I recently created an ecommerce website, iBuildMacs, that I built with ProcessWire. Given that there's been quite a bit activity on combining ecommerce with ProcessWire, I feel many people would be interested in the approach I took. Feel free to visit it at: http://ibuildmacs.com/ The requirements for this site were: a computer configurator, much like the Apple website; example product page here cart checkout payment methods: paypal or check/cash shipping methods: the cost of shipping is based on a fixed cost that is related to the country being shipped. no live quotes The requirements did NOT include: tax rules inventory management coupons, gift certificates different product types: simple products, variable products, digital/downloadable products, etc. user accounts, address management a fancy ajax driven checkout So, I had a bit of flexibility for this site given the specific feature set. I then thought about how I wanted to develop the site. The options I considered included: WooCommerce: I've built several intricate websites with WooCommerce, the most recent being caviar.com. It was good fit that website, but for iBuildMacs, which has less requirements and a very unique product configurator, which WooCommerce could do but with a tremendous amount of overrides and working backward, I decided this wouldn't but the right fit. Plus, I'm trying to become as WordPress-free as possible. FoxyCart: A ProcessWire favorite, however I wanted to challenge myself a little bit with this site, and also keep things under one roof. Magento, Shopify, (insert some specific heavy or cloud-based ecommerce system you like): No. Overkill and making a product configurator would be a pain. After considering my options, I felt just rolling it entirely with ProcessWire and programming the catalog, payment methods, shipping methods and checkout tailored to the site's specific needs was the way to go. This would definitely reduce the time and headache needed in bending anyone of the above systems I mentioned to behave exactly the way I wanted it to. Products This was one of the complicated parts of the website, but ProcessWire, with its infintely flexible custom fields, made this a breeze. I have a product template (product.php). It has some general fields like Title, Body, Image and Base Price. It also has a PageTable field called Features. These features are child pages of the product and use feature template (feature.php), so the Features PageTable field just grabs its data from there. Then, the feature template has some general fields like Title, Body, Image and PageTable field called Feature Options. These feature options are child pages of the feature template using the feature option template (feature_option.php). So, what I ended up having is a 3 level deep structure, with two nested PageTable fields. Here's a video of what it looks like, which is quite slick is very easy to manage: https://vid.me/kjDW Cart When a user adds a configured product to their cart, it must be stored somehow and I thought of a variety of ways to do this. Ultimately, I decided that cart data is handled as a page (using the order.php template) undernearth /orders/. This order.php template has a page name that is based on the session id of the user, so it'll remain unique and not cause a conflict with other people's carts (as well as obscure from people trying to guess it's url, which is used for the order confirmation page). One of the fields in this order.php template is called "products_ordered", which utilizes the Table fieldtype (a Profields table). Video: https://vid.me/MIRl Checkout The checkout is a straight forward form with the basic questions. However, the shipping section is where it gets tricky. The requirements for this site were that each computer has a fixed shipping price depending on the method being used to ship. The shipping methods available to a customer are dependent on their country. I think WooCommerce could manage rules like that, but directly coding it wasn't that difficult. I create an array that stored the 2 payment methods, and another array that stored the 6 total shipping methods. I also have an array for all the countries. I then wrote some JavaScript that managed the relationships between the country chosen and the shipping methods available for the chosen country. When choosing a method, it will update the Shipping cost line item on the car to the right. Just basic JavaScript going on here. All nice and on one page. When the submit button is pressed, it will run through some logic and validate all the data and save it to the same page that stored the cart data. An order confirmation email is sent to the customer, and one is also sent to the admin (SwiftMailer). If Check/Cash was chosen, the user is then simply forwarded to the order confirmation page, which is at /orders/whatever-their-page-name-was-saved-as/. The email they are sent also has a link referencing this page. If PayPal was chosen, a URI is built and the user is taken to PayPal complete payment with PayPal Payments Standard using the Cart Upload command. Documentation here. After they complete Payment on PayPal, they are then taken to the order confirmation page as described previously. Video: https://vid.me/hwfB I will eventually be using ListerPro for a nicer admin orders list display and build a few custom actions to allow administrators to quickly send general emails from the system (like, when the order is shipped). Modules Used Admin Template Columns: http://modules.processwire.com/modules/admin-template-columns/ Markup Simple Navigation: http://modules.processwire.com/modules/markup-simple-navigation/ Maintenance Mode: http://modules.processwire.com/modules/maintenance-mode/ Batcher: http://modules.processwire.com/modules/process-batcher/ Form Builder (for the contact form only): https://processwire.com/talk/store/category/2-form-builder/ Swift Mailer: http://modules.processwire.com/modules/wire-mail-swift-mailer/ PageTable field type ProFields Table: https://processwire.com/talk/store/category/7-profields/ ListerPro (eventually): https://processwire.com/talk/store/category/9-listerpro/ Enjoy!

Hey all, I launched this website a few weeks ago: http://www.archsf.com/ It was deceptively simple looking at a first glance of the mockups, however this project turned out to be very challenging and ProcessWire really shined, as it always does. The main template being used on the site is the Project Category template. Here's the "Residental" page, which is powered by that template: http://www.archsf.com/project-categories/residential/ As you can see, if you're on a large screen, there are 5 blocks across (1 callout + 4 projects). I'm using Zurb Foundation (the Grunt/Libsass version, which rocks), however like most CSS frameworks, there isn't an even 5 column structure, so I had to take care of that manually. Then, add in the fact that the website is full browser width, which presents a whole host of width/height manipulation that must be done. All the project thumbnails are the same size, but that first callout is text-based so it's height must calculated based of the height of one of the project thumbnails. But of course, the thumbnails themselves are dynamic in height depending on the browser width. And, you can only get the height of the images once they are loaded in (which is easy thanks to the imagesLoaded plugin). Now, if you look at the next row, it's not 5 easy blocks across, but rather 2 blocks, then a big block that takes up 2 block spaces, then another regular size block. I went through some different approaches to handle that situation, and what I ended up doing is hardcoding a the layout so that specific blocks would appear in specific places. It's not a masonry / nicely floated structure! Then, let's not forget this is a responsive site. So, for the phone-sized breakpoint, there's actually another repeated layout of all the project thumbnails, but it's set to hidden unless viewing that breakpoint (which will hide the other breakpoints). That breakpoint has 2 blocks across, with the occasional 1 block featured project. There is also the tablet-sized breakpoint, which has 4 blocks across. This approach, from a code point of view, is a bit ugly in that content is being repeated on a page, however this was a necessary decision I had to make in order for the complicated layout structure to work. It didn't seem to affect the search engine indexing of the site however. Also, each project thumbnail also has different image sizes based on the breakpoint being viewed. ProcessWire makes creating thumbnails on the fly so easy, which is a huge plus (especially compared to WordPress). Oh, while administrators have the ability to create projects, they sometimes wanted the ability to have a project assigned 2+ times for a page. Now, having them create a repeat project would be inefficient, so I created another template type called 'duplicate_project' which allows a custom title and thumbnail, but then has a dropdown field that makes the duplicate project act as the main project. As for the lightbox that appears when clicking on a project thumbnail. An ajax request is made to the project template file, which returns a JSON object containing the lightbox image data for Blueimp Gallery, which is the lightbox being used (not Foundation's Clearing Lightbox, which I find very annoying!). It works well, except aligning the bottom-left caption (and bottom-right "Project Information" toggle) was an huge exercise in manipulating the absolute positioning of that element, relative to the image itself, because Blueimp by default doesn't align captions relative to the image. I considered using other lightboxes, but Bluimp turned out to be the best one for my needs, and it's responsive out of the box. The projects themselves have their own individual pages/URLs, but not in the classic sense. If you go to a direct URL of the project, I wrote some code so that it will show the FIRST category it's been assigned to, and then automatically bring up the lightbox containing the projects images. It does this by detecting the the page being hit is either project-category.php or project.php and running the necessary code, which involves the same AJAX request to bring up the lightbox. Example: http://www.archsf.com/projects/aptos-street/ The firm page is whole other beast, but I won't get into that. Screenshots demonstrating some internals: Editing a Project Category: http://goo.gl/T30AEh Editing a Project: http://goo.gl/fekgqQ Editing a Duplicate Project: http://goo.gl/ppKfo5 Editing a Callout: http://goo.gl/gfEbPO Editing the Home Page: http://goo.gl/rbHlRQ Overall Page Structure: http://goo.gl/gfEbPO Enjoy. Jonathan

Excellent module!

I think there may be a small bug with this plugin. Let's say you do a fresh install of PW (and use the default admin theme). Then you install Admin Custom Files and check "Include theme based files" and set the folder as "AdminCustomFiles". Then uou create the folder "AdminCustomFiles" in your /site/ folder and then create a css file called AdminThemeDefault.css, and let's say you modify it so #masthead{background:red !important} It doesn't load the file. I think I know the reason... When using the default admin theme without any other admin theme installed, PW doesn't allow the option to switch admin themes per user. As a result, even though you are using the default admin theme, it's not specifically SET. Therefore, to work around this, you have to install another admin theme (like Reno), which then allows you to choose which admin theme a user can have when editing a user. After specifically setting the admin theme to default, only then does the "AdminThemeDefault.css" load. Let me know if what I stated is clear, repeatable and/or if you need a video demonstration. Jonathan

Good to hear. I will put together some info about the bugs. I'm planning on featuring the ProcessMigrator plugin as a general exporter/importer of content from one PW site to another. For example, let's say you have a development and production version of a site, and a new set of content needs to be created (on dev), then eventually launched (on prod). Rather than re-creating that content manually on production, I want to show how your plugin can achieve that. WordPress has an export tool, however it's very limited and doesn't work that well for the situation I described. There are some plugins to enhance it but I haven't had great success with those either. There's one commercial plugin which I haven't used but seems to be the ultimate solution to do what I described: https://crowdfavorite.com/ramp/ ProcessMigrator, in my eyes, would be the analog to RAMP.

@adrian How's further development going on ProcessMigrator? I was playing around with it yesterday and it seems it's still quite buggy. I tested it about 20 times on fresh installs and got a few errors which I can discuss with you. I would like to feature it in a WordPress vs. ProcessWire screencast. Your plugin solves a huge pain point. Let me know if I can help.

Building upon what you described in your original post and what Joss said... Templates and Relationships - bars (bars.php) - bar1 (bar.php) - bar2 (bar.php) - barN (bar.php) - chocolate types (chocolate_types.php) - chocolate_type1 (chocolate_type.php) - chocolate_type2 (chocolate_type.php) - chocolate_typeN (chocolate_type.php) - confectioners (confectioners.php) - confectioner1 (confectioner.php) - confectioner2 (confectioner.php) - confectionerN (confectioner.php) - shops (shops.php) - shop1 (shop.php) - shop2 (shop.php) - shopN (shop.php) - countries (countries.php) - country1 (country.php) - country2 (country.php) - countryN (country.php) Fields - bars (page field, multi-select asm or whatever is the most appropriate given amount of data) - chocolate_type (page field, regular select or whatever makes the most sense; i'm assuming each bar has one chocolate type) - confectioners field (page field, multi-select asm or whatever is the most appropriate given amount of data) - shops field (page field, multi-select asm or whatever is the most appropriate given amount of data) - country field (page field, regular select or whatever makes the most sense; i'm assuming each confectioner has one country) Templates w/ Fields - bar.php - title - (etc) - chocolate_type - chocolate_type.php - title - (etc) - confectioner.php - title - (etc) - bars - country - shop.php - title - (etc) - bars - country.php - title - (etc) Example Code Per Template - bars.php list bars: foreach($page->children as $bar) - chocolate_types.php list chocolate types: foreach($page->children as $chocolate_type) - confectioners.php list confectioners: foreach($page->children as $confectioner) - shops.php list shops: foreach($page->children as $shop) - countries.php list countries: foreach($page->children as $country) - chocolate_type.php list bars that have the chocolate type: $bars = $pages->find("parent=/bars/, template=bar, chocolate_type={$page}"); foreach($bars as $bar) - confectioner.php list bars: foreach($page->bars as $bar) - shop.php list bars: foreach($page->bars as $bar) - country.php list confectioners in the country: $confectioners = $pages->find("parent=/confectioners/, template=confectioner, country={$page}");

LOL. Yea, I need to give that footer a better treatment.

I've been working on the site quite a bit. Here are some very early screen grabs (a lot will be changed and improved): Home Page: http://goo.gl/rxjQ5t (more sections will be added below the masthead) Series Page: http://goo.gl/tNfJnk Episodes Page: http://goo.gl/fGJzqJ (very preliminary, many modifications to be made) Episode Page: http://goo.gl/zrIcXf (top of the screenshot is cut off) As you can see, I went with a very bright color palette. I want the site to appear fun, friendly and unintimidating. The colors are also inspired by the PW site. Color palette: http://www.paletton.com/#uid=60R1h0kwi++bu++hX++++rd++kX

Thanks for the support and suggestions. Been working hard on episodes. About 1/3 done so far with episode recording, but still need to do editing as well as record the rest. I've began creating the website on my local server. I've inputted a list of all the episodes the "WordPress vs. ProcessWire" series will have (29 so far). Some more may be added to this series if I realize I've forgotten anything. Screenshot: http://goo.gl/3LUYTo Jonathan

It was a busy summer and I finally have a little time to breathe. Now that ProcessWire 2.5 is out (as well as WordPress 4.0), it's a great time to get going with this project. I gave the idea more thought, and I'm going to start with a series of videos called "WordPress vs. ProcessWire". Each of the episodes in this series will begin by demonstrating a task/feature/approach in WordPress, then the equivalent task/feature/approach in ProcessWire. The episodes will also touch upon the architectural differences between both systems and highlight the strengths and weaknesses. Each video will be quick and to the point... somewhere between 3-8 minutes. Some episodes in the works: installation: just a simple walkthrough of the installation process of both systems pages page templates custom fields custom post types taxonomies page ordering plugins (an explanation of the repositories and how to install) forms (gravityforms vs. formbuilder) shortcodes (vs. hanna code) images embedding videos caching documentation etc. etc. I've actually created 10 episodes in one day today. This "WordPress vs. ProcessWire" series is targeted towards intermediate to advanced WordPress developers... anyone who knows how to custom theme WordPress well and has been using it regularly for at least one year. My thought is they are comfortable with WordPress despite some of its annoyances (speed, security issues, generated markup, api, data architecture, custom fields and custom post types approach), but they haven't found an alternative system that can match it pound for pound. This series will reduce the anxiety that's associated with a decision to invest one's time to learn an alternative technology. If I can prove that almost everything they are comfortable with in WordPress can be done with ProcessWire more elegantly, my hope is that it'll get a lot of people to switch. More coming soon.

Is this still the recommended way (in relation to the current dev branch... 2.4.14) to make a color variation based on the default admin theme? Doesn't this approach keep files in /wire/ which would be deleted upon an upgrade (bad practice)?

Is it possible that child pages created WITHOUT the PageTable interface can still appear in the PageTable list? This issue is hard to explain so I will do my best with an example of the problem... Let's say you have a page template called 'product'. This 'product' template can have child pages called 'option'. So, you create a page using the 'product' template called 'Widget'. You then create 3 options using the 'option' template. These options as child pages of the 'Widget' page. Then one day you decide rather than having to create child pages the typical ProcessWire way, you take advantage of the PageTable field and use that to create these 'option' child pages since it's a slicker way to do it. The problem with this is the original 'option' child pages WILL NOT APPEAR in the PageTable field list. The only child pages that appear in the PageTable field are the ones that were created using the PageTable interface. Does this make sense? Perhaps the screenshot attached will help.

Amazing!

I haven't had to deal with any complex product discounts yet. One competitor to FoxyCart that I haven't seen mentioned on the forums is called SnipCart. Similar concept (drop in cart), but it looks pretty slick and can manage orders in it as well (as opposed to using something like OrderDesk). Worth checking out, as well as the upcoming FoxyCart 2.0.

I agree with what you've stated. I've also worked with various ecommerce systems including: Magento: too overengineered, excruciatingly difficult to theme, slow, only makes sense sites that would take advantage of all its complexity; fun fact: it's 8 million lines of code, and the team consists of 8 developers; I believe the version 2.0 rewrite has been in the works for almost 4 years now Shopify: good but working with a remotely hosted / SaaS ecommerce system has its limitations. i also don't like how the catalog system is structured. Lemonstand: never worked with it but they went the remotely hosted / SaaS route OpenCart: looks nice on the outside, but once I dove in, I didn't like how certain things worked Prestashop: same as Opencart Volusion: SaaS and it sucks BigCommerce: SaaS; never used it but probably a good competitor to Shopify WooCommerce: not bad, however I've moved away from WordPress and since it's a WP plugin, it feels very second class, clunky and uses WP's architecture. it doesn't have a refined feel to it. also, a lot of functionality that should be built into it comes via extensions. given how the prices of extensions have sky rocketed for woocommerce, expect to spend around $500 to $1000+ dollars to bring it the features you will eventually need, that then may have issues with successive WP and Woocommerce updates... plugin hell. makes more sense to go with a dedicated ecommerce system where everything is built tightly together given those reasons. CS Cart: looks good, but I did some research and now I forgot why I didn't like it If I were to go with a dedicated ecommerce system, I'd either go with: Spree: Rails based solution. Got recently funded by GoDaddy with $5 million. Open source. Very promising and big names behind it. Built in a way where integrations can be done nicely. Sylius: Symfony based system. Looks promising as well. I don't take on too many ecommerce projects these days, however if I do, I keep it simple with ProcessWire + FoxyCart + OrderDesk. It's a simple but extremely flexible approach since ProcessWire makes it easy to build out a catalog that conforms to a site's unique catalog structure and product types without bending backwards and having to override a bunch of things. I'm interested to see what FoxyCart version 2 brings to the table. I'm also patiently awaiting Apeisa's system. Need any beta testers or perhaps some general feedback Apeisa?

I'm an independent contractor and work with a lot of different clients. Most of the sites I do are light, medium or heavy content-based sites. ProcessWire is my go to system for these types of sites, or WordPress if the client really insists. I stay fairly busy and I've reached a point where I need to have a reliable, go-to developer that I can subcontract work to when I am too busy to take on the work by myself. This could lead to be a steady stream of projects to work on. I'm looking for someone with the following skills: strong php skills can do design conversion correctly (that is, taking a PSD and hand-converting it into html/css/js); also knows how to do mobile-first responsive design with either framework strong experience with Bootstrap and/or Zurb Foundation; using it SASS or LESS is a plus some experience with Grunt, Bower (the basics) knows how to make a theme/template from scratch (ideally using a starter theme like Roots.io) and organize files and code in a modular/partialized way (note: for my ProcessWire based sites, I use a starter template based on Roots.io for ProcessWire) strong experience with ProcessWire or WordPress (at least one of the two) understands how to best organize information and properly structure a site based on a CMS's capabilities (for example, using Custom Post Types and Taxonomies in WordPress; when to uses Pages vs. Custom Post Types, etc.) very organized and takes pride in their work If you are interested, please send me a private message or email (jlahijani at gmail.com) with the following: a list of some recent sites that you have done along with a couple sentences about each explaining the CMS, tools and approach used. i don't care much about the design of the site as opposed to the development part. your general preferred approach in developing medium-large content sites your location a little about yourself your website (if you have one) anything else you feel that you'd like to say Thank you, Jonathan

Hi Neeks, That video is quite old now and much has changed with my system since then, especially the caching technique. Also, caching is not needed as much anymore since I made a lot of optimizations to the code and eliminated a lot of issues that were causing lag. Regardless, PW has a proper caching module called MarkupCache which is the correct way to do the sort of caching I had in the video: http://modules.processwire.com/modules/markup-cache/ My bookmarking system is a good clone of Diigo along with features that suit the way I organize things. (note: Diigo now lets you edit previously bookmarked URLs, which was a major complaint I had about it). Given that this is a true webapp, building it with ProcessWire isn't the best fit, compared to a comprehensive webapp framework like Rails, Laravel, or some of the new NodeJS based frameworks out there (Meteor, MEAN, etc.) although it does get the job done. Being forced into an MVC way of doing things would make sense for a pet-project like this. However, I'm glad I originally built it in PW because it served as a great way to learn about a bunch of features I wouldn't have otherwise been exposed to. I mainly reserve PW for general CMS type sites or sites that wouldn't become true web apps.

Has anyone used the Vimium extension for Chrome? Over the past few days, I've been working on some productivity hacks and part of that included relying less on the mouse for basic tasks. I've never been a true Linux user or one who uses Vim, but I gave this extension a shot after a few days, it's very liberating to be able to browse websites and control Chrome (especially manipulating tabs) entirely with the keyboard! I can see myself using vintage mode for Sublime in the near future. Maybe also the ability to navigate my file manager (xyplorer) with keyboard shortcuts (or just start using the command line a lot more often). Check it out: http://vimium.github.io/

If you've done heavy frontend WordPress development, then you may have heard of Roots: http://roots.io/ Roots 7.0.0 on Github: https://github.com/roots/roots/tree/7.0.0 It's described as: Roots, a WordPress starter theme, helps you make better themes with HTML5 Boilerplate, Bootstrap, and Grunt. Some key points from their site: Optimized for production use - The Roots Gruntfile compiles your LESS & minifies and concatenates CSS and JS. Bootstrap ready - Roots includes Bootstrap for faster web development, but it can easily be removed or replaced with your preferred CSS framework. Write less code with the theme wrapper - Template markup is controlled by a theme wrapper and is handled by one file instead of being scattered across all template files like typical themes. It's a starter theme (not a theme with an existing design) for tech savy developers and comes pre-configured with a nice set of tools, build scripts (css and js minification, etc) and an excellent template architecture and file organization from which you can build a site. How everything is organized is what makes it shine (as well as how it fixes a lot of ugly things in WordPress). I've been using it as my go to starter theme for over a year and I like the way it's been thought out. I recently used it on a large corporate site with some strict production environment requirements and it allowed me to dive very deep into Roots and get a great understanding of it. With that being said, I still have yet to settle on a standard site profile for when I create ProcessWire-based websites. I figured since I like Roots so much, I could create a site profile based off of it, if not for the template structure, then mainly for the tools it provides as well as file organization. I spent a couple hours and got a lot completed already. Anyone else have experience with Roots? Jonathan

Add me on Skype. I can give you 30mins if you're ready right now. My Skype username is: jonathanlahijani

Hello all, I love ProcessWire and the community. It is a fantastically architected CMS. I believe over the next few years it will continue increasing in popularity as more people catch word of it. Perhaps it can even take a few percentage of marketshare away from WordPress, which powers 20%+ of all websites on the internet (insane, right?). Well, I'd assume a good portion of those are just wordpress.com blogs that no one reads or have been abandoned, but I could be wrong. I believe we can speed up the adoption rate and open people's eyes faster. They just need to see the light. The forum recently past the 2000th signup, which is about double the number last year. Perhaps we can have 10,000 a year from now. With that being said, I wanted to announce a project that I will be pursing... (drumroll please)... It will be called: Wirecasts.com I envision it as a website containing short, 5-10 minute videos discussing various topics with ProcessWire, much like Railscasts.com is to Ruby on Rails. My first goal is to start with a series of videos that goes head to head with WordPress. I will demonstrate how to do things in ProcessWire that developers are accustomed to in WordPress. For example: Local Installation ProcessWire Pages vs. WordPress Posts + Pages + CPT's Building Menus Custom Fields Themes vs. Site Profiles Shortcodes vs. Hanna Code Showcasing all kinds of plugins in WordPress and their ProcessWire equivalents (like Gravity Forms vs. Form Builder, etc.) I also anticipate creating videos related to some of the topics here on the forum. What's the best way to make a login form? What's the best way to organize content? And so on... Over the last few days, I've been perfecting my screencasting technique for this project. I have a super clean virtual machine with Windows 8 and minimal software (Chrome, Sublime Text, XYplorer) specifically configured for these videos. Videos will be shot in 720p with my Patrick Bateman-like radio voice narration (will need to work extra hard to get that part right). Here's a video I recorded and edited today. It does not yet have voice narration, but it will give you an idea of the quality I'm shooting for. http://bit.ly/1m1H66B (10mb mp4 file) I'd like to hear your feedback and any suggestions to make this a great site! Stay tuned. Jonathan