Cart Drawer

The Cart Drawer is the slide-out bag. The Cart Drawer Trigger is the bag icon with a count. Customers click the icon, the drawer slides out, and they can check out.

This is the block version of the older [nc-cart-icon] and cart drawer shortcodes. You no longer need those shortcodes.

The drawer is the bag. Cart Checkout is the register. Do not put Cart Checkout in the header.

Before you start

1. North Commerce and North Commerce Blocks are installed and turned on

2. You have at least one product people can add to the cart. See Create a product

You need both pieces:

• Cart Drawer Trigger — the icon. Put this in the header.

• Cart Drawer Blocks — the slide-out bag. Put this once on the site (the header or footer is fine, as long as it loads on every shop page).

Add the bag icon to your header

1. In WordPress go to Appearance and open the header (or the page / template that holds your menu)

2. Click the + button near the menu

3. Search for Cart Drawer Trigger

4. Click it once

Search for Cart Drawer Trigger in the block inserter

1. Click the icon so it is selected

2. In the right-hand sidebar you can pick the Icon (Shopping Cart, Shopping Bag, Shopping Basket, or Handbag), the Icon size, and the Count badge size, position, and colors

3. Click Save / Update

You can put more than one trigger on a page. Each one opens the same bag.

Add the slide-out bag

1. Stay in the header, or open the footer

2. Click the + button

3. Search for Cart Drawer Blocks

4. Click it once

Search for Cart Drawer Blocks in the block inserter

The header (“My Bag”), the product list, the empty-bag message, and the Checkout button all come with it.

1. Click Save / Update

You only need one Cart Drawer Blocks on the site.

What comes in the drawer

You can leave everything as-is.

• Cart Drawer Header — the title (starts as My Bag) and the close button

• Cart Drawer Product — each item in the bag (photo, name, price, quantity)

• Cart Drawer Checkout Button — takes them to Cart Checkout. The label starts as Checkout. You can show the total on the button.

• Cart Drawer Empty Cart — what they see when the bag is empty. The message starts as Your Cart Is Empty. The button starts as Shop All Products.

To design the empty bag in the editor, click Cart Drawer Blocks and turn on Preview empty cart state. That switch is editor-only. The live site picks the full or empty state from the real cart.

What your customer will do

1. Add a product from a Product page or a Product Query card

2. Click the bag icon in the header

3. See what is in the bag, change the quantity, or remove an item

4. Click Checkout

The open cart drawer with a product in the bag

If the bag is empty they see the empty message and a way back to the shop.

Make sure it works

Open your site in a new browser tab, as if you were the customer.

1. You should see the bag icon in the header

2. Add a product to the cart

3. The icon should show a count

4. Click the icon. The drawer should slide out with that product.

5. Click Checkout. You should land on Cart Checkout.

If something looks wrong

• No bag icon. You did not add Cart Drawer Trigger to the header.

• The icon does nothing. Cart Drawer Blocks is missing, or it is not on this page.

• The bag is always empty. The customer did not add a product, or Add to Cart is missing on the product page.

• Checkout goes nowhere. Your Checkout page does not have a Cart Checkout block.

SEE ALSO: Product · Cart Checkout · Order Confirmation