[Tutorial] Simple E-commerce Guide for Newbie with Processwire

[brandysaint]

Hi, I am web designer and I want to learn PW by create simple e-commerce website. I've been search around to find solution, comparing every option & weight both it's advantage/disadvantage, I think most solutions out there is too complex or they already make lot of assumption, not to mention the more code means heavier page load. That's why I finally get conclusion that PW is the right answer. Well, the solution not answered yet, but I sense PW have the power to be there.

Let say example, Ms. Turner is local bakery which have 50 product under 5 category. She don't need complex shipping since order could be pickup at store or using private delivery courier and of course She don't need sophisticated payment system or any other crap feature. Yes, there is customer for that kind solution, but not for Ms. Turner and hundred millions people out there. All she want is just simple website to accept order.

I do aware that there's already tutorial out there, but it's just answer for specific solution. Not to mention how hard it's gonna be when this forum already have ton of pages. If You're not mind, I create this thread so everyone could learn from beginning especially for newbie or copy paste guy just like me to feel the power of PW.

This thread would be tutorial creating e-commerce from scratch and the final goal is free theme both front page and admin page specially designed for Ms. Turner and hundred millions small business right there. Apeisa already make awesome module for PW and I already tested it, its work so wonderful so let's complement it. 

For starting point, let's start from designing the homepage. The content would be:

Home

- Header (logo, cart toolbar, search)

Content

- 3 Image Main slider

- 6 Featured product

-Footer

- Quick Link

- Social Network Link

- Twitter Widget

- Newsletter Subscribe

What is the best practice from code perspective?

[ryan]

The list you mention will be very simple from the back-end, so the best starting point is probably to figure out what you want to start from, in terms of front-end framework. Do you want to start from an existing site profile, like the default or blog profile (or another), or do you want to build upon a CSS framework like HTML KickStart, Bootstrap, Foundation, etc. Or you could literally start from scratch, as many of us do. But of the goal is a profile or tutorial, I think it might be better to start from some kind of framework or profile. 

[brandysaint]

The list you mention will be very simple from the back-end, so the best starting point is probably to figure out what you want to start from, in terms of front-end framework. Do you want to start from an existing site profile, like the default or blog profile (or another), or do you want to build upon a CSS framework like HTML KickStart, Bootstrap, Foundation, etc. Or you could literally start from scratch, as many of us do. But of the goal is a profile or tutorial, I think it might be better to start from some kind of framework or profile. 

Hi Ryan, thanks for reply. Well, actually building a profile is the last goal when every code needed to built simple e commerce is available at this thread. For the first start, what I'm thinking is some code snippet at first without html mark up. With this method, everyone have freedom to build their website appearance without a mess stripping every html+javascript code from default profile package. 

Back in that day when first time learning wordpress 2.2, if we could get a code snippet, it's really helpful for newbie or copy paste guy to start learning little by little. Let say I want a slider and featured post, from the savvy php coder POV, what is the best approach? some might say, just built with static, some might say just create specific page template which handle slider by several key value and another may argue that we need a special function page to handle all this simple e-commerce requirement to prevent mess at future. In the end, after discussion from several savvy coder right here, we could find best approach both from performance and security. And for newbie or copy paste guy, if You want a slider, populate some featured post with image, just put this robust code at your template. And by following the discussion right here, newbie could make their simple e-commerce website just following the discussion and paste the code provided. As simple as it is.

The advantage by putting the information needed at one thread, new guy no need to search around the whole forum to find what he need. From participation view, there's more coder hanging round right here. And as thread starter, by indexing the robust code link at first page, would be save lot of time. Not to mention, some newbie which starting thread and ask same question over and over again. 

 

[ryan]

Well you've come to the right place, because a very high percentage of messages posted here have snippets of code. At least half of the messages I post have at least some code snippet. But we really try to focus on using code snippets to teach, and not so much for copy/paste. The reality is that ProcessWire is quite simple once you have a few basic concepts down. And once you've got them, you won't care about copy/paste, because you'll know how to do anything you could ever want. So our goal here is always to teach you how to fish rather than give you fish. That being said, there are no rules in that regard and all useful snippets are welcome.

[OrganizedFellow]

Great quote Ryan  

Give a man to fish and he will eat for a day.

Teach a man to fish and he will eat for a lifetime.

It's one of my favorites.