Product List Editing

Hi

Can you please inform me on how to proceed to edit the linked Title for the Product List Widget? I have tried doing this by Editing the associated Template but without success. All I want is to include the full title without the ellipses.

Then secondly when viewing the product in more detail, how can I replace the "Add to Cart" button with my own image. Again I have tried this via editing it via associated Template.

Am I to create new Templates for the above? Or am I missing something.

Regards,

Hi Venketash,

Thank you for contacting support.

I am not sure I understand your question. Could you clarify what you mean by editing the Product List widget title without ellipses?

You can replace the “Add to Cart” button with your own image by creating a custom theme. I have included documentation about how to customize your website through custom themes and templates. http://www.sitefinity.com/40/help/developers-guide/how-to-how-to-style-your-website-via-custom-themes-and-templates-creating-the-theme.html

Please let us know if you have any questions or concerns.

Hi Venketash,

You should be able to change the add to cart button styling by doing something like the following:

Hi Steve

Thanks for the assistance regarding the changing of the "Add to Cart" image.
I will also be reviewing the custom themes as suggested by Grace Hallwachs, it may be helpful for other projects.

Just the last issue for the editing/changing of the Product Title that remains.

Thanks,

Hi Venketash,

Thank you for bringing this to our attention. We will be modifying this behavior in our next release to display the full Product title. You will then be able to change the Product title if you wish with CSS styling. The next release will be available in December with the 4.4 version of Sitefinity. I have submitted a PITS item for you. PITS

I am sorry for the inconvenience this has caused you.

Kind regards,
Grace Hallwachs
the Telerik team

Two more things to change in the display of products.... see screenshot

The current selected department is a little taller than the other departments, and this makes it difficult to line up to the top. I think this has something to do with the kind of menu you choose to display the departments. I don't have sub-departments.

Also, in the listing of products, if a product with a short title and a product with a long title are next to each other, the gray boxes that highlight them on hover don't line up with each other. This looks bad, can you please fix this along with this problem:
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/e-commerce/product-list-editing.aspx 


Thank you very much!

Eric

Hello Eric,

Thank you for your suggestions.

To answer a couple of your questions, you are able to change the single item template. If you go in the backend, edit Product List, Single item settings, under Detail templates and  click Edit selected template. In this template you can rearrange HTML and CSS styling. For example, if you wanted to move the Product title to the top, you could move the title above the Image div. I have included a small code sample of moving the Product title to the top.

  <ItemTemplate>
                        <h1 class="sfproductTitle">
                            <%# Eval("Title") %>
                        </h1>
                    <div class="sfproductImgsWrp">
                        <div class="sfproductMainImgWrp">
                            <%-- This is so that we can have the rel="fancybox" without resorting to an Attributes.Add() call --%>
                            <a href='<%# Eval("PrimaryImageUrl") %>' rel="fancybox">
                                <img src='<%# Eval("Thumbnail.Url") %>' alt='<%# Eval("ThumbnailAlternativeText") %>' />
                            </a>
                        </div>

Also I tried to reproduce the issue with long and short Product titles but I was not able to reproduce the issue with them not lining up. The steps I used to try to reproduce this issue was to create 4 or 5 different products all with names that went up to 100 characters or so. Could you provide more details about the issue including what browser you are using and what were the steps you did to get the issue?

Thanks so much. Please let us know if you have any questions or concerns.

Kind regards,

Thank you for your help so far. Here is another screen shot of the problem with titles.

In the screenshot you can see that any long title takes 2 lines underneath a product. A short title, Tests in my example, takes 1 line. This difference makes the product listing for short-titled items shorter than for long-titled items, and looks bad when looking though them. When you reproduce this, try products with very short titlestitles (2-10 characters) next to those that are longer than 20, you should see it then.

Also, as in this post, if a title is 25+ characters, it is truncated with an ellipsis on the end.
www.sitefinity.com/.../product-list-editing.aspx

Maybe these 2 issues could be fixed together. Could you possibly make the product boxes all a fixed height, give us an advanced option where to cut off long titles ourselves, and then on hover show the full title of the product? Thank you!

Eric

Hello Eric,

Thank you for providing us with the additional information.

I have done some additional testing with short and long product names and I was able to reproduce the issue with Chrome and Safari. The problem is a browser issue. You can clear the cache on the browser and refresh the page and see if the images align. Also you can publish the product without a photo and then add the photo and re-publish the photo.

Please let us know if you have any more questions or concerns.

Regards,
Grace Hallwachs
the Telerik team

I cleared the cache and tried uploading a picture later to a product, but I'm still having the problem. What do I do for different people who browse to the site using Chrome or Safari? Here is says Chrome is supported:
http://www.sitefinity.com/resources/system-requirements.aspx 


Thanks,
Eric

Hello Eric,

I have looked further into this and reproduced the issue with Chrome and Safari. It looks to be a browser issue. I have logged it into PITS as an issue.

Please accept my apologies for the inconvenience caused.

Best wishes,
Grace Hallwachs
the Telerik team