Jump to content
brandysaint

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

Recommended Posts

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?

  • Like 1

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites

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. 

 

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Jeannette
      Hello Fellows,

      I have a wonderful webshop, using PL and Padopt, a module developed by Julien Vaubourg and highlighted in ProcessWire Newsletter. Here is our shop: cheval-ami.fr
      I am looking for a new developer, helping me to keep the shop smooth and up to date.
      We would like to improve automated invoicing and worldwide shipping, getting DHL integrated and give people the possibility to create their personal accounts and be the nicest shop in the equine industry. We are still a young company, working all in german, english and french. We are very interested in a long time, kind and friendly relationship without any stress, but reliable reactivity in case of urgency. 
      We are based in Hamburg and near Paris and would prefere to work with somebody who is available to catch up around a table, at least sometimes.
      Contact: mail@cheval-ami.fr or +33 626 22 1000 or +49 170 20 28 215
      Thank you, Have a beautiful day,
      Jeannette
    • By MoritzLost
      I've seen a couple of questions regarding namespaces and autoloading floating around the forum recently, so I decided to write a little tutorial. In general, I often see people getting confused when they try to wrap their head around namespaces, autoloading, Composer and the mapping of namespaces to directory structures all at once. In fact, those are very much independent, distinct concept, and it is much easier to explain and understand them separately. So this guide is structured as follows:
      How namespaces work in PHP. How autoloading works in PHP. Conventions for mapping namespaces to directory structures: PSR-4. How autoloading works in Composer and ProcessWire's class loader. How to use the class loader in a ProcessWire module. Feel free to skip the sections you're already familiar with.
      Namespaces in PHP
      The purpose of namespaces in PHP is to avoid naming conflicts between classes, functions and constants, especially when you're using external libraries and frameworks. Nothing more. It's important to understand that this has nothing at all to do with autoloading, directory structures or file names. You can put namespaced stuff everywhere you want. You can even have multiple namespaces inside a single file (don't try this at home). Namespaces only exist to be able to use a generic name – for example, ProcessWire's Config class – multiple times in different contexts without getting a naming conflict. Without namespaces, I couldn't use any library that includes a Config class of it's own, because that name is already taken. With namespaces, you can have a distinction between the classes ProcessWire\Config and MoritzLost\Config. You can also use sub-namespaces to further segregate your code into logical groups. For example, I can have two classes MoritzLost\Frontend\Config and MoritzLost\Backend\Config– a class name only needs to be unique within it's namespace.
      You can declare the namespace for a PHP file using the namespace statement at the top:
      // file-one.php <?php namespace ProcessWire; // file-two.php <?php namespace MoritzLost\Frontend; This way, all classes, methods and constants defined inside this file are placed in that namespace. All ProcessWire classes live in the ProcessWire namespace.
      Now to use one of those classes – for example, to instantiate it – you have a couple of options. You can either use it's fully qualified class name or import it into the current namespace. Also, if you are inside a namespaced file, any reference to a class is relative to that namespace. Unless it starts with a backward slash, in this case it's relative to the global namespace. So all of those examples are equivalent:
      // example-one.php <?php namespace ProcessWire; $page = new Page(); // example-two.php <?php use ProcessWire\Page; $page = new Page(); // example-three.php <?php $page = new ProcessWire\Page(); // example-four.php <?php namespace MoritzLost\Somewhere\Over\The\Rainbow; $page = new \ProcessWire\Page(); The use statement in the second example can be read like this: “Inside this file, all references to Page refer to the class \ProcessWire\Page”
      How autoloading works
      Every PHP program starts with one entry file – for ProcessWire, that's usually it's index.php. But you don't want to keep all your code in one file, that would get out of hand quickly. Once you start to split your code into several individual files however, you have to take care of manually including them with require or include calls. That becomes very tedious as well. The purpose of autoloading is to be able to add new code in new files without having to import them manually. This, again, has nothing to do with namespaces, not even something with file locations. Autoloading is a pretty simple concept: If you try to use a class that hasn't been loaded yet, PHP calls upon it's registered autoloaders as a last-ditch attempt to load them before throwing an exception.
      Let's look at a simple example:
      // classes.php <?php class A { /** class stuff */ } class B { /** class stuff */ } // index.php <?php spl_autoload_register(function ($class) { include_once 'classes.php'; }); new A(); new B(); This is a complete and functional autoloader. If you don't believe me, go ahead and save those two files (classes.php and index.php) and run the index.php with php -f index.php. Then comment out the include_once call and run it again, then you'll get an error that class A was not found.
      Now here's what happens when index.php is executed (with the autoloader active):
      Our anonymous function is added to the autoload queue through spl_autoload_register. PHP tries to instantiate class A, but can't because it's not loaded yet. If there was no autoloader registered, the program would die with a fatal error at this point. But since there is an autoloader ... The autoloader is called. Our autoloader includes classes.php with the class definition. That was a close one! Since the class has been loaded, execution goes back to the index.php which can now proceed to instantiate A and B. If the class was still not loaded at this point, PHP would go back to the original plan and die. One thing to note is that the autoloader will only be called once in this example. That's because both A and B are in the same file and that file is included during the first call to the autoloader. Autoloading works on files, not on classes!
      The important takeaway is that PHP doesn't know if the autoloader knows where to find the class it asks for or, if there are multiple autoloader, which one can load it. PHP just calls each registered autoloader in turn and checks if the class has been loaded after each one. If the class still isn't loaded after the last autoloader is done, it's error time.
      What the autoloader actually does is pretty much wild wild west as well. It takes the name of the class PHP is trying to load as an argument, but it doesn't have to do anything with it. Our autoloader ignores it entirely. Instead, it just includes classes.php and says to itself “My job here is done”. If class A was in another file, it wouldn't have worked.
      This process has two main advantages:
      Since autoloaders are only called on-demand to load classes just in time, we only include the files we actually need. If in the example above class A and B are not used in some scenarios, the classes.php will not be included, which will result in better performance for larger projects (though this isn't as cut and dry, since autoloading has it's own overhead, so if you load most classes anyway during a single request, it will actually be less efficient). If the autoloader is smart enough to somehow map class names to the files they're located in, we can just let the autoloader handle including the classes we need, without having to worry about jamming include statements everywhere. That brings us to ... PSR-4, namespaces and directory structures
      As you see, namespaces and autoloading are both pretty limited concepts. And they aren't inherently linked to each other. You can namespace your classes without ever adding an autoloader, and you can autoload classes that are all in the same namespace. But they become useful when you put them together. At the core of all that autoloading talk is a simple idea: By putting classes in files named after their class names, and putting those files in directory hierarchies based on the namespace hierarchy, the autoloader can efficiently find and load those files based on the namespace. All it needs is a list of root namespaces with their corresponding directories.
      The exact way class names and namespaces are mapped to directory structures and file names is purely conventional. The accepted convention for this is PSR-4. This is a super simple standard which basically just sums up the ideas above:
      A base namespace is mapped to a specific directory in the file system. When the autoloader is asked to load a class in that namespace (or a sub-namespace of it), it starts looking in that folder. This "base" namespace may include multiple parts – for example, I could use MoritzLost\MyAwesomeLibrary as a base and map that to my source directory. PSR-4 calls this a "namespace prefix". Each sub-namespace corresponds to a sub-directory. So by looking at the namespace, you can follow subdirectories to the location where you expect to find the class file. Finally, the class name is mapped directly to the file name. So MyCoolClass needs to be put inside MyCoolClass.php. This all sounds simple and straightforward - and it absolutely is! It's only once you mash everything together, mix up language features, accepted conventions and proprietary implementations like Composer on top that it becomes hard to grasp in one go.
      Composer and ProcessWire's class loader
      Now all that's left is to talk about how Composer and ProcessWire provide autoloading.
      Composer, of course, is primarily a tool for dependency management. But because most libraries use namespaces and most developers want to have the libraries they're using autoloaded, those topics become a prerequisite to understanding what Composer does in this regard. Composer can use different autoloading mechanisms; for example, you can just give it a static list of files to include for every request, or use the older PSR-0 standard. But most modern libraries use PSR-4 to autoload classes. So all Composer needs to function is a mapping of namespace prefixes to directories. Each library maintains this mapping for it's PSR-4-structured classes through the autoload information in their composer.json. You can do this for your own site to: Just include the autoload information as shown in the documentation and point it to the directory of your class files.
      Composer collects all that information and uses it to generate a custom file at vendor/autoload.php — that's the one you need to include somewhere whenever you set up Composer in one of your projects. Bells and whistles aside, this file just registers an autoloader function that will use all the information collected from your own and your included libraries' composer.json to locate and include class files on demand.
      You can read more about how to optimize Composer's autoloader for production usage here. If you want to read up on how to set up Composer for your own sites, read my ProcessWire + Composer integration guide instead.
      And finally, what does ProcessWire do to handle all this? Turns out, ProcessWire has it's own autoloader implementation that is more or less PSR-4 compliant. You can access it as an API variable ($classLoader or wire('classLoader'), depending on context). Instead of using a static configuration file like Composer, the namespace -> directory mapping is added during the runtime by calling $classLoader->addNamespace. As you would expect, this function accepts a namespace and a directory path. You can use this to register your own custom namespaces. Alternatively, if you have site-specific classes within the ProcessWire namespace, you can just add their location to the class loader using the same method: $classLoader->addNamespace('ProcessWire', '/path/to/your/classes/').
      Utilizing custom namespaces and autoloading in ProcessWire modules
      Now as a final remark, I wanted to give an example of how to use custom namespaces and the class loader in your own modules. I'll use my TrelloWire module as an example:
      Decide what namespace you're going to use. The main module file should live in the ProcessWire namespace, but if you have other classes in your module, they can and should use a custom namespace to avoid collisions with other modules. TrelloWire uses ProcessWire\TrelloWire, but you can also use something outside the ProcessWire namespace. You need to make sure to add the namespace to the class loader as early as possible. If either you or a user of your module tries to instantiate one of your custom classes before that, it will fail. Good places to start are the constructor of your main module file, or their init or ready methods. Here's a complete example. The module uses only one custom namespaced class: ProcessWire\TrelloWire\TrelloWireApi, located in the src/ directory of the module. But with this setup, I can add more classes whenever I need without having to modify anything else.
      /** * The constructor registers the TrelloWire namespace used by this module. */ public function __construct() { $namespace = 'ProcessWire\\TrelloWire'; $classLoader = $this->wire('classLoader'); if (!$classLoader->hasNamespace($namespace)) { $srcPath = $this->wire('config')->paths->get($this) . 'src/'; $classLoader->addNamespace($namespace, $srcPath); } } Source
      Thanks for making it through to the very end! I gotta learn to keep those things short. Anyway, I hope this clears up some questions about namespaces and autoloading. Let me know if I got something wrong, and feel free to add your own tips and tricks!
    • By Ivan Gretsky
      Most of us know and use site/config-dev.php file. If present, it is used instead of site/config.php, so it is easy to set database connection and debug mode for local development, not touching the production config. It is also very useful when working with git. You can simply ignore it in the .gitignore file, so local settings won’t end up in the repo.
      But sometimes you need to add code to site/ready.php or site/init.php just for the dev environment. For example, to add ryan’s super cool on demand images mirrorer. I can’t live without it when working with big sites, which have more assets then I want to download to my desktop.
      It would be great if there was something like site/ready-dev.php for this. Not out-of-the-box, but it’s pretty easy to achieve. Unlike site/config-dev.php, site/ready.php is not hardcoded. It’s name is set with a special config setting:
      // wire/config.php $config->statusFiles = array( 'boot' => '', 'initBefore' => '', 'init' => 'init.php', 'readyBefore' => '', 'ready' => 'ready.php', 'readySite' => '', 'readyAdmin' => '', 'render' => '', 'download' => '', 'finished' => 'finished.php', 'failed' => '', ); As you can see, we can not only define, which files are loaded on init, ready and finished runtime states, but probably even add more if we need to.
      So we override this setting in site/config-dev.php like this:
      // site/config-dev.php // Change ready.php to ready-dev.php $temp = $config->statusFiles; $temp['ready'] = 'ready-dev.php'; $config->statusFiles = $temp; For some reason we can’t just do
      $config->statusFiles['ready'] = 'ready-dev.php'; and have to override the whole array. Maybe you PHP gurus can explain this in the comments.
      Now we can create the site/ready-dev.php file and place all the dev-only code there. Important thing is to include the main site/ready.php.
      // site/ready-dev.php include 'ready.php'; // DEV HOOK TO MIRROR ASSETS ON DEMAND $wire->addHookAfter('Pagefile::url, Pagefile::filename', function($event) { $config = $event->wire('config'); $file = $event->return; if($event->method == 'url') { // convert url to disk path $file = $config->paths->root . substr($file, strlen($config->urls->root)); } if(!file_exists($file)) { // download file from source if it doesn't exist here $src = 'https://mysite.com/site/assets/files/'; $url = str_replace($config->paths->files, $src, $file); $http = new WireHttp(); try { $http->download($url, $file); } catch (\Exception $e) { bd($file, "Missing file"); } } }); Do not forget to replace "mysite.com" if you’re copypasting this))
      Now, add the newly created file to the `.gitignore` and we’re done.
       
      # .gitignore # Ignore dev files site/config-dev.php site/ready-dev.php Thanks for reading!
       
    • By horst
      Change Default Language to be None-English | Walk Trough
      When you start a new (single) language site and the default language shouldn't be English, you can change it this way:
      Go to the modules core section:

       
      Select the Language ones by the filter function:

       
      We have four language related modules here, but for a single language site in none english,
      we only need the base module, named "Languages Support". So go on and install it.

       
      After that, you can leave it, ... 

       
      ... and switch to the newly created Language section under SETUP:

       
      Select the default language

       
      Enter your new language name or its Shortcut and save the page.
      I will use DE for a single language site in german here as example:

       
      Now I go to the ProcessWire online modules directory, down to the subsection for language packs and select
      and download my desired (german) one: 

       

       

       

       
      After downloading a lang pack as ZIP, I go back into my SETUP > LANGUAGES > default language page in admin,
      select the downloaded lang pack ZIP and install it:

       

       

       
       
      After the ZIP is uploaded, the files are extracted and installed, most of my screen is already in
      the new default language. To get all fully switched, we save and leave that page, ...

       
      ... and completely logout from the admin.

       
      Now, of course, we directly login back, ...

      ... and see, that now also the cached parts of the admin have switched to the new default language. 🙂

       
      That was it for a single language site in none english.
       
      If you want to have a multi language site, just add more languages to the SETUP > LANGUAGES section.
      When using a multi language site, I think you also want to use multi language input fields, and maybe different page names for your language page pendents. If so, you need to go into MODULES > CORE > filter LANGUAGE and install what you need or want to use of it, (if not already done).
      Thanks for reading and happy coding, 🙂
       
    • By Andi
      Getting a little deeper into the ProcessWire state-of-mind here. I seriously think I wouldn't have come back to webdev if it wasn't for this wonderful little gem of a CMS.
      I have an "Options" field added to all users on a site. If the user has anything other then "default" selected, I would like to show a permanent message in the admin like the one in the screenshot, only so that the user can't close it. As a friendly reminder that he changed that option from default to something crazy 🙂
      I've read up on how to send messages to users, but where would I hook into to make this show up all the time in the backend?
      https://processwire.com/api/ref/wire/message/
      Thanks in advance!

×
×
  • Create New...