Announcement

Collapse
No announcement yet.

Tabbed Content Panels

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jmw
    replied
    Tabs are working (Thanks!) -- One problem

    This is likely a block-headed question: Once the tabs are in place, how do you get rid of the product "Description" header? It is taking up space and looks redundant. I deleted the html for it, but then Add to Cart would not work. Any suggestions?

    Leave a comment:


  • concession-supply.com
    replied
    If anyone has a tabbed content listing they would like to share, we'd love to see it in action! :)

    Leave a comment:


  • cannen
    replied
    JustPoppin,

    I'll PM you.

    Leave a comment:


  • JustPoppin
    replied
    Originally posted by cannen View Post
    We have tabs working just fine on our store. What we do is use fields 1-6 as the name of the tab and 6-10 as the content. That way, it is dynamic per page, we can name the tabs whatever we want and can put in whatever content we want.
    That sounds very interesting. I think I'll give that a try!!

    Btw, what is your website, I'd love to take a look and see the tabs in action.

    Thanks,
    Jennie

    Leave a comment:


  • cannen
    replied
    We have tabs working just fine on our store. What we do is use fields 1-6 as the name of the tab and 6-10 as the content. That way, it is dynamic per page, we can name the tabs whatever we want and can put in whatever content we want.

    We use this script from DynamicDrive Tab Content Script (v 2.2)

    As far as the reviews go, we use create a static tab that all the review code is contained in. Actually, there are two static areas, description and reviews. The rest are dynamic based on the fields.

    I'll show some of the code below. I can't post it all but where it says "!!!!Reviews Here!!!!", that is where you put in your review section. You have to have the tab javascript and css in the document somewhere. It could be in the head section or it could be in the listing template. Using the head is better, but you can include it in the listing template if you have to.

    Code:
      <tr>
        <td colspan="2"><table cellpadding="0" cellspacing="0" style="display: inline;">
            <tr>
              <td width="10"><img src="assets/tabs/feat_L.gif" width="10" height="34" /></td>
              <td align="left" background="assets/tabs/feat_bg.gif" nowrap><ul id="[id]" class="shadetabs">
                  <li><a href="#" rel="info_s1" class="selected"><b>Product Description</b></a></li>
                  <!--START: extrafields-->
                  <!--START: extra_field_1-->
                  <li><a href="#" rel="info_1"><b>[extra_field_1]</b></a></li>
                  <!--END: extra_field_1-->
                  <!--START: extra_field_2-->
                  <li><a href="#" rel="info_2"><b>[extra_field_2]</b></a></li>
                  <!--END: extra_field_2-->
                  <!--START: extra_field_3-->
                  <li><a href="#" rel="info_3"><b>[extra_field_3]</b></a></li>
                  <!--END: extra_field_3-->
                  <!--START: extra_field_4-->
                  <li><a href="#" rel="info_4"><b>[extra_field_4]</b></a></li>
                  <!--END: extra_field_4-->
                  <!--START: extra_field_5-->
                  <li><a href="#" rel="info_5"><b>[extra_field_5]</b></a></li>
                  <!--END: extra_field_5-->
                  <!--<li><a href="http://www.dynamicdrive.com"><b>Dynamic Drive</b></a></li>-->
                  <li><a href="#" rel="info_s3"><b>Reviews</b></a></li>
                </ul></td>
              <td width="10"><img src="assets/tabs/feat_R.gif" width="10" height="34" /></td>
            </tr>
          </table>
          <div style="border:1px solid #cccccc; margin-bottom: 1em; padding: 10px; position: relative; width: 760px;">
            <div id="info_s1" class="tabcontent">
              <div class="tab_content_fonts"> [extended_description] </div>
            </div>
            <!--START: extra_field_6-->
            <div id="info_1" class="tabcontent">
              <div class="tab_content_fonts"> [extra_field_6] </div>
            </div>
            <!--END: extra_field_6-->
            <!--START: extra_field_7-->
            <div id="info_2" class="tabcontent">
              <div class="tab_content_fonts"> [extra_field_7] </div>
            </div>
            <!--END: extra_field_7-->
            <!--START: extra_field_8-->
            <div id="info_3" class="tabcontent">
              <div class="tab_content_fonts"> [extra_field_8] </div>
            </div>
            <!--END: extra_field_8-->
            <!--START: extra_field_9-->
            <div id="info_4" class="tabcontent">
              <div class="tab_content_fonts"> [extra_field_9] </div>
            </div>
            <!--END: extra_field_9-->
            <!--START: extra_field_10-->
            <div id="info_5" class="tabcontent">
              <div class="tab_content_fonts"> [extra_field_10] </div>
            </div>
            <!--END: extra_field_10-->
            <!--END: extrafields-->
            <div id="info_s3" class="tabcontent">
              <div class="font1">
                <!-- !!!!Reviews Here!!!! -->
              </div>
            </div>
          </div>
    <script type='text/javascript'>
    var tabinfo=new ddtabcontent('[id]') //enter ID of Tab Container
    tabinfo.setpersist(true) //togle persistence of the tabs' state true or false
    tabinfo.setselectedClassTarget('link') //"link" or "linkparent"
    tabinfo.init() // (3000) = 3 seconds
    </script></td>
      </tr>

    Leave a comment:


  • concession-supply.com
    replied
    There is a logic you can use to dynamically create tabs IF there is content for them. You use code block comments, I believe.
    ie: <!--START:Content1--> <!--END:Content1--> or something like that. A tab will not be created if there is no Content1 :)
    Gonzalo had a tip in this thread: http://forums.3dcart.com/new-feature...uct-pages.html

    ts not that hard, basically the information is already on the page, so its a matter of how you choose to display it.

    You can take something like this:

    http://www.dynamicdrive.com/dynamici...tabcontent.htm

    To get started.

    Then basically your tab content could be:


    HTML Code:
    <ul id=\"countrytabs\" class=\"shadetabs\">
    <li><a href=\"#\" rel=\"country1\" class=\"selected\">Description</a></li>
    <li><a href=\"#\" rel=\"country2\">Extra Images</a></li>
    </ul>

    <div style=\"border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px\">

    <div id=\"country1\" class=\"tabcontent\">
    [extended_description]
    </div>

    <div id=\"country2\" class=\"tabcontent\">
    <img src=\"[image2]\">

    <img src=\"[image3]\">
    </div>
    </div>You can also use the following logic:

    HTML Code:
    <!--START: [FIELD-NAME]-->
    [FIELD-NAME]
    <!--END: [FIELD-NAME]-->If the field is EMPTY, it will remove from the START->END, if its not, it will print the field. Using this idea you can dynamically create tabs when necessary.




    If you figure it out, I would really like to implement it, so please, do share! :)
    Last edited by concession-supply.com; 08-03-2010, 09:55 PM.

    Leave a comment:


  • JustPoppin
    replied
    Originally posted by SarahInc View Post
    Also, anyway to work the tabbed panels so that if there is no content the tab/panel doesn't appear?
    I too am VERY interested in this! I know it can be done, but I haven't figured out how. This site does it and it's a 3dcart site.

    Anyone figured it out yet?!!!!

    -J

    Leave a comment:


  • JustPoppin
    replied
    Originally posted by SarahInc View Post
    Despite all my attempts, I can't seem to get the "reviews" to actually go in the tab, they just show up below the tab pane. Anyone have luck with this?
    I've been working on this too and I think I've got it fixed (works for me anyway!)

    Go to this thread HERE and you can see the code I use.

    Good luck!
    Jennie

    Leave a comment:


  • SarahInc
    replied
    Despite all my attempts, I can't seem to get the "reviews" to actually go in the tab, they just show up below the tab pane. Anyone have luck with this?

    Also, anyway to work the tabbed panels so that if there is no content the tab/panel doesn't appear?

    Leave a comment:


  • shopgirltx
    replied
    Ah that's what I was missing! I didn't have the script link formatted correctly. It works now!! Well almost...the tabs are interactive, and the content isn't displaying all in one panel. Now only the first tab has content...and the other tabs are empty :/ any more suggestions?? :) Thank you so much for all your help!!

    **** Nevermind - I got it to work correctly!!! :D
    Last edited by shopgirltx; 07-08-2010, 03:47 PM.

    Leave a comment:


  • GonzaloGil
    replied
    If you want to edit the listing.js, you can download it, copy it to the folder of your template (ie. lets say its "template1") and then change the listing_0.html template so that it looks for it in

    /web/assets/template1/listing.js instead of the common folder.

    Leave a comment:


  • shopgirltx
    replied
    I can't edit the listings.js file in the common folder since 3DCart changed the permissions to the common files. I think that my issues are related to some kind of interaction between the listing.js, and my spry javascript. Did you have any problems with figuring this out?

    Leave a comment:


  • concession-supply.com
    replied
    Here is the top of our listing template file:

    <script language="JavaScript" src="assets/templates/common/js/listing2.js" type="text/JavaScript"></script>
    <!--Link the CSS style sheet that styles the tabbed panel-->
    <link href="Spry/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <!--Link the Spry TabbedPanels JavaScript library-->
    <script src="Spry/SpryTabbedPanels.js" type="text/javascript"></script>

    I recall renaming the listing.js file, but, not sure what we did. Maybe we just added the Spry code. as you can see we added a Spry folder to the web root. Sorry I can't remember more.

    Leave a comment:


  • concession-supply.com
    replied
    actually, I think we had to rename the listing.js or something like that. Try a search for this topic, I think Gonzalo told us how to make it work. I'll look around. Whatever file you rename, be sure to be able to recover your functionality.

    Leave a comment:


  • shopgirltx
    replied
    My cache isn't enabled, but I cleared it anyways...didn't help.

    /web/assets/templates/v30034

    Leave a comment:

Working...
X