Announcement

Collapse
No announcement yet.

Tabbed Content Panels

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

  • #16
    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.
    ----------------------------
    Gonzalo Gil
    3dCart Support
    800-828-6650 x111

    Comment


    • #17
      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.

      Comment


      • #18
        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?

        Comment


        • #19
          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

          Comment


          • #20
            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

            Comment


            • #21
              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.
              www.concession-supply.com

              Comment


              • #22
                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>

                Comment


                • #23
                  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

                  Comment


                  • #24
                    JustPoppin,

                    I'll PM you.

                    Comment


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

                      Comment


                      • #26
                        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?

                        Comment

                        Working...
                        X