Defining the storefront assets for a site-level widget
In this lesson, you use an existing store JSP file as a model to define the storefront assets for a new Commerce Composer widget. You use the existing store page JSP file to define the data provider, UI provider, and top-level JSP file for your new site-level widget.
About this task
As an example, this tutorial uses the Aurora starter store Shopping Cart
page JSP file as the model for defining the storefront assets. To view the existing
Shopping Cart page, open the Aurora starter store in a web browser. Add a
product to your Shopping Cart, and go to your cart to view the
Shopping Cart page. Your Shopping Cart page can resemble
the following image. By default, WebSphere Commerce provides site-level widgets to retrieve and display the
content for the header, footer, and catalog entry recommendations sections. To use the Commerce
Composer tool to compose the Shopping Cart page, you must create a widget that
retrieves and displays the data for the body of the Shopping Cart page.
Using your web browser, view the source for the Shopping Cart page and
review the code. The Shopping Cart details section of the Shopping Cart page,
which displays the order items, is defined by the ShopCartDisplay.jsp file. The
ShopCartDisplay.jsp JSP file is imported by the
OrderItemDisplay.jsp file, which is the JSP file for the full
Shopping Cart page. The OrderItemDisplay.jsp file imports
the ShopCartDisplay.jsp file with the following
code:
<c:import url="/${sdb.jspStoreDir}/ShoppingArea/ShopcartSection/ShopCartDisplay.jsp"/>
The
ShopCartDisplay.jsp file is located within the
workspace_dir\Stores\WebContent\AuroraStorefrontAssetStore\ShoppingArea\ShopcartSection
directory. You must create a site level widget for the Shopping Cart page by
converting the existing ShopCartDisplay.jsp file.For more information about defining the storefront assets for a Commerce Composer widget, see Defining storefront assets for a Commerce Composer widget.
Procedure
-
Copy the generated source code files for your widget storefront assets from your project folder
to the appropriate location within the default Stores project.
- Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
- Expand your new project directory, go to Stores\WebContent.
- Right-click the Widgets-MyCompany directory. Select to Copy the directory.
- Go to the default Stores\WebContent directory.
- Paste the copied Widgets-MyCompany directory within the default WebContent directory.
Your file structure can resemble the file structure within the following image: -
Update the generated code to define the data provider for your new widget. Use the
ShopCartDisplay.jsp file to identify the data-related code for your
widget.
A data provider handles the data retrieval aspects for your widget. The provider is used to fetch the data that is required for use in the widget. Each widget can have only one data provider. Each data provider is modeled as an independent JSPF file. For this tutorial, the data provider for your widget must fetch the order detail data for use in the Aurora starter store.
-
Update the generated code to define the User Interface (UI) provider for your new widget. Use
the ShopCartDisplay.jsp file to identify the UI rendering-related code for your
widget.
The UI provider for a widget defines how the data that the widget retrieves renders within the storefront. A widget can be rendered in multiple ways and can support multiple UI providers. The UI provider handles the sizing and positioning aspects for the data within the widget.As an example, your new widget separates the
shopping_cart_product_table_tall div
code division into separate rendering styles. The division is separated into UI providers for when a shopper selects to Shop Online or Pick up at store. The UI providers define how to render the corresponding functions for the Shopping Cart page and the list of order items. The UI providers define that the list of order items is to render as a flat view with pagination support.- Go to the Stores\WebContent\AuroraStorefrontAssetStore\ShoppingArea\ShopcartSection directory.
- Open the ShopCartDisplay.jsp file for editing and review the code within the files. Identify the UI rendering code for the Shopping Cart page and copy this code.
- Go to the Stores\WebContent\Widgets-MyCompany\com.mycompany.commerce.store.widgets.ShoppingCartDetail directory.
- Open the ShoppingCartDetail_UI.jspf file for editing.
- Add the code that you copied from the ShopCartDisplay.jsp file into your ShoppingCartDetail_UI.jspf file. This code defines the UI rendering style for the body of the Shopping Cart page.
- Save the file. Keep the file open. You must edit the file again in later steps.
- Optional:
If IBM Customer Service for WebSphere Commerce is enabled for your store, add the code to support the solution
with your Shopping Cart widget.
For more information about this solution, see Administering IBM Customer Service for WebSphere Commerce.
-
Update the generated code to define the top-level entry point JSP for your new widget.
This JSP file is started when your widget is imported on a store page. When a layout that includes your widget is assigned to a store page, this top-level JSP file is used to call the functions of your widget.
-
Create a common directory to contain the common JSP and JSPF that your widget must use.
-
Copy the images that are required by your custom widget into the images
directory within the Widgets-MyCompany directory.
-
Define the translatable text that is to display in the storefront for your widget. Since the
code for the existing JSP and JSPF files for the Shopping Cart page is stored
at the store level, you must copy the text to site-level. The original code for the translatable
text that is used by the files is located within the Stores\Java
Resources\src\AuroraStorefrontAssetStore\storetext_v2.properties file when you are
working in the WebSphere Commerce Developer Enterprise Explorer view.
After you copy the translatable text for your widget into the mywidgettext_en_US.properties and mywidgettext.properties, the contents of your properties files can resemble the following code:Note: Some of the values for the property keys are split over multiple lines for readability. Within your file, ensure that the values are not split over multiple lines.
# Recurring order popup on shop cart RECURRING_ORDER_SELECT = Schedule this order as a recurring order RECURRING_ORDER_INFO = recurring order information icon WHAT_IS_REC_ORDER = What is a recurring order? REC_ORDER_POPUP_DESCRIPTION = A recurring order allows you to schedule repeat orders automatically instead of re-ordering the same item over and over again. For example, instead of logging on to re-order milk every time you run out, simply set up a recurring order so that milk is delivered to your home every week, or any time period between orders suits you best. <br/>Selecting the check box turns your entire shopping cart into a recurring order. On the next page, you can select when the order starts and how often it repeats. ACCE_Region_Order_Item_List=Order Item List ACCE_Status_Order_Item_List_Updated=Order Item List Updated # CheckoutLogon.jsp SHOPCART_TEXT3 = Returning customers SHOPCART_TEXT4 = Sign in for quick checkout SHOPCART_USERNAME = Username: SHOPCART_PASSWORD = Password: SHOPCART_FORGOT = Forgot your password? SHOPCART_NEW_CUSTOMER = New customer & guests SHOPCART_CHECKOUT_WITHOUT_SIGNING = Checkout without signing in SHOPCART_TEXT1 = You can make your purchases from Aurora without signing in. SHOPCART_TEXT2 = You will be given the option to register during the checkout steps. SHOPCART_SIGNIN = Sign in & Checkout SHOPCART_CONTINUE = Continue Checkout SHOPCART_CHECKOUT = Checkout QUICKCHECKOUT = Quick Checkout SHOPCART_UPDATE = Update # EmptyShopCartDisplay.jspf CART_EMPTY = Your shopping cart is empty. If you see something you would like to add to your shopping cart when shopping, click Add to shopping cart. CART_EMPTY_IMAGE = empty shopping cart image #Shipping/Billing Page Order Item Details MOVE_TO_WISH_LIST=Move to Wish List CHANGE_ATTRIBUTES = Change Attributes REMOVE=Remove CATEGORY_RESULTS_DISPLAYING = Displaying products {0} - {1} of {2} CATEGORY_RESULTS_PAGES = {0} of {1} CATEGORY_PAGING_LEFT_IMAGE = Go to previous page CATEGORY_PAGING_RIGHT_IMAGE = Go to next page CATEGORY_IMAGE_VIEW = grid view CATEGORY_DETAILED_VIEW = list view CATEGORY_PAGING_FIRST_IMAGE = Go to first page CATEGORY_PAGING_LAST_IMAGE = Go to last page FF_VIEWICONS = View Icons FF_VIEWDETAILS = View Details CATEGORY_RESULTS_PAGES_DISPLAYING = {0} - {1} # OrderItemDetailSummary, OrderItemDetail.jsp SHOPCART_TABLE_SUMMARY=This table contains details about your current order. It contains product details, availability, quantity, unit price and total price of each item in the current order. You can change quantity or remove the item from current order by navigating through this table. SHOPCART_HAS_NON_RECURRING_PRODUCTS = One or more items in your shopping cart can't be included in a recurring order. To continue, either remove any such items or check out normally without selecting the recurring order option. SHOPCART_TABLE_CONFIRM_SUMMARY=This table contains details about your current order. It contains product details, availability, quantity, unit price and total price of each item in the current order. PRODUCT=Product AVAILABILITY=Availability QUANTITY1 = Quantity QTY=Qty UNIT_PRICE = Unit Price EACH=Each TOTAL_PRICE = Total Price TOTAL=Total Checkout_ACCE_for = for CurrentOrder_SKU = SKU: CONFIGURATION = Configuration ITEM_COMPONENT_QUANTITY_NAME = {0} x {1} Free=Free SHOPCART_PRODUCT = Product SHOPCART_AVAILABILITY = Availability SHOPCART_QTY = QTY SHOPCART_EACH= Each SHOPCART_TOTAL = Total SHOPCART_REMOVE = Remove SHOPCART_FREEGIFT = Free Gift CHANGE_CONFIGURATION = Change configuration OrderSummary_SHOPCART_FREE = Free Checkout_ACCE_prod_discount = product discount for # PromotionPickYourFreeGift.jsp PROMOTION_PICK_FREE_GIFT = Select your free gift PROMOTION_PICK_FREE_GIFTS = Select your free gifts PROMOTION_CHANGE_FREE_GIFT = Change your free gift PROMOTION_CHANGE_FREE_GIFTS = Change your free gifts PROMOTION_CODE=Promotional code PROMOTION_DETAILS=Promotion Details PROMO_NO_DESC=Promotion details not available PROMOTION_CODE_REMOVE = Remove PROMOTION_FREE_GIFTS_POPUP_PICK_GIFT = Select your free gift PROMOTION_FREE_GIFTS_POPUP_PICK_GIFTS = Select your free gifts PROMOTION_FREE_GIFTS_POPUP_PICK_ONE_GIFT = I would like the following free gift PROMOTION_FREE_GIFTS_POPUP_PICK_MULTIPLE_GIFTS = I would like the following free gifts (choose up to {0} gifts) PROMOTION_FREE_GIFTS_POPUP_PICK_NO_GIFTS = I do not want any free gifts PROMOTION_FREE_GIFTS_POPUP_PICK_NO_GIFT = I do not want the free gift PROMOTION_FREE_GIFTS_POPUP_NUMBER_OF_SELECTIONS = You have selected {0} free gifts PROMOTION_FREE_GIFTS_POPUP_NUMBER_OF_SELECTIONS_ONE = You have selected 1 free gift PROMOTION_FREE_GIFTS_POPUP_ERROR_EXCEED_GIFT_QUANTITY = You have selected more free gifts than this promotion allows PROMOTION_FREE_GIFTS_PROMOTION_UNAVAILABLE = We're sorry, this promotion is no longer available Checkout_ACCE_promo_free_gifts_pick = select to view the free gift choices Checkout_ACCE_promo_free_gifts_apply = apply the free gifts selections to the shopping cart Checkout_ACCE_promo_free_gifts_cancel = cancel to close the pop-up and not apply any selections to the shopping cart Checkout_ACCE_promo_code_apply = apply promotional code # ShippingMethodDetails.jsp SHIP_MULTIPLE_SHIPMENT_MESSAGE=Click multiple shipments if shipping to more than one address SHIP_SINGLE_SHIPMENT_MESSAGE=Click single shipment if shipping to one address SHIP_MULTIPLE_SHIPMENTS=Multiple Shipments Checkout_ACCE_Multi_Shipping = select to use multiple shipments to ship to more than one address SHIP_SINGLE_SHIPMENT=Single Shipment Checkout_ACCE_Single_Shipping = select to use single shipment to ship to one address SHIP_ADVANCE_SHIP_OPTIONS=Advanced Shipping Options SHIP_SHIPPING_ADDRESS_CAPS=SHIPPING ADDRESS SHIP_SHIPPING_METHOD_CAPS=SHIPPING METHOD SHIP_SHIPPING_INSTRUCTIONS_ADD = Add Shipping Instructions SHIP_SHIPPING_INSTRUCTIONS_LABEL = Specify additional shipping instructions SHIP_REQUESTED_DATE_UPPER_CASE = REQUESTED SHIPPING DATE SHIP_REQUESTED_DATE_ADD = Request Shipping Date SHIP_REQUESTED_DATE_LABEL=The date format should be month/day/year, therefore m m/d d/y y y y SHIP_REQUESTED_ERROR=Invalid date. Use mm/dd/yyyy format SHIP_PICKUP_LOCATION = Store pick up location: SHIP_ITEM_AVAILABILITY = Show availability SHIP_INV_STATUS_AVL = In Stock SHIP_INV_STATUS_BO = Backordered SHIP_INV_STATUS_UAVL = Out of Stock SHIP_INV_STATUS_NA = Status Not Available SHIP_TO_STORE = Pick up in store SHIP_ONLINE = Shop On-Line NO_OF_SHIP_OPTIONS = Two radio buttons for selecting the purchase option, first Shop On-Line option and second Pick up in store option. SHIP_EXPEDITE_SHIPPING = Expedite # ShipmodeSelectionExt.jsp BOPIS_SHIPMODE_ONLINE = Shop Online BOPIS_SHIPMODE_STORE = Pick Up at Store MO_ORDERSUBTOTAL = Order Subtotal: MO_TAX = Tax: MO_SHIPPING = Shipping: MO_SHIPPING_TAX = Shipping Tax: MO_ORDERTOTAL = Order Total: MO_BILLINGINFO = Billing Information MO_PAYMENT = Payment MO_BILLINGADDR = Billing Address MO_BILLINGMETHOD = Billing Method MO_AMOUNT = Amount: #------------------------------------------------------------------------- # CSR on-behalf #------------------------------------------------------------------------- TAKE_OVER_ORDER = Take Over Lock TAKE_OVER_ORDER_MESSAGE = This order is locked by another administrator with the logon ID "{0}". Click Take Over Lock to take over the order, or click Unlock to unlock the order. UNLOCK_ORDER = Unlock UNLOCK_ORDER_MESSAGE = When you are finished making changes, click Check Out, or click Unlock to hand over cart back to shopper. LOCK_ORDER = Lock LOCK_ORDER_MESSAGE = Lock the order before making any changes to the shopping cart. Click Lock to lock the order. CURRENTORDER_LOCKED = This order is locked. To unlock the order, contact an administrator from your organization. ACCE_STATUS_ORDER_LOCK_STATUS_UPDATED = Status of Order lock is updated. ACCE_ORDER_LOCK_STATUS_CONTENT = Status of Order lock REGISTERED_CUSTOMER_SEARCH_RESULTS_TABLE_SUMMARY = This table contains a search box to search registered customers. It lists the search results with an option to view details about registered customers. Included with the results are options like accessing the account, and enabling / disabling the account. #-------------------------------------------------------------------------- # B2B Sample Code #-------------------------------------------------------------------------- PRICING_POPUP_LINK = Contract: PRICING_POPUP_TITLE = Pricing PRICING_POPUP_PRICE = PRICE PRICING_POPUP_CONTRACT = CONTRACT PRICING_POPUP_INVALID_CONTRACT = The contract originally selected is no longer available. Please re-select a contract. PRICING_TABLE_SUMMARY = This table lists the available contracts and prices for the selected item. Shoppers can use this table to specify the contract they want to apply to an order item. FF_PRICERANGE_TITLE = Price Range HEADER_SAVED_ORDERS = Saved Orders BREADCRUMB_SAVED_ORDERS = Saved Orders CurrentOrder_NO_PRICE_AVAILABLE = No price available. QuickInfo_Qty = Quantity SHIPPING_PRICE=Price # SingleShipmentOrderTotalsSummary.jsp ORD_ORDER_DISCOUNTS_PRODUCTS=Product Discounts: ORD_DISCOUNT_ADJUSTMENTS=Discount ORD_DISCOUNT_DETAILS_TITLE=Order-Level Discount Details DISCOUNT1 = Discount: ORD_DISCOUNT_DETAILS_TITLE=Order-Level Discount Details # CatalogEntryAvailableDisplay.jspf SHIP_IN_STOCK=In-Stock SHIP_OUT_OF_STOCK=Out of Stock SHIP_BACKORDERED=Backordered ({0}) PROMOTION_CODE_EMPTY = Please enter the promotional code APPLY=Apply DETAILS = Details # Dialogs Titles DIALOG_TITLE_PRODUCT_COMPARE=Product Compare Dialog DIALOG_TITLE_CREATE_WISHLIST=Create Wish List Dialog DIALOG_TITLE_EDIT_WISHLIST=Update Wish List Name Dialog DIALOG_TITLE_DELETE_WISHLIST=Delete Wish List Dialog DIALOG_TITLE_MESSAGE=Message Dialog DIALOG_TITLE_LANGUAGE_AND_CURRENCY=Language and Currency Dialog #------------------------------------------------------------------------- # Wish List Component #------------------------------------------------------------------------- SL_DEFAULT_WISH_LIST_NAME = Wish List SL_CREATE_NEW_SHOPPING_LIST = Create a new Wish List SL_NAME_NEW_LIST = Type a name for your new list. SL_ADD_TO_SHOPPING_LIST = Add to Wish List SL_MULTIPLE_SHOPPING_LIST_DD = Multiple shopping list drop down. Press enter and tab to display the drop down SL_SIGN_IN_OR_REGISTER_TO_ACCESS_LIST = Sign In or Register to access your lists. SL_SIGN_IN_OR_REGISTER = Sign In / Register SL_ITEM_ADDED_SUCCESSFULLY = This item has been successfully added to your list. SL_CONTINUE_SHOPPING = Continue Shopping SL_SELECT_LIST = Select a list to Add to: SL_CLOSE = Close SAVE = Save LIST_CREATED = Wish list created successfully. CANCEL = Cancel ACCE_WISHLIST_SELECT = Select a wish list to work on. The wish list section will display the wish list you selected. # CouponWalletTable.jsp NO_COUPON_MESSAGE = You currently have no coupons. COUPON_WALLET_TABLE_SUMMARY=This table contains the coupons in your coupon wallet. From the shopping cart, you can add coupons to an order and remove coupons from an order. From the My Coupons section of your My Account page you can use this table to remove coupons from your coupon wallet if they have not already been applied to an order. COUPON_EXPIRATION_DATE = EXPIRATION DATE COUPON = COUPON COUPON_APPLIED = Applied COUPON_WALLET_ACCE_REMOVE = Remove coupon from coupon wallet. COUPON_WALLET_ACCE_ACTION = Action REMOVE=Remove Checkout_ACCE_coupon_order_remove=Remove Checkout_ACCE_coupon_apply=Apply WidgetTypeDisplayText_ShoppingCartDetailWidget=Sample ShoppingCartDetail widget
-
Define or copy the error message prompt text from the store-level to site-level.