WebStore Overview
The WebStore used to be released with the official release of mojoPortal but with the release of mojoPortal 2.6, it was made available as a separate download. This was done because the feature is lacking a lot of features people now expect from an ecommerce system. We have plans to either rewrite the current WebStore or develop a new add-on.
Download WebStore
Current Functionality
- Downloadable products
- MS SQL and MySql are currently supported.
- Currently, there is a simple Product List and an optional "Current Specials" list with links to add products to the cart. There is a product details page where more information about products can be shown.
- Tax calculation
- Several discount scenarios
- Process payments through the Authorize.NET, PlugNPay, PayPal, and WorldPay payment gateways and customers can download immediately after purchase according to configurable download terms, i.e. how many downloads allowed, date range, etc.
- Multiple stores within a site are supported but the payment gateways settings are at the site level so all stores would use the same commerce credentials in a given site.
- Users can log in and see their purchase history and download products for which the download ticket has not expired or been invalidated.
- Sales Reports
Planned Improvements:
- Product Creation Wizard
- Shipping calculations and support for shippable product fulfillment tracking.
- Product Categories and browse by category feature
How to Use:
- Download the latest WebStore release from GitHub.
- Copy the contents of the release zip file to the root of your mojoPortal installation.
- Browse to www.yourwebsite.url/setup/default.aspx
- Add the WebStore feature to a page the same as any other feature. It then exposes its administration links according to edit roles of the page or feature instance.
You have to configure eCommerce settings before you can actually process orders.
Note that the store administration allows configuring of products and offers. Products are not sold directly but through offers. Offers can contain 1 or more products. This allows bundling of products but makes configuration a little cumbersome so we're planning a product creation wizard. Currently, in order to sell a Product, you must first create the product and then create an Offer to sell it in.
Skinning the WebStore
There is an optional Cart link control which can be added to the skin's layout.master to show a link to the WebStore's cart page with a count of items in the cart.
Skinning the WebStore is done primarily through theme.skin settings (Display Settings) and CSS.
Cart Link
If you want a cart link on your site so users can see how many items they have in their cart at any particular time, simply add the following to your site skin's layout.master.
Add to the top of the layout.master, under the <%@ Master
line.
<%@ Register Namespace="WebStore.UI.Controls" Assembly="WebStore.UI" TagPrefix="webstore" %>
Then, add the following wherever you want the link to appear on your site.
<webstore:FlexCartLink id="cartlink1" runat="server"
PageId="000" ModuleId="000" ModuleGuid="00000000-0000-0000-0000-000000000000"
IncludeItemCount="true" IncludeCartTotal="true" CssClass="sitelink"
LiteralTopMarkup="<li class='topnavitem cartnav'><i class='fa fa-shopping-cart'></span>"
LiteralBottomMarkup="</li>" />
You must configure the pageid, moduleid, and ModuleGuid to match those values for your WebStore. The example extra markup uses the cart icon from FontAwesome 4.7.
Display Settings
First, open the theme.skin and add the following (check to be sure it's not already there). Then, you can make changes as necessary. default are shown
<%@ Register Namespace="WebStore.UI" Assembly="WebStore.UI" TagPrefix="webstore" %>
<webstore:WebStoreDisplaySettings runat="server"
UsejPlayerForMediaTeasers="true"
UseAltCartList="false"
EmptyCartFormat="<div class='alert alert-info'>{0} <a class='alert-link' href='{1}'>{2}</a></div>"
ContinueShoppingLinkFormat="<a href='{0}' class='keepshopping store-cart-keepshopping btn btn-info'>{1}</a>"
StartShoppingLinkFormat="<a href='{0}' class='store-cart-startshopping btn btn-info'>{1}</a>"
ConfirmOrderLinkFormat="<a href='{0}' class='checkoutlink store-cart-confirmorder btn btn-success'>{1}</a>"
LoginToCheckoutCssClass="store-cart-login btn btn-info"
CartCheckoutActionsDivClass="row"
CartCheckoutActionsEmptyCartOutsideTopMarkup=""
CartCheckoutActionsEmptyCartOutsideBottomMarkup=""
CartCheckoutDiscountDivCssClass="settingrow discountcode store-cart-discountcode"
CartCheckoutLinksDivCssClass="settingrow checkoutlinks store-cart-checkoutlinks"
CartCheckoutLinksDivOutsideTopMarkup=""
CartCheckoutLinksDivOutsideBottomMarkup=""
CartCheckoutLinksDivAnonymousExtraCssClass="store-cart-checkoutlinks-anon"
CartCheckoutLinksDivAnonymousOutsideTopMarkup=""
CartCheckoutLinksDivAnonymousOutsideBottomMarkup=""
CartPayPalDivCssClass="settingrow paypalrow store-cart-paypal"
CartPayPalDivOutsideTopMarkup=""
CartPayPalDivOutsideBottomMarkup=""
CartSubTotalFormat="<div class='settingrowtight carttotalwrapper storerow subtotal'><label class='settinglabeltight storelabel'>{0}</label> {1}</div>"
CartTotalFormat="<div class='settingrowtight carttotalwrapper storerow total'><label class='settinglabeltight storelabel'>{0}</label> {1}</div>"
CartDiscountTotalFormat="<div class='settingrowtight carttotalwrapper storerow discount'><label class='settinglabeltight storelabel'>{0}</label> {1}</div>"
CartShippingTotalFormat="<div class='settingrowtight carttotalwrapper storerow shipping'><label class='settinglabeltight storelabel'>{0}</label> {1}</div>"
AdditionalBodyClass=string.Empty
ProductDetailsRatingPanelDivCssClass="productratingwrapper"
ProductDetailsOffersDivCssClass="clearpanel offerspanel"
AddToCartButtonCssClass="store-btn-addtocart btn btn-success"
CartTableCssClass="cartgrid table table-bordered table-striped"
OfferTableCssClass="offergrid table table-bordered table-striped"
/>