BoltWire

Pro Modules

Store

Want to put up a shopping cart on your site? We've done much of the heavy lifting for you. Basically, you just start adding items, make a few tweaks, and you should be good to go.

Here's how it all works.

First, to get your store working, you need to enable the store and card plugin in site. config. Just add these lines:

enableStore
enableCard

The first helps with the construction of your shopping cart system. The other provides an integration with stripe to create credit card capabilities. Click here for more info on how the card plugin works.

Once it is turned on, things should start working right away. We've actually added a couple sample items so you can get a feel for how it all works. To check it out, just go to page "store".

Now you just need to add a few items of your own and then configure a few settings, and you should be good to go.

Adding Items

To add an item, there are two steps. First, adding it to your items list (page info.store), and then second, creating a unique item page for each item, with a fuller description of the product, including any pictures you want. This is your main sales page for each item.

1) To add something to your items list, go to SITE > STORE and then click Items. There you'll see a list of all your current items with options to edit or delete them. And there's a button to add a new item. Just click that and fill in the fields. For your id, chose a short single word or item code. No spaces or punctuation.

The default installation comes with two sample items: "widgets" and "doodads". Feel free to delete these, or hang on them as samples and just don't display them in your store. :)

Note that an item doesn't automatically display in your store just because you have added it to your items list. It just becomes available to display.

2) To create an item page, go to store.item.id. Write up a description of the item, add any photos you want. Then, at the bottom of the page, add code like the following:


You can copy this from the sample item pages, if you forget the exact syntax.

Basically this small script checks to see if the price is set for your item, and then if it is, it displays the price and inserts an "Add to Cart" form for the item. If not, it reports the item is not available.

3) Last but not least, go to page store.express and look for a line that looks like this:


Simply add your new item id to the list ("widgets,doodads") in the order you want it to appear, and everything should spring to life. Just go to page store and check it out!

Store Configurations

While we've tried to make your shopping cart system as easy to use as possible, there are a number of ways to configure it, depending on your needs. Here are some of your options.

The store display
You can configure the store display anyway you want. By default, it displays the contents of store.express, which is a condensed order form for those who know what they want.

You could instead show several featured items and give each one a purchase option, using the similar syntax to what is on the item pages. Or you could conclude each with a link to the longer item page.

If you have multiple departments, each with various items, you can make several copies of the list function on the store.express page, each with its own items, and dept name.

Or you could copy the store.express page to store.dept.1 and store.dept.2, etc, and then create separate lists for each department. Or create a special display page of featured items for each department.

You could make your item pages searchable. Or create an alphabetical index of items. Or you could put up fancy offer/splash pages which point the user to the appropriate store item page. Or take them right to the shopping cart for checkout!

Literally, the possibilities are endless.

Shipping Costs
There are 4 site.config variables you can set for your cart that control how shipping costs are calculated. Here are the default settings:

shippingrate: .2
shippingmin: 35
shippingmax: 100
shippingfree: 1000

Basically, the default settings calculates shipping at 20% of the subtotal. If the subtotal drops below $35, they will be charge a minimum shipping charge of $7 ($35 * 20%). If they purchase more than $100, their max shipping tops out at $20 ($100 * 20%). If their subtotal exceeds $1000, the shipping rate goes to $0.

Note that you can set any of these to false to change how shipping is calculated.

Feel free to change these settings and tinker with the shopping cart a bit to see how it affects your shipping rates.

Payment Options
Some members may have trouble with using a credit card and prefer to send in a check or pay by PayPal. This shopping cart has both options included, if you wish to enable them.

For pay by mail, add this line to store.checkout somewhere near the top:


To enable PayPal, enter your paypal business id (preferable) or paypal email address as the paypalID value in site. config. Then add this to your checkout page:


Obviously, you could provide both options. But there are disadvantages to both, and I am reluctant to recommend either. If they use the regular Stripe integration, you not only have instant confirmation, but a receipt is automatically generated, and stored in their account. This does not happen with either of the above options.

Furthermore, with PayPal, you have to go into the site admin area to find the cart that matches the payment to figure out what the actual order is, and then manually turn that cart into a receipt.

In general, it may be simplest to leave both of these options off. If you do use these options, be sure to edit and customize the store.mail and store.paypal. The pay-by-mail page in particular requires you to enter your business mailing address. That can be set in site.config by entering a line like this:

myaddress: 123 Street St<br>City, State ZIP<br>Country

Be sure to use the <br> tags to get it to display right...

Selection Options
Let's say you have a t-shirt that is available in different sizes. Rather than creating a separate item page for each option, you can create one item page and allow the user to select an option.

To do this, you have to first create a store item for each size. You could for example give them ids like tshirt-small, tshirt-medium, and tshirt-large, and a generic tshirt item which actually carries the description for the three sizes.

Now, add the tshirt item to your store.express page. You don't need to add the other items. The size will be selected on the item page.

Last, on the store.item.tshirt, you can use several approaches to give your user the various options. Here's one example:


If you wanted to do something a little more fancy, you could try this as well:


This still requires you to create a store item for each of the various permutations (from tshirt-red-small to tshirt-green-large) but demonstrates how to do more creative things with the default add to cart form.

Shopping Cart
Here's another little thing you might want to consider adding. Somewhere on your page add a "shopping cart" link with a number in parenthesis of the number of items in your cart. You could even have it pop on when there is something in the cart, and disappear when the cart is cleared.

Here's one way you could write the code for that:


Just stick that on your page somewhere, or some version of it, and it will give them an easy reminder they have something in their shopping cart, and even how many items.

Instant Checkouts

But the store plugin is not limited to just working in your actual store. You can create purchase processes in various places on your site with custom cart types. For example, you can use it with offer pages! Let's say you had a digital class you wanted to sell. You could easily go straight from an offer page (landing page) to an instant checkout page, by just setting the offer type to purchase, and including offer.name.purchase on your main offer page.

Basically, this creates a variation of the normal store cart and check out page, with some added features. Shipping is turned off for example. And it skips the cart preview page, going straight to the checkout. Furthermore, you don't have to add these offer items to your info.store page!

To check it out, I've included a demo offer at offer.premium. It's a super simple example of how to set up a training class for $297.

If you try it, you'll see it basically pulls in all their member info (if it's on file) and goes straight to purchase. If they have made a purchase before, even the card information is supplied--making it literally one click. If they are not logged in, in prompts them to do that before allowing checkout. And once purchase is confirmed it automatically enrolls them in the class and adds them to an email drip sequence. Cool!

You can sell as many classes like this as you wish, by creating multiple offer pages. For more information about the purchase offer type, expore the offer module.

Donations & Fees

There are many other ways to customize and use this plugin. You can use it to accept donations, for example, or to manage recurrent payments like subscription fees.

I've actually included complete payment processes for both of those in the accelerator platform as well. One is an example for how to setup a member donation page, and another for how to setup a recurrent payment system. Here are the page locations if you want to try them out:

members.gift - send in a donation for any amount
members.partner - become a regular monthly partner

You can delete these pages eventually if you wish, but you may wish to keep them around to use as templates for your own payment processes. Just tweak as desired, or copy code from these pages and create something entirely new.

For more information, see the card module. Be sure to look especially at the section on creating charge scripts. Very powerful!

Technical Details

Here are a few technical details about the conditionals, functions and commands available to you via this plugin. This should help you make more sense of the code used in the various store pages.

Conditions

cart
This is just a shortcut function to tell if something is defined in the shopping cart. So for example [if cart street] is used, it will return true if street is defined as a data var in the current cart.

Functions

cartinfo
This is just a shortcut function, making it easier to abstract information from the cart, by simply specifying the field you want. To use it, just put something like: <(cartinfo title)> or <(cartinfo total)> and if will find the correct cart and return the requested information.

setcart
This function sets the cart type, and is only needed if it is not the standard value of {p1}. Make sure it is set as a variable function, and higher on the page than any other function that might need it. Typically, you put {(setcart gift)} on a page and then use <(cartinfo title)> to ensure cart is set before the title is requested, regardless of where it is found. It is only required in special situations.

Commands

savecart
This is the work horse of the store function. When you issue a command to savecart, the store plugin first checks to see if a cart exists. If not, it creates one. Pulling in information from the users mbase records. It then updates the items list in the cart. That can be done by setting all the required parameters (item, quantity, cost, and name, and optionally, setting shipping to false). Or, alternately, by passing it a series of POST values with item ids (defined on info.store) and quantities. It assembles all the data calculates subtotals, shipping, and final total, etc, and then saves everything to the cart. When updating, existing items are not removed, unless they are set to a null value or set to quantity 0, making it possible to add individual items to your cart, change quantities, or remove items quite easily.

And last but not least, there is a <(paypal)> function which generates a "Pay by PayPal" button, and a <(paypalthanks)> function which can be put on a success response page which renames the current cart into a PayPal receipt. Using PayPal is not recommended if you can use Stripe.