Padloper (ProcessWire Modul)

Padloper ist ein ProcessWire Pro Modul ( kostenpflichtig ) für die Umsetzung von eCommerce. Padloper 1 wurde von Apeisa entwickelt und ging jetzt an Kogondo über - Padloper 2 wird nicht kompatibel sein und soll im laufe 2020 fertig werden.

File:PaymentInvoice-master.zip Invoice Modul
File:PaymentModule-master.zip Payment Modul
File:padloper3-1.zip Padloper Modul
File:padloper-1_1_2.zip Padloper Modul (alte Version)

Links

https://www.padloper.pw/documentation/installing-padloper/
https://padloper.pw/documentation/making-it-ajax/ (Ajax Warenkorb)

Kurzanleitung

Installation

Upload PaymentModule into /site/modules/PaymentModule and install it through ProcessWire admin (Achtung es gibt eine PW2 und eine PW3 Version)
- https://github.com/apeisa/PaymentModule/tree/PW3
Upload PaymentInvoice into /site/modules/PaymentInvoice and install it through ProcessWire admin (Achtung es gibt eine PW2 und eine PW3 Version)
- https://github.com/apeisa/PaymentInvoice/tree/PW3
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)

Auf die Rechte achten wenn was nicht gefunden wird. Im Payment Module kann bei Choose active payment modules noch nichts ausgewählt werden solange nicht die erforderlichen anderen Module installiert sind. Kann man aber auch im Nachgang machen. Eventuell in anderer Reichenfolge installieren ( Todo -> Test)

Shopping Cart Setup

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

Einzelprodukt Template

Wir erstellen ein Template für ein einzelnes Produkt. Es kann jedes Template genutzt werden. Voraussetzung ist lediglich ein float oder integer field, welches Padloper für den Preis nutzen kann.

Füge das Feld pad_price zum Template hinzu (Das Feld muß ein float oder decimal type sein, kann aber auch andere Namen haben (s.o.))
Lege ein paar Produktseiten an und gib Preise in das Feld ein.
Füge einen Add to Cart Button in deinem Template ein:

$content .= $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();

Jetzt sollte ma einen "Add cart" button in den Seiten sehen. Im Moment sieht man nur in der URL, dass ein Produkt hinzugefügt wurde:

www.yourstore.com/about/?addedProduct=1001 (where 1001 is your product's page id)
Man kann diese Info nutzen um eine "product added to the cart" Message auszugeben

Wenn man das Formular per AJAX ausgibt bekommt man die selben Parameter per JSON

Warenkorb Template

Lege eine Seite für den Warenkorb an der Warenkorb wird mit folgendem Code ausgegeben.

$content .= $modules->get("PadRender")->editCart();

Es stehen sofort Möglichkeiten zum Bearbeiten zur Verfügung

Checkout Template

Der Einfachheit halber hier nur Rechnung.

Shipping Fixed Modul installieren und Konfiguration ausfüllen
Neues Template für den Checkout erstellen z.B. checkout.php
Im Template müssen url Segments erlaubt sein
Checkout Code hinterlegen

$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

Seite mit diesem Template anlegen.

Nach dem Einkauf, kann man die Bestellungen unter

Admin > Setup => Padloper Orders ansehen oder bearbeiten.

Confirmation Template

Customizing

Die meisten Teile von Padloper lassen sich durch eigene Templates modifizieren. Man kopiert sich die benötigten Templates von

site/modules/Padloper/templates/ *

nach

site/templates/padloper/*

und kann sie dort bearbeiten. Die Kopien in diesem Verzeichnis haben beim rendern Vorrang.

Kundeninformationen einstellen

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.

Lokalisierung

Über das Language Modul kann automatisch ein Index angelegt werden. Wenn man alles übersetzt hat, kann man die Übersetzung exportieren.

Zahlungsmethoden

Paypal

Padloper und PayPal Express (ProcessWire)

AJAX Warenkorb

Making it AJAX It's very easy to make add to cart work ajaxified. Here is simple tutorial to show you how.

As you probably already know, adding "add to cart" button into your templates is pretty easy:

$modules->get("PadRender")->addToCart($product, $askQty = true);

This adds pretty verbose markup for the button (it uses ProcessWire's inputfields, looking for a way to make it shorter), but that is "full featured" - meaning if you add modifiers there, it will also validate those nicely. By default add to cart process is simple:

Customer clicks button and form submits Form is validated (modifiers are valid, no zero or negative amount of products added etc) If not valid, form is rendered again with error messages If valid, then product is added into cart and customer is redirected back to current page with cart updated, and productId=123 as a get param (where 123 is id for the added product). To ajaxify this whole process we need to submit the form with ajax. Form can be submitted as is and Padloper will return results as JSON. Here is complete jQuery example to ajaxify the add to cart buttons:

// jQuery example of how to make add to cart buttons ajaxified
$( ".padloper-cart-add-product" ).submit(function( event ) {

  event.preventDefault();
  var $form = $(this);
  var url = $form.attr("action");

  // Send the data using post
  var posting = $.post(url, $form.serialize());

  posting.done(function(data) {
    if (data.errors) {
      var str = '';
      $.each(data.errors, function(i, val) {
        str = str + val;
      });
      alert(str);
    } else {
      $("#totalQty").html(data.totalQty);
      $("#numberOfTitles").html(data.numberOfTitles);
      $("#totalAmount").html(data.totalAmount);
    }
  });
});

That example will do few things: if add to cart fails, it alerts the error message. There might be two reasons: form wasn't valid (probably due required modifier missing) or the product is out of stock. In case of success, it will update few html elements (#totalQty, #numberOfTitles and #totalAmount) with the updated values from your cart. Those elements you should add into your template markup.

Padloper (ProcessWire Modul)

Inhaltsverzeichnis