Username Password
Bookmark and Share

Create Your Shop Front

Once WebGUI Shop is configured by a site administrator through the Admin Console, it's time to create a shop front. After all, people can't shop if they don't have a store to shop at.


You'll want to create a container asset to house the shop. Container assets are found in the New Content menu of the Admin Bar, and are located at the top of that menu. You first add a container asset to the site, and then you fill up that asset with regular assets. Some container assets you may be familiar with include the Page Layout asset, used to create a new page on a site, and the Folder asset. WebGUI Shop introduces a new container asset called Shelf, which will be discussed in its own chapter.


There are a couple of options to consider when organizing your shop. If you are selling a fairly small number of Products, or other SKU assets, on your site, you could probably get away with simply creating a Page Layout and adding Products directly to it, as illustrated below. In this scenario, your shop is in one location. Users visit the shop page, and add items to their carts directly from it.



However, if you are selling many Products of a wide variety, you might want to organize your Products into categories. To do this, you use the Shelf asset. Just like in a physical store, you can create a Shelf, and place Products directly on it. Shelf will display the Product asset's title/name, an image if there is one associated with it, and the Product price. Users click on a Product on a Shelf to be directed to the actual Product asset where it can be added to the user's cart, or the user can add a product directly to the cart from the shelf. In the example below, a Page Layout was created. Then different Shelf assets were added to it to create categories of related Products. Alternatively, you could create a Shelf as a parent asset and access the Shelf directly from the site navigation.




Shop Macros

Before going further, it's important to understand what the Shop related macros accomplish. These macros should be built into your Shop style. This will ensure that they appear to the user from anywhere in your Shop.



This macro will display a small cart icon next to a “View Cart” link. Users can click on this to be directed to the full cart view.



The ^ViewCart; macro is included in some SKU asset templates by default.



The ^MiniCart; macro places a miniature cart directly on the body of the page. When the asset is added to the style, the macro displays a mini version of the full cart view. Included in the mini cart view are each item, its quantity currently in the user's cart, and the total purchase price. There is also a link to direct the user to the full cart view so the user can complete the purchase.



Use this macro if you want users to always be able to see what is currently in their carts, without leaving their current location on the site.



The ^CartItemCount; macro simply displays the number of items in a user's shopping cart. In the example to the right, the user has three items in the cart.



The true intent of ^CartItemCount; is to be combined with ^ViewCart; so that the user sees a link to the cart along with an indication of how many items are currently in the cart. To do so, the following would be entered: ^ViewCart;(^CartItemCount;) This generates (included in Shelf by default):



Note: It is recommended that the ^ViewCart; and/or ^MiniCart; macros be built into the site/shop design to make it easy for users to check out from anywhere in your Shop. See the section on these macros earlier in this chapter to learn more about them.


Set up Your Premises

Create a container asset to house your Shop. This first example uses a Page Layout. Shelf will be covered in its own section.


  1. Under the New Content tab, click on “Page Layout.” The “Add Page Layout” screen will open.



  1. In the “Title” box near the top of the screen give your shop a title.

  2. The “Menu Title” is the title of this page, or your shop, as it will appear in the site navigation. The URL field is the URL of this asset, or page. You can leave the Menu Title and URL fields blank and WebGUI will fill them in for you, or you can enter them yourself.

  3. In the “Description” field you can enter content that will be displayed as static content at the top of this page, regardless of any other content placed on the page.

  4. In the Display tab you can set display options for this page.

    1. The “Hide from navigation?” field determines if this page's menu title will appear in the site navigation.

    2. The “Open in new window?” field determines if this page will be opened in a new browser window..

    3. The “Display the title?” field determines if the title of this page will be displayed on the body of the page to the user.

    4. The “Style Template” field allows you to select a style to wrap this page in from the dropdown menu. If you have a special style template to apply to your shop, select it here. A page layout's style will override the style of any regular asset that is placed on it.

    5. The “Printable Style” is the style template used for the printable version of this page.

    6. The “Page Layout Template” determines the placement of regular assets on the page. This will be represented by some shaded gray boxes.

    7. The “Add New Assets” field allows you to determine if you want new assets, such as Products, to be added to the page at the bottom of the page or at the top of the page. Assets can then be dragged and dropped into new positions.

    8. The “Assets to Hide” field will only contain options if you are editing an existing Page Layout asset that already is filled with content. It contains a checkbox list of assets this page contains. You can check an asset you want hidden from view. When you are ready for it to display again, simply uncheck it. If you are creating a brand new page to house your shop, this field will be blank. In regards to Shop, you might wish to hide Products that are currently not available in your shop, but will be again at a later time. For example, seasonal items that you only sell during certain months of the year. By hiding them, users won't be able to add them to their carts to purchase, but the Product asset will still exist and you can still access it and manage it through the asset manager. When it's time to sell that Product again, simply make it visible again.

    6. The Security tab allows you to set viewing and editing privileges for this page

    1. The “Owner” will always have full editing and viewing privileges for this asset.

    2. The “Who can view?” fields allows you to select the group of users allowed to view content displayed on this page.

    3. The “Who can edit?” field determines the group of users allowed to edit this page layout asset.

7. Metadata allows you to attach arbitrary fields to your content for search engine friendliness, profiling, or simply to add extra display options. The standard metadata tab is shown below. To add metadata fields, use Content Profiling in the Admin Console.

8. Click “save” at the top of the screen. This will bring you back to the new page you just added.



You will see the title at the top, followed by the text you entered in the description field. If you entered the ViewCart macro you also see the cart icon next to the View Cart link.


Once a page has been created to house your Shop, it's time to create Products for people to buy, and Shelf assets to help keep your Shop tidy.

Keywords: cart macro macro min cart macro

Search | Most Popular | Recent Changes | Wiki Home
© 2023 Plain Black Corporation | All Rights Reserved