Visit SmartWin




    Technology Web Site CyberOffice Storefront Customization Wizard
-- with a browsed-based WYSIWYG HTML Editor
Follow the steps below to enable and configure the online storefront wizard on a storefront.
Go Back
Online Storefront Customization Wizard

CyberOffice Franchise & Shopping Mall  (CyberMall) or CyberOffice Warehouse Builder  (CyberBuild) comes with a convenient, instant, and browser-based storefront wizard module that can assist the store owner to modify the storefront pages on the fly. For CyberMall the module is located and installed on the first franchise site (the Site1 folder). It can go with any storefront (not necessarily one of CyberOffice kind!) and on any server that supports Microsoft Active Server Pages.

The module is also pre-installed with CyberOffice Warehouse Builder.

The online wizard offers a built-in WYSIWYG HTML editor on Internet Explorer version 5.5 or higher (excluding Mac or Windows CE).

Read On or Click to Start the Online Wizard.

How does it works

The online wizard offers a way to alter a Web site on top of an existing template or design of the site. It does not start with a blank site. Rather the program detects and stores the existing Web pages, JavaScript pages, and style sheets and store them into a database. By default, it creates the database for you automatically (on the /_private folder), but can be altered to point to an existing database. The store owner can then modify the information stored in the database.

At run time, the wizard intercepts and replaces the original Web pages by the altered ones stored in the database. 

If you wish to By-pass the WYSIWYG interception and let the visitors browse directly on the underlying *.htm Web pages, simply rename front.asp to front0.asp . You can still use the latter to edit and save pages.

Apparently, this trick works for any Web site with no server-side scripting like ASP, PHP or CFM, not just on CyberOffice storefronts. Therefore, when properly used,  it can offer an ideal tool for a Web designer to hand over to a designed site to his/her client with a self-management facility.

To Web Designer

You can download all the HTML pages, CSS styles, JS scripts on the storefront, edit them locally and upload back to the server. Then under this storefront editor, click on the "Reload ALL from Template" button to load into WYSIWYG wizard.  You client can then simply work on top of whatever you have designed for them.

Alternatively, you can simply "Ctrl-A, Ctrl-C (on source) -> Ctrl-A, Ctrl-P (on destination)" to copy the entire contents of a page to your favourite HTML editor. Copy them back after editing.

Images should be uploaded to the Assets folder and referenced from that location. It is the default folder under which the Wizard built-in upload utility (on the bottom of page) store its files.

The WYSIWYG wizard marks the locations of embedded JavaScript code segments that will generate dynamic contents at run time from the underlying database in <%JavaScript%>. You can move them around but should avoid deleting them unless you understand the codes behind. 

Installation

Find and copy over the following files (from Site1 folder for CyberMall) to a new storefront

  • default.asp
  • front.asp
  • image.asp
  • main.css (if absent on the storefront)
  • htmlarea (folder)
  • assets (folder, if absent on the storefront)

Edit front.asp, image.asp, assign a UNIQUE database name for each storefront (when there are mulitple ones):

  • Const DSN = "Site1_Template"

Optionally, you can alter the username and password (to access the wizard) to secret ones:

  • Const UID = "Shop"
  • Const PWD = "Password"

Futhermore, you can enable the line (simply remove the single quote in the front of the line)

'AuthorizedUsers = UID

to invoke the standard Windows Logon as the authenticatio method.

Special Folder Permission Settings

  • Enable Windows file permission "Modify" for IUSR_XXX on the "Assets" folder;
  • Enable Windows file permission "Full Control" for IUSR_XXX on the "_private" folder;
  • Disable "Read, Write, Log" permission on the "/_private" folder, or
  • Protect "/_private" under a  password (This is IIS or Web site settings, not to be confused with the Windows file permissions. The aim is to make sure that the database cannot be downloaded via browsers).

These may be done from the IIS Management Console or Web site Control Panel. The Image Upload requires CyberBuild.DLL registered on the server (it will remind you if this is not already done).

Advanced Settings

The online wizard will not work on ASP pages. To overcome this issue on the view_cart.asp page (the shopping cart entry page), you may need to modify the header.js under the shopping_cart folder, replacing the line

var my_detail = "detail.htm"
     by
var my_detail = "front.asp?file=detail.htm";

The default installation has done so on the Site1_Cart folder for CyberMall and the Shopping_Cart folder for CyberBuild.

If the username or password are changed via any means other than the wizard itself, make sure you (as admin) specify the old ones (on front.asp) via, for example 

  • Const LAST_UID = "Shop"
  • Const LAST_PWD = "Password"

so that the previous saved contents will be moved over.

There are a number options you can configure. All of the settings can be done on the top of the front.asp file.

  1. Save back the changes permanently to the the template file.
  2. Exclude sub folders from the realm of the online wizard.
  3. Move the database off the "/_private" folder or configure an MS SQL or MySQL database for the template (in the latter case the wizard will not create the database, but will create the table under the database automatically).
  4. Configure an alternative style sheet, alternative location for the uploaded images.
  5. Integrate the Logon with the standard Windows Authentication process.

Search Engine Settings

CyberBuild or CyberMall lets you generate a separate hierarchical set of search engine feeding pages. To make them work with the online wizard, 

  1. Replace the DETAIL_PAGE setting on the /_private/search_engine.vbs  (or search_engine1.vbs) script by
    DETAIL_PAGE = "front.asp?file=detail.htm"
  2. Similarly, you specify "front.asp?file=detail.htm" as the product detail page if the search engine pages are generated under Shop Manager -> Storefront Settings
  3. Alternatively to the above, insert or enable the following script on the top of the detail.htm page

    <script language="JavaScript">
    var curPage = "" + window.location;
    if (curPage.indexOf('front.asp') < 0 && curPage.indexOf('?') > 0)

    var i = curPage.indexOf('?'); 
         curPage = curPage.substring(i + 1, curPage.length); 
         window.location = 'front.asp?file=detail.htm&' + curPage + '&front.asp'; 
    }
    </script>

Click to Start the Online Wizard

Back to Top

  Any comments, suggestions, or questions? Write Us!
  ?SmartWin Technology, 1997 - 2010