Announcement

Collapse
No announcement yet.

Options Layout Design Assistance

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

  • Options Layout Design Assistance

    Hello, I have a few questions about the layout design for any options I may have.

    Here is my website: http://tinyurl.com/c4lb8ur

    I need to figure out how to customize my options a bit better. What I would like to do is to keep "color" and "size" where they are, but move the rest further down to below the "Add to wishlist" button.

    In addition I would like to span it across the entire width of the bottom so I would have maybe 3 or 4 columns of options and only go 3 or 4 rows down.

    I just don't know how to prevent the automatic looping straight down through every single option. I know 3dcart suggest against the modifying of this stuff, but it is just so ugly and there has to be away to change the default layout. I can't see every 3dcart powered store having their options displayed like this.

    Thank you for any help in advanced, Dan

  • #2
    Are you familiar with HTML and/or CSS? You can absolutely customize the look of your product page, down to virtually every detail, but it isn't a point and click friendly-editor. You have to edit the template file (listing_0.html) and customize the code.

    Comment


    • #3
      Yes I am. I've been playing with listing_0 but it seems to just loop through the

      "<!--START: PRODUCT_OPTIONS_BLOCK-->"

      block and puts each individual option inside a <td><table><tr><td>.

      This code is added no matter what I do in listing_0.

      This is my first 3dcart site, so I am not very familiar with the extent to which I can customize everything.

      Comment


      • #4
        Err, <tr><td><table><tr><td>, So it lists them going straight down.

        Comment


        • #5
          to the op.

          the options are indeed generated by looping the options block. Anything contained within the block that meets the conditions you've set in your admin (radio/dropdown/etc show according to settings on the product page)

          the asp will comb through and check whether or not the code within the trigger tags should be displayed based on your settings and then loops through until it runs out of options.

          If you want to manipulate each option, it IS possible, but takes a bit of setup and is much easier with divs than a table layout. The positioning would depend on whether or not your pages are on the average the same height or whether some products consume more page space than others. To position each individual item you can hook them using css attribute selectors if you are familiar with that.

          If you aren't familiar with it, and just want something done quick. I'm for hire. PM me and we can talk more about it.

          Comment


          • #6
            No, I am familiar with css. How do you prevent the 3dcart template tags from automatically generating all that html? I haven't tried removing everything from what I have but I had just assumed it would generate the same code either way. I do understand what you saying though. Create my own div with an id and use child selectors and stuff to position everything. I did however try to put my own div inside the tags for each individual option and give it a width=32% and float:left; but it still kept everything inside the tables it generates. I'll try to give my outer div a position:relative and the ones inside the tags position:absolute and try to manipulate them that way. Is that what your saying to do?

            Comment


            • #7
              absolute positioning should be avoided if you can..but it is an option should you choose to go that way and feel comfortable about it. If you modify the right tags, it wont insert tables anymore. my product options aren't showing any tables so its possible. Then again everything I have access to has been converted away from tables. Sort of the all or nothing approach.

              Once you break the options out of the tables youll be able to move them however you want. Enjoy!

              Comment


              • #8
                Wait, If I modify the right tags? Do you mean to tell me that I can modify the code that automatically gets generated by the 3dcart specific tags?

                Like this type of one:

                <!--START: PRODUCT_OPTIONS_BLOCK-->

                Where do I go to do that? I can modify them fine, I've been coding for quite a few years. I just don't know where that option is? Are all of these tags defined somewhere where I can access them via ftp?

                Comment


                • #9
                  Originally posted by GlassesSpot View Post
                  Wait, If I modify the right tags? Do you mean to tell me that I can modify the code that automatically gets generated by the 3dcart specific tags?

                  Like this type of one:

                  <!--START: PRODUCT_OPTIONS_BLOCK-->

                  Where do I go to do that? I can modify them fine, I've been coding for quite a few years. I just don't know where that option is? Are all of these tags defined somewhere where I can access them via ftp?
                  No, you can't directly specify what tags get auto-generated by the templating system. BUT the system will try to be intelligent about it (with varying results). If the block is inside an outer <div> it usually will not spit out table <tr><td> tags.

                  Comment


                  • #10
                    Ahh, okay. Thank you.

                    Comment


                    • #11
                      I know it seemed as if this thread was closed but I still have some questions. After converting my page to divs It seems none of my custom css classes are being displayed or used in my store. Plus my firebug is reporting that some divs are width:100%; but they share that width with other elements who have a width:100%;

                      Is there a reason why 3dcart will not let me use my own css classes?

                      Comment


                      • #12
                        No.. the CSS on 3DCart is fully customizeable/replaceable.

                        Comment

                        Working...
                        X