Announcing: Product/shop Descriptions With Bb-code Support

Discussion in 'Official Announcements' started by imdaveho, Oct 25, 2016.

  1. imdaveho
    imdaveho Shapeways Employee Product Team
    Hi Shop Owners,

    We have made some slight improvements to the rich text editor that allows you to format text for product description and shop descriptions. This restores the functionality that we temporarily disabled in September...and made it a lot more extensible for the future.

    Previously, some of you leveraged your knowledge of HTML to create some cool and complex experiences. This was something we wanted to bring to everyone, not just power users. Today, we're taking the very first steps in doing exactly that with BBCode powered rich text support.

    The current set allow for bolding, italicizing, links, alignment, lists, block quotes, and font sizes. Here is the translation from HTML to BBCode:

    Code:
    <strong>I'm bolded text!</strong>                     =>    [b]I'm bolded text![/b]
    <em>I'm italic text!</em>                             =>    [i]I'm italic text![/i]
    <a href="www.example.com">I'm a link!</a>             =>    [url="www.example.com"]
    <span style="font-size:72px">I'm big text</span>      =>    [size=72]I'm big text[/size]
    I'm left aligned (default)                            =>    I'm left aligned (default)
    <div style="text-align:center">I'm centered</div>     =>    [center]I'm centered[/center]
    <div style="text-align:right">I'm right aligned</div> =>    [right]I'm right aligned[/right]
    <div style="text-align:justify">I'm justified</div>   =>    [justify]I'm justified[/justify]
    
    
    <ol>I'm an ordered list</ol>                                [list=1]
      <li>one</li>                                                [*]one
      <li>two</li>                                        =>      [*]two
      <li>etc.</li>                                               [*]etc.
    </ol>                                                       [/list]
                                                               
    <ul>I'm an unordered list</ul>                              [list]
      <li>bullet one</li>                                         [*]bullet one
      <li>bullet two</li>                                 =>      [*]bullet two
      <li>bullets etc.</li>                                       [*]bullets etc.
    </ul>                                                       [/list]
    
    As you can see, this makes things a lot more easy to read and understand. This first round of changes just converts our existing rich text editor to use BBCode, however in 2017 you can expect the addition of custom tags that add more functionality. Here are some hypothetical examples:

    Embed a list right in the product description:
    [sw-list="product1, product2, product3, etc."]

    Include a set of products that can be automatically added to cart:
    [sw-product-set="productA, productB"]

    Cool right? In the interim, we'd like to hear suggestions from you around what kind of custom tags we can build.
     
    Last edited: Nov 22, 2016
  2. stonysmith
    stonysmith Well-Known Member Moderator
    Can we get Tables? I'd like to keep the small table I had (have) at the top of my shop. http://shpws.me/CsR
     
    ppoz likes this.
  3. Model_Monkey
    Model_Monkey Well-Known Member
    I did notice a more significant problem that appeared just two days ago (Tuesday) mid-morning East Coast USA time, that may be linked to these coding changes. I have notified customer service who is helping but am interested to know if anyone else had this experience. I'm using Google Chrome on Windows 10, if that helps.

    Tuesday morning, to take advantage of the new "Marketplace Facets" feature, I was systematically going through products to add "Marketplace Facets" to their pages. After several successful changes, it was later in the morning when I noticed that product descriptions were disappearing altogether when I went to edit a product page. Gone, just a blank, empty product description box. Not a good thing to lose product descriptions.

    Tuesday evening, I only noticed missing product descriptions on two pages opened for editing, but on ALL pages opened for editing, the formatting was dorked up, specifically, 1) paragraph separations are lost - the last sentence of a paragraph abuts the first sentence of the next paragraph without any spacing combining paragraphs, sentences and even words, and 2) right-left justification is lost..

    Yesterday, it appears that the product descriptions are still not there for some products but paragraph spacing and justification remains lost.

    As soon as I sign in and attempt to edit a product with the intention of adding facets, the formatting of the product description appears lost on the product editing page. If I do not save the editing page, the original (good) formatting remains. If I save it, the (good) formatting is lost permanently and the page's product description is a mess.

    Although this may seem rather minor, it makes a mess of product descriptions and can be confusing to new customers trying to understand the product and gain the confidence necessary to make a purchase. I am concerned that if a customer sees a mess of a product description, the customer may have no confidence that the product itself isn't loaded with design errors or that Shapeways can competently print the product, and then the customer chooses not to buy.

    When a similar problem occurred months ago (lost formatting and the inclusion of this character "Å" randomly throughout the product description in some places where there had been a paragraph separation), the problem was fixed but only for new products. Existing products had to be repaired by the designer one product at a time, removing the offending character and restoring paragraph breaks.

    Could this problem be related to the adoption of new text formatting?
     
  4. imdaveho
    imdaveho Shapeways Employee Product Team
    @Model_Monkey Thanks for the great feedback! Your concerns are definitely valid and we're looking into it right now so that others won't hit the same issue. We'll also try to restore the overwrite so you can get your descriptions that were erased.

    On a side note, looking at some of your descriptions, the expected behavior is that the editor will do a best guess conversion (95%) of your HTML to BBCode so that you won't have to lift a finger when you save. We'll keep you posted on our progress. Please feel free to PM me if you have additional comments and questions.
     
    Model_Monkey likes this.
  5. Model_Monkey
    Model_Monkey Well-Known Member
    Thanks! Best wishes with the fix. Now, if we could only find a replacement for the dreaded reCAPTCHA. ;-)
     
  6. Model_Monkey
    Model_Monkey Well-Known Member
    Looks like you are making progress! Thanks!

    Product descriptions are back. Still some issues today as code appears in the product description. Here's how a newly uploaded product page looks today:

    Model_Monkey screen shot.2016.10.28.1019am.jpg
     
  7. imdaveho
    imdaveho Shapeways Employee Product Team
    @Model_Monkey it seems that you're using an unsupported BBCode tag.

    Is this being auto generated when you save your product descriptions? Or were you editing the description with the color tags inserted?

    We have leveraged the current set to reflect that of the rich text editor with others for consideration in the future. Color can very well be one of them, however, I would say that part of the goals for this endeavor was to create components that match styling that all users can use and create consistency in the shopping experience. Custom colors may or may not be aligned with that goal.

    Edit:

    @Model_Monkey it looks like this was our oversight in certain features we did not turn off in the rich text editor you see in product edit. Thanks for catching this!

    We're going to release a quick fix soon to make it so the editor does not support the [color] tag. What you can do in the interim is to click on the Source button and delete the [color=...] generated BBCode.

    This is due to the auto conversion of the <div style="color: #..."> stuff that you were setting previously with HTML. To prevent more unwanted [color] tags from showing up until we release the fix, I'd hold off on editing products in the interim or make sure to delete the color tags in source. Apologies for the inconvenience, but I am curious to know your use case with color. Care to share?
     
    Last edited: Oct 28, 2016
    Model_Monkey likes this.
  8. Model_Monkey
    Model_Monkey Well-Known Member
    Yes, it is being generated when I save product descriptions.

    I'm using Chrome on Windows 10, if that helps.

    Thanks!
     
  9. Model_Monkey
    Model_Monkey Well-Known Member
    There now seems to be another functionality issue. I uploaded a design today, it passed checks, I selected materials on the editing page and saved it. The material selections are not being saved so the product cannot be made available for sale.
     
  10. Model_Monkey
    Model_Monkey Well-Known Member
    Thanks for the efforts with color!

    I'm actually not setting any colors at all. I'm simply typing plain text into the product description box or copying and pasting from other products in my shop. The original text for the descriptions fro which I am copying was typed in manually to a product description box with any colors being selected.

    Some of the text includes hyperlinks made in MS Word, but no colors have been set for those.

    Thanks again for all the help.
     
  11. TinyMtn
    TinyMtn Member
    Does this move to BBCode mean that HTML won't work any more? When I hit the "Source" button in the Description tool bar, then copy and paste HTML into the new window, and hit OK, nothing happens. It doesn't get saved, and I need to hit "Cancel" to get back to the Edit Product page. Is this normal behavior?
     
  12. woody64
    woody64 Well-Known Member
    What does that mean to html code, which we have added previously.

    Also have seen some changing behavior with descriptions (visible / not visible).
    Also line breaks are completely lost in the edit field but visible on the product page.

    Woody64
     
    TinyMtn likes this.
  13. imdaveho
    imdaveho Shapeways Employee Product Team
    @woody64 @Model_Monkey

    We have made a fix to the visible / not visible issue. Please let us know the steps you're taking if you're still experiencing that (ie which product, what browser, perhaps some debug console info) in a private message to me (less clutter in this main thread)

    As for the line breaks, BBCode is trying to make your markup much more easy to reason about. A line break is just a simple, normal carriage return for the BBCode source editor. In the old parser, you had all this nested <p> tags or, worse, <br/> tags all over the place.

    While we tried our best effort to migrate things over, it (obviously) couldn't not capture 100% of the use cases from our more sophisticated users--and we are sorry for that. For these edge cases, I would recommend updating the descriptions directly with the rich text editor or popping up the source and editing there or with a text editor of your choosing.

    However, if you have additional comments and concerns, please don't hesitate to PM me so that we don't clutter the main thread.
     
  14. imdaveho
    imdaveho Shapeways Employee Product Team
    @periocus this is something we want to provide, but we want to be deliberate and intentional about how we go about it.

    Shop Owner branding is extremely important to us and we want to give you guys super powers in this regard. To that end, we know what making a distinct, yet consistent experience is crucial. So, the first step is limiting the scope of the initial possibilities that may hurt the customer experience, and gradually introducing more customization features in the coming months. We want your help in gathering that kind of feedback on interesting buttons, functions, and widgets.

    As per your example, maybe like a custom logo / badge or a more distinct banner? Keep the ideas flowing! No need to self curate your responses! I'm sure others would like these ideas as well.
     
  15. periocus
    periocus Well-Known Member
    Thank you for the reply.

    Sorry i deleted my posts , because after your first reply i thought i might be wrong here and i am really confused what to do now.
    It took me months to figure the buttons out, asking friends which to choose and now it is all gone.
    Not to speak about making it.
    And the feedback was really positive, because it was not depending on language.

    I understand the importance of the new code. I have no problem to use it, if i can. :)
     
  16. TinyMtn
    TinyMtn Member
    I just changed my scripts to generate bbcode instead of hassling with html. All seems well on this end. Though I will have to go through ~500 models and update their descriptions, which is annoying enough that it may never get done.
     
  17. glehn
    glehn Well-Known Member
    I still seem unable to insert images in the Product Description (see my last post here).
    Was it supposed to work? Is it a bug or a feature? Any idea of when we can expect to have this capability again?
    I really don't know if I am doing something wrong or if images are not supported anymore. Can anybody from Shapeways clarify, please?

    Thank you and regards from Brazil,
    Luis
     
  18. imdaveho
    imdaveho Shapeways Employee Product Team
    Hi @glehn

    Our original post did not list IMG support for product descriptions. This was done intentionally for the initial release. Part of that rationale is due to encouraging a consistent experience across our products and also leaving room for custom elements that convey what you probably wanted to convey via IMGs in a more composable and consistent way.

    I hope this helps you understand--and I hope that you will give more feedback around how you use images so that we can build a solution for all our users wanting to achieve that same effect.
     
  19. glehn
    glehn Well-Known Member
    Hi @imdaveho

    Thanks for answering my question. It is not clear for me what you mean by a consistent experience across your products.
    I have been using IMGs to include assembly instructions for my products, like in this example.
    I have tried also to include the instructions as a product image like this. But I would rather have larger images than the limited 625 × 465 pixels.
    But I am open to suggestions on other ways to share the instructions. I just think it would be nice to keep it in the product page rather than have the user click a link and open it on a separate window or tab.

    Regards,
    Luis
     
  20. SnowyPine
    SnowyPine Member
    I used to add flag counters to my products' description to count the number of page views:

    [​IMG]

    They are still working on my previous products: http://shpws.me/MEVR
    But not on the new one I recently uploaded. Any chance you could enable adding codes like that again?