Overview
Side Cart Drawer turns the cart of OpenCart 4.x and 3.0.x into a drawer that slides in from the side. It opens after Add to cart and from the cart button in the header, and customers work in it without leaving the page.
- The whole cart. Product image, name, options, unit price and line total. Plus and minus buttons, a quantity field and remove.
- Your totals. Sub-total, coupon, taxes and total come from the order total extensions you have enabled, the same lines the cart page shows.
- Coupon. A coupon field that uses the OpenCart coupon check (dates, uses, products, minimum total). The applied code shows as a chip that removes it again.
- Free shipping goal. A progress line with the amount left, read from your Free Shipping method or a fixed amount.
- Suggestions. Related products of the cart products (Catalog > Products > Links) with a one-tap Add. Products with required options or a subscription link to their page.
- Warnings. Lines that are not in stock in that quantity, or below the minimum quantity, say so in the drawer.
- Any add to cart. The product page, category, search, specials, modules and most themes: the drawer reacts to OpenCart's add to cart answer, whatever sent it.
- Accessible. Keyboard focus stays in the drawer, Esc closes it and focus goes back. Screen reader labels and a live region for messages. Full width on phones.
The cart and checkout pages keep the standard OpenCart cart. No OCMOD, no core file edits, no outside service. One licence covers OpenCart 4 and 3.
Tested on OpenCart 4.1.0.4 and 3.0.5.1. Other 4.0.2.x to 4.1.x and 3.0.3.8 to 3.0.5.x versions are expected to work but are not tested.
Installation
Requirements
- OpenCart 4.0.2.0 to 4.1.x, or 3.0.3.8 to 3.0.5.x
- PHP 7.4 or newer
Install on OpenCart 4
- Go to Extensions > Installer and upload
kv_side_cart.ocmod.zip. - Press the install button next to Side Cart Drawer.
- Go to Extensions > Extensions, choose Modules and install Side Cart Drawer.
Install on OpenCart 3
- Go to Extensions > Installer and upload
kv_side_cart-oc3.ocmod.zip. - Go to Extensions > Modifications and press Refresh.
- Go to Extensions > Extensions, choose Modules and install Side Cart Drawer.
First steps
The drawer works right after the install with the defaults. Open a product in your store and press Add to cart.
To change anything, open Design > Side Cart Drawer (or the edit button of the module in Extensions > Extensions > Modules). The preview on the right shows your settings with products of your catalogue.
Updating
Upload the new package the same way. Your settings stay; new settings get their defaults the next time you open the page.
Removing
Uninstalling removes the settings and the events of the extension. The cart, coupons and orders are not touched.
Configuration
All settings are on Design > Side Cart Drawer.
When the drawer opens
| Setting | What it does |
|---|
| Status | Shows the drawer in the store. Off: the store uses its standard cart. |
| After Add to cart | Opens the drawer when a product is added, from any add to cart button. |
| Store message | Hides the standard "Success: You have added..." message when the drawer opens (the drawer shows the product instead). On OpenCart 3 it also stops the jump to the top of the product page. |
| Header cart | The cart button in the header opens the drawer instead of the drop-down. |
| More buttons | CSS selectors of other buttons that should open the drawer, one per line, for example a cart icon of your theme. Any link to #kv-side-cart opens it too. |
In the drawer
| Setting | What it does |
|---|
| Coupon | The coupon field. Shown only when the Coupon order total is enabled. |
| Free shipping goal | Off, from the Free Shipping method (Extensions > Shipping > Free Shipping, its Total), or a fixed amount. The amount is compared with the cart sub-total without tax, like the Free Shipping method does, and shown in the visitor's currency. |
| Suggestions | Up to 6 related products of the cart products that are not in the cart yet. Products with required options or a subscription plan show an Options link to their page instead of Add. |
Look
| Setting | What it does |
|---|
| Side | Right or left. |
| Width | 340 to 560 px on large screens. Phones always get the full width. |
| Button colour | Checkout button, progress line, links. The text on the button turns dark on light colours so it stays readable. |
Licence
Enter your licence key from your Kavio Labs account. Without a key the extension runs as a 14-day trial. When the licence is not active, the store shows its standard cart; the settings page always works.
Using the drawer
For customers
- Add to cart anywhere in the store opens the drawer with the cart.
- The cart button in the header opens it at any time.
- Plus and minus change the quantity; the field takes a typed number too (Enter or leaving the field saves it). Minus at 1 removes the line.
- The bin removes a line. The drawer says which product was removed.
- Have a coupon code? opens the coupon field. An applied code shows as a green chip; the cross removes it.
- Goes well with lists related products. Add puts one in the cart; Options opens its page.
- Checkout and View cart go to the standard OpenCart pages.
- Esc, the cross or a click next to the drawer closes it.
Opening the drawer from your own content
Any link to #kv-side-cart opens the drawer, for example in a banner or an information page:
<a href="#kv-side-cart">See your cart</a>
A store address that ends with #kv-side-cart opens the page with the drawer open.
For a theme script there is window.kvSideCart.open(), .close() and .refresh().
Prices hidden for guests
When Login Display Prices is on (System > Settings > Option) and the visitor is not logged in, the drawer shows the products and quantities without prices and totals, like the store does.
FAQ
Does it replace the cart page?
No. The cart page and the checkout keep the standard OpenCart cart, and the drawer is not shown on them.
Does it work with my theme?
The drawer is its own layer and brings its own styles, so it looks the same on any theme. It opens on OpenCart's add to cart answer, so add to cart buttons of the product page, categories, modules and most themes open it. If your theme has a cart icon that is not the standard header cart, add its CSS selector under More buttons.
Does it slow down my pages?
No. The page gets a small script and styles; the cart is loaded only when the drawer opens. Pages stay as cacheable as before.
Which totals does it show?
The lines of your enabled order total extensions (sub-total, coupon, taxes, total and others), calculated by OpenCart.
Does it check stock and minimum quantities?
The drawer shows the same warnings as the cart page: not available in this quantity, minimum quantity. Checkout rules stay OpenCart's.
What happens when the licence runs out?
The store shows its standard cart again. Nothing breaks; the settings page always works.
Does it use OCMOD?
No. It uses OpenCart events only, so it does not change core files and updates cleanly.