Adding Delivery Notice on Bulk Fiber Items in Webstore

Task Summary:

The objective of this task is to enhance the Product Detail Page (PDP) by adding a custom delivery notice for bulk fiber items purchased by the foot. This message, “All custom cut orders have a 2-business day lead time following the date the order or PO is received,” will be displayed based on specific conditions to inform customers of the lead time for custom cut orders.

Requirement Details

1. Objective:

• Display a custom delivery notice on the PDP for bulk fiber items, specifically when the customer selects the 1ft option.
• Ensure the notice is positioned between the quantity selection and the “Add to Shopping Cart” button.

1. Display Conditions:

• The notice should appear for bulk fiber items under these conditions:
• If the item’s Class L2 field identifies it as a bulk cable or If the parent matrix item is categorized under Bulk Cable or specific subcategories (SSF™ Fiber Optic or BendSafe® Fiber Optic).
• Only when the customer selects a 1ft length option.

Solution

1. Description:

• Implement a notice display for eligible items meeting the conditions above.
• Ensure the display dynamically updates based on customer selections.

1. Placement:

• The delivery notice will be placed under the item options in the PDP page.

Steps to Implement Solution

1. Identify Bulk Fiber Products:

• Check if the matrix parent item meets the conditions:
• The Class L2 field should match “Bulk Cable”.

1. Check Length Option:

• Validate that the notice displays only when the 1ft option is selected.

1. Display Notice:

• Add a condition in the code to display the notice based on the criteria outlined.
• Place the notice element on the PDP as specified.

1. Code Implementation:

• Use JavaScript entry point file JJ.ABCItemInventorydetails.ABCItemInventorydetails.js of ABCItemInventorydetails extension to dynamically check item attributes and control the visibility of the notice based on user selection.
• Bind the afterOptionSelection event to dynamically update the notice display when the user interacts with the length option.

Code Snippet: Notice Display Functionality

showNotice: function () { var pdp = container.getComponent('PDP'); var itemInfoitem = pdp.getItemInfo(); if (!!itemInfoitem) { var custMatrixLength = itemInfoitem.custcolmatrixlength ? itemInfoitem.custcolmatrixlength : null; var itemInfo = pdp.getItemInfo().item; var bulkChild = null; var BulkItem = itemInfo.custitem22 ? itemInfo.custitem22 : null; if (pdp.getSelectedMatrixChilds().length == 1) { var matrixItemInfo = pdp.getSelectedMatrixChilds()[0]; bulkChild = matrixItemInfo.custitem22 ? matrixItemInfo.custitem22 : null; } if (BulkItem == "Bulk Cable" || bulkChild == "Bulk Cable") { if (custMatrixLength == "27") { $('.product-details-full-notice').show(); } else { $('.product-details-full-notice').hide(); } } } }