• Toll-free  888-665-8637
  • International  +1 717-220-0012
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

dcs68
#1 Posted : Wednesday, June 10, 2009 12:33:14 PM(UTC)
dcs68

Rank: Member

Joined: 6/1/2004(UTC)
Posts: 720

how to accomplish tabbed diplay within product page similar to this....see image
dcs68 attached the following image(s):
6-10-2009 1-48-11 PM.jpg (202kb) downloaded 92 time(s).

You cannot view/download attachments. Try to login or register.



Derek Schaaf

http://www.yourticketzone.com

[url=http://www.cmcdds.com][/url]
sternyy
#2 Posted : Wednesday, June 10, 2009 2:58:47 PM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
There are multiple ways to accomplish this. One could be using mootools are jquery. That is currently what I use on our website: http://www.medsupplier.c...dick-atria-3100-ekg.aspx

"Overview" and "Specs" are tabbed from the Long Description and "reviews" is added as the next tab by itself (I have yet to theme it). Its really easy to do.

It really depends on what you want tabbed as well. I choose only to tab content.
SStorhaug
#3 Posted : Thursday, October 29, 2009 11:31:16 AM(UTC)
SStorhaug

Rank: Member

Joined: 11/20/2005(UTC)
Posts: 122

I hate to bump an old thread like this, but could you elaborate on just how to put these tabs on the product page? Specifically, what did you have to modify and where did you do it?

Also, what is the zoom feature that you are using?
Noah
#4 Posted : Monday, November 2, 2009 11:54:28 AM(UTC)
Noah

Rank: Member

Joined: 11/6/2003(UTC)
Posts: 1,903

We have a tabbed control available for that purpose.

Here is an example,

http://www.jimslimstools...-2pc-Cordless-Combo-Kit-(Hammer-Drill-and-Recip-Saw)__DC2PAKCA.aspx
Noah
SStorhaug
#5 Posted : Saturday, November 14, 2009 8:43:09 AM(UTC)
SStorhaug

Rank: Member

Joined: 11/20/2005(UTC)
Posts: 122

Noah,

I took a look at your control, but it doesn't work at all if there is no javascript. Not exactly what I am looking for, since the tabs will contain most of my content and search engines won't be able to read it using your control.
Aaron
#6 Posted : Saturday, November 14, 2009 11:17:39 AM(UTC)
Aaron

Rank: Administration

Joined: 4/2/2004(UTC)
Posts: 2,393
United States
Location: Hummelstown, PA

Thanks: 6 times
Was thanked: 163 time(s) in 158 post(s)
Originally Posted by: "dotNet guy" Go to Quoted Post
it doesn't work at all if there is no javascript...and search engines won't be able to read it using your control.


It's probably just a CSS change to make the content show when JavaScript is disabled. Even if you can't see it, the search engines still can; the text is still on the page. I wouldn't worry about users not having JavaScript enabled; if they don't, they can't buy anything on your store anyway. :)
Aaron Sherrick
BV Commerce
Toll-free 888-665-8637 - Int'l +1 717-220-0012
SStorhaug
#7 Posted : Monday, November 16, 2009 7:44:04 AM(UTC)
SStorhaug

Rank: Member

Joined: 11/20/2005(UTC)
Posts: 122

Originally Posted by: "Aaron" Go to Quoted Post

I wouldn't worry about users not having javascript enabled; if they don't, they can't buy anything on your store anyway. :)
Actually, I did a test in BVC 5 and the checkout process does seem to gracefully downgrade when javascript is disabled - at least in my test I was able to check out with no issues. Besides, since most web developers don't concern themselves with people browsing without javascript, that market is much more likely to buy from those of us who make concessions for them (regardless of their small numbers).


I ended up reverse engineering the code on medsupplier.com and was able to get the appropriate javascript and references to get the tabs to work. I was planning to use mootools functionality on the home page anyway, so at least I don't have to install anything else for that.



Oddly, it was more difficult to style the tabs with CSS than it was to get the tabbing functionality to work (which explains why Bryan hasn't done it yet).



BTW - Bryan if you ever read this I just wanted to let you know your menu doesn't work right with javascript disabled - it appears too far below the link to be able to access it.
Aaron
#8 Posted : Monday, November 16, 2009 8:37:07 AM(UTC)
Aaron

Rank: Administration

Joined: 4/2/2004(UTC)
Posts: 2,393
United States
Location: Hummelstown, PA

Thanks: 6 times
Was thanked: 163 time(s) in 158 post(s)
Originally Posted by: "dotNet guy" Go to Quoted Post
Actually, I did a test in BVC 5 and the checkout process does seem to gracefully downgrade when javascript is disabled - at least in my test I was able to check out with no issues.


Most merchants seem to use BV's one-page checkout, and that one does not work well without JavaScript since the shipping rates are calculated via AJAX as you enter your address. If the customer clicks the Place Order button after entering their address, the rates will be calculated, but that's a pretty unlikely action for a customer to take without seeing the order total. My guess is that the BVC2004 checkout works better with JavaScript disabled.
Aaron Sherrick
BV Commerce
Toll-free 888-665-8637 - Int'l +1 717-220-0012
BMFResposio
#9 Posted : Monday, November 16, 2009 9:56:24 AM(UTC)
BMFResposio

Rank: Member

Joined: 3/15/2007(UTC)
Posts: 126

All controls we design for our clients are 100% SEO friendly and HTML compliant. BV5 relies heavily on JavaScript being enabled for Product choices, modifiers, Theme settings, shipping, JQuery (sp 5.4+) and various other options.

I am not sure how you would handle these issue with turning JavaScript turned off? But it sounds like you may end up with a half working store.
Matt@9BallDesign
#10 Posted : Monday, November 16, 2009 10:06:03 AM(UTC)
Matt@9BallDesign

Rank: Member

Joined: 12/23/2003(UTC)
Posts: 909

Best thing to do is open up firefox and grab the "Noscript" plugin. Browse stores and test with it enabled (which means jscript disabled).
Matt Martell


http://www.9balldesign.com - Web, Print, Graphic


http://www.martellhardware.com/ - Decorative & Builder's Hardware

------------------------------------------------
sternyy
#11 Posted : Monday, November 16, 2009 12:21:04 PM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
Originally Posted by: "dotNet guy" Go to Quoted Post


I hate to bump an old thread like this, but could you elaborate on just how to put these tabs on the product page? Specifically, what did you have to modify and where did you do it?

Also, what is the zoom feature that you are using?


Here is the website for the mootools tabs that I am using: http://digitarald.de/project/simple-tabs/ It's probably a bit harder to integrate then what noah would have though. There is some coding that has to be done in the product description to seperate each tab. What I would like the best is something like product types, where you can add a new long description box in the admin for each tab. But this works for me rught now.


The image zoom was done by aram from avecom.
SStorhaug
#12 Posted : Tuesday, November 17, 2009 2:56:27 AM(UTC)
SStorhaug

Rank: Member

Joined: 11/20/2005(UTC)
Posts: 122

Originally Posted by: "Aaron" Go to Quoted Post

Most merchants seem to use BV's one-page checkout, and that one does not work well without javascript since the shipping rates are calculated via AJAX as you enter your address. If the customer clicks the Place Order button after entering their address, the rates will be calculated, but that's a pretty unlikely action for a customer to take without seeing the order total. My guess is that the BVC2004 checkout works better with javascript disabled.
Ok, I can see the issue now. However, this can probably be solved very easily by making a link to a "review order" page that only appears when javascript is disabled. The 2-3% of people browsing the web with javascript disabled are well aware that they will run into sites with limitations (as well as sites that don't work altogether).


BTW - I noticed the other checkouts in the project, but I still haven't found the place where you can switch between them....any ideas?







Originally Posted by: "Matt" Go to Quoted Post

Best thing to do is open up firefox and grab the "Noscript" plugin. Browse stores and test with it enabled (which means jscript disabled).
Thanks for the tip.




Originally Posted by: "Brendon" Go to Quoted Post

All controls we design for our clients are 100% SEO friendly and HTML compliant. BV5 relies heavily on javascript being enabled for Product choices, modifiers, Theme settings, shipping, JQuery (sp 5.4+) and various other options.

I am not sure how you would handle these issue with turning javascript turned off? But it sounds like you may end up with a half working store.

It really depends on what you expect with javascript turned off. All of these features degrade without blocking the path of the buyer, which is the most important thing. Sure, the images don't switch when changing choices, but whether that is important depends on how you set up the product.

As Aaron pointed out, the shipping charges are the only real obstacle with the one page checkout when javascript is disabled.

[quote="Bryan"]
What I would like the best is something like product types, where you can add a new long description box in the admin for each tab. But this works for me rught now.

I am looking into using XML and XSLT to form the product HTML (and thus the tabs), rather than putting HTML tags in the database (which I tried and discovered it is not a good thing). I am using XML and XSLT in my current store and it works very well, but it is limited in that you cannot put ASP.NET functionality into the content (I am looking into working around this limitation, too).
Here are some examples of what I did on our current store. Everything between the "Add To Cart" button and the "Did You Know..." section is in XML and as you can see, the types and structure of the information within can vary widely. Eventually, I plan to migrate to a tabbed interface on these pages, too.
http://www.shuttercontractor.com/products/louver-shutters/vinyl-shutters/custom-made-shutters/mid-america-L1.aspx
http://www.shuttercontractor.com/products/exterior-shutter-accessories/mid-america-14-round-arch-top-custom-louver.aspx
http://www.shuttercontractor.com/p/stylecraft-sc-custom-louvered-shutters-traditional.aspx
XML is very flexible and different sections that apply to different products can be added easily and made optional so they can be omitted from products that they don't apply to, and using XSLT helps to seperate the content from the markup so you can change the markup without having to edit a single database record. I am thinking about taking it a step further this time and storing the XML on the web server rather than in the database so the content can be compared and changed more easily using the Find and Replace functionality in Visual Studio. Then the only thing that needs to be in the product record is the file name of the XML file.
However, I already put the tabbing functionality into the new store as you can see here: http://www.foldingchairdepot.com:8080/p/Cosco-Steel-Folding-Chair---Set-of-4---Black-Color__cos-1471005X.aspx. Now it is just a matter of solving the content storage issue, and that part is done.
Matt@9BallDesign
#13 Posted : Tuesday, November 17, 2009 9:55:57 AM(UTC)
Matt@9BallDesign

Rank: Member

Joined: 12/23/2003(UTC)
Posts: 909

Before you do the entire XML route, which is a good option. have you looked at the features OOTB?

I mention this because I've utilized the Custom Template feature and the pre & post HTML features in conjunction with custom columns (under the content tab).

An example is that I have custom template setup (with tabs) to display the general information for a Soap Dispenser Refill. All of the refills have two global presentation sections: Green Seal Info, Dispensers that the soap fits.

Green Seal info is a HTML column. Dispensers is a product grid in a custom column.

The custom template has the post html and pre-html in seperate tabs. assign the corresponding column to each product and I have a global solution for two parts and the general information which is unique to each product is edited via the dashboard.

If we add a new dispenser, I add it to the custom column and it's applied to the 50 or so soap refills with one button click. This was done to bypass the related items tool and keep room to cross sell more effectively. 20+ dispensers takes up a lot of room...lol...

It's an alternative to think about. I'm simply staring at performance and wondering what the additional calls to the xml files would do to load time on top of what the application has to pull from the db in the first place.
Matt Martell


http://www.9balldesign.com - Web, Print, Graphic


http://www.martellhardware.com/ - Decorative & Builder's Hardware

------------------------------------------------
SStorhaug
#14 Posted : Tuesday, November 17, 2009 11:48:50 PM(UTC)
SStorhaug

Rank: Member

Joined: 11/20/2005(UTC)
Posts: 122

Originally Posted by: "Matt" Go to Quoted Post

I'm simply staring at performance and wondering what the additional calls to the xml files would do to load time on top of what the application has to pull from the db in the first place.
Actually, if you think it through it is much better to load a local file on the web server than it is to do a network hop and pull the content from the database. Whether you use an XML control to do the transform or manually code it, the transformation all happens on the web server so the XML file doesn't actually have to be downloaded to the browser. The overhead is the same as loading any other local text file + the overhead it takes the XML engine to do the transform.


As for cross-selling and OOTB features, there is plenty of room for them to co-exist with the XML driven tabs, since using Simple Tabs the only requirement to create a tab is the following:





Code:


<div id="tabcontainer">

<h3>Tab Name</h3>
<div>Tab Contents</div>

<!-- More tabs here... -->

</div>
So from a .NET perspective, the code must create a header tag and a div tag, but the code that creates each tab could be from different controls, hand-coded markup, injected html, or even from an XSLT. If tab order is critical, there is always the option of creating more than one XSLT and loading different content into different tabs that stagger the ones created with .NET.


Admittedly, XSLT files are more difficult to create than they are to maintain over time, but since I already have a working sample I can use it as a template to create the new file(s). I know from experience that trying to maintain html markup along with the content in the database can be difficult and can limit your ability to change the product page later.
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

©2024 Develisys. All rights reserved.
  • Toll-free  888-665-8637
  • International  +1 717-220-0012