Customizing ProductCart - description layout

Print Page | Close Window

description layout

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=2377
Printed Date: 21-November-2024 at 2:44pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: description layout

Posted By: ym
Subject: description layout
Date Posted: 22-January-2009 at 9:06pm

I'd like to improve somehow the long description layout. For now, the layout uses simple html and css. The content of the decsprion is quite large, so if possible, I'd like to setup few tabs and organize the content.

example: http://www.wholelattelove.com/features.cfm?itemID=39#anchor - http://www.wholelattelove.com/features.cfm?itemID=39#anchor

I'm wondering if it's good idea to write a html code with dreamweaver and paste the code to the admin product detail page, since the code would be quite complicated.

If anybody has a suggestions to improve the description area, please give me an advise.

Thanks.

Replies:

Posted By: Greg Dinger
Date Posted: 22-January-2009 at 9:25pm

Here is a PC store that I recently came across that does include tabbed product detail content http://www.julietsroom.com/store/pc/MILK-HONEY-br-Vanilla-Cardamom-Organic-Lotion-65p173.htm - http://www.julietsroom.com/store/pc/MILK-HONEY-br-Vanilla-Cardamom-Organic-Lotion-65p173.htm

In the past I have built a non-PC store that similarly used a tabbed product page. The approach I took was to isolate the content for each tab into separately editable fields in the product table so that they could be independently maintained and formatted. All the code to present the tabbed content is built into the product detail page and CSS.

Others may not share this view, but I would be very apprehensive about trying to manage HTML and the necessary Javascript coding, plus the tabbed content itself, all in the long description. That sounds like a nightmare trying to maintain.

You may wish to contact the owner of www.julietsroom.com and learn how her store was altered to support that layout.

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: ym
Date Posted: 22-January-2009 at 10:11pm

Thank you, Greg. Your information was very helpful. I will try to contact the owner.

Posted By: Hamish
Date Posted: 22-January-2009 at 10:58pm

Hi Ym,
That site uses "Tabber" from

 http://www.barelyfitz.com/projects/tabber/%20 - http://www.barelyfitz.com/projects/tabber/

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code

Posted By: caughlan
Date Posted: 23-January-2009 at 12:20am

I'm actually looking at a couple of new tabbed options right now - the tabber one takes a little long to load sometimes and people leave the page without seeing it there. I'm in the midst of a complete redesign.

I've sent Yukiko the info on how I did this, and in fact I do add the html to the description for each and every product - it would be a big headache for someone with more products than i have - plus I have a background in web design before I started a skin care company. If the products had to be maintained by somone who just wants to plug in a paragraph it would be a challange.

Posted By: Hamish
Date Posted: 23-January-2009 at 5:07am

Hi Cauglan, thanks for the info. Your web design skills really show - nice looking site :-)
It's a very good point about having to put HTML in the descriptions.

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code

Posted By: ProductCart
Date Posted: 23-January-2009 at 5:20am

We thought it would be useful to contribute to this discussion by showing you how you can leverage Adobe®'s Spry framework, which ships with ProductCart, to accomplish this.

So we created a WIKI article on this topic:
http://wiki.earlyimpact.com/how_to/display_product_description_tabs - http://wiki.earlyimpact.com/how_to/display_product_description_tabs

In future ProductCart releases, we will try to build the ability to have a tabbed layout for the product description into our shopping cart so that the feature becomes more accessible.

However, don't be scared. Read the WIKI article and follow the simple instructions it contains and you will see that even today, this is quite easy to accomplish without having programming skills. Try it out and let us know what you think!

Here is a visual example of using Spry Tabbed Panels for the product description (out of the box, without editing the CSS):

Tabbed%20layout%20for%20the%20product%20description

Tabbed%20layout%20for%20the%20product%20description

-------------
The ProductCart Team

Home of ProductCart http://www.productcart.com" rel="nofollow - shopping cart software

Posted By: caughlan
Date Posted: 23-January-2009 at 11:35am

Excellent - I'll give that a go! If we don't have to call on an additional javascript things should load must faster

stacelynn

Posted By: intour
Date Posted: 25-January-2009 at 7:34am

Superb feature ! The wiki article was easy to follow.

Thanks

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: Greg Dinger
Date Posted: 25-January-2009 at 9:39am

It is a superb article. Brilliant. But I would be loathe to deploy that for the typical client. It simply leaves too many chances for error.

Cauglan and others may have the experience and patience for such an arrangement, but for the few hours of coding that it would take to allocate extra (product table) fields for the tabbed content, and to build the logic to display those fields into their respective tabs on viewPrd.asp (and related includes), I think such an alteration of PC would be easily justified and honestly not that difficult.

The example shows very brief examples of content, and Massimo even hesitated to use the actual coding needed for the unordered list in the sample product he used for the example. But the strongest reason for using a tabbed format is when you have multiple sections of potentially lengthy content. And the chance of erroneous entry of the specified coding, plus all the content, becomes significant. Add to that the way the HTML editor for the long description has the habit of introducing multiple redundant SPAN tags, and you now just might have a mess on your hands.

If a client asked me to deploy this, or I saw them doing it themselves, I would lobby hard for the few hours budget that would simplify the process and allow them to avoid this on each an every product.

Just to highlight this - imagine if http://www.target.com - www.target.com or http://www.starmarinedepot.com - www.starmarinedepot.com had every product in such an arrangement? Well, it took less time to work out the tabbed coding for Star then it would take for most merchants to screw around with the above proposed example while creating several complex products, not to mention for me to come back later and show them why pages were falling apart due to incorrect HTML coding.

If one is a self-builder and wants to endure this, so be it. But as a developer I would be very hesitant to ask my clients to accept such a solution. 2 cents...

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: ProductCart
Date Posted: 25-January-2009 at 9:49am

Greg is correct and this was only intended to provide a temporary workaround for users that feel comfortable with the technicalities of this implementation.

As mentioned above, we will try to introduce a way to easily handle a tabbed layout for the product description in ProductCart v4. Moreover, we will try to allow you to indicate whether you would like dynamic content to go into a tab. For instance, you might want cross selling items or product reviews in a tab.

So we are envisioning a Control Panel interface that will allow you to pick a tab, name it, and then choose from a few options, which could be:

Show related categories (other categories that the product has been assigned to)
Show related products (cross selling)
Show accessories (cross selling items that can be purchased together with the main item)
Show product reviews
Show custom content (which would be defined in a separate text area)

We'll try to make this happen for ProductCart v4. In the meantime, all of the suggestions listed in this thread can help. Different ProductCart users with different needs, skills, and budgets can address this feature as they see fit (or just wait around until it becomes officially part of ProductCart).

Cheers,

massimo

-------------
The ProductCart Team

Home of ProductCart http://www.productcart.com" rel="nofollow - shopping cart software

Posted By: intour
Date Posted: 25-January-2009 at 10:12am

Good point Greg. Some of my cients have enough trouble with the html editor never mind tabs.

I do like the feature though. It's great for products that have different levels of specification - like a computer for example.

If it can be included in version 4 in the way Massimo describes that would be fabulous.

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: Greg Dinger
Date Posted: 25-January-2009 at 10:22am

Yep, the potential of what Massimo describes is awesome. Just hope the implementation of such marvelous functionality, and whatever else is to come, doesn't make the process of altering the product page exceedingly difficult. :)

Speaking of the HTML editor, anyone with significant experience with a new HTML editor that works well should send it to EI and the makers of this forum. I'd like to see a new editor in both the admin as well as this board.

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: ym
Date Posted: 25-January-2009 at 9:39pm

I'd really appreciate your advise, Greg, Hamish, caughlan and EI.

The EI article was wonderful and I'm very happy to hear that the V.4 will include the tabbed function.

In fact, I have many short video clips(user guide), and hopefully I can add them in one of the tabs.

I also agree with Greg that the html editor needs to be improved. For now, I create whole description content with Dreamweaver and paste the code to the editor.

Posted By: leeflang
Date Posted: 26-January-2009 at 12:08pm

The tabbed description content display for large descriptions is wonderful to make navigation faster and more 'hierarchical'. It will increase 'stickiness' of a store site and loyalty, since buyers appreciate store sites that offer faster navigation.

We would love to have this tabbed content for our growing catalog of over 32,000 items with on average 10,000-12,000 characters per item description.

However, what I miss in this discussion is, beyond displaying the content, how to make the content accessible, in other words 'how to make it searchable'.

A buyer will not be able to always exactly say in what 'tab area' he will want to search. He may want to search in 'all tab areas' or in 'soem tab areas'.

An example of such tabbed content that requires that kind of search can be found in our 'dummy non -released web site' at http://208.112.123.87/LeeFlang/store_search_detail.aspx?id=2 - http://208.112.123.87/LeeFlang/store_search_detail.aspx?id=2

Typically one will find this type of 'multi tab content search' in media related descriptions, where the content of the media for sale is split over multiple tabs. In magazines' it could be for example two tab areas like 'articles' and 'authors' In 'CDs' it could be 'actors' and 'producers'.

What happens here is that a buyer, without knowing the exact field the content would be entered in' wants to find 'everything for sale about his more general "search subject". Same happens with products like books, movies, posters, photos, videos, DVDs, etc.

Peter

-------------
Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

Posted By: ProductCart
Date Posted: 29-January-2009 at 5:49am

Not sure if we correctly understand the question. Here is just a comment on how information in tabs is treated by the search feature in ProductCart: since tabs (as described in our post above) are simply DIVs (layers) in the same field (long product description), all content of all tabs is by definition searched when you conduct a keyword search in the ProductCart storefront.

-------------
The ProductCart Team

Home of ProductCart http://www.productcart.com" rel="nofollow - shopping cart software

Posted By: intour
Date Posted: 29-January-2009 at 8:30am

I use tabs and panels in a few of the websites I create for clients. Part of their appeal is that they are visible to the search engines in exactly the same way as if you typed in one long content page.

I think Peters question relates to a local product search though.

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: leeflang
Date Posted: 29-January-2009 at 2:35pm

1) My previous question related indeed to a local product search in a ProductCart store.

2) The question was more specifically towfold:

a) Can a buyer search for a long product description keyword 'per tab' and have only results for that specific tab displayed?

b) Can a buyer search for a long product decsription keyword 'over multiple tabs (maybe check off selection for each desired tab) and would the results list be able to display for each instance of such keyword, in what tabe it was found?

Example: If I have defined two 'long description' tabs, one called 'stories' and one called 'poems' and each have the name of an author, for example 'Charles Dickens' in them. will buyer be able to choose between 'search' inside only 'stories' for 'Charles Dickens' or search inside both 'stories' and 'poems' tabs?

-------------
Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

Posted By: Greg Dinger
Date Posted: 29-January-2009 at 3:04pm

Based on EI's example, to which I believe you are referring, the answer to A and B is no. This might be possible if you isolated content for such tabs into individual database fields, intended for display in their respective tab, along with modifications to support your specific search criteria requirements.

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: Cliffw
Date Posted: 02-February-2009 at 12:59pm

This sounds great and we are wanting to integrate this tabbed layout on our new site.

Other than what you have described (naming the individual tabs) we would like to be able to do this on a by item basis as different types of products would contain different information and thus different tab names.
So maybe the control panel could say
How many tabs for this product, then have a database field for the name of the tab and another for the HTML description.

How long for version 4? ;-)

Posted By: MattW
Date Posted: 06-March-2009 at 2:07am

We are thinking of using tabbed description fields, prior to v4. What we thought is that we would have 4 tabs. Features, Spec, Payment, Warranty, Reviews. Features would source the 'Short Description', Spec would source the Detailed Description, Paymant and Warranty would be coded into the Html as they are the same for all products and Review would source the product reviews as it does currently at the bottom of the page/

Only prob we have a the moment is that we are having torubl to get the reviews and warranties to appear on the correct tab. They seem to want to stick to the Spec tab.

Any ideas?

Cheers Matt

Posted By: katharina
Date Posted: 17-March-2009 at 8:35pm

Just a note to using this feature. I had products that did not have a short description, and the end result looked wrong. The tabbed part was displayed in the short description section. It will be fixed once you add a short description. So don't forget the short description.
I've also noticed that the font for the tabs was rather small. So here is my code fix.
Katharina

<code>
<div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"><span style="font-size: 12pt;">Details</span></li>
<li class="TabbedPanelsTab"><span style="font-size: 12pt;">Features</span></li>
<li class="TabbedPanelsTab"><span style="font-size: 12pt;">Gift Ideas</span></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">These are the product details</div>
<div class="TabbedPanelsContent">This is a list of features included in this product</div>
<div class="TabbedPanelsContent">Here are some ideas of what a wonderful gift this product can be</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</code>

Posted By: Greg Dinger
Date Posted: 07-April-2009 at 7:12pm

We have developed a new add-on to provide support for tabbed product pages.

The mod includes an altered version of the product admin (add/edit/clone) tools which support additional textarea fields + the ability to define the tab titles on a product-by-product basis, along with site-wide default settings for the tabs.

One may configure the display to use the tabbed format demonstrated in EI's wiki article listed above, a method listed at DynamicDrive.com, and a method using graphical image tabs.

http://www.greybearddesign.com/productcart/tabbed-product-page/ - http://www.greybearddesign.com/productcart/tabbed-product-page/

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: leeflang
Date Posted: 07-April-2009 at 10:07pm

I tried do an Advanced Search on that site using the tabs using the words Morse Code SOS and it came with zero results despite that at least one item has Morse Code SOS in the specifications.

How is the tab going to help buyers if one cannot find the content?

-------------
Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

Posted By: Greg Dinger
Date Posted: 07-April-2009 at 10:19pm

I'm not sure where you did that search because I have not linked to a live demo of the feature. But the long description can be displayed in one of those tabs, and that is certainly searchable. And if one needs content searchable in other tabs, it's possible that could be made to happen. But at a minimum, the long description is immediately searchable.

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: leeflang
Date Posted: 07-April-2009 at 11:08pm

After using your own site link I found that you listed http://www.starmarinedepot.com/ - www.starmarinedepot.com as having te tabs and I tested there on their 'specifications' tab, which did not turn out to be searchable.

I'm not sure I understand why one would want listings that are only partially searchable.

Generally a catalog needs to be searchable in two ways:

1) Querying unstructured text (like a long description). This one is usually not well developed in many shopping carts, for lack of use of all Boolean operators and lack of option for multiple queries in one expression),
2) Querying structured text (so fields with standard content). This is usually minimally available in most shopping carts. I'm not sure though of the test site's fields under 'specifications' are really 'standard content' or if each field has variable unstructured content.

The real question is: How can any buyer understand what he is querying with Search or Advanced Search when Tabs are at play. The way those Searches are set up now, it is confusing to say the least. Tabs is a great 'visual' improvement, but it should be developed 'in context', so results-oriented, meaning that it should be developed bearing in mind its impact on other components of PC. Otherwise it has the opposite effect of what it intends, being not and easier navigation for buyers, but a more difficult one.

-------------
Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

Posted By: Greg Dinger
Date Posted: 07-April-2009 at 11:26pm

Well, that is not a PC site - it is built on another platform. I refer to it as an example of what this new functionality can look like. The site where I developed this tab feature for PC is not yet public.

The "specifications" field in Star contain a wide variety of data extracted from manufacturer web sites. As to that field not being searchable, I'm not convinced (at least in that store) that this is such an issue - the client has certainly never raised it as a concern.

I am, however, looking at the prospects of extending the showSearchResults.asp script to include the new fields I have introduced into the search results.

-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |

Posted By: avalight
Date Posted: 20-May-2009 at 7:08pm

If anyone is looking for a easy way to implement a tabbed feature into their website, I would highly recommend this add-on from Greg's company. It was no more difficult to install than any other upgrade from Early Impact...hah! not sure that is good thing Smile

.
It does modify the pcProduct table, but the add-on includes a simple script to do that, so that was not a problem. It supports up to 6 tabs , which you can name whatever you want, and they only are activated when there is something in the text field relating to that tab. I just have to fill in all the information on each of our 2000 products, but Greg is working on a CSV import for that too.

-------------

Curt