This document is a template which purpose is to present the structure and tone of voice/semantic specifications should follow.
The information detailed in this file are not relevant, and the different parts are not related to each other. It is made from different specs stitched together.
Do not attempt to build what is written below
This template presents how to write a page Intro, and features’s Context, functional specs and behaviors for features.
It corresponds to the Page’s “Intro” block and to the features' “Context+visual prototype”, “functionnal specs and expected behaviors” in the schema below.
The following specs is about the Order View page. To see the page in the software, go to Orders > click on an order.
Specifications for the order view page for 1.7.7 - 2019
As merchant managing order is essential for my e-commerce, I need to be able to:
The Add order page (Orders > Orders > View button) is expected to be migrated to Symfony for the 1.7.7 version and will be reworked for better user experience.
Some new specifications for the new design are in progress but to avoid any features regressions. We need to specify the whole behaviour of this page to make it easier to compare the new scenario and avoid any new bugs and regressions.
Thus, this project aims at specifying the new behaviours for every scenario a merchant could be dealing with the order management. This specification should specifically define :
Orders > Orders > View order
The user access to the order view page by either clicking on the order’s row or the view button.
Generic page operation - Order view
On the header, we have the order’s reference, customer’s name, total price in black background, the date and the hour.
Bellow the panel’s header, we have all the order’s action button:
The current status is displayed by default on the droplist. It can be changed by selecting the new order’s status from the droplist after validating the confirmation button.
Opens the Print page of the browser with the order’s content.
If the current or new order status as the generation of the invoice activated, the button is shown or the user generates it manually.
When the user clicks on the button, it downloads the invoice.
If the current or new order status as the generation of the delivery slip then the button to download the delivery slip is shown.
If the current or new order status of order considered as paid then the button is shown. After clicking on the button, then the product table will take the full width of the page. The user can edit the refund amount by product and also the shipping cost. He must select the quantity of the product concerned for the refunded and then write refund amount chosen by product rows. The maximum refundable amount is written bellow all the amount input in tax included.
By default, the quantity input has 0 prefilled. To validate a partial refund, the user must must as selected minimun 1 quantity.
Before the validating a partial refund, the user can choose to re-stock or generate a voucher by checking the checkboxes.
When the status “Refunded” is applied to the order, the refund amount is deducted to the total spended by the customer since registration and the number of valid orders placed decreases by 1.
After the validation a partial refund, a new column is added with quantity previously selected and the amount entered.
The cancel button only is shown by default on the creation of an order. The button disappears when the order is considered as paid
When pressing the button, the product list takes the full with of the page and the column cancel is added. On the column cancel, a checkbox and quantity input is displayed. Checking the checkbox will prefill the quantity input with the quantity of the product ordered. The quantity input can still be editable.
Pressing the button cancel will reduce the quantity of the products selected if there still some left otherwise it deletes the product from the list.
To cancel products at least one of the product must be selected.
When all the products are cancelled, the status automatically changes for “Canceled”.
Standard refund only appears when the merchandise returns are activated and the order is considered as paid and disappears when the order is considered as shipped.
When the user presses the button a column “Refund” is added with a checkbox and the input quantity.
A quantity must be selected to refund a product.
Before refunding the products, the user can choose to generate a credit slip and/or voucher. See if you can add the button restock
When all the products are refunded order status change to Refunded. A product can’t be refund multiple times.
After refunding, it shows on a column “Refunded”, the quantity and the price of the refund per products.
Return product only appears when the merchandise returns are activated and the order is considered as paid and disappears when the order is considered as shipped.
When the user presses the button a column “Refund” is added with a checkbox and the input quantity.
A quantity must be selected to refund a product. A product can be return if it has been re-stock before by another process has standard, cancel or partial refund button. A product can’t be refund multiple times.
Before refunding the products, the user can choose to generate a credit slip and/or voucher or/and re-stock.
After returning the products, it shows on a column “Return” and “Refund” with the return quantity and the price of the refund per products if a generated slip was checked in the option.
The customer panel displayed on the left of the product list has the customer’s title, name, last name and customer reference. To see the full customer description, you can click on View full details that redirect to his customer page on another page.
Customer panel is divided into 3 parts:
Customer card displays :
Shipping and Invoice address
Each address has a button to update or change it. The button opens a list to select the user wants to edit or update it.
The edit address redirects to the edit address page of the selected address. After saving any edit of the fields of the address form, the user is redirected on the order that he was editing in the first place.
And change address opens the popin that allows the user to choose the new address form a droplist.
Private customer note is closed by default when it is empty and open bu default when filled. To add a note when it is empty, the user has to click on the + button and has to press on the save button to save it.
Bellow the customer panel, you have the messages panel. The total of the exchanged messages is displayed next to the panel’s title.
Only the 4 last messages private or public are displayed showing the sender’s name, delivery’s date and the content’s message. The private message is displayed with a dark background and a specific icon for the sender pic.
Bellow the messages displayed, the user can choose a standard message to send. all predefined messages of the order messages page are available in a droplist to select the message to prefill the message input text. By default, there is no prefilled message so the droplist shows “-”. The link named “configure predefined messages ->" below the droplist is available to open on a new browser’s tab the order messages page to access to the predefined messages.
After selecting the droplist selection, the prefilled text is still editable.
A checkbox is available to choose to write a private message hidden from the customer.
Customizing the prefilled message, writing the message from scratch or using the prefilled message, the user sends it by clicking on Send message. It sends the email and adds the message on the front-office on the message section of the order historic page and an email as presented on the screenshots below.
To see all the past messages, there is the possibility to click on the right of the send message button on View full conversation to open on a popup.
Bellow the action button on the right, the product panel displays the order’s products into the table list showing:
When the product has customization, a row is added below the product with the labels of the customization and the content from the customer (image or text). When the number of images exceeds the size of the toe, they go to the next line.
When the product is a pack of products, a link is added bellow the product name to show all the product in an popin.
By pressing on the link “View pack content”, it opens the products from the pack in a popin:
The pagination of the list starts when there are more than 8 products The stock location column is hidden only when none of the products has a stock location only on the website. The column is only displayed at the corresponding pagination. If only a product on page 2 of the list has a stock location then the stock location column appears on page 2 and hidden in the other pages.
The quantity is coloured in a dark grey background if it is 2 or higher.
The edit button allows the user to edit the excluded and included base price and quantity. If the user edit an amount in the input without taxe it will insert the amount plus the product taxes in the input with taxe automatically. And vice versa, if the user edit an amount in the input with taxe it will insert the amount less the product taxes in the input without taxe.
The merchant is warned if he edits the price of product with a specific price or an catalog price rule.
While editing the quantity, the total updates itself to let the user know the impact price that it will have. The Update button to save the modification or Cancel button to drop it.
The Delete button removes the product for the list.
A confirmation pop-up appears after clicking on the Update button or the Delete button.
At the end of the table list, there are 2 buttons:
The vouchers will be added on the table list displaying the discount name, value and the delete button on the top of the summary order. The new discount created is added with the status deactivated on cart rule page with zero quantity.
If the order status is considered as paid, either on adding a product or adding a discount adding, the user as to specify on which generated invoices it will be applied.
The bottom of the product panel resume in a list all the order:
Below the totals, a warning message is displayed to warn the user that for this customer group, prices are displayed as HT or for this customer group, prices are displayed as TTC depending on the customer group setting and also that returns are disabled. when the merchandise return is disabled on the merchandise returns page.
All the tabs are located in the same panel bellow the products list.
The label “Wrapping gift” and “Recycled packaging” are only shown when the feature are present in the order. It must be shown on all the tabs.
The table list of the latest order status is displayed composed:
On the bottom, a drop list of all the status available is shown to update the current status through the button Update Status next to it. Updating the order status will trigger all the actions set by the order status.
The document tab regrouped all the document as invoices and delivery slips in a table. The table displays the date, document type, reference and the amount. The reference is a clickable link to download the document.
Each table’s rows as 2 possible button actions:
If there is no document, a button is available to generate an invoice with all the information saved so far in the order.
The carrier table shows the date, the carrier, the weight, the shipping cost, the tracking number and edit button.
The edit shipping button on each row can edit the information in a popin. You can edit the text input the tracking number and in the drop list the carrier method.
The merchandise return tab lists the date, the tracking number, the type, Carrier (which is the return status) and the quantity. When the merchandise return is disabled the tab displayed: “no merchandise returned yet”.
The payment section displays all the transactions made in the order from the payment’s module or the manual inputs.
The table shows the date and hours, the payment method, the transaction ID, the amount with the currency and the button detail.
To fill a payment transaction, the user has to select the date, one payment method from a droplist, the amount and currency then press the add button. The amount can be a positive or negative value.
A red warning is shown if the filled amount is inferior or superior of the order’s total comparing the total of the transactions and order’s total.
After adding, the user can display all the details of the transaction by pressing the Detail button. It will show below the arrow the number, brand, expiration date and owner of the credit card for any payment module.
If the order’s status is considered as paid then before adding a transaction the user has to specify in which generated invoices from a droplist it will be added.
When the status accepted (waiting for payment) you can change the currency of the order with a drop list.