Announcement

Collapse
No announcement yet.

1page_checkout.html

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

  • 1page_checkout.html

    Hi All, I'm using the 1page_checkout.html for my site with and would like to get rid of my header (not global header) containing my logo, search bar and rotating image along with my left side navigation.

    Anyone have thoughts to how I can customize this my checkout page? Current page contains images that doesn't make my page secure during my checkout.

    Thank you.
    Jason
    -----------
    http://www.estorecoaching.com

  • #2
    About the easiest way i know to do it would be to do the following:

    1) assign an id attribute to the body on your 1page_checkout.html page

    2) assign id attributes to any elements you would like to see disappear

    3) set #body #idstohide{display:none;}

    by using the id attribute you assigned to that specific body as a parent selector, you won't hide the elements on any other page, thus turning a universal header into an ALMOST universal header.

    4) relax, they're gone.

    If you need assistance, PM me or reply here. I'll check back and help you with any further questions if you have any.

    (edit)

    I didn't notice the statement about the insecure items:

    you must have them hosted on a site with a valid ssl certificate (hosting them within your 3dcart is easiest) then just prefix the header with https:// instead of http://

    if they are hosted within 3dcart and you use relative pathing, its a non-issue.

    even if you use the method i described above with display:none you will still receive the nonsecure message until you either move the items, or specify a secure https path.
    Last edited by jleclair; 08-13-2012, 12:46 AM.

    Comment


    • #3
      Thanks for the tip jleclair, if you don't mind, can you give me an example of the first 3 items you listed? Also, there is nothing I want to hid on my 1page_checkout.html (or is it checkout-singlepage.html), it exist on frame.htm.

      1) assign an id attribute to the body on your 1page_checkout.html page
      2) assign id attributes to any elements you would like to see disappear
      3) set #body #idstohide{display:none;}
      Jason
      -----------
      http://www.estorecoaching.com

      Comment


      • #4
        To understand the concept of what I was trying to tell you to do, I must first make sure you understand how all of the different files react to each other.

        3Dcart uses the code contained within frame.html as a singular source of editing some code thats repeated across every page generated. Even though the code ends up in two different files from a designer standpoint, when the page is generated, it all ends up to be one page. Does this make sense to you?

        So for the 1page checkout, all of the code on your frame is also present and thus editable via CSS in this example.

        The first thing you would do is go into your checkout-singlepage.html file and add a body tag to wrap the code between (and im going from the standard template file when i say this) line 721 and 722 after the </script> tag and before the <center> tag. Use <body id="checkout"> for example. Now scroll all the way down to about line 1888 where the </center> tag is and insert the </body> AFTER it.

        The next thing you would do is go into your frame.html file and locate everything there that you don't want showing up and add an ID attribute to it (ID's are more efficient than classes for this because it's looking for a unique value and only expected to appear once)

        for example: this would be how to hide a standard left sidebar

        <!-- START: LEFT BAR -->
        <div id="leftSideBar">

        (all of the code thats contained within your sidebar goes here)

        </div>
        <!-- END: LEFT BAR -->

        Then in your css file, you enter the rule

        #checkout #leftSideBar{display:none;}

        You'll notice after all of these updates the rest of the pages will still see your sidebar as normal. When you get to the checkout page, you'll notice its now not present. NOTE: THE CODE IS STILL THERE it's just not displayed to the user. Until you secure your reference paths via https:// or use a relative path within your 3Dcart domain, you'll still show insecure content regardless of whether you can "see" it or not.

        Hope that helps.

        Comment


        • #5
          Thanks for your directions, its very clear, but I'm not able to get it to work on the test site, Welcome to Sample Store - Sample Slogan. Any other steps that I might of missed?
          Jason
          -----------
          http://www.estorecoaching.com

          Comment


          • #6
            As the page renders, your div is immediately closed. It must "wrap" the content you want to hide. Open the tag at the top, but don't close your div until you've scrolled down to just before <!--END: LEFT BAR--> This will "wrap" all of the inside content.

            Comment


            • #7
              I did a test with just #leftSideBar{display:none;} and I can get the leftbar to hide using the css code you listed, but it hides it on every page. When I add #checkout to it, it doesnt hide it for the checkout specifically and it still hides it on every page.

              Is there another code I'm missing for the frame.html and css? Is there code to specify which page the display:none on?
              Jason
              -----------
              http://www.estorecoaching.com

              Comment


              • #8
                paste the exact line of css you are using please.

                Comment


                • #9
                  Originally posted by jleclair View Post
                  paste the exact line of css you are using please.
                  Just as you have it:
                  /*TEST*/
                  #checkout #leftSideBar{display:none;}
                  /*#leftSideBar{display:none;}*/ <-- for test

                  in the checkout page:
                  <body>
                  <div id="checkout">
                  and i tried
                  <body id="checkout">
                  Jason
                  -----------
                  http://www.estorecoaching.com

                  Comment


                  • #10
                    #checkout #leftSideBar{display:none;}
                    will work if you have

                    <body id="checkout">

                    <div id="leftSideBar">

                    </div>

                    </body>

                    Make sure you are assigning the id to the body on the checkout page template page and NOT the frame.html and it shouldn't hide everywhere.

                    Comment


                    • #11
                      Originally posted by jleclair View Post

                      <body id="checkout">

                      <div id="leftSideBar">

                      </div>

                      </body>
                      You have this on the same line, does that mean both the body and the div code goes on the checkout page? I know we have to identify the <div id="leftSideBar"> in the frame.html so it know which section to hide, but do we have to add the left bar code to the checkoutpage as well?

                      (thank you)
                      Jason
                      -----------
                      http://www.estorecoaching.com

                      Comment


                      • #12
                        I apologize, I think I was a bit overly tired last night and didn't make it as clear as possible.

                        Frame html should have the div id="leftSideBar" and not on the one page checkout html file.

                        the Body id should be assigned on the one page checkout html only, and not in any other page's html file

                        this will cause that selector within the css to essentially target the leftSideBar div only when it appears on a page with a body id of checkout which is what you are looking to do

                        Comment


                        • #13
                          At this point, I know the leftSideBar logic works and it hides, but when I add the "checkout" portion to the css and checkout-singlepage.html, it does not hide it.

                          On frame.html, I made the changes below.
                          <!--START: LEFT BAR-->
                          <td valign="top" width="195" class="frame"><div id="leftSideBar"><div class="column" id="column1">

                          </div></div></td>
                          <!--END: LEFT BAR-->

                          On checkout-singlepage.html
                          </script>
                          <body id="checkout">
                          <center>

                          </center>
                          </body>
                          <!--START: verByVisa-->

                          On css file
                          /*TEST*/
                          #checkout#leftSideBar{display:none;}
                          Jason
                          -----------
                          http://www.estorecoaching.com

                          Comment


                          • #14
                            Go to Settings>Titles and Content> click on the page you would like to hide your sidebar ie. checkout, checkout 1 etc. Then there is a box that says "hide left sidebar" "hide right sidebar" lclick the one you would like to hide. That's it :) I have mine hidden too.
                            (¯`v´¯)
                            `*.¸.*´

                            ¸.•´¸.•*¨) ¸.•*¨)
                            (¸.•´ (¸.•´ .•´ ¸¸.•¨¯`•
                            * P£†®ª *

                            Shadow Trailers
                            www.TrailerandTruckParts.com
                            www.Trailer-Wheels.com
                            www.iTrailerParts.com

                            Comment


                            • #15
                              oops sorry it's settings>design>titles and content was doing it off the top of my head, double checked it though
                              (¯`v´¯)
                              `*.¸.*´

                              ¸.•´¸.•*¨) ¸.•*¨)
                              (¸.•´ (¸.•´ .•´ ¸¸.•¨¯`•
                              * P£†®ª *

                              Shadow Trailers
                              www.TrailerandTruckParts.com
                              www.Trailer-Wheels.com
                              www.iTrailerParts.com

                              Comment

                              Working...
                              X