This is step by step guide for adding Padloper into existing ProcessWire site. When you buy Padloper, it comes with very minimal shop profile, that you can install like any other profile in ProcessWire - that is preferred route if you want to do some quick testing.
1. Installing the modules
Just like ProcessWire, Padloper is very modular - you can cherry pick any parts you like. In this tutorial we are taking the shortest route for simple, but fully functional store.
- Upload PaymentModule into /site/modules/PaymentModule and install it through ProcessWire admin
- Upload PaymentInvoice into /site/modules/PaymentInvoice and install it through ProcessWire admin
- Install core module "ProFields: Page Table" if not already installed
- Upload Padloper into /site/modules/Padloper/ and install PadLoper modules through ProcessWire admin (please note that there is separate distro for PW 3.0)
Please note that you need versions from PW3 branch of payment modules if you use ProcessWire 3.0.
2. PadCart settings
There are very little configuration when using Padloper. PadCart is responsible for most common store and products settings, like currency and stock management.
- Go to Modules => PadCart => Settings
- Choose pad_price as Price Field
- Since we don't manage any stock, check the "Allow negative stock".
- Choose "basic-page" template as Product template
- Feel free to fill other fields too if you want.
- Go to Modules => PaymentModule => Settings and setup Invoice as an active payment module
3. Setting up your product template
Any template you have in your ProcessWire installation can be product in your store. This way the store frontend and product management is 100% in your hands - you can build it just like you build all other PW websites. All Padloper requires is that you have at least one float or integer field in that template, that Padloper can use for price.
- Go to templates => basic-page and add pad_price
- Please note: just to keep this tutorial short, we are using the pad_price as our price field. After completing this tutorial, I recommend you to create own price field (instead of pad_price) using FieldtypeFloat or FieldtypeDecimal.
- Edit few of your pages with basic-page templates and add some value into your price field
- Edit /site/templates/basic-page.php and add this as the last line of your file:
$sidebar .= $modules->get("PadRender")->addToCart();NOTE: If you are NOT using delayed output in your template files, then the required code is:
echo $modules->get("PadRender")->addToCart();- Now you should see "Add cart" button in your pages when you visit those. Click few times to add products into your cart. Only indicator about having products in your cart at this point is looking at the browser's address bar and seeing something like this there: www.yourstore.com/about/?addedProduct=1001 (where 1001 is your product's page id)
- You can use that information to echo "product added to the cart"
- If you post the form using ajax, you get same params returned as JSON object
4. Adding "edit cart" page
Sometimes you have dedicated view / edit cart page, sometimes you allow editing your cart from all pages. Padloper doesn't assume anything how you want to display your cart. Here we are taking the shortest route to happiness, by using our home template as "edit cart" page.
- Edit /site/templates/home.php and add this as the last line of your file:
$content .= $modules->get("PadRender")->editCart();Again, depending how you output your markup, you might want to echo the line directly.
- Now you should be able to see your cart when visiting your home page. The cart is fully functional, so feel free to update quantities / remove products from cart. Don't worry about the looks and the styles yet, all of the markup is easy to customize.
5. Adding checkout process
If you have gotten this far without sacrifing your mental health, I am pretty sure you will make it to the end of this guide! This is last step before you have full store setup. Now we create checkout template and configure the payment & shipping methods used. To keep things fast and simple, we are using invoice as a payment method, so all orders will be unpaid and receive an invoice.
- Install ShippingFixed module and fill the configuration
- Create new template called checkout (you are free to name it whatever you want or even use existing template though)
- Make sure you allow url segments on your checkout template.
- Create template file /site/templates/checkout.php and add this bit of code there:
$checkout = $modules->get("PadOnePageCheckout");
// $checkout = $modules->get("PadCheckout"); // This is the old one, use above for most streamlined checkout
$checkout->setShippingModule("ShippingFixed"); // This means that all orders will use this specific shipping module
$content = $checkout->render(); // Again, just echo this if you are not using delayed output- Create page using this checkout template.
- Now you can test through whole process: adding products into your cart, view/edit your cart and then going through checkout.
- After successfull purchase go into your admin and take a look at Setup => Padloper Orders page to view/edit the order.
6. Customizing the markup
Your store looks and works very barebones now. Most parts of Padloper are very easy to customize - and let's start with the simplest thing: templates. Take a look at /site/modules/Padloper/templates/. All the markup that Padloper generates are included there. You can view those files, but don't edit them directly. Instead you should copy the templates you need to modify with the same name into /site/templates/padloper/* and modify them there. Whenever Padloper renders markup, it will first look from that directory.
7. Customizing the customer information
When you tested the checkout process, you noticed that we asked quite a many details from customer. Sometimes only email address is required, sometimes we need tons of information. Sometimes all the fields are required, sometime just the name is. Customizing this is as easy as editing the templates and fields in processwire.
Go into templates => padorder. Now all the fields that are inside pad_customer and pad_customer_END are fields that we are asking from customer. You can move and edit those things freely by clicking their name in the list. Feel free to add some totally custom fields into the mix also and removing the things you don't need. But please, do keep the email address, so that your store can send emails to your customers about the order process. Please note that if you use some of the more exotic fieldtypes, you might need their css&js files in your checkout template.
After you get everything working as intended, you go and start your next adventure with product variations.