Short description feature for products

[ltfschoen]

On the product list page http://localhost:3000/collection, if the user provides a very long description for a product's description, it isn't pleasant to view the list of products. I think only a "short-description of a product" should be shown on that product list page, with a max length so it only takes up two lines of text.

So the metadata of a product could be:

  {
    "product": {
      "name": "Otani UltraDiamond",
      "short-description": "The most indulgent Microdermabrasion treatment you will ever experience"
      "long-description": "The most indulgent Microdermabrasion treatment you will ever experience. With all the benefits of microdermabrasion such as smoothing coarse textured skin and softening fine lines and wrinkles, scarring and hyper-pigmentation. This facial is set apart with the luxurious aromatherapy massage and Icy globes massage to soothe and calm the skin as well as minimise pore size. LED is used to regulate natural oil production whilst stimulating collagen and elastin and minimising redness and wrinkles. Finished with Rose Quartz GuaSha massage it cant be beat. (All skin types).",
      "price": "120.00"
...

If the user clicks one of the products on the product list page, it takes them to the product detail page (e.g. http://localhost:3000/product/oOZlSF), where the "long-description of a product" may be shown.

For example, here's a long description on the product list page, there isn't enough room to view the text, and certainly no room to have an image to show alongside the product

Whereas here's are either no description or a very short description on the product list page, which provides enough space to show the image of each product too

I guess the alternative is for the description that's shown on the product list page to be truncated to the desired length. What do you think?

[ltfschoen]

Perhaps truncate the description to say 40 characters on that product list page so it appears like this instead:

Use a function to truncate it like:

  truncateDescription = (str, num) => {
    if (num > str.length){
      return str;
    } else {
      // Only keep the first 'num' characters
      str = str.substring(0, num);
      return str + "...";
    }
  }

And call it with:

description && this.truncateDescription(description, 40).replace(reg, '')

Where reg is defined as:

const reg = /(<([^>]+)>)/ig;

See the commit in my fork of how i implemented it https://github.com/ltfschoen/commercejs-nextjs-demo-store/commit/24044e44ddb8fe504277bc0454f1be6576af393e

[robbieaverill]

Thanks for raising this. You could also use CSS to provide the ellipsis rather than truncating in code. Pull requests welcome!

[talmax1124]

@ltfschoen Can you help me display the products in localhost? I can't get anyone from slack to help me.