Padloper Docs

Add to Cart

Adding products to a session's cart is very easy. You can either use the inbuilt Padloper add to cart markup (see the template partial cart-add-product.php) or your own custom markup.

Inbuilt Add to Cart Form

In a template file for displaying a single product in the frontend as shown in the example here, add the following code:

// get the $cartRender class
$cartRender = $padloper->cartRender;
// get the product whose add to cart button you want to be rendered
// @note: it is assumed you already retrieved $product as per the example linked to above
// render the add product to cart form
$content = $cartRender->addToCart($product)
1
2
3
4
5
6

WARNING

Since Padloper does not treat any page as a product (unlike Padloper 1), you will need to pass a product to addToCart($product) if you are using the inbuilt add to cart form as shown above.

Custom Add to Cart Form

Below is an example of using a custom add to cart form to add products to your cart. The most important aspects of the process are that your form POSTs to the correct URL and that you submit a product or product variant ID along with the form. Add to cartneeds to post to $config->urls->root ."padloper/add/". The example below uses htmx but you are free to submit your form in any method you wish.

<form
	method="post"
	class="padloper-cart-add-product"
	action="<?= $config->urls->root ?>padloper/add/"
>
	<!-- see php content below that should go in here-->
</form>
1
2
3
4
5
6
7
// @note: see the HTML content above where the output here should be echo'ed
$out = "";
// ---------
$out .= "<input type='hidden' name='product_id' value='{$product->id}'/>";
// add CSRF
$out .= $session->CSRF->renderInput();
$post = $config->urls->root . "padloper/add/";
// @note: the hx-target here is not required. this is because we are using oob ( out of bands) by default in the server response  and NOT SWAPPING here, i.e. hx-swap=none! This means the button always stays. It allows us to independently update the markups for quantity, titles number and total amount/price wherever we want, wherever their corresponding markup have been placed.
$out .= "<button hx-post='{$post}' hx-target='#cart-summary' hx-swap='none'>" .
    __("Add to Cart") .
    "</button>";
// -------------
echo $out;
1
2
3
4
5
6
7
8
9
10
11
12
13

Add to Cart Server Response

Padloper will respond to both POST and Ajax add to cart requests.

Ajax Carts

For Ajax carts, Padloper supports both the traditional JSON response to ajax requests as well as partial render response to htmx requests.

Ajax Response: traditional

Non-htmx add to cart requests will receive a JSON response. For instance.

{
	"productId": 1161,
	"productTitle": "Red Shoes",
	"qty": 1,
	"totalQty": 1,
	"numberOfTitles": 1,
	"totalAmount": "33.00GBP"
}
1
2
3
4
5
6
7
8

INFO

Please note that from an ID point of view, in Padloper, there is no distinction between a product or a product variant. Hence, the variantId component of cart item has been deprecated.

Ajax Response: htmx

htmx request are automatically detected. You don't need to do anything special for this to happen. A limited out of bands response is sent back to the client as shown below:

<!-- number of unique titles/products in the cart -->
<span id="numberOfTitles" class="padloper_cart" hx-swap-oob="true">2</span>
<!-- number of items in the cart  -->
<span id="totalQty" class="padloper_cart" hx-swap-oob="true">5</span>
<!-- total amount (price) the cart -->
<span id="totalAmount" class="padloper_cart" hx-swap-oob="true">39.99</span>
1
2
3
4
5
6

This allows you to inject the partials in any part of your markup.

WARNING

You will need to have elements in your markup with identical IDs to the ones in the response.

To learn more about htmx, please visit its website

Non-Ajax Carts

For non-Ajax carts, the usual POST will occur followed by a full page reload. Use $padloper->cart to access the updated cart items for the session.

Checkout Test

Using the checkout page you created when setting up your shop initially, test adding and removing products from your cart and going through the checkout process.

After adding some products to your basket, please proceed to your shop's checkout page to test the checkout form.

On form submission, Padloper will process the form. If errors are found, the customer will be shown the form again with the problematic fields clearly marked. If no errors are found, the customer will be redirected to the order confirmation page.

After confirming their order, if the processing was successful, the customer will be redirected to the order success page.

If everything went well, congratulations! You have a fully functional shop/store!

Please also see how to edit your cart