Add a wholesale portal to a static site

Before you write any HTML

Set it up in the dashboard first

Three things, all under your own account. The portal has nothing to show until they are done, and an empty catalogue is nearly always one of these.

1. Add the accounts

   Wholesale → Customers. Company, contact name and the email they will sign in with. That email is the account: there is no password to set or send.

2. Mark the products

   Tick wholesale on each product you sell by the case. Wholesale products are refused by the ordinary storefront checkout, so they can stay active without appearing for retail shoppers.

3. Set the prices

   A wholesale price on the product, or a price for one specific customer, each with a minimum quantity. Without either, the account simply sees your retail price.

The markup

Two containers and the script you already have

If the site is already selling retail through SuiteStatic, the config block and the script are in place and you only add the two containers. Put them on any page you like, together or apart.

<!-- Once per page, the same block retail uses -->
<div hidden id="commerce-config"
     data-public-key="pk_live_..."
     data-api-url="https://api.suitestatic.com"></div>

<!-- Sign-in. Becomes "signed in as ..." once authenticated -->
<div class="commerce-wholesale-login"></div>

<!-- The catalogue. Renders nothing at all when signed out -->
<div class="commerce-wholesale-catalog"></div>

<script src="https://suitestatic.com/widget.js"></script>

That is the whole integration. A public visitor who lands on this page sees a sign-in box and nothing else — no product names, no prices, and no request to the server that would return them.

What your customer sees

Sign in, order, done

1. They enter their email

   A six-digit code arrives. It lasts ten minutes, works once, and there is no password to forget. They stay signed in for 30 days.

2. Their catalogue appears

   Only the products their account may order, each at their price, with any minimum quantity shown. A running total updates as they type quantities.

3. They send the order

   With an optional PO number, delivery date and note. They see a clear confirmation that nothing has been charged.

What you get

It arrives as an ordinary order

The request lands in your Orders tab marked unpaid, with the account, the PO number and the delivery date attached. You are emailed a copy, and so is the customer, worded so nobody mistakes it for a completed purchase.

• Nothing is charged and no card is involved. Take a cheque on delivery, invoice on your usual terms, or whatever you already do.
• Stock is untouched until you confirm. A request is not a sale, so submitting one cannot draw down your inventory.
• Unpaid requests are not counted as revenue until you mark them paid, so your figures stay honest.

Styling

Restyle it to match the site

Everything is plain markup with stable class names and only a thin default stylesheet, so your own CSS wins without a fight. The useful hooks:

/* the bordered panel around each section */
.cw-box { border: 0; padding: 0; }

/* inputs, primary buttons, and the quieter secondary ones */
.cw-input { }
.cw-btn { }
.cw-btn-quiet { }

/* the catalogue table, quantity boxes and the running total */
.cw-table { }
.cw-qty { }
.cw-total { }

/* messages under a form */
.cw-msg { }
.cw-err { }

The table collapses to stacked rows below 520px on its own. If you replace the layout entirely, keep the class names on your elements.

Worth knowing

How pricing is decided

Prices are never read from the page and never sent by the browser. The order carries product ids and quantities only, and the price is worked out on our side from the account that is signed in, in this order:

• A price you set for that customer and that product, once its minimum quantity is reached.
• Otherwise the product's wholesale price, once its minimum is reached.
• Otherwise your retail price.

This means nothing in your HTML can change what an order costs, and a customer cannot order a product you have not given them. It also means an account that sees a retail price is telling you a wholesale price has not been set for that product yet.

Something not working?

Still stuck? Email eriewebdesigns@gmail.com.