Rework: Order Details page mark-up

Hi Andrey,

several customers have reported that the structure of the Order Details page is kind of confusing, meaning that the sections seem to be order in an illogical way.



By the most opinions the best order of the elements would be something like this:

.order-overview

.order-details-area

.section.shipments

.section.products

.section.order-notes

.section.options

.section.totals



This way you have the overview and addresses at first, as it is by default. Then you see one of the most important things for the client, all of the real-time information about the shipment. Then you have the products and notes tables, which are more of a secondary information at this point. And at the end you have the attributes and totals sections, containing the least important information after the order has already been made. Also moving the Re-order and Return-items buttons right after the .totals-info element inside the .section.totals for overall consistency with other similar pages.

I have the mark-up ready (including some more minor alterations), so if you want I can send it to you via Git or something else.

As a customer, a lot of time myself, it is very important to have all the information on this page consistent, easy to access and logically sound, so for me it seems a good addition to the improving nopCommerce UX!

Let me know what you think :)

Kind regards,
Aleks

Nop-Templates.com wrote:
Hi Aleks,

Thanks a lot! Please share it (work item)

By the way, I like something like the following one - https://almsaeedstudio.com/themes/AdminLTE/pages/examples/invoice.html

If this area is being reworked can I make an additional suggestion?

It would be handy if the display of the address block could be handled by a partial view in the Shared views folder. There are currently a few different areas where address blocks are displayed in nop - e.g. the customers' address book, the details of past orders, the order confirmation page of the checkout process, and probably some others that I can't remember now.

All of these areas repeat a very similar block of code that includes something like this:

@if (address.CityEnabled || address.StateProvinceEnabled || address.ZipPostalCodeEnabled)
{
  var cityStateZip = "";
  if (address.CityEnabled)
  {
    cityStateZip = address.City;
    if (address.StateProvinceEnabled || address.ZipPostalCodeEnabled)
    {
      cityStateZip += ",";
    }
  }
  if (address.StateProvinceEnabled)
  {
    if (!String.IsNullOrEmpty(cityStateZip))
    {
      cityStateZip += " ";
    }
    cityStateZip += address.StateProvinceName;
  }
  if (address.ZipPostalCodeEnabled)
  {
    if (!String.IsNullOrEmpty(cityStateZip))
    {
      cityStateZip += " ";
    }
    cityStateZip += address.ZipPostalCode;
  }

  <li class="city-state-zip">
    @cityStateZip
  </li>
}

For example: https://github.com/nopSolutions/nopCommerce/blob/master/src/Presentation/Nop.Web/Views/Customer/Addresses.cshtml

Concatenating the city, state and zip on a single line might be the usual way to display addresses in some countries but there are many more countries where it's not.  Currently changing this requires editing the views in several different places. It would be more convenient to make the edits in a single shared view and would also avoid the code duplication described above.

a.m. wrote:

Hi Andrey,

I've shared the file in the work item. If you have any questions or suggestions about the mark-up, please let me know!

And done. Thanks a lot for this contribution!

a.m. wrote:

Great! We are glad to be able to make nopCommerce better and better :)

Kind regards,
Aleks