WebPages

The Web Pages section allows the merchant to edit the actual ASP and HTML pages that make up the retail web site. Each page can be opened and modified in the built-in WYSIWYG editor, a simple text editor, or an external editor. Changes to the pages will be reflected on the store web site.

Includes

The Includes section is where merchants can edit files that are included by other Web Pages in the store. Examples of these files are the Store Headers and Footers, navigation menus, and other content that is repeated on multiple pages. This interface allows the merchant to edit include files in the built-in WYSIWYG editor, a simple text editor, or an external editor.

Scriptlets

The Scriptlets section is where merchants can manage the scriptlets available for their store. Scriptlets allow small fragments of ASP, JavaScript, and/or HTML to be represented by a user-friendly name. They are used in conjunction with the WYSIWYG editor to make it easier for Merchants to work with ASP pages.

File Name

You must enter a file name. By default the file will be created as an Active Server Page (ASP) script. You can change the file to another accepted type by selecting the desired extension from the drop down menu.

Page Title

If you wish for the page to have a title, enter it here. In most common browsers, the page title will appear at the top of the browser when a customer views the page.

Initial Contents

You can select the initial contents of the file from this menu. If you select blank file, you will need to add your content to an empty file. You can also choose to start with a copy of an existing page.

Finally, if you wish to edit this page now check the "Open in Editor" box. This will open the WYSIWYG editor as soon as the page is created. If you do not check this box, you will be returned to the Edit Web Page menu when you click Finish.

Design View

This is the built-in WYSIWYG editor. It allows you to easily add and move your Scriptlets and Include files. As shown in the example above, the first dynamic element to be output on this page is an Include file, " {storeheader.asp} ". The example above also uses many scriptlets to output the product information and options. These scriptlets are shown within brackets, some examples, " [ ProductImage ]

This is the design view toolbar. Each button on the toolbar is discussed below.

Design Toolbar

The top toolbar contains many standard text editor functions such as bold, italic, underline, image and url insertions, lists, basic table creation, alignment, fonts, and colors. Each item on the tool bar is pictured and discussed below. You can use these tools with Design view to quickly manipulate your page look and feel, then switch to HTML View to add any custom details.

 

The first three buttons on the menu bar are Bold, Italic, and Underline. Clicking one of these buttons will set (or remove) the style of the text currently selected in the editor. You can apply more than one style at a time.

 

The next three buttons on the menu bar are Cut, Paste, and Copy. These function just like in a standard text editor.

 

These buttons are Background Color, Insert Hyperlink, and Insert Image. The background color button allows you to choose a color for the background of your page.

 

Insert Hyperlink prompts the user for a URL. If text is selected in the editor, the selected text is linked to the URL provided. If text is not selected, the linked URL is inserted in the document at the current cursor location.

 

Clicking Insert Image will open the image browser pop-up window. This allows you to view all images currently available in your store directory and to upload new ones. You can then drag and images into the editor window and drop them in the desired location. You can also drag and drop images from other websites if you choose, but keep in mind that the images will be linked to the external site and not saved to the AbleCommerce store directory.

 

These two buttons are for ordered lists and unordered lists. Clicking them will allow you to build either a numbered or bulleted list of items.

 

These are the left, center, and right justification buttons. They will align the current paragraph or selected text to the position indicated.

 

These buttons are for working with tables. The first is Insert Table and the second is Show / Hide Borders. Clicking the Insert Table button will allow you to enter rows, columns, and other associated parameters for a table. Clicking the Show / Hide Borders will show (or hide) the borders for tables that have border set to 0. These borders appear as a dotted line so you will know which are hidden and which are visible.

 

The last set of buttons on the tool bar are all related to font. The first button (F) brings up a dialog screen where you can completely configure the font, including face, size, color, and style. You can also preview your selections as you make them so that you can get the exact look you want. The following two drop downs can be used to change the face and size of the currently selected text. The final two buttons are for changing the fore color and back color of the currently selected text.

Inserting Includes

There are two ways to insert a new include file when in design view. First, you can simply type the name of the include file enclosed in curly brackets. This is usually the quickest choice if you know the name of the include file. The second option is to right-click in the editing window and choose "Insert Include" from the pop-up menu. When you do this, you will be presented with the screen below.

 

 

From the list, select the file you wish to insert and click OK. The file name will be inserted in your page at the approximate location where the right-click occurred. It will appear as a file name enclosed in curly brackets. For example:

 

{storedirectory.asp}

 

Inserting Scriptlets

 

There are two ways to insert a new scriptlet when in design view. First, you can simply type the name of the scriptlet enclosed in square brackets. This is the simplest choice if you know the name of the scriptlet you want. Second, you can right-click in the editing window and choose "Insert Scriptlet" from the pop-up menu. Doing so will open the list of scriptlets available to your store in a pop-up window (shown below).

 

 

 

From the scriptlet window, you can click and drag the scriptlet name (the Identifier) right into place in the WYSIWYG editor. You can also leave this window open for later use, or you can use it to drag scriptlet names into other drag-and-drop applications such as external HTML editors.

 

When you save the page, any scriptlets will automatically be converted into the appropriate scripting code. The next time you edit the page, scripting code is automatically converted back to scriptlet names so that you can move, modify, or delete the scriptlets. This way, scriptlets make it easy to work with pages that contain complex scripting code.

<HTML> View

If you would like to add some custom code that can't be added through the WYSIWYG editor, then you need to click on the <HTML> tab. From this view you can add or modify your page's HTML source code. The [scriptlets] and {include files} are displayed in the same manner as in Design view.

This view is especially useful if you need to modify your tables. From design view, you cannot modify a table's properties or structure once it is added. From HTML view, you can make these changes and then switch to design view to make sure the look and layout is correct.

Click the Finish button the save the page or click the Cancel button.

External Editors with Source View

To use an external application to edit the file, first copy the source and paste in your editor. Then you make updates in the external editor. When you are finished, copy the entire source from the external editor and paste back into the AbleCommerce source editor. Note that if you have direct access to the store directory (e.g. through FTP) it is also acceptable to work directly with the files.

Enable Script Compiler

The source editor also includes an option to "Enable Script Compiler". Normally when you work with a file in source view it is not altered in any way by AbleCommerce. If you check this option, AbleCommerce will check your updated code for any scriptlets or includes. If they are found they will be converted into the equivalent scripting code.

This is particularly useful if you want to use scriptlets in your external editor. You can reference them by the scriptlet name. Then when saving the file, check this option and the scriptlet code will be automatically generated in the same manner as the WYSIWYG editor.

File Name

You must enter a file name. By default the file will be created as an Active Server Page (ASP) script. You can change the file to another accepted type by selecting the desired extension from the drop down menu.

Include Title

If you wish for the page to have a title, enter it here. In most common browsers, the page title will appear at the top of the browser when a customer views the page.

Initial Contents

You can select the initial contents of the file from this menu. If you select blank file, you will create an empty file. You can also choose to start with a copy of an existing page.

Finally, if you wish to edit this page now check the "Open in Editor" box. This will open the WYSIWYG editor as soon as the page is created. If you do not check this box, you will be returned to the Edit Includes menu when you click Finish.

Identifier

You must enter a name to identify this Scriptlet.

Class

You must select a "class" for each new scriptlet. Classes are used to help AbleCommerce determine what information must be collected for a page. For example, if a scriptlet that has a product class is used, AbleCommerce knows that specific product data must be gathered when that page is viewed. A set of program code (called dynacode) is automatically added to the page that will obtain product data from the database.

The following table has a brief description of each Class available.

Description

You may want to add a description of this Scriptlet to have a record of it's purpose.

Scriptlet Code

Enter the code snipet for this Scriptlet. Advanced users may want to reference the Programmer's Documentation when adding new features. Click Finish to save and return to the Scriptlet menu.

Note:

Scriptlets that are identified with an (S) cannot be modifed. If you select one to Edit, a copy of the protected Store Scriptlet will be made and the new one can be identified with a trailing (C).

What is a scriptlet?

In the simplest terms, a scriptlet is a fragment of program code that is associated with a familiar name. For example, a code fragment that displays a list of categories in two columns might have an associated name of "CategoryList2Col". This name and associated code are referred to as scriptlets and are used within the AbleCommerce web page editor.

Why use scriptlets?

AbleCommerce features a "what you see is what you get" (WYSIWYG) editor. One challenge with this type of editor is how to display dynamic information and complex program code. Most merchants do not want to bother with the details of how a page works. The concern is how a page looks.

By using scriptlets, AbleCommerce removes the programming details from the equation. Merchants can freely edit their web pages without worrying about programming. Of course, it will be the inevitable that a page will need some special functionality or dynamic data added. With other products, this might require specialized programming skills or payment for custom code. Using ablecommerce, the merchant can simply select the proper scriptlet from the menu and then drag-and-drop it into place. No knowledge of programming or HTML is needed! And should a scriptlet be in the wrong place, it can simply be moved or deleted without fear of breaking the underlying code.

What is with all of these [brackets]?

The AbleCommerce WYSIWYG editor needs a way to know when a scriptlet is used within a web page. To do this, it looks for words that are surrounded by square brackets when a page is saved. If it finds one, it knows to check and see if it is a scriptlet. When using the editor, you might see things like [CategoryLinks1] or [ProductDescription]. These are tell you which scriptlet is used and where it will be displayed on the page.

Why can't you just show me what the scriptlet displays instead of the name?

Most scriptlets display data that changes depending on when or how the page is viewed. For instance, a scriptlet called [ProductName] displays the name of a product. When you are editing a page with this scriptlet, the WYSIWYG editor doesn't know which product you would intend to display. This is because the scriptlet could function for any product, making it dynamic. The best way the editor can interpret the information is to show which scriptlet is displayed in its location. This lets you make decisions about how and where information is displayed on a page.

What is a scriptlet class?

Scriptlets are organized into classes that help indicate what type of information a scriptlet displays. For instance, there is a product class, category class, and so on. These classes are used to help AbleCommerce determine what information must be collected for a page. For example, if a scriptlet that has a product class is used, AbleCommerce knows that specific product data must be gathered when that page is viewed. A set of program code (called dynacode) is automatically added to the page that will obtain product data from the database.

What is dynacode?

Dynacode is program code that is automatically managed by AbleCommerce. It has many uses including collecting information from a page request, querying databases, initialization of components, and freeing of resources when processing is complete.

In AbleCommerce, each scriptlet class is associated with a dynacode header and footer. The header is code that performs initialization. The footer is code that "cleans up" after processing is done. When a scriptlets are used on a web page, all necessary headers and footers are included with the page.

Dynacode frees merchants and page authors from having to worry about how to get the necessary information. Just place your scriptlets, and let dynaocde will do the rest.

What if I want to use a different HTML editor? Can I still use scriptlets?

Certainly. Use the editor that you are most comfortable with. AbleCommerce provides a WYSIWYG editor for those who do not have an alternative. However, there are lots of other HTML editors available from the simplest text editors to full fledged content management systems.

Remember that AbleCommerce identifies scriptlets with text surrounded by square brackets. When using another editor, just follow the same convention. Type the name of the desired scriptlets on your page. Once you are finished, you should save the file in the same directory as your other store files.

When using an external editor, there is one additional step once you have the file saved. Open the AbleCommerce admin interface to the webpages section. Find the page you have edited in an external editor and open it with the "source" button. This should display the HTML source of your new page. Now check the "Enable Script Compiler" at the bottom of the screen and click the "finish" button. This will allow AbleCommerce to find the scriptlets on your page and replace them with the proper program codes.

How do I make new scriptlets?

Creating a scriptlet is easy. The more you know about web scripting languages such as Active Server Pages (ASP), the more you will be able to accomplish with a scriptlet.

To help you create your first scriptlet, we have provided a "hello world" walkthrough:

1. Log in to the admin page for your store. On the left hand menu, select the Website -> Scriptlets item. This will open the Edit Scriptlets menu.
2. Click the "Add" button to create a new scriptlet. This will open the "Add Scriptlet" form.
3. In the "Identifier" field, enter the friendly name of the scriptlet. Use only letters, numbers, and the underscore (_) character. Try to keep it simple but informative. For this example, enter the following text: Hello_World
4. The next field is "Class". If our scriptlet were to contain dynamic data, we would select the appropriate class from this list. For the purposes of this example, we can leave it at the default of "General" because we will not require dynamic data.
5. In the "Description" field, you would type a brief explanation of what the scriptlet displays. This would be shown following the name on the list of available scriptlets in the WYSIWYG editor. For the example, enter the following text: Displays Hello World in bold text.
6. In the "Scriptlet Code" field, enter the following ASP code:

Do I have to use scriptlets?

Scriptlets are provided as a tool to help merchants make dynamic pages without specialized knowledge or programming skills. Advanced users or merchants with highly customized sites may not find them useful. If that is the case, there is no requirement that you use them.

If you elect not to use scriptlets, it is highly recommended that you use an editor that can properly handle the scripting code likely to be present in your dynamic pages. The editor included with AbleCommerce will not work properly if it is used to edit pages with complex scripting code. However, there are many alternative editors (both free and commercial) available for those who wish to work directly with the scripting code.

What is the meaning of (S) and (C)?

In the Edit Scriptlets screen, you will see "(S)" or "(C)" following the scriptlet names. The "S" stands for shared. The "C" stands for custom.

Shared scriptlets are available to all merchants in a single store group. They are the default scriptlets installed with the software or added by the system administrator. You cannot change or delete a shared scriptlet.

Custom scriptlets are scriptlets that have been added or edited by you and are only available for your store. You can delete custom scriptlets.

You may notice that if you edit a shared scriptlet and save changes, you will have two entries of the same name. One will be follwed by (S), the other by (C). This is showing you that you have customized a shared scriptlet. In this case, the custom scriptlet will always be the one displayed on your pages. If you want to use both scriptlets, you must call the custom scriptlet by a unique name. If you ever want to remove the customization, you can delete it to return to the shared copy.

When I save changes to a custom scriptlet, my web page still looks the same. What gives?

When a web page is saved in the AbleCommerce editor, it is compiled to include all of the necessesary scriptlet code and dynacode entries. Then the newly compiled code is written to the file being edited.

When you edit a scriptlet, you are only editing the code that is included when a page is compiled. You are not editing the pages that have already been compiled with the scriptlet included.

To include changes on a web page that has already been saved with the scriptlet, you must compile it again. To do this, simply open it in the WYSIWYG editor and click "Finish" to save changes. Even if you have not made any changes, this will allow AbleCommerce to recompile the page with the updated scriptlet code. Once you have completed this step, your web page will show the changes to your scriptlet.