4 The Product Catalog Module

(1)

The Product Catalog module is the workhorse of Dynamicweb eCommerce 8. Since it’s the main module to manage and display products, the Product Catalog is present in every Dynamicweb eCommerce solution. It’s also one of the biggest and most feature-rich modules available. In this chapter, you’ll get an in depth look at using the Product Catalog module from a variety of viewpoints. In particular, this chapter looks at: ● Managing and displaying product groups

● Managing and displaying products

● Customizing products and groups with custom fields, related products and more ● Integrating your product structure with the Dynamicweb CMS front end pages

By the end of this chapter, you’ll be able to build a fully operational product catalog ready to be accessed by your end users. Chapter 7 then shows you how to use the Shopping Cart module so users can complete the ordering process.

4.1 Introducing the Product Catalog Module

The Product Catalog is responsible for a wide variety of tasks, separated into two main areas: frontend (what end users see) and backend (what shop managers see). The most important responsibilities of the Product Catalog include:

 Frontend

o Display the eCommerce groups and products o Let users search for products

o View product details (including related information) o Add products to the user’s shopping cart.

o Integrate the eCommerce groups list in the navigation system  Backend

o Create, modify and delete eCommerce groups and products o Create composite products (a Bill of Materials)

o Assign customized data (custom fields, related products, categories and more) to groups and products

o Manage product variations o Configure cross-selling options

Most of these features are discussed in this chapter. Managing product variants (known as Variants) is discussed in detail in the next Chapter.

Since products are always assigned to at least one group, this chapter starts off with discussing the management of groups at the backend and how to display them at the frontend. Later sections then show you how to create and assign products to these groups.

(2)

4.2 Managing Groups

As you have already seen in Chapter 2, groups are managed through the Product Catalog module, which you access by clicking the eCommerce button in the Main Menu. Groups always belong to a single shop and cannot be shared between multiple shops. Groups can be nested, though, which enables you to create a tree structure of groups and their related sub groups. In the next section, you will see how to create new and edit existing groups, followed by discussions on managing groups and their data and ways to display them at the frontend.

4.2.1 Creating and Editing Groups

To create a new group, you need to open the eCommerce module from the Main Menu, expand the Product Catalog module and then your shop. You can then right-click the shop or an existing group and choose New group. To edit a group, locate the group you want to change, right-click it and choose Edit group. In both cases you will see a screen similar to Figure 4-1

Figure 4-1

This screen is divided in two main parts: the Ribbon bar at the top, and the content area below the Ribbon. The following table describes the items on the Ribbon bar and their functionality.

(3)

Button Description

Save, Save and close, Close

The standard commands found on many Ribbon bars that enable you to save the item you’re working with and optionally close the current screen.

Delete Enables you to delete the group that you’re editing. Details

Description

These two buttons enable you to enter data about the group. Figure 4-1 displays the Details panel for the new group. Both options are discussed later in this section.

Location You can click the Location button to see where this group is located with regard to its parent shop and groups. Clicking the tiny arrow next to the Location button brings up a dialog that lets you move the group to a different location.

Show in menu Show in sitemap Clickable

These three options determine the “presence” of the group at the frontend. When Show in menu is not selected, the group won’t appear in the eCommerce

navigation. This works in the same way for the Dynamicweb sitemap file. The Clickable button determines if the group is rendered as an active link or as text only in the eCommerce navigation. Navigation is discussed towards the end of this chapter.

Related groups Related products

These two buttons enable you to create links between groups and other groups and products, used in cross-selling scenarios. You will see how to use these features later in this chapter.

Order line fields This button lets you create order line fields that apply to products assigned to this group only. Order line fields appear in the cart and in the final order and can be filled by a user. They are typically used to collect additional data for a specific item in the cart. For example, when selling carpet, you can ask the user how many square meters they need. Or if you’re selling printed t-shirts, you can let the user enter customized text. Order line fields are discussed in Chapter 7.

English Using this button you can switch the language that the group is being created or edited in. For now there’s only one language, but Chapter 14 shows how to create multi-lingual eCommerce web sites.

Help The standard Help button present on many of the Ribbon bars. When you click it, you’re taken to a context-sensitive help page on the Dynamicweb documentation portal (at http://manual.dynamicweb-cms.com).

4.2.2 Managing Group Data

Whether you’re creating a new or editing an existing group, you can enter the same data as discussed next.

On the Details tab (the current view in Figure 4-1) you can enter the following details about the group:

Field Description

Name The name of the group. You typically localize this name if you’re building a multi-lingual web site as you see in Chapter 14.

Product number This field is used to define your internal product group number. You can make up this number yourself as it’s not used by Dynamicweb directly (other than for display purposes). When using a backend ERP system, this field often contains the unique ID of the group in that system.

(4)

Assortment Defines whether this group is considered an “assortment”. Assortments used to be a module that enable products to be in multiple groups, but since this can be done with all groups anyway, this checkbox is mostly irrelevant.

Media You can assign small, medium and large sized images to the group, which can be displayed at the frontend together with the other group data.

Title, Keywords, Description

These fields can be used to enter meta data about the group that is used for Search Engines. The data becomes available automatically on detail pages showing your group (and its products).

URL This field enables you to enter a search engine (and user) friendly name of the group that overrides the default name. By default, Dynamicweb Search Engine Friendly links point to your groups in the format

PageName/name-of-your-group. The URL field overrides the default name and enables you to assign a completely different name.

By default, Dynamicweb is configured to use neither of these two options. Instead, the default is to link to your group using the format PageName.aspx?GroupID=IdOfGroup. To activate SEO friendly URLs for your groups and pages, follow these steps: 1. Open the Management Center and choose Customized URLs under the Web and HTTP Heading.

2. Choose a URL type other than standard. I prefer to use Location and Page name.

3. Under Internal links, check off the Use customized URLs option and then select one of three eCommerce groups options. I prefer the first, which renders your group structure as follows:

/PageName/First-Level-Group/Sub-Group where spaces are replaced with dashes, and each sub group gets its own “folder” in the address.

Default values for new products

To speed up the creation of new products, you can specify a number of defaults here that are assigned to new products automatically. You’ve already seen Manufacturers and VAT Groups in the preceding chapter and Stock statuses are discussed later in this chapter.

Product group fields Just like the custom order line fields you briefly saw earlier, Dynamicweb lets you create custom fields for products and groups. This enables you to extend the group with meta data that is not available out of the box. You will see how to work with Product group fields later in this chapter.

Walkthrough – Creating Groups

To follow along with recreating the Bikez demo, carry out the following steps in your eCommerce demo site. Note that this and later chapters assume you set up the demo site as explained in Chapter 3.

1. Click eCommerce in the Main Menu.

(5)

3. If there’s still an existing group (such as Gruppe1), right-click it and choose Delete group.

4. Right-click your shop and choose New group. 5. For the Name of the group, enter Bikes.

6. Leave all other fields set to their defaults and click Save and close. 7. Repeat steps 4 through 6 and create the following group structure:

Figure 4-2

To create a sub group, such as Mountain bikes, right-click the parent group and choose

New subgroup.

The group Hybrid bikes is not put under the Bikes group deliberately. You will see why in the next section of this chapter.

While actively operating your shop, you often find the need to reorganize your

eCommerce product groups. Fortunately, this is easy to do without the need to recreate the group or products they contain.

4.2.3 Moving Groups

To move a group from location to another you can use drag & drop. For example, to move the Hybrid bikes group under the Bikes group, simply drag it to Bikes and release the mouse. You’ll see a menu appear that enables you to move the group. If you want, you can do this now in your Bikez demo environment.

(6)

4.2.4 Sorting Groups

To sort product groups at the same level, click the Sort link below the groups, shown in Figure 4-3:

Figure 4-3

Once you’ve clicked Sort, you’ll see a list of all the products at that level, which you can

now sort using drag and drop:

Figure 4-4

When everything is in the right order, click Save on the toolbar to apply the changes.

4.2.5 Deleting Groups

Obviously, you also need to be able to delete groups. You can do this by right-clicking a group and choosing Delete group. Alternatively, when editing a group, you can click the

(7)

Warning: When you delete a group, all its sub groups and the products assigned to it will be deleted, unless the products in the group have been assigned to other groups as well. There’s no way to restore deleted products or groups so make sure you know what you’re doing before you click Delete. Now that you’ve seen how to create, manage, sort and delete groups, the next logical step is to display those groups at the frontend. At this stage the groups will look quite dull as they don’t contain products yet, but you’ll see how to fix that later in this chapter.

4.2.5 Displaying Groups at the Frontend

To display eCommerce groups in your frontend pages, you have a few options:  Add the Dynamicweb Product Catalog module to a paragraph and select the

groups you want to display.

 Add the eCommerce groups to one or more of your pages so they become part of the menu.

 Create a hidden page designed to display all eCommerce groups and then refer to this page from your Dynamicweb design.

You’ll see how to display the products using the Product Catalog module in this section, while the other two alternatives are discussed in section 4.4 - eCommerce Navigation. Displaying groups with the Product Catalog module is best explained with a walkthrough. In the next walkthrough you start off with changing the Design theme for your site, just as you did in Chapter 2. This way, you have a nice layout to work with so you can focus on the eCommerce functionality instead of building your own design and layouts first. You’ll then add a page with the Product Catalog module to your site to display the groups.

Walkthrough – Displaying Groups

1. Log in to your Dynamicweb eCommerce solution and click Management Center. Then in the Designer category, click Frontpage.

2. Switch to the Layout tab and choose Dynamicweb: Dynamicweb Main Layout (main.html) as the layout file for the site. Click Save and close.

Note: If you do not see the Dynamicweb: Dynamicweb Main Layout (main.html)

layout option, make sure you are using the Files folder from the Bikez.zip download. This layout is included in the Bikez set of design files.

3. Click Content in the Main Menu and then click New page in the Navigation Panel. Name the page Groups, and save your changes.

4. Add a paragraph called Groups to the page and click the Module button (the button with the jigsaw icon), switch to the eCom tab and then insert the Product Catalog (eCom)

module by clicking its name. You’ll see the settings for the Product Catalog module appear, visible in Figure 4-5

(8)

Figure 4-5

5. In the Settings category, leave Product groups selected. You use the other option if you want to display individual products.

6. In the Display category, click Add and then select all the top level groups you created earlier:

(9)

Figure 4-6

Click Save and close on the toolbar.

7. In the Template category, place a checkmark in the Groups checkbox. This tells Dynamicweb to render group info using the GroupList.html template, which should have been selected for you automatically.

8. Click Save and close on the Ribbon bar.

9. Right-click your new Groups page in the Navigation Panel and choose Show page. You should see a screen similar to Figure 4-7:

(10)

Figure 4-7

Not too exciting yet, but it’s a nice start.

10. Click the Bikes group. The page refreshes and now shows the sub groups:

Figure 4-8

You don’t see any products yet, but you’ll see how to create and display them in the frontend after you’ve seen how to create custom group fields and related groups.

(11)

4.2.5.1 Template Tags for Groups

When rendering a group, a lot of data is made available through Dynamicweb Template Tags. The following table lists the most common template tags you can use to display a group

For a complete list of available tags for an eCommerce group, check out the templates documentation site for a group at:

http://templates.dynamicweb- cms.com/eCommerce/Dynamicweb-eCommerce-template-

tags/Product-Catalog/Product-detail/Loops/ProductGroups.aspx

Tag Name Description

Ecom:Group.Name Returns the name of the group.

Ecom:Group.Number Returns the number you assigned to the group. Ecom:Group.ID Returns the ID of the group. The ID is generated by

Dynamicweb automatically.

Ecom:Group.Description Returns the description of the group. Ecom:Group.MetaDescription

Ecom:Group.MetaKeywords Ecom:Group.MetaTitle Ecom:Group.MetaUrl

Return the meta data for the group, such as the description and URL.

Ecom:Group.SmallImage Returns the small image you assigned to this group. Ecom:Group.LargeImage Returns the large image you assigned to this group.

Ecom:Group.Icon Returns the icon you assigned to this group. This icon is used to identify the group in the tree of groups in the eCommerce Product Catalog in the backend, but you can also use it at the front end.

ChildGroups This Dynamicweb loop returns all the child groups for the current group. Within this loop you can use the template tags as listed in this table to display each child group.

CustomGroupFields This Dynamicweb loop returns all the custom fields you’ve assigned to this group. Note that each of the custom fields you created and their values are available directly on the group – that is, outside of this loop – as well. You see how to create Custom Group Fields next.

4.2.6 Creating Custom Group Fields

At the start of this chapter, you saw the many fields that Dynamicweb lets you enter when creating a group (see Figure 4-1 for reference). But even though many pre-defined fields exist, chances are you will come up with a field that the designers of Dynamicweb didn’t foresee. Fortunately, they did foresee that you would come up with something they

(12)

didn’t foresee and therefore they added the ability to create your own custom fields, called Product Group Fields.

You manage Product Group Fields through the eCommerce settings in the Management Center. When you create a new field, you can enter the settings shown in Figure 4-9

Figure 4-9

The Name field is used to label the field when managing groups. The system name is the name Dynamicweb uses internally, and the Template tag is used to work with the value from the field in a template. It is recommended to keep the System name and Template tag the same, but this is not required (it will help to have them the same when needing to link the template tag back to this setting).

The Field type lets you specify the data type that is used for the custom field in the database. It also influences the way the field is rendered in the backend when managing a group, and the way the underlying value is made available in your templates. The drop-down offers you the following choices:

Type Description

Text (in various sizes) Offers the user a single-line text box. Long text Offers the user a multi-line text box.

Checkbox Enables the user to make a Yes / No choice. Date / Date/time Enables the user to select a date and time.

Integer / Decimal Enables the user to enter a whole or fractional number.

Link / File Manager Enables the user to choose other pages or files in Dynamicweb. Editor Presents a rich text editor to let the user enter multi-line and HTML

formatted text.

List Box This option lets you define different kinds of lists with predefined values. When you edit the group, you can choose one or more items depending on the type of list. You can choose between four different ways to present the list:

Radiobutton list (single select) Checkbox list (multi select) Dropdown list (single select)

(13)

Multiselect list (multi select)

In Figure 4-10 you see an example of a few of these custom fields in the Group edit screen:

Figure 4-10

With these different field types, you can create pretty much any type of custom field that your site may require.

To see how to define and use custom Product Group Fields, the next exercise walks you through the process of creating fields. You then alter your GroupList.html template to change its appearance based on the values of the custom fields.

Walkthrough – Creating Product Group Fields

1. In the Dynamicweb Management Center, expand eCommerce, then Product catalog and click Product group fields.

2. Click New field on the toolbar and then add a field with the following details:

Fieldname Value

Name Show available since

System name ShowAvailableSince

Template tag ShowAvailableSince

Field type Checkbox

3. Add another field with these values:

Fieldname Value

Name Available since

System name AvailableSince

Template tag AvailableSince

(14)

4. Save your changes, and then open the eCommerce module. Edit a group (right-click it and choose Edit group) and then check off the Show available since field and enter a date.

5. Repeat the previous steps a few times for other groups, alternating the checked state of the Show available since field, and entering different dates. Here’s an example of my

Mountain bikes group:

Figure 4-11

6. Next, open up the HTML template GroupList.html and change the <h2> element as follows:

<h2

title="Available since: " >

</h2>

You can open up the template by locating it using the File Manager (it’s located at /Templates/eCom/GroupList). Then right-click the file and choose Edit.

Note: Be careful that you do not include any spaces between the <!-- and the @If or the other code elements that come after the <!--. While these tags appear like HTML

comment tags or ASP.NET markup tags, they will not allow a space before the first code element. If you accidentally include a space, the code with be rendered directly into the page (so if you see your code markup in the page check for extra/inadvertent spaces). This code uses a Dynamicweb If Defined tag to determine whether the “available since”

date should be displayed. If that’s the case, the date and a static text is added to the title attribute of the <h3> element, resulting in the following tooltip when you hover over the heading in the browser:

(15)

Figure 4-12

Groups for which you didn’t check the Show available since checkbox won’t have the

title attribute added to the heading.

Clearly, this is just a simple example of the things you can do with custom fields for product groups. You can apply the same concepts to display additional images (such as a “New” icon for new groups), change the appearance of the groups or even hide them altogether, provide additional descriptions and so on.

The concept of custom fields is not unique for eCommerce groups. You’ll find similar functionality (although sometimes implemented a bit differently) for custom fields on extranet users, news items, eCommerce products (discussed later in this chapter) and more.

4.3 Managing Products

Products are at the heart of your eCommerce solution. Without the ability to manage and display products, you have a pretty empty and dull shop. Products in Dynamicweb are really rich objects with many properties, collections, settings and more. Over the next few sections, you’ll learn more about products in Dynamicweb, how to create, manage, extend, and display them. Most of the basic properties of a product are discussed in this chapter, but other chapters dig deeper into more advanced topics such as Variants (Chapter 5), Images (Chapter 6) and Prices (Chapter 9).

Just like eCommerce groups, products are managed and displayed using the Dynamicweb eCommerce Product Catalog module. I’ll start off with a discussion on managing products in the backend, followed by an extensive examination of using the Product Catalog in the frontend.

4.3.1 Creating and Editing Products

To create a new product, you have a few options. Firstly, you can right-click an eCommerce group and choose New product. Alternatively, when you’re viewing the

details of a group you can create a new product by clicking New product on the Ribbon bar as shown in Figure 4-13.

(16)

Figure 4-13

Another way to create new products is by clicking the Create multiple products button, also visible in Figure 4-13. When you click this button, you can enter details for multiple products in a Grid, as shown in Figure 4-15. When you click Save and close, all

products are saved at once. By default, only the fields shown in Figure 4-15 are editable. However, you can change the editable fields as follows:

1. Make sure you’re viewing the details of the group to which you want to add the products. 2. Right-click one of the column names, such as Number or Name. A popup menu

appears that enables you to select the columns you want to view in the list of products.

Figure 4-14

The changes you make here also affect the columns that are editable when creating new products.

(17)

3. Repeat the preceding steps to select more columns if you need them to be editable. Alternatively, you can click the More… item and select multiple columns at once. 4. Click the Create multiple products button. The fields you chose earlier are now all

editable, as shown in Figure 4-15

Figure 4-15

5. Click the link below to grid for each new product you want to add. When you’ve finished entering the products, click Save and close to save your changes and return to the product list.

To edit an existing product, you can click its name to bring up the details screen. Alternatively, you can right-click a product in a product list and choose Edit product. If you want to search for a specific product you want to edit, you can enter some text in the search box (e.g. the text mountain in Figure 4-16) and hit enter:

Figure 4-16

Dynamicweb then shows you the products that match your search criteria for the current group. Note that Dynamicweb doesn’t search recursively; it only searches the group that is currently being displayed.

To delete a product, you can right-click it in the product list and choose Delete. Also, when editing a product you can click Delete on the Ribbon bar. In both cases you need to confirm your action before the product is actually deleted.

Besides the columns you saw earlier in Figure 4-15, Dynamicweb enables you to enter a wide variety of data when creating or editing a product, including:

- Basic properties such as name, number, manufacturer, meta data and more.

- The type of product (you can choose between Stock Item, Service and Parts List). By choosing Stock item, the product is a tangible item you can have in stock. If you choose Service, Dynamicweb won’t keep track of stock for this item. The third option, Parts list, is discussed later in the section BOM Products.

(18)

- SEO related meta data

- Detailed descriptions and media (including images) - Variants

- Prices

- Custom Fields

- Related products and groups - Stock related information

In the next section, you’ll work with many of these properties.

4.3.2 Managing Product Data

Whether you’re creating a new product or editing an existing one, the Ribbon bar for the product is the same and looks like Figure 4-17

Figure 4-17

The following table lists the most important buttons on this Ribbon bar and explains what they are used for:

Button Description

Delete Deletes the current product.

Comments Enables you to manage the comments for this product submitted by your users. Comments and voting are discussed later in this chapter.

Details Enables you to enter basic data about a product, such as its name, number, images, manufacturer and more.

Description Enables you to enter a short and a long description of the product using a rich text editor.

Media Enables you to enter a variety of images and additional text details and links. Related groups

Walkthrough – Creating New Products

1. In the eCommerce Product Catalog module, locate the Mountain Bikes group and click it to display its product list (you won’t see any as you haven’t created any products yet). 2. Click New product on the Ribbon bar and enter the following details:

Field Value to enter Description

Name Mongoose Otero This is the name of the product that appears on product pages, on the order and receipt and so on.

Number MONGOOSE1 This is your (custom) product number that you can

use to identify a product uniquely. Note that

Dynamicweb doesn’t need this number as it uses its own unique ID for each product internally.

Shop <none> The name of the shop this product is associated with.

Manufacturer Select the manufacturer you created in the preceding chapter.

Associates the product with a manufacturer. Used to display details about this manufacturer. You can leave this field empty if you haven’t created a manufacturer, or create one first using the

Management Center as explained in the preceding chapter.

VAT group Choose the “High”

group you created earlier

This field enables you to define an explicit VAT group for the product, overriding the default system tax defined in the Management Center.

Product type Stock item By choosing Stock item, you make this product a tangible item you can have in stock. If you choose

(20)

Service, Dynamicweb won’t keep track of stock for this item. The third option, Parts list, is discussed later in the section BOM Products.

Active type Always active Determines whether this product is active or not. You can opt to hide inactive products from the front end using the Management Center (choose

Management Center | eCommerce | Advanced settings | General | Do not show products that are inactive.

Note: You can quickly change a product’s status by right-clicking it in the product list and choose Activate or Deactivate.

Campaign Leave set to None Campaigns are discussed towards the end of this chapter.

Price € 250 The base price of the product

Stock level 100 The number of items you currently have in stock

Stock status Leave set to None Stock states are discussed later.

Weight 20 Kg The weight of the product, which can be used to

display at the front end, and be used for shipping fee calculations.

Volume Leave set to 0 The volume of the product, which can be used to display at the front end, and be used for shipping fee calculations.

Meta information Just enter some data that describes your mountain bike

The Title, Description and Keywords fields are used to fill their respective meta tags when the product is displayed at the front end. These fields are used by search engines and thus are important for well-indexed eCommerce sites. Spend some time considering relevant text to be entered here, or use the Dynamicweb SEO Module to help you find the right content.

The URL field is used to create a custom URL for the product. This is discussed in Chapter 13 - Search Engine Optimization.

3. Switch to the Description tab by clicking its button on the Ribbon bar. Enter some teaser text (a short description or summary of the product) and a long Description. You can use the rich text editor to format the text.

4. Click the Media button and assign a small, medium and large image. You can use your own images, or you can use the sample images that are already part of the Bikez files set. You can use the Link and Alt. Link fields to link your product to other files, such as a PDF or Word document with additional specs. You can use the Details –

Images/Links option to create additional links to images or internal pages. This can be useful if you have a dedicated page in your Dynamicweb site that provides additional information about the product. Just click the green + icon and then click the browse icon to insert a new link. Click the red delete icon to remove unwanted links.

(21)

Note: In Chapter 6 you see a much easier way to link images to your products if the images follow a naming pattern that allows them to be linked back to products.

5. You can also add additional text to describe your product in the Details – Text section. Click the green plus (+) icon and then enter your text.

The content you enter in the Details – Images/Links and Details – Text sections becomes available in an additional template loop called Details, which you can use inside a product details page. For example, to display a list of images you’ve assigned to the product, you can use the following code:

<h3>Additional images</h3>   <img src="" /><br />

You should use If Defined in this loop to skip items that are not images, such as the custom text or links you may have assigned. You can use similar code to filter out and display the text or link elements.

6. That’s all you need to enter for now to create a product that can be displayed at the frontend. To make later walkthroughs in this chapter more appealing you should create a few more products in different groups by following the steps of this walkthrough again. This way, your Product Catalog represents a more real-world catalog, which makes it easier to work with concepts such as paging and sorting later.

4.3.3 Moving and Deleting Products

You can move a product from one group to another. To do this, right-click the product in the product list, choose Move and then select a new group. Additionally, you can change the groups that a product is assigned to using the Related groups option on the Ribbon bar. This enables you to remove the product from a group, or assign it to another - thereby “moving” the product.

To delete a product, right-click it in the product list and choose Delete. You can also click the Delete button on the Ribbon bar when editing a product. In both cases, you get a confirmation dialog asking if you’re really sure if you want to delete the product. There’s no way to restore a deleted product, so make sure you really want to delete it.

4.3.4 Sorting Products

As you’ll see later in this chapter, the Product Catalog enables you to choose among different sorting types when displaying products at the frontend, including by name, price, creation date and a whole bunch of other properties. However, you may not always want to let the system determine sorting based on product properties.

Sometimes you want to define explicitly the order in which products appear in the list yourself. To do that, you need to do two things:

1. Sort the products within a group manually in the backend

2. When configuring the Product Catalog module, choose User defined as the sorting mechanism.

(22)

To sort products within a group, right-click the group and choose Sort products. You can then drag and drop your products in the order you want them to appear in the frontend. Your changes won’t be applied until you hit the Save button on the toolbar. Once the products are in the correct order, you need to choose User defined as the sorting mechanism when configuring the module on a paragraph. You’ll see how to do this in the next section, which shows you how to add the Product Catalog to your pages to show the products at the frontend.

4.3.5 Displaying Products at the Frontend

As you saw in Chapter 2, you need to add the Product Catalog module to a paragraph to show products in the front end. Once you’ve added the module, the module’s Edit page (see Figure 4-18) enables you to configure things like the groups you want to see, how many products you want to display on a page, the sorting mechanism, templates and more.

In the following walkthrough, you’ll create a new page, add the Product Catalog module and then configure it. Along the way I’ll introduce and explain the options you have available.

Walkthrough – Using the Product Catalog Module to Display Products

1. At the root of your site, create a new page called Catalog. Add a new paragraph called

Catalog as well and then insert the Product Catalog module. You see the following screen appear:

(23)

(24)

Figure 4-18

2. In order to show multiple products in a list you need to set the Show option to Product groups, just as you did before. Next, choose 4 as the number of products per page you want to show. You may want to choose a larger number in a real web site, but for now 4 seems like a good choice considering the limited number of products that are available in your eCommerce environment.

3. Leave the text box for the number of characters set to 0. This field defines the number of characters of the teaser text (the short description of the product) you want to show in the product list. If you leave this set to 0, the entire text is made available in the template tag: .

Note that you can always get at the full teaser text using the tag  regardless of the setting for the number of characters.

4. Click the Add button for the product groups, select all groups you created in the backend and click Save and close.

5. Choose User defined from the Sort by drop down list. This tells Dynamicweb to display the products in the order you sorted them within the groups in the backend.

6. Next, click the Groups checkbox in the Templates section to select it and then accept the default template that Dynamicweb has selected for you. If you leave the Groups

option unchecked, Dynamicweb won’t render the various groups, but simply list all products on the page. If you leave it unchecked, it’s important that the Remove duplicate products option is checked. With this option turned off, products will be displayed multiple times if they have been assigned to multiple groups.

7. Now is also a good time to look a little under the hood of the Product Catalog module by opening the HTML for the templates you’ve assigned. By looking at the default template that ships with Dynamicweb you get a good feel of the various template tags and loops you have available to display your products and groups. For example, the

ProductList.html (which is assigned to the List template for the Product Catalog module by default) contains the following code

<a href ="/default.aspx?id=&productid=&cartcmd=add">Add to basket</a>

</li>

</ul>

<span id="productcount"> products found</span> <span id="pagecount">Page  of

(25)

</span> <span id="pagenavigation">

<a id="prevpage" href="@Ecom:ProductList.PrevPage.Clean-->" >Previous</a> <a id="nextpage" href

="" >Next</a><br /> </span>

</div>

This template shows a number of tags that are used to display the products, the group that is currently being viewed and a pager bar to display links to different pages with products. The most common tags are listed in the following table, together with a

description of what the tag is used for. Be sure to check out the Templates section of the documentation portal (at

http://templates.dynamicweb.dk/eCommerce/Dynamicweb-eCommerce-template-tags/Product-Catalog.aspx) to get a complete overview of all available tags. Tag Description Ecom:Product.Name Ecom:Product.ID Ecom:Product.Number Ecom:Product.Price Ecom:Product.ShortDescription and many more

These tags map directly to the product properties you’ve seen before. Use  and the

documentation portal to find out all the available tags.

Note that many tags are rendered as “complex tags” with many sub tags. For example, the Price tags have child tags such as

Price.Currency, Price.VAT, PriceWithoutVAT and so on.

ProductCategories This loop provides access to the available product categories you’ve assigned to a product.

ProductRelatedGroups Enables you to list groups of related products for the product being rendered. Note that these are not the same as

eCommerce groups; related product groups are more like a label you can stick on a number of products. You’ll see more about this in the section on related products.

VariantCombinations Renders the available variant combinations for a product. This loop is discussed further in Chapter 5.

AssociatedGroups The associated groups loop gives you a list of all the groups that this product is a member of.

Product.OrderLineFields This loop provides access to the order line fields that have been assigned to the group to which this product belongs.

8. Save all your changes and then request the Catalog page in your browser. You should see the products you created earlier, presented with the various templates you selected in the Product Catalog module.

Besides the many template tags and loops available for products, you also have access to template tags for paging data in the ProductList.html template. These tags are discussed in the next section, which deals with paging in your product list pages.

4.3.5.1 Implementing Paging

When you have many products in your eCommerce catalog, you don’t just want to dump them all out on a page. Instead, you want to split up the list of products in a number of

(26)

pages, where each page displays a predefined number of products. You then provide Next and Previous links so your users can browse through all pages. Fortunately, Dynamicweb makes this easy by providing you with the following tags in a Product List page:

Tag Description

ProductList.CurrentPage The 1-based index of the page you’re on. ProductList.NextPage

ProductList.PrevPage

These tags return a link to the next or previous page relative to the page you’re currently on. So for example, when you have 6 pages, and you’re on page 3, these tags could return something like:

/Default.aspx?ID=4&GroupID=&PageNum=4 /Default.aspx?ID=4&GroupID=&PageNum=2.

Note that when there’s no previous or no next page, these tags contain the value

" style="display:none;"

including the quotes at the beginning. This looks a little weird at first, until you realize how you typically use this tag:

<a id="prevpage"

href="@Ecom:ProductList.PrevPage.Clean-->" >Previous</a>

With this code, when there’s no previous page, you end up with a link with an empty attribute and a style attribute that hides the link at the client.

I prefer to hide links like these at the server, which you can easily do by testing the .Clean versions of the same tag, as you’ll see in the next walkthrough.

ProductList.PageProdCnt Returns the total number of products that are available over all pages.

ProductList.PageSize Returns the number of items that are displayed per page (this is the value you set in the Product Catalog’s module page). ProductList.TotalPages Returns the total number of pages.

ProductList:Page.GroupID ProductList:Page.GroupName

Returns the ID and Name of the group that’s currently being displayed. Useful if you need to build up the link for the next and previous pages yourself.

ProductList:Page.ID Returns the ID of the current page. Useful if you need to build up the link for the next and previous pages yourself.

ProductList:Page.PID PID is the Paragraph ID and is only relevant if you have multiple catalog module instances on the same page. Then all kind of commands will only react if PID = the ID of the paragraph currently being rendered.

(27)

“Display as” on the paragraph settings. This way it is possible to link from one module instance on a page to another page. I.e. when showing products on the frontpage, and you want them displayed on the product catalog page.

It’s quite common to display a pager bar both at the top and at the bottom of the page. Additionally, you may have different product list pages that all need to use the same pager bar. Rather than defining the same HTML and template tags over and over again, I prefer to use an Include file, which I can reference from each product list page. In the next walkthrough you’ll see how to create a simple, clean and reusable pager bar.

Dynamicweb only supports paging using Next and Previous links. There’s no way to set up the template so it uses a numeric pager instead. However, this is pretty easy to implement yourself using a ProductListExtender. Chapter 16 shows you how to build a numeric pager bar.

Walkthrough – Creating a Reusable Pager Bar

In the following walkthrough you create a new folder and a new template file. You can follow along using the Dynamicweb File Manager to locate and edit your files, or you can use another editor, such as Visual Web Developer Express 2010.

1. Start by creating a new folder called Includes inside the /Templates/eCom folder. You could also create an eCom folder under the main Includes folder and place your pager bar template there. However, since it’s unlikely you’ll be reusing the pager bar from templates outside the eCom folder, it makes more sense to store your include file somewhere under the main eCom folder.

2. Inside this folder create a new template file called ProductPager.html and add the following HTML:

<div class="product-count"> products found</div> <div class="product-pager">

<a href="">Previous</a> |

<span class="page-count">displaying page <strong> </strong> of

| <a href="">Next</a>

</div>

A lot of this code is similar to the code found in ProductList.html. However, I replaced all id attributes with class attributes (as the pager bar could now be used multiple times in a page), and use If Defined with the Clean tags to hide the Previous and Next links when they don’t make sense.

3. Add the following code to the main style sheet for the current design (/Templates/Designs/Dynamicweb/style.css)

.product-count, .product-pager {

(28)

width: 50%; float: left; }

This places the div with the number of products found next to the div with the pager bar.

4. Open up ProductList.html from the folder /Templates/eCom/ProductList using the File Manager and locate the first div element with a class of

productlistnavigation (there are two of them, one at the top at line 10 and one near the bottom at line 46). Replace the contents of the div with an @Include tag pointing to your ProductPager.html file. You should end up with something like this: <div class="productlistnavigation">

</div>

5. Copy the entire div to the clipboard and then paste it again at the bottom of the template file, again overriding the div with the productlistnavigaton class.

6. Save all your changes, request the Catalog page in your browser and navigate to one of your groups that contains products. You should now see a pager bar at the top and bottom of the product list as shown in Figure 4-19

Figure 4-19

What I like about this solution is that’s now super-easy to make site-wide changes to your pager bars. Simply change the include file, and all product pages that use the include file will pick up the changes automatically. Obviously, you can extend this example by adding more tags or conditions to the include file. If required, you can also create different pager bar include files and reference them from your product list pages.

4.3.6 Creating Custom Product Fields

So far you’ve seen how to use existing properties on a product but just as with the eCommerce groups, it’s easy to come up with custom fields you want to store with a product that are not supported out of the box. In order to provide this, Dynamicweb created the same functionality for products that you saw earlier for Product Group Fields. Since the functionality is identical, I won’t repeat the entire discussion on custom fields here. Instead, you’re encouraged to take a look at the section called Creating Custom Group Fields earlier in this chapter. As a refresher, here’s a quick run-down of the steps you need to take to define custom product fields.

1. Go to Management Center | eCommerce | Product Catalog | Product fields

2. Create one or more fields by specifying a user friendly name, a system name, a tag name and a data type. For list types, define the different options that must be displayed in the list.

(29)

3. Edit one or more of your products and assign any custom data you see fit.

4. Modify your templates so they use your custom product field values. The fields you created are available as tags that start with Ecom:Product:Field.FieldName, where FieldName is the template tag assigned to the product field.

4.4 Product Categories

Although the ability to create custom product fields is great, they have one big drawback: each field you’ve created in the Management Center is automatically available for each product in the site. This can lead to unwanted and awkward situations, especially if you have a shop that sells a wide variety of products. Imagine the following product fields for a bicycle:

Figure 4-20

These settings make perfect sense for products such as road or mountain bikes. However, they’ll certainly confuse a shop manager if they appear on products like a washing machine or a concert ticket. This is where product categories come in handy. To some extent, product fields and product categories have a lot in common. They both enable you to create fields that let you define additional data in an unstructured (for example, with plain text box controls) or a structured way (where the list controls the options, forcing the user to choose an item from a predefined list only).

The biggest differences between product fields and product categories are:

1. A Product Category groups a number of fields together, whereas product fields operate independently.

2. You assign a product category to a group (you can only assign one category to a group) whereas product fields appear on the product directly. This enables you to assign only those custom fields to a product that make sense for that product.

Once you know how to create Product Categories and where to assign them, working with them is pretty straightforward. In the next walkthrough you’ll see how to create the Number of gears and Frame size fields in a Product Category called Bike Specs. You’ll then assign the category to the bicycle groups, update some of the products and display the data at the front end.

Walkthrough – Working with Product Categories

1. Open the Management Center and navigate to eCommerce | Product catalog | Product categories.

(30)

2. Click New on the toolbar

3. Enter Bicycle Specs as the name. As soon as you move the cursor away from the

Name field, Dynamicweb fills the system name with Bicycle_Specs, which you can leave as is.

4. Click Add new field and then enter Number of gears as the name. If you tab out of the field, Dynamicweb completes the system name and template tags fields for you. Choose

Integer as the Type for the field.

5. Click Add new field again, and enter Frame size as the name. From the Type drop down list, choose List box and then click the green pencil icon. Click Click here to add new option and complete the dialog as follows:

Figure 4-21

Click OK to apply the changes and then click Save and close to save your product category.

6. Next, locate the Mountain Bikes group in the eCommerce Product Catalog. You

created this group earlier. If you haven’t created the group yet, you can add one now, or use an existing group. Right-click the Group and choose Edit group.

7. In the Settings area for the group, choose Bicycle Specs as the Product category as shown in Figure 4-22

(31)

Figure 4-22

Once you select the Product category option you will be presented with a warning message that warns you about potential data loss. Since you’re assigning a product category for the first time, you can safely click OK. However, if you had previously assigned another product category, clicking OK and saving the changes would delete the values from the products for the previously assigned product category.

Click Save and close and confirm the warning about potential data loss.

Repeat steps 6 and 7 but this time assign the Bicycle Specs category to the Hybrid Bikes group.

8. Open up the edit screen for one of the products in the Mountain Bikes group. At the bottom of the screen you can now enter the details for the Bicycle specs:

Figure 4-23

Enter a number of gears, select a frame size and click Save and close. Repeat this for some of the other bike products, each time entering different values.

9. Open up the Product.html template from the folder /Templates/eCom/Product. Below the span that contains the product’s long description (search for

Product.LongDescription), add the following code: <br />  @Ecom:Product.CategoryField.Bicycle_Specs.Number_of_gears.Label-->:   <br />  @Ecom:Product.CategoryField.Bicycle_Specs.Frame_size.Label-->:

(32)

This code checks if the product category field has a value, and then renders its label and value. When you view the product at the front end you should see something like this:

Figure 4-24

Besides displaying fields directly, you can also loop through all available product categories and all available fields. The following snippet does exactly that, hiding the label for fields that don’t have a value.

<h3></h3>   : <br />

This is a convenient way to render all product categories and their fields and values, but at the cost of less control over the order they appear in.

4.5 Managing and Displaying Stock States

If you’ve ever shopped on Amazon.com, you may be familiar with their “stock states” feature. Depending on the product and its stock, you may see messages such as “Only 1 left in stock--order soon”, or “Only 2 left in stock--order soon (more on the way).” This is a great way to inform users about the current stock, and may persuade them to order immediately, and not wait for another day.

In Dynamicweb eCommerce 8, you can implement this behavior using the Stock States feature. Here’s a run-down of the process you need to follow to implement this, followed by a quick walkthrough that has you implement this feature in your sample web site.

1. Create a stock state and add one or more statuses that define different texts for different stock levels

2. Assign a stock state to a product to determine which type of text to display 3. Add the relevant template tags to your product template to display the stock

level.

Walkthrough – Using Stock States

1. Open the Management Center and expand eCommerce | Orders | Stock State 2. Click New stock state on the toolbar and enter Can be reordered.

(33)

4. Set the Level to <= 4 and enter More on the way as the Text/label. You can also add a delivery time (for example 14) and delivery unit (e.g. days) and assign an icon for the state that can be displayed in the template. For now, you can leave these fields empty. 5. Click Save and close.

6. In the Product Catalog, edit one of your products and assign the stock state you just created. Also, set the Stock level for the item lower than the threshold you set in step 4.

Figure 4-25

7. Open the Product.html template from /Templates/eCom/Product and between the span for the long description and the Product Categories you added earlier (if you need to find it again search for Product.LongDescription), add the following code: <br />

Only  left.

When one of the thresholds you set for the stock state has been met,

Ecom:Product:Stock.ID will have a value and will thus be defined. Then inside the If Defined block, the Ecom:Product.Stock is used to display the actual quantity in stock, followed by the label for the stock status. You can create similar stock states for products that can’t be reordered, and add a status text like “Hurry while stocks last”. 8. Locate your product in the frontend of your web site. The stock message should now

display something like: Only 2 left. More on the way.

9. Go back to the Product Catalog, increase the stock of your product and view the product in the front end again. The stock message should now be gone.

If required, you can create multiple stock statuses for a stock state, giving you fine control over the message. You can also expand the earlier example with an If Not Defined that displays a message in case none of your thresholds has been met. That way, you could display a message such as “Plenty in stock”.

To draw attention to the message, you could also add an icon near the text. The icon you can assign to a stock status can be displayed in the template using the tag . E.g:

(34)

4.6 Working with BOM Products

BOM (Bill of Materials), or parts lists, are virtual products that are a combination of other products and services in the catalog. For example, a BOM could be a computer with screen, mouse, keyboard and other accessories.

Besides creating a product that consists of other products in the catalog, a BOM product can also be a product configurator where elements of the product are selectable by the user in the frontend. From the computer example, instead of making a computer that consists of one specific screen, it can be a group of screens. This way the user can configure the product he is buying by choosing one of several screens from the selected group.

To create a BOM product, on the details section of the product, change the product type to “Parts list” and save the product.

When the Parts list option is not available in the Product type drop-down, make sure you have the Parts List module installed.

When you save the changes, some new options appear. First of all, there is a new option called “Price calculation” that handles how the price for this virtual product should be calculated. Furthermore the “Parts lists” button in the Ribbon gets activated – this is where the actual product is configured.

Figure 4-26

In the following exercise you will see how to create a bicycle kit that consists of a bike, a helmet, bike glasses and lights for the bike.

(35)

1. Open the Product Catalog, and expand the Bikez product catalog. Create a number of new products such as various Helmets and bicycle lights. You can add them to any group you want.

2. If you didn’t create the Campaign group earlier, right-click the Bikez product catalog, choose New group and create a group called Campaign. Click the Campaign group in the tree, and on the Ribbon bar above the product list click New product.

3. As the Name for the product, enter “Bicycle kit” and in Product type, choose Parts list.

4. Click the Save button to update the screen.

5. On the Ribbon bar in the Options category, click the Parts lists button

6. In the Parts list, below the Ribbon, you’ll see “No product/groups added”. Click the “+”

button in the list header and choose Products.

Figure 4-27

7. A new dialog with groups and products appears as shown in Figure 4-28. Find a bicycle, helmet and a pair of glasses from the catalog, mark them and click Save and close.

(36)

Figure 4-28

The bicycle kit is now configured and consists of 3 different products:

(37)

8. Open up the Product.html template from the folder /Templates/eCom/Product. Locate the loop that contains the list of product’s that is making this BOM product and confirm it looks like this:

<h2>Including products</h2> <ul>  <li class="listitem<[email protected]>"> <a href="">  </a> </li>  </ul>

This code loops through the products we just specified as part of the bicycle kit, and it will look like this:

Figure 4-30

When adding the product to the cart, the virtual product is added with the possibility of listing the products that this kit consists of:

<tr class="orderline"> <td nowrap>   </td> <td nowrap></td> <td></td> <td nowrap></td> <td></td> </tr>

You could also add a configurable item to this parts lists. For example, you could let the user choose between different lights for this kit. To do this, in the Product catalog locate the bicycle kit product, and go to the Parts list options. In the list of products, click the green “+” and choose Groups

9. In the pop-up, choose a group with lights products. A configurator is added to the list of products in the item list – this configurator will display the products from the group that have been selected. Now, unfold the list by clicking the “+” next to the group name as

(38)

shown in Figure 4-32

Figure 4-32

10.Mark one of the products as the default selection by checking one of the radio buttons. In the Product.html template, add this piece of code just after the

to show a configurator in the frontend: <table cellspacing="0" cellpadding="0" border="0">

<tr>

<td>

<option value=""

> ()</option>  </select> </td> </tr>  </table>

This code will display a configurator to the user where the wanted option of lights can be chosen:

(39)

Now the product consists of 4 other products from the catalog in total – and one of the options can now be configured. The user can add any of the lights from the list to this product.

4.6.1 BOM Products and Prices

The prices of BOM products can be calculated in 4 different ways – the

calculation method is specified on the product details using the

Price calculation

select box. The 4 different ways of calculation are specified below:

Calculated price The calculated price option simply sums the price of the products that this BOM product consists of. If the product consists of 3 products, priced 100, 25 and 17, the price will be 100+25+17=142.

Fixed price The fixed price disregards the price of the products that this BOM product consists of. When using fixed price, the price of this BOM product is taken from the Price field from the product details. If the product consists of 3 products, priced 100, 25 and 17 and Price is set to 130, 130 will be the price of the product. Calculated price plus changes This option is only for BOM products with a configurator

attached. First the price is calculated as the sum of the products that this BOM product consists of – if one or more of the options are a configurator, the price of the default product will be used.

Then if one of the options in one of the configurators is changed by the user, the price of the default product is subtracted and the price of the new selection is added. Fixed price plus changes This option is only for BOM products with a configurator

attached. The initial price is taken from the Price field from the product details of the BOM product. Then if one of the options in one of the configurators is changed by the user, the price of the default product is subtracted and the price of the new selection is added.

4.7 Comments and Rating

Customer ratings have become a must-have tool for many web sites, particularly online stores. The majority of shoppers nowadays look for customer-generated reviews – from 5-star ratings to the more elaborate questions and answers — to help guide their buying decisions.

In fact, a number of studies point to the huge importance customers give to reviews and ratings, especially among young consumers.

Dynamicweb eCommerce 8 has a built in comments and rating functionality to support this. Comments and Rating enable the following features:

(40)

- Let users rate and/or comment on the products

- Show the rating on product lists as well as on individual products - Show comments from users on the products

- Sort lists of products by rating so highly rated products are sorted at the top of lists - Editing of comments and ratings from the eCommerce Product catalog.

Comments and ratings are easy to configure as you’ll see next.

Walkthrough – using Comments and Rating

1. In the Navigation panel, locate the Catalog page, open the paragraph with the eCommerce catalog module attached and open the module’s settings.

2. In the templates section, choose to edit the Product template

(eCom/Product/Product.html) by clicking the Edit template icon next to the template chooser.

3. The eCom/Product folder in the template system has a template called Comment.html which holds an implementation of the comment and rating feature. It can be activated by including it in the product template using the Include tag. In the bottom of the product template, insert the following code if it’s not already there:

4. Save your changes and close the module settings. 5. In the frontend, navigate to a product to see the result: