Jump to content

iBuildMacs Website (ecommerce site)


Jonathan Lahijani
 Share

Recommended Posts

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.

bF0CpcO.png

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

Enjoy!

  • Like 23
Link to comment
Share on other sites

  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By daniel_puehringer
      Hi community,

      I am using the "PageTable" Module (also called "ProFields: Page Table") and the built in "Language" Module (also called "Languages Support").

      With the help of PageTable I was able to create several content elements which should usually be displayed in German(default language) and English.

      However some Content Elements should only be shown in German and NOT in English.

      Well sounds easy, right? Not so fast. I really love this CMS, but I have not found a solution for this problem yet.
      As you can see in the screenshots attached I tried to uncheck the "active" Checkbox for the english language to completely hide the content element for english users.

      However no matter what I do the german text shows on the english page.
      If I leave the "content-should-not-be-shown-in-english"(see Screenshot Number 2) blank and save the page, the page will inherit the german page url "content-element-with-simple-text-which-should-only-be-shown-in-german".

      My question therefore is:
      How can I hide a specific content-element for only one language?

      I´m using the latest processwire & module versions.

      The code which I use to render the content elements looks like this:
      //Info: contentelements is a field of type "ProFields: Page Table" <?php foreach ($page->contentelements as $element): echo($element->render()); endforeach; ?> filename: basic-page.php


      I would really appreciate your help since I haven´t found a solution after reading through quite a lot of forum posts.

      All the best,
      Dani


    • By kongondo
      Announcing the current status, planned release, roadmap and preview of Padloper 2.
      Status
      Feature freeze. Full multilingual support. Only PHP 7.2+ supported. Support for ProcessWire 3.0 only. Backend support for modern browsers only (that support JavaScript ES6 modules). Current Work
      Finish work on admin/backend. Work on installer and uninstaller (including configurable availability of some features). Work on UI/UX improvements. Start work on documentation with special focus on technical documentation. Continue work on Padloper API and data/model component. Roadmap
      Please note that these ARE NOT hard and fast targets. The roadmap may have to be adjusted to accommodate technical and non-technical constraints.
      Q1 2021
      Inbuilt support for (latest) PayPal (full rewrite, no external modules required). Additional work on Padloper API. Invite a limited number of early alpha testers (fully-priced product). Soft and closed release of Padloper 2.
      Q2 2021
      Start work on relaunch of Padloper website. Inbuilt support for Stripe (no external modules required). Future Plans
      Support for more Payment Gateways. Support for order, customers, etc imports and exports. Support for AdminThemeReno and AdminThemeDefault. Separate fully-featured frontend shop module. Consider support for multiple currencies. FAQ
      1. Have you abandoned this project? 
      No.
      2. When will Padloper 2 be released?
      First early alpha release is scheduled for Q1 2021. This target may change depending on circumstances! Access will be by invite only for this first release.
      3. What is the pricing model of Padloper 2? 
      Three licences: Single Site, Developer and Agency licences (12 months’ updates and VIP support).
      4. How much will Padloper 2 Cost?
      No price has been set yet. It will cost more than Padloper 1.
      5. Can we upgrade from Padloper 1?
      No.
      6. Will existing users of Padloper 1 get a discount for Padloper 2?
      No, this will not be possible. Apologies for the earlier announcement. It was unrealistic and unworkable.
      7. Can we pay for Padloper 2 in advance?
      No.
      8. Does Padloper 2 render markup/templates in the frontend?
      No. Access to all data you need to build your shop’s frontend is via the Padloper API.
      9. Can we keep sending you ‘Are we there yet’ messages?
      No, please.
       
      Preview
      Here is a video preview of the current state of the backend/admin of Padloper 2. Please note the following:
      This is early alpha. There are bugs! It even includes WIP/notes!! FOUC, misaligned things, etc. The video shows the near-raw implementation of Vuetify UI. The UI/UX improvements work is yet to start. What you see here is the development version.  Some of the incomplete features may not be available in the early releases. Most of the features you see will be optional to install.  

       
    • By LAPS
      I opened a new wishlist topic on the PW forum for this and in the meantime I ask to the community looking for a reasonable solution.
       
      Using the PageTable field, is there a way to un-restrict the creation of pages under a given parent template page (or as page children if no parent for items is selected)? That is, is there a way to allow the selection of the parent page dynamically / on the fly during page creation via the PageTable field?
    • By LAPS
      I'm using the PW PageTable field extensively and I think an improvement to it could be made regarding the ability to choose the page parent where the page created via PageTable will reside.
      Say you have a PageTable field set like this:
      Edit Field: page_table_field > Details >
      Select one or more templates for items
      > template_one
      > template_two
      > template_three
      Select a parent for items
      > parent_template
      Actually, you can only create pages under the parent_template page (or as page child if no parent for items is selected).
      BTW I am looking for reasons about this limitation.
      What about allowing to choose on the fly where the pages created via PageTable will reside? that is, having the possibility to choose dynamically under which parent page to create the pages?
      Actually, one could overcome to this by creating multiple appropriately set PageTable fields, one PageTable field per PageTable parent for items, but this is unsustainable (?) when you want to create a lot using PageTable…
      By allowing to choose dynamically / on the fly the parent page during page creation via the PageTable field would open up a wider usage of PageTable.
      What do you think about?
       
      @ryan @Robin S
    • By louisstephens
      So I ran into a very strange issue today. I have a template with a pagetable and I went to add an item to it, when I went to select an image (for an image field) the page instantly threw up an error
      "ProcessPageSearchLive: No search specified"
      The page's content also switched to the image attached. This all worked perfectly last week (local mamp box). Has anyone experienced this before, and how did you solve it?
       

×
×
  • Create New...