4 The Product Catalog Module

Transcription

1 4 The Product Catalog Module 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 featurerich 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 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 Imar Spaanjaars De Vier Koeden Page 2 of 53

3 Button Save, Save and close, Close Delete Details Description Location Show in menu Show in sitemap Clickable Related groups Related products Order line fields English Help Description 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. Enables you to delete the group that you re editing. 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. 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. 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. 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. 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. 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. 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 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 Name Product number Description The name of the group. You typically localize this name if you re building a multilingual web site as you see in Chapter 14. 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 Imar Spaanjaars De Vier Koeden Page 3 of 53

4 Assortment Media Title, Keywords, Description URL 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. 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. 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). 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-yourgroup. 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 Product group fields 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. 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 Click ecommerce in the Main Menu. 2. Expand the Product Catalog module and then your Shop Imar Spaanjaars De Vier Koeden Page 4 of 53

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 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. In addition to moving groups, you may also need to sort them. This is just as easy Imar Spaanjaars De Vier Koeden Page 5 of 53

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 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 Delete button on the Ribbon bar Imar Spaanjaars De Vier Koeden Page 6 of 53

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 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 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 Imar Spaanjaars De Vier Koeden Page 7 of 53

8 Figure 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: 2012 Imar Spaanjaars De Vier Koeden Page 8 of 53

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: 2012 Imar Spaanjaars De Vier Koeden Page 9 of 53

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 Imar Spaanjaars De Vier Koeden Page 10 of 53

11 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: Tag Name Ecom:Group.Name Ecom:Group.Number Ecom:Group.ID Ecom:Group.Description Ecom:Group.MetaDescription Ecom:Group.MetaKeywords Ecom:Group.MetaTitle Ecom:Group.MetaUrl Ecom:Group.SmallImage Ecom:Group.LargeImage Ecom:Group.Icon ChildGroups CustomGroupFields Description Returns the name of the group. Returns the number you assigned to the group. Returns the ID of the group. The ID is generated by Dynamicweb automatically. Returns the description of the group. Return the meta data for the group, such as the description and URL. Returns the small image you assigned to this group. Returns the large image you assigned to this group. 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. 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. 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 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 2012 Imar Spaanjaars De Vier Koeden Page 11 of 53

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 Text (in various sizes) Long text Checkbox Date / Date/time Integer / Decimal Link / File Manager Editor List Box Description Offers the user a single-line text box. Offers the user a multi-line text box. Enables the user to make a Yes / No choice. Enables the user to select a date and time. Enables the user to enter a whole or fractional number. Enables the user to choose other pages or files in Dynamicweb. Presents a rich text editor to let the user enter multi-line and HTML formatted text. 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) 2012 Imar Spaanjaars De Vier Koeden Page 12 of 53

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 Name System name Template tag Field type Value Show available since ShowAvailableSince ShowAvailableSince Checkbox 3. Add another field with these values: Fieldname Name System name Template tag Field type Value Available since AvailableSince AvailableSince Date/time 2012 Imar Spaanjaars De Vier Koeden Page 13 of 53

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 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 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: 2012 Imar Spaanjaars De Vier Koeden Page 14 of 53

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 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 Imar Spaanjaars De Vier Koeden Page 15 of 53

16 Figure 4-13 Another way to create new products is by clicking the Create multiple products button, also visible in Figure When you click this button, you can enter details for multiple products in a Grid, as shown in Figure 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 Imar Spaanjaars De Vier Koeden Page 16 of 53

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 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 Imar Spaanjaars De Vier Koeden Page 17 of 53

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 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 Delete Comments Details Description Media Related groups Related products Variants Field groups Description Deletes the current product. Enables you to manage the comments for this product submitted by your users. Comments and voting are discussed later in this chapter. Enables you to enter basic data about a product, such as its name, number, images, manufacturer and more. Enables you to enter a short and a long description of the product using a rich text editor. Enables you to enter a variety of images and additional text details and links. Enables you to assign multiple related products and groups to the product you re managing. Enables you to create variants of the product you re managing. Variants are a great Dynamicweb feature that lets you create multiple products off a single product definition and then override only the properties of each variant that differ from the main product. This greatly decreases the time needed to manage the products, and at the same time offers your end user better ways to select the product they are looking for. Variants are discussed further in Chapter 5. Field groups enable you to enter structured meta data about products. They 2012 Imar Spaanjaars De Vier Koeden Page 18 of 53

19 Parts lists Prices Stock are commonly used to define a wide variety of product specification, such as size, voltage (for electronic devices), types (for example, hard cover versus paperback for books) and so on. Field groups have been more or less replaced with the much easier Product Categories and as such won t be discussed further in this book. When creating a BOM (Bill of Materials) product, the Parts List button lets you define the different parts of your product. The Prices button brings up the Prices tab where you can define multiple levels of pricing information, such as specific prices for bulk products, for different campaigns, for different variants and more. Prices are discussed in Chapter 9. The stock button lets you define product units and their stock. For example, you can sell a single bottle, a box of 6 and a crate of 24 bottles of the same wine. When you sell one of the product units, the stock is decreased accordingly for the type of unit sold. Selling a box of 6 will remove 1 from the stock of the product in stock in boxes of 6, and not affect the available stock for single bottles. Each of these buttons on the Ribbon bar brings up a dialog that in turn lets you enter specific details about the product. In the next walkthrough you ll get a closer look at some of them. 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 VAT group Select the manufacturer you created in the preceding chapter. Choose the High group you created earlier 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. 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 2012 Imar Spaanjaars De Vier Koeden Page 19 of 53

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 wellindexed 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 Imar Spaanjaars De Vier Koeden Page 20 of 53

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 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 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 Imar Spaanjaars De Vier Koeden Page 21 of 53

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 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: 2012 Imar Spaanjaars De Vier Koeden Page 22 of 53

23 2012 Imar Spaanjaars De Vier Koeden Page 23 of 53

24 Figure 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 <h2></h2> <ul id="productlist" class="horizontal">  <li class="listitem"> <h3><a href=""></a></h3> <span class="price"> </span> <a to basket</a>  <span class="shortdescription"></span>  </li>  </ul> <div id="productlistnavigation"> <span id="productcount"> products found</span> <span id="pagecount">page  of 2012 Imar Spaanjaars De Vier Koeden Page 24 of 53

25 <span id="pagenavigation"> <a id="prevpage" <a id="nextpage" /> </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 to get a complete overview of all available tags. Tag Ecom:Product.Name Ecom:Product.ID Ecom:Product.Number Ecom:Product.Price Ecom:Product.ShortDescription and many more ProductCategories ProductRelatedGroups VariantCombinations AssociatedGroups Product.OrderLineFields Description 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. This loop provides access to the available product categories you ve assigned to a product. 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. Renders the available variant combinations for a product. This loop is discussed further in Chapter 5. The associated groups loop gives you a list of all the groups that this product is a member of. 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 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 2012 Imar Spaanjaars De Vier Koeden Page 25 of 53

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 ProductList.CurrentPage ProductList.NextPage ProductList.PrevPage Description The 1-based index of the page you re on. 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" 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 ProductList.PageSize ProductList.TotalPages ProductList:Page.GroupID ProductList:Page.GroupName ProductList:Page.ID ProductList:Page.PID Returns the total number of products that are available over all pages. Returns the number of items that are displayed per page (this is the value you set in the Product Catalog s module page). Returns the total number of pages. 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. Returns the ID of the current page. Useful if you need to build up the link for the next and previous pages yourself. 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. Both Page.ID and Page.PID can be changed using the setting 2012 Imar Spaanjaars De Vier Koeden Page 26 of 53

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 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 <strong></strong></span>  <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 { 2012 Imar Spaanjaars De Vier Koeden Page 27 of 53

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 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 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 Imar Spaanjaars De Vier Koeden Page 28 of 53

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 Imar Spaanjaars De Vier Koeden Page 29 of 53

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 Imar Spaanjaars De Vier Koeden Page 30 of 53

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 />  :  <br />  :  2012 Imar Spaanjaars De Vier Koeden Page 31 of 53

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. 3. Switch to the Status tab and click Add state on the toolbar Imar Spaanjaars De Vier Koeden Page 32 of 53

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 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: <img src="" alt="" /> 2012 Imar Spaanjaars De Vier Koeden Page 33 of 53

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. Walkthrough Creating a BOM Product 2012 Imar Spaanjaars De Vier Koeden Page 34 of 53

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 A new dialog with groups and products appears as shown in Figure Find a bicycle, helmet and a pair of glasses from the catalog, mark them and click Save and close Imar Spaanjaars De Vier Koeden Page 35 of 53

36 Figure 4-28 The bicycle kit is now configured and consists of 3 different products: Figure Imar Spaanjaars De Vier Koeden Page 36 of 53

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"> <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 2012 Imar Spaanjaars De Vier Koeden Page 37 of 53

38 shown in Figure 4-32 Figure 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> <b></b><br> <select name="">  <option value=""  </select> </td> </tr>  </table> This code will display a configurator to the user where the wanted option of lights can be chosen: Figure Imar Spaanjaars De Vier Koeden Page 38 of 53

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 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 = 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: 2012 Imar Spaanjaars De Vier Koeden Page 39 of 53

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: 2012 Imar Spaanjaars De Vier Koeden Page 40 of 53

41 Figure Fill out the form with a rating from the dropdown, your name, , website and a comment and submit the form by clicking the Send comment button. 6. Repeat step number 5 with different rating and comments 7. After submitting the form the rating and comments will appear: 2012 Imar Spaanjaars De Vier Koeden Page 41 of 53

42 Figure 4-35 To see how this works, open the Comment.html template from the File manager the template is located at /Templates/eCom/Product/Comment.html. At the top of the template you will see something like this: Defined(Ecom:Product.Rating)--> <h3>reviews</h3> Defined(Website)--> <a Not Defined(Website)--> <span style="color:#c5c5c5;"> /> /> <hr /> This is the part that shows the list of comments and their ratings of the product if there is any. The block starts with an If Defined on Ecom:Product.Rating tag so the Review heading and the comments loop will not be rendered if there are no ratings. The template is pretty self-explaining, but note the tag Stars. It will render a series of images (stars) matching the rating of that specific comment. When doing that, Dynamicweb uses a built in star for the image tag. This can be overruled by using the 2012 Imar Spaanjaars De Vier Koeden Page 42 of 53

43 tag which is the rating in numeric, by creating an image tag like this: <img Make sure to have images named 1.gif, 2.gif etc. in the System folder. Further down in the template you will find the form that submits the comment and rating. It will look like this: <form method="post" action="/admin/public/404.aspx" id="commentform" onsubmit="return comment_validate()"> <input type="hidden" name="comment.command" id="comment.command" value="" /> <input type="hidden" name="comment.itemtype" value="ecomproduct" /> <input type="hidden" name="comment.itemid" /> <input type="hidden" name="comment.langid" /> <label for="comment.rating">your rating</label> <select name="comment.rating" id="comment.rating"> <option value="">rate product...</option> <option value="1">1 (Poor)</option> <option value="2">2 (Below average)</option> <option value="3">3 (Average)</option> <option value="4">4 (Good)</option> <option value="5">5 (Great)</option> </select><br /> <label for="comment.name">name</label> <input type="text" name="comment.name" id="comment.name" value="" /><br /> <label for="comment.name"> </label> <input type="text" name="comment. " id="comment. " value="" /><br /> <label for="comment.name">website</label> <input type="text" name="comment.website" id="comment.website" value="" /><br /> <label for="comment.text">comment</label> <textarea name="comment.text" id="comment.text" rows="10" cols="50"></textarea><br /> <input type="submit" value="send comment" /> </form> By default the form calls the JavaScript function comment_validate when submitted. This JavaScript function fills out the hidden fields and the action of the form to limit issues with spam-bots submitting data Managing comments and ratings Comments and ratings are usually coming from users, and you may have the need to edit them if they contain bad language. It is easy to manage the comments and ratings for a product. To edit comments, locate the product in the ecommerce Product Catalog. Then on the Ribbon bar, in the Tools section, click the Comments button. The following dialog appears: 2012 Imar Spaanjaars De Vier Koeden Page 43 of 53

44 Figure 4-36 From the Comments dialog you can edit, add and delete the comments and rating for this product Using comments and ratings in product lists The ratings can also be used for sorting products in product lists so that the highest rated products are shown at the top. You see how to do this next. Walkthrough Comments and Rating in product lists 1. In the Navigation panel, locate the Catalog page and open the paragraph with the ecommerce catalog module attached. 2. In the Product sorting section, set the Sort by to Rating. 3. Set the Sort order to Descending and click Save and Close 4. Now the frontend will sort the products by their rating, showing the top rated products first Imar Spaanjaars De Vier Koeden Page 44 of 53

45 5. To show the rating and comment count for each product in the product list, the product list template needs some extra template tags. In the Template section, locate the List template and choose the edit icon. 6. Find an appropriate place for inserting the comment and rating information inside the Products loop and insert the following markup: <a <img src="/admin/images/rating/commentsmall.gif" alt="" /> </a> <span </span> This markup will display a comment count and the average of the ratings of the product. See below for an example: Figure 4-37 The same tags can also be used in the product detail template. 4.8 Managing Campaigns Campaigns in Dynamicweb ecommerce 8 are basically simple time periods. When you create a campaign, you define a start and end date, and provide a name to identify it. On their own, campaigns don t do much but they become useful when combined with products and prices. In particular, you use Campaigns to change the following items during the timeframe set by the campaign: - Availability of products - Prices of products and variants Walkthrough Using Campaigns 1. Open the Management Center and expand the path ecommerce Product Catalog Campaigns Imar Spaanjaars De Vier Koeden Page 45 of 53

46 2. Ignore any existing campaigns and click New Campaign on the toolbar and enter a name such as Summer Season. 3. Leave the Start and End date set to their defaults. The default date is today s date and the end date is about a month from now. This means the campaign will be active immediately so you can use it to test out campaigns. If you enable Always valid the campaign has no end-date and will be active until you change it, or deactivate it. You can (temporarily) deactivate a campaign by deselecting the Active checkbox. 4. Click Save and close on the toolbar to save your campaign. 5. Click ecommerce in the Main Menu and locate one of the products you created earlier. On the Details tab, in the Activate product section choose the campaign you just created, shown in Figure 4-26: Figure Open the frontend of the web site in a new browser window and locate the product you just modified in a list. It should be available on the Catalog page which you can access from the site s menu bar. 7. Leave the page with the product open in your browser and return to Dynamicweb. Open the Management Center again and locate the campaign you created earlier. Uncheck the Active checkbox and save the changes. 8. Go back to the browser window with the frontend page and refresh it. The product should now be removed from the list. Campaigns are great to make products available during a specific period of time only, as with the Summer Season example. You can use them for other seasonal periods such as Christmas (not much point in selling Christmas decorations after December 26 th ) or any period of time your business requirements dictate. When working with variants which you ll learn more about in the next chapter you have the same option available; enabling you to activate certain variants during a specific period of time. Additionally, you can alter a product s or variant s price during a campaign. You ll learn more about prices in Chapter 9. So far in this chapter you ve seen how to display product groups in the content section of a web page using the Product Catalog module. But quite often, you ll want to make the available ecommerce groups part of your site s navigation structure. You ll see how to do this in the next section Imar Spaanjaars De Vier Koeden Page 46 of 53

47 4.9 ecommerce Navigation In order to understand what ecommerce Navigation can do for you, consider the following page shown in Figure 4-39 Figure 4-39 In the left menu, you see a list of all the groups in your shop at the first level. The Bikes group has been expanded and shows its two child groups as well. To create this navigation structure you could add a Product Catalog module to the page and configure it to display the groups. However, Dynamicweb has a much easier solution for this. Depending on your exact requirements and how you want the groups to appear, you have a few options: 1. Enable ecommerce Navigation for a page and use your standard XSLT menu to render the groups as part of the main navigation. This can be useful if you want to display the groups directly as child menu items to, say, the Catalog page shown in Figure Enable ecommerce Navigation for a page and use a custom XSLT file to render just the ecommerce groups anywhere you want from your main Layout file. This is shown in Figure 4-39 under the Catalog heading in the left column. 3. Create a hidden page that has ecommerce Navigation set up and then refer to this page from your Layout file. With options 1 and 2, you need to assign the ecommerce Navigation to every page where you want the group structure to appear. This can be exactly what you need if you want to display the structure on a few pages only. However, if you have a lot of pages that need to display the groups, this can be tedious to implement. In those cases, you can set up and link to a hidden page that shows the groups from your Layout file. The few pages that don t need the group structure could then be based on a different Layout file Imar Spaanjaars De Vier Koeden Page 47 of 53

48 In the next section, I ll show you how to enable ecommerce Navigation for a page, followed by a walkthrough that shows you how to implement each of the three scenarios Enabling ecommerce Navigation You enable ecommerce Navigation for a Dynamicweb page using its Properties screen as follows: 1. Right-click a page in the Navigation Panel and choose Properties. 2. Switch to the Options tab and click Navigation. The Graphical navigation dialog appears. 3. Enable the ecom groups checkbox. The Graphical navigation dialog should now look like this: Figure Leave the Parent group set to Groups and then choose between All groups and Selected groups depending on your needs. If you choose Selected groups, you get a Group picker that enables you to choose one or more groups explicitly. 5. If you want to limit the level of sub groups that appear when expanding a parent group, choose a value from the Max levels drop down. If you choose 1, only the top level groups will be shown. If you consider Figure 4-27, a setting of 1 means you won t see 2012 Imar Spaanjaars De Vier Koeden Page 48 of 53

49 the Mountain Bikes and Hybrid Bikes when you click the Bikes group. Leaving this value set to All levels automatically shows the available sub groups at the next level when you expand a parent group. 6. Finally, for the Product page item, use the page picker to select a page to which the navigation system should link. This should be a page with the Product Catalog module on it. If the current page you re editing is already the Product Catalog page, simply create a link to itself using the page picker. 7. Finally, click OK to apply the changes. In the next two walkthroughs you use the ecommerce Navigation to implement each of the three scenarios discussed earlier. Walkthrough Implementing ecommerce Navigation on a Specific Page 1. Start by enabling ecommerce Navigation as just explained for the Catalog page you created earlier. For the Product page, choose the same Catalog page. If you don t have a page with a Product Catalog yet, create one first, add the product Catalog module and configure it as explained in the section Managing Products earlier in this chapter. 2. Open up Main.html from the folder /Templates/Designs/Dynamicweb and change the name of the template file in the topnav navigation to LiClean.xslt. You should end up with the following HTML: <ul class="dwnavigation" id="topnav" datasettings="startlevel:1;endlevel:1;template:liclean.xslt;"> 3. Request the Catalog page in your browser. Your menu will be messed up because the CSS is not designed to dynamically show the sub groups, but that s OK for this exercise. Open up the HTML for the page in the browser and examine the <ul> element in the top-nav div. You should see something like this: <ul> <li><a class="inpath firstitem activeitem" href="/en-us/catalog.aspx">catalog</a> <ul class="m1"> <li><a class="" href="/da-dk/catalog/accessories.aspx">accessories</a> </li> <li><a class="" href="/da-dk/catalog/bikes.aspx">bikes</a> </li> <li><a class="" href="/da-dk/catalog/components.aspx">components</a> </li> <li><a class="" href="/da-dk/catalog/campaign.aspx">campaign</a> </li> </ul> </li> <li><a class="" href="/en-us/groups.aspx">groups</a> </li>... Other menu items here </ul> 4. You can see from this code that the top level groups, such as Accessories, Bikes and so on, are now child elements of the main Catalog menu item. In a real-world ecommerce web site, you would need to add the necessary CSS to correctly display this menu. For example, you could add CSS that hides the sub menus by default and shows them when you hover over the Catalog menu item. For this exercise, styling is not our concern, but it s important to realize what HTML is sent to the browser Imar Spaanjaars De Vier Koeden Page 49 of 53

50 5. Go back to Main.html and undo the change, restoring the XSLT file to TopNavigationEcom.xslt, and then save your changes. 6. When you carried out step 3, you may have noticed that the left menu was already in place, showing you the available ecommerce groups. The menu was added by the following code in Main.html: Defined(DwNavigation(leftnav))--> <strong> </strong> <ul class="dwnavigation" id="leftnav" data-settings="startlevel:1;endlevel:1;template:leftnavigationecom.xslt;"> </ul> This dwnavigation item points to the file LeftNavigationEcom.xslt, which you ll find under /Templates/Design/Dynamicweb/Navigation. The XSLT file is designed to render all subpages of the currently active page using XSLT like this: <xsl:template match="/navigationtree"> <xsl:if > 0"> <ul> <xsl:apply-templates <xsl:with-param name="depth" select="1"/> </xsl:apply-templates> </ul> </xsl:if> </xsl:template> This then creates a mix of subpages of the current page (which would be the case if you created a page under the Catalog page), and all ecommerce groups (as they are added to the underlying menu xml as <Page /> elements as well). Just as with regular XSLT menus, you can alter the XSLT to suit your needs. For example, you could apply CSS classes to specific menu items, sort them or filter out some items. The previous two methods of ecommerce Navigation work fine if you need to apply it to a few pages only (since you needed to set the Navigation properties of the page individually). However, if you have lots of pages where the menu should appear, there s a better alternative explained in the next walkthrough. Walkthrough Implementing ecommerce Navigation on All Pages 1. Start by creating a new page in your Navigation Panel called Hidden Pages. When creating the page, be sure to deselect all checkboxes on the Menu item tab of the Ribbon bar to prevent the page from showing up in the menu itself or search actions. Also, select the Hide in menu button on the Ribbon bar Imar Spaanjaars De Vier Koeden Page 50 of 53

51 Figure 4-41 The purpose of this page is to supply navigation data only, so users shouldn t be able to see it in the interface anywhere. 2. Look up the ID of this page by hovering over its name in the Navigation Panel. You ll see its ID appear in gray in the upper right corner of the panel. 3. Under this new page, create a new subpage called ecommerce Navigation. Disable all check boxes again and make sure that Published is selected for the ecommerce navigation to work here. 4. Enable ecommerce Navigation as explained earlier for this new ecommerce Navigation page. Don t accidentally apply this to the parent - Hidden pages instead. 5. Open the Properties for the Catalog page, and on the Options tab click Navigation. Disable ecommerce Navigation by unchecking the ecom groups checkbox. Since ecommerce navigation is now handled globally, there s no need to have it enabled on this page. 6. Open the Layout file Main.html from the folder /Templates/Designs/Dynamicweb and modify the <ul> element for the left menu as follows:  <strong></strong> <ul class="dwnavigation" id="leftnav" settings="startlevel:1;endlevel:4; template:leftnavigationecomany.xslt;parentid=yourid"> </ul> Make sure you change YourID to the ID of the page you found in step 2. The inclusion of the parentid attribute tells Dynamicweb which page to get the ecommerce Navigation data from. Since this page is always available, every page in your site can now successfully display ecommerce groups. Also, make sure you update the template attribute to refer to LeftNavigationEcomAny.xslt. That file uses the following XSLT to filter out ecommerce groups from the page structure: <xsl:template match="/navigationtree"> <xsl:if test="count(//page/page[contains(@href, 'GroupID')]) > 0"> <ul> <xsl:apply-templates select="page/page[contains(@href, 'GroupID')]"> <xsl:with-param name="depth" select="1"/> </xsl:apply-templates> </ul> </xsl:if> 2012 Imar Spaanjaars De Vier Koeden Page 51 of 53