Store preview

You can use store preview to ensure that changes made in Management Center show up in your store as expected. You can use preview in production, WebSphere Commerce Enterprise WebSphere Commerce Professional authoring, and staging environments.

For example, your marketing team decides to promote a line of leather coats. You create an e-Marketing Spot for the new coats in the Management Center. By using store preview, you can ensure that the e-Marketing Spot shows the ad in your store as you expect.

Here is an example of the store preview that is showing a starter store:

What you can do with store preview

Here is a summary of key tasks you can do in store preview:

Store preview tasks
Task	For more information
Ensure that product and category information is accurate and correctly formatted on store pages.	Previewing a store
Test whether marketing information is displayed as expected in e-Marketing Spots. You can view the name of each e-Marketing Spot in store preview, and review processing information about web activities that are scheduled for the e-Marketing Spot.	Previewing a store
Test that time-sensitive content, such as a promotion, web activity, contract, or a price change, is displayed only when expected. For example: You set up a one-day promotion that is available only between the hours of midnight and 11:59 PM on April 1. You can view your store on April 1 and on other days to ensure that the promotion is applied only on April 1. You schedule a series of web activities to run during boxing week, which is one month away. You can preview your store during that future week to verify that the boxing week ads are displaying correctly. The current system time is the default setting in store preview.	Previewing a store Select the option View your store at a virtual date and time.
Test marketing campaigns that are targeted at specific customers. Within preview, you can create a new registered user by following your store's registration process. This user will exist in your database after you close the preview. For more information, see How operational and transactional data is handled. You can also test prices under different contracts by logging in as two customers that belong to different contracts or accounts.	Previewing a store In the storefront, click Sign In/Register to create a user with the characteristics that you want to test.
Ensure that shipping charges are correctly displayed on store pages.	Previewing a store In the storefront, click Sign In/Register to create a user with the characteristics that you want to test.
Test inventory filters. A store developer can enable a web activity inventory filter. As a result, catalog entry recommendations in e-Marketing Spots display only if the inventory level for the catalog entry is above a configured amount. For example, if a developer sets the inventory level to 100, only catalog entries with at least 100 units in stock are displayed to customers. This filter is off by default.	Previewing a store In the preview options, leave the Product recommendations option set to Use the inventory level as in the database (default). To change the inventory filters in the database, store developers can follow the instructions in Setting up filters to control whether to display marketing information in an e-Marketing Spot.
Test web activities, promotions, and search rules that target a specific customer segment. Preview the store from the perspective of customer who belongs to that customer segment. This way, you can see how the store looks and operates for those specific customers.	Previewing a store as a customer in a customer segment
Test the effect of search rules on search results.	Working with search rules
Verify that search terms and synonyms produce the results you expect.	Improve storefront search results by using search term associations
Verify that search engine optimization metadata is added to store pages as expected.	Changing the SEO properties for categories and catalog entries Changing the SEO properties for categories and catalog entries
Verify that the default catalog is displayed. If the store has multiple store catalogs, you can set a default catalog. Customers in your store see content from the default catalog.	Setting the default catalog
Share store preview URLs with people who might not have access to Management Center, and preview your store on different browsers and devices.	Generating and sharing store preview URLs
Create and edit catalog entries, categories, e-Marketing Spots, web activities, marketing content, and search rules directly from store preview. For pages managed in the Commerce Composer tool, create and edit layouts, and edit pages and widgets.	Click-to-edit function in store preview
For pages managed in the Commerce Composer tool, open pop-up windows that provide the following details about the current page: The page name, the layout that is applied to the page, and the layout evaluation details. The widgets that are used in the applied layout.	Viewing information about pages and layouts in store preview Viewing information about widgets in store preview

In-context preview

When you are working on certain business objects in Management Center, store preview opens directly to the associated store page, rather than to the home page. For example, if you are editing a bicycle product and you launch store preview, the store opens directly to the product details page for the bicycle. In-context preview saves you time because you do not need to browse to a specific store page from the home page to preview your changes.

Note: When you

In-context preview is available for the following Management Center tools and business objects:

Catalogs tool:
- Categories
- Catalog entries (products, SKUs, bundles, and kits)
Page Layout tool:
- Category pages
- Catalog entry pages (products, SKUs, bundles, and kits)
- Static (content) pages
Commerce Composer tool:
- Pages (category, catalog entry, and content pages)
- Layouts

As you work with any of the business objects in the previous list, you can click a Save and Preview button. This button launches store preview in the following states, to help you work more efficiently:

For a catalog entry, category, or page, store preview opens directly to the page. The date inside store preview is the current date.
For a layout, store preview opens directly to the page to which the layout is assigned. The date inside store preview is the start date for the layout.
Note: If the layout is assigned to multiple pages, the Store Preview Options window is displayed. From this window, you can choose which page to view. In this case, if the layout start date is in the future, you must set the date inside store preview to the future date.

Previewing at different resolutions

At the top of the preview window, you can select a resolution at which to view your page. Each resolution simulates how the page is rendered for a specific screen width. If you have pages that use a responsive web design pattern, you can check multiple resolutions for the same page. Store preview also has a Rotate button so that you can switch between portrait and landscape orientation for a specific resolution.
A store preview page that is viewed at a resolution that simulates a mobile device

A store preview page that is viewed at a resolution that simulates a mobile device

Tip: Changing the resolution in store preview does not switch the user agent device ID in the browser. Therefore, to find out how a device-specific page looks on different devices, you can use the user-agent-switching capability in the browser or install a browser plug-in for user agent switching.

Preview delays during reindexing

When you preview your changes to the catalog in store preview, there might be a delay before you see your changes. The delay is required so that your changes can be reindexed by WebSphere Commerce search. The delay can be anywhere from a few seconds to a few hours, depending on how many changes you made and how busy the system is.

To check whether the reindexing is complete, the store preview header shows its status. You can refresh the status at any time by clicking Refresh Details.

How operational and transactional data is handled

While you are previewing your store, you can perform actions that modify operational and transactional data, for example, registering new users, placing orders, and redeeming coupons. When operational and transactional data is modified, the information is recorded in the database, just as when a real user performs these actions. For example, new users will still exist in the database after you exit from preview. You can log in as these users in the store inside or outside of a preview session. Another example is if you redeem coupons within preview, the redemption counts toward any defined redemption limit. If you collect analytical information from this data, your actions during preview might affect your analytics.

When you preview your store on an authoring server, operational and transactional data on the authoring server is treated differently, depending on the context of the preview.
When you preview your store from the production-ready data, operational and transactional data is treated the same as described previously. The store preview reflects the state of the store in the production-ready data. You cannot see changes that are made to managed assets in workspaces.
When you preview your store from a workspace, the store preview reflects changes that are made to managed assets only in the selected workspace. For order activities, the store preview reflects only order activities in the workspace. Any order activities in the production-ready data are not visible the store preview. Activities in the store preview that are related to member data occur directly in the production-ready data because member data is not a managed asset. Examples are the creation of new users and organizations.

WebSphere Commerce Enterprise WebSphere Commerce Professional To prevent operational and transactional data from being changed, you can restrict certain commands from running within a store preview.

Restricting commands in preview

You can prevent commands from running within preview. For more information, see Commands and view restrictions in preview.

Restrict commands in preview to prevent them from affecting your production server data. An order that is completed in preview affects the production data. The order might also affect inventory levels and cause fulfillment centers to be notified of a transaction. Coupons might be redeemed and even payment authentication might be started on a production server.

Preview Best Practices

Talk to a store developer about the following architectural configuration that can limit store preview:

Do not hardcode your custom store URLs to use the store ports nor context path. The port and context paths that are required for preview to work are different from the ones that are used in the normal store flow. For example, the common ports for preview are 8006 and 8007, whereas for the store they are 80 and 443. For store preview to work properly, your store must use either relative URLs throughout or wcf:url tag. These tags generate different URLs that are relative to specific stores.
Management Center store preview assumes that your store must define a view that is called StoreView that is mapped to your store's home page.
Custom struts actions in the Stores.war must allow for preview port, context root, and cookies to be maintained when a request comes to the store front. For example, if you map StoreView to a custom struts action, processing can occur on the request. This processing can remove your preview session by changing session cookies, connection type, port number, and context root.
The web server HostName declaration within your wc-server.xml must be consistent with the host names for store preview, Management Center, and the business context call from the search server.

Preview Limitations

Consider the following preview limitations when you are previewing from a workspace:

Previewing store changes that are made in workspaces is not supported. That is, only approved content is displayed in store preview.
Previewing store changes that are made in workspaces is supported by default.
When you are previewing a store from within a workspace, attempting to process an order might cause errors that prevent you from completing the order.

Mobile store previews

You can preview your mobile store by using store preview. The mobile store is displayed immediately following the regular store:

Store address list with mobile store address immediately following the regular store's address

When you choose a mobile store from the list, the mobile store opens in store preview.

This example shows the Aurora mobile store in store preview:
Mobile store preview

Feature Pack 4 Feature Pack 5 Store preview is not supported for smartphone and tablet starter stores.

Feature Pack 6 or later Store preview is supported for smartphone starter stores, but not for tablet starter stores.