View Single Listing

Summary of Changes: (The purpose of this table is to keep traceability and Product team to highlight the things that were changed into the scope, based on comments or discussions)

There will be differences between the view and edit mode.

The whole figma project available - https://www.figma.com/design/UdlQyxZ0F3ZLxcZUdY1RG2/Multichannel-Pro?node-id=2880-93827&node-type=canvas&t=0EZgLju6zQgQuCY3-0 Prototype available - https://www.figma.com/proto/UdlQyxZ0F3ZLxcZUdY1RG2/Multichannel-Pro?node-id=2880-38966&p=f&t=iH6kQEqwWDVM3yLG-0&scaling=min-zoom&content-scaling=fixed&page-id=2868%3A79545

View Single Listing

The specifics around the listing view mode is we are restructuring the tabs and all add action buttons for all actions and flags.

In the main fields we want to have buttons for all actions which simply set the relevant field on pending in the back end we will have also some identifications to let the user know what is going on with the listing but I will cover this in a separate section. For the flags we want to add toggles which will simply set 0 or 1 in the backend and add some proper description what each flag does.

The description tab will store only the Description and Condition Description because we may have large sets of texts here. In the view mode we want to render any html or css tags making sure we are not breaking the whole screen.

The categories fields are combined with current Item and Variation Specifics which are updating as Attributes. There are additional options and identifications related to the product mapping. By default the listing will inherit the product user category as Listing user category or we can support different listing user categories for different marketplaces thus the field is Free Text. Once we have User Category which is already mapped we will automatically fill the Hemi Category and Marketplace category which are read only fields. Next to the Hemi Category and Marketplace Category fields we want to have a button for view mapping or add mapping if there is nothing mapped which will redirect us to the actual category mapping (Product Mapping Section) from where changes can be applied.

Both action will redirect us to the product mapping section or open the product mapping section into a modal.

With the category mapping we want to be able to automap in phase 2 the marketplace attributes and the values and we can check all the attribute and values mappings under “Categories and Attributes” . From here we can add new specifics and automatically check if we already have a mapping for them or we need to create a new one also we will be able to remove any of the existing specifics or even navigate to the product mapping section and change any of the mappings.

Each specific will have two names which will be the Name of the specific from the product raw data and the Name of the specific which we will send to the Marketplace. From the above example we will have a Brand as Item Specific in Hemi and we gonna send it as Manufacturer to eBay. The same logic applies for the values. All marketplace names and values are read only on the listing because they can be controlled only from the Product Mapping Section. However we will give the user an option for custom attribute and custom value.

Listing Actions and Flags

For the actions we gonna have 4 states Default, Pending, Send and Error each state is indicated with different style. Default

Pending

Sent

Error

For the errors we want to directly display some part of the error message and have a button to view all error for the certain action. The retriger of an action is by clicking on the try again button which do exactly the same thing like the default state and set the action on pending. Also all actions on Error state should be under the other actions with state different from error.

If all states are on error we gonna have the below case

If we click on View All Errors button we want to show the full error messages into a modal which is with fixed position and separate scroll form the listing. (Please check the prototype for better experience).

By clicking the X button we close the modal for the full error messages

The flags will be a toggles which have active and inactive state with description of what each flag do and how affect the listing