iBuildMacs Website (ecommerce site)

[Jonathan Lahijani]

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!

[totoff]

Thanks for sharing this insights.

[adrianmak]

why not cart items stored in session ? any other consideration ?

[adrianmak]

it could be good to make a installation profile for others for learning

[videokid]

it could be good to make a installation profile for others for learning

+1 for this idea...

On topic:

Very nice job!

[Mike Rockett]

Really like this - great site