Announcement

Collapse
No announcement yet.

Display a shopping cart grid on any page of the site?

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

    Display a shopping cart grid on any page of the site?

    I would like to display a shopping cart grid on any page of the site but all I get are netquotevars!

    I have tried adding the form tags etc from the checkout pages.

    Pease can someone point me in the right direction?

    Context: the shopping cart grid would be a collapsing element below the cart icon on mouseover.

    Thank you
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    The Shopping Cart Grid is dynamically generated by Perl on the server and thus can't be plonked into a normal Layout. It returns a full page of HTML.

    You'd have to use something like an IFRAME that loads ca000001.pl?ACTION=SHOWCART and has code to filter out everything but the cart grid (which is a table with class="checkout-cart").
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      WOWZA! It can be done by using jQuery's Ajax load capability.

      This can load a page and filter out all but a particular element.
      Here's a lump of code that displays the Cart table (and removes the sub-total, tax etc).
      Code:
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e">
      <!-- this DIV gets the shopping cart loaded dynamically -->
          <div id="livecartdata"></div>
          <script type="text/javascript">
          $(document).ready(function(){
                    $( "#livecartdata" ).load("<actinic:variable name="CartLinkText" /> table.checkout-cart", function() {
                           // fix images on Brochure Front Page
                           <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">$( "#livecartdata img" ).attr('src', '<actinic:variable name="CatalogDirectory" encoding="perl" selectable="false" />/' + $( "#livecartdata img" ).attr('src'));</actinic:block></actinic:block>
                          // amend text for empty cart
                          $( "#livecartdata:contains(Your shopping cart is empty)" ).html('Cart is empty.');
                          // removes the total rows
                          $( "#livecartdata tr.checkoutMobileTR" ).remove();
                          // disable input fields
                          $( "#livecartdata input" ).prop('readonly', true);
                          // remove the REMOVE caption and checkbox
                          $( "#livecartdata input[name^='D_']" ).closest('td').remove();
                          $( "#livecartdata th:contains(REMOVE)" ).remove();
                          $( "#livecartdata img" ).css('width', '25px');
                         }).css('width', '400px');
          });
          </script>
      </actinic:block>
      Attached is a screenshot of this code added to a Fragment Layout.

      Warning. Using this means that every page that it displays on will incur the extra overhead of loading the Shopping Cart page (even though you only see a little bit of it).
      Attached Files
      Norman - www.drillpine.biz
      Edinburgh, U K / Bitez, Turkey

      Comment


        #4
        Amazing Norman thank you.

        I was just logging in again to ask about Ajax and there was your complete solution. I am very grateful thank you.

        Jonathan Chappell
        Website Designer
        SellerDeck Website Designer
        Actinic to SellerDeck upgrades
        Graphicz Limited - www.graphicz.co.uk

        Comment


          #5
          You're welcome. I amended the above to put an IsNotPreviewMode blockif around the code so it plays nice with the desktop previews.
          Norman - www.drillpine.biz
          Edinburgh, U K / Bitez, Turkey

          Comment


            #6
            Here's a variation that displays a "Show Cart" link that will display the cart when clicked.
            This only loads the cart into the page when the user clicks the link so saves on bandwidth and server processing.
            It also makes the input fields readonly and removes the REMOVE caption and link.
            Code:
            <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e">
                <style>
                #livecartdata    {display:none; width:400px;}
                #livecartdata img    {width:25px;}
                #livecartshow    {font-size:12px; font-weight:bold;}
                </style>
                <a href="#" id="livecartshow" onclick="return lcshowhide();">Show Cart</a>
                <!-- this DIV gets the shopping cart loaded dynamically -->
                <div id="livecartdata"></div>
                <script type="text/javascript">
                    function lcshowhide(){
                        var livecartdata = $( "#livecartdata" );
                        if ( livecartdata.is( ":visible" ))
                            {
                            $( "#livecartshow" ).text('Show Cart');
                            livecartdata.hide(250);
                            }
                        else
                            {
                            livecartdata.load("<actinic:variable name="CartLinkText" /> table.checkout-cart", function() {
                                  // fix images on Brochure Front Page
                                  <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">$( "#livecartdata img" ).attr('src', '<actinic:variable name="CatalogDirectory" encoding="perl" selectable="false" />/' + $( "#livecartdata img" ).attr('src'));</actinic:block></actinic:block>
                                  // amend text for empty cart
                                  $( "#livecartdata:contains(Your shopping cart is empty)" ).html('Cart is empty.');
                                  // removes the total rows
                                  $( "#livecartdata tr.checkoutMobileTR" ).remove();
                                  // disable input fields
                                  $( "#livecartdata input" ).prop('readonly', true);
                                  // remove the REMOVE caption and checkbox
                                  $( "#livecartdata input[name^='D_']" ).closest('td').remove();
                                  $( "#livecartdata th:contains(REMOVE)" ).remove();
                                  }).show(250);
                            $( "#livecartshow" ).text('Hide Cart');
                            }
                        return false;    
                    }
                </script>
            </actinic:block>
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment


              #7
              Cracking piece of work, thank you Norman.
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment


                #8
                Thank you again Norman.

                Only hitch is getting the thumbnail image to display on the homepage. I have tried editing the thumbnail lin in the cart thus:
                Code:
                <img class="cartthumbnail" src="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">acatalog/</actinic:block><actinic:variable name="Thumbnail" />" >
                But the acatalog/ is not added on the homepage: https://www.graphiczdev.co.uk/ajaxcart/index.html

                Is the layout drawn from elsewhere?
                Jonathan Chappell
                Website Designer
                SellerDeck Website Designer
                Actinic to SellerDeck upgrades
                Graphicz Limited - www.graphicz.co.uk

                Comment


                  #9
                  As my first post said, the Shopping Cart Grid is dynamically generated by Perl on the server and normal SD stuff won't work there.
                  An extra line of JavaScript / jQuery is needed:
                  Code:
                                               // fix images on Brochure Front Page
                                               <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">$( "#livecartdata img" ).attr('src', '<actinic:variable name="CatalogDirectory" encoding="perl" selectable="false" />/' + $( "#livecartdata img" ).attr('src'));</actinic:block></actinic:block>
                  I've amended my 2 earlier posts to include this.
                  Norman - www.drillpine.biz
                  Edinburgh, U K / Bitez, Turkey

                  Comment


                    #10
                    Genius. Thank you again.
                    Jonathan Chappell
                    Website Designer
                    SellerDeck Website Designer
                    Actinic to SellerDeck upgrades
                    Graphicz Limited - www.graphicz.co.uk

                    Comment


                      #11
                      Just by way of a follow up, the site I was developing can be seen (unfinished) here.

                      https://www.graphiczdev.co.uk/porto/

                      The Shopping bag top right triggers the cart drop down using Norman's suggestions above.

                      The 'show/hide' is the container of the cart so I need to use JS or CSS to make the table display:none when its container is hidden.

                      To save space I used Norman's principles above to hide the Cost column.

                      Thanks and acknowledgements to Norman.

                      Code:
                      <div class="dropdown-menu" >
                                                      <div class="dropdownmenu-wrapper">
                                                          <div class="dropdown-cart-products">                                        
                      <div id="livecartdata"></div>
                          <script type="text/javascript">
                              $(function() {
                      
                                    $( "#livecartdata" ).load("<actinic:variable name="CartLinkText" /> table.table-cart", function() {
                                           // amend text for empty cart
                                            $( "#livecartdata:contains(Your shopping cart is empty)" ).html('Cart is empty.');
                                            // removes the total rows
                                            $( "#livecartdata tr.checkoutMobileTR" ).remove();
                                            // disable input fields
                                            $( "#livecartdata input" ).prop('readonly', true);
                                            // remove the REMOVE caption and checkbox
                                            $( "#livecartdata input[name^='D_']" ).closest('td').remove();
                                            $( "#livecartdata th:contains(REMOVE)" ).remove();
                                            $( "#livecartdata th:contains(COST)" ).remove();
                                            $( "#livecartdata td.kost" ).remove();
                                             // fix images on Brochure Front Page
                                              <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">$( "#livecartdata img" ).attr('src', '<actinic:variable name="CatalogDirectory" encoding="perl" selectable="false" />/' + $( "#livecartdata img" ).attr('src'));</actinic:block></actinic:block>
                                          });
                      
                                          });
                          </script>
                                                             
                                                          </div> <!-- end dropdown-cart-products -->
                                                          <div class="dropdown-cart-action">
                                                              <a class="btn btn-info" href="<actinic:variable name="CartLinkText" />" onclick="AppendParentSection(this)"><actinic:variable name="CartText" /></a>
                                                              <a class="btn btn-success" href="<actinic:variable name="OrderLinkText" />" onclick="AppendParentSection(this)"><actinic:variable name="CheckOutText" /></a>
                                                          </div><!-- End .dropdown-cart-action -->
                                                          
                                                      </div><!-- End .dropdownmenu-wrapper -->
                                                  </div><!-- End .dropdown-menu -->
                      Code:
                      #livecartdata {width:auto;}
                      #livecartdata img {width:100px;}
                      #livecartshow {font-size:12px; font-weight:bold;}
                      #livecartdata input[type="number"] {border-style:none;border:0;}
                      #livecartdata .table.table-cart tr th {
                          padding: 2.4rem .5rem 1.2rem;
                      }
                      #livecartdata .table.table-cart .product-title {
                          margin-bottom: 0;
                          font-size: 1.1rem;
                          width: 50%;
                      }
                      .cart-dropdown .dropdown-menu {
                          width: 340px;
                      }
                      .cart-dropdown .dropdownmenu-wrapper {padding:0;}
                      #livecartdata .table.table-cart tr.product-action-row td {
                          padding: 0;
                          border: 0;
                      }
                      Jonathan Chappell
                      Website Designer
                      SellerDeck Website Designer
                      Actinic to SellerDeck upgrades
                      Graphicz Limited - www.graphicz.co.uk

                      Comment


                        #12
                        Looks good. That's a nice way to show the cart while the customer is still on the page. Hat off to both of you!
                        -----------------------------------------

                        First Tackle - Fly Fishing and Game Angling

                        -----------------------------------------

                        Comment


                          #13
                          I have tried and failed to find a way for the #livedata #cart to be display:none; then display:block when the container is visible and have failed.

                          This is where I got to but it didn't want to play:

                          Code:
                           <style>#livedata #cart {display:none;}</style>
                          <script>           $(function() {        
                                              if ($(".dropdown-menu").is(':visible')) {
                                                          $("#cart").addClass("d-block");
                                                      }
                                  });
                          </script>
                          Also tried:

                          Code:
                          <script>           $(function() {        
                                              if ($(".dropdown-menu.show").is(':visible')) {
                                                          $("#cart").addClass("d-block");
                                                      }
                                  });
                          </script>
                          Advice and pointers gratefully receiuved.

                          The reason for wanting the #cart to be display:none; until it is needed is to save on bandwidth and server processing as recommended by Norman above.
                          Jonathan Chappell
                          Website Designer
                          SellerDeck Website Designer
                          Actinic to SellerDeck upgrades
                          Graphicz Limited - www.graphicz.co.uk

                          Comment


                            #14
                            My post #6 only loads the Cart when the "Show" link is clicked. Adapt that to use jQuery's Hover (or onmouseover onmouseout) events instead of link clicks.

                            Or, even better, use jQuery's HoverIntent to prevent spurious loads if the mouse passes over the icon on its way somewhere else.
                            Norman - www.drillpine.biz
                            Edinburgh, U K / Bitez, Turkey

                            Comment


                              #15
                              For completeness here is my final (so far) code from https://www.graphiczdev.co.uk/porto/The CSS is Bootstrap 4
                              Code:
                              <div id="kartdrop" class="dropdown cart-dropdown">
                                                          <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                              <span class="cart-count">
                                                                      <span class="cart-total-price">
                                                                                  <script language="javascript" type="text/javascript">
                                                                                  <!--
                                                                                  document.write(getCartItem(3));
                                                                                  // -->
                                                                                  </script>
                                                                          </span>
                                                          </a>
                                                        
                                                          <div class="dropdown-menu" >
                                                              <div class="dropdownmenu-wrapper">
                                                                  <div class="dropdown-cart-products">                                        
                                                                                  <div id="livecartdata"></div>
                                                                      <script type="text/javascript">
                                                  $(function() {
                                                              
                                                      $('#kartdrop').mouseenter(function(){
                              
                                                     $( "#livecartdata" ).load("<actinic:variable name="CartLinkText" /> table.table-cart", function() {
                                                   // amend text for empty cart
                                                    $( "#livecartdata:contains(Your shopping cart is empty)" ).html('Cart is empty.');
                                                    // removes the total rows
                                                    $( "#livecartdata tr.checkoutMobileTR" ).remove();
                                                    // disable input fields
                                                    $( "#livecartdata input" ).prop('readonly', true);
                                                    // remove the REMOVE caption and checkbox
                                                    $( "#livecartdata input[name^='D_']" ).closest('td').remove();
                                                    $( "#livecartdata th:contains(REMOVE)" ).remove();
                                                    $( "#livecartdata th:contains(COST)" ).remove();
                                                    $( "#livecartdata td.kost" ).remove();
                                                     // fix images on Brochure Front Page
                                                      <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">$( "#livecartdata img" ).attr('src', '<actinic:variable name="CatalogDirectory" encoding="perl" selectable="false" />/' + $( "#livecartdata img" ).attr('src'));</actinic:block></actinic:block>
                                                  });
                                                      });
                                                  });
                                                  </script>
                                                  
                                                                  </div> <!-- end dropdown-cart-products -->
                                                                  <div class="dropdown-cart-action">
                                                                      <a class="btn btn-info" href="<actinic:variable name="CartLinkText" />" onclick="AppendParentSection(this)"><actinic:variable name="CartText" /></a>
                                                                      <a class="btn btn-success" href="<actinic:variable name="OrderLinkText" />" onclick="AppendParentSection(this)"><actinic:variable name="CheckOutText" /></a>
                                                                  </div><!-- End .dropdown-cart-action -->
                                                              </div><!-- End .dropdownmenu-wrapper -->
                                                          </div><!-- End .dropdown-menu -->                            
                                                      </div><!-- End .dropdown -->
                              There was another instance of this cart icon in the 'stuck' header which was cloned by javascript which meant the second instance of #livecartdata did not work. I removed the cloning from the js and added a second instance of the cart drop down to the 'stuck' header with different IDs:

                              Code:
                              <div id="kartdropmobile" class="dropdown cart-dropdown">
                                                          <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                                              <span class="cart-count">
                                                                      <span class="cart-total-price">
                                                                                  <script language="javascript" type="text/javascript">
                                                                                  <!--
                                                                                  document.write(getCartItem(3));
                                                                                  // -->
                                                                                  </script>
                                                                          </span>
                                                          </a>
                                                        
                                                          <div class="dropdown-menu" >
                                                              <div class="dropdownmenu-wrapper">
                                                                  <div class="dropdown-cart-products">                                        
                                                                                  <div id="livecartdatamobile"></div>
                                                                      <script type="text/javascript">
                                                  $(function() {
                                                              
                                                      $('#kartdropmobile').mouseenter(function(){
                              
                                                     $( "#livecartdatamobile" ).load("<actinic:variable name="CartLinkText" /> table.table-cart", function() {
                                                   // amend text for empty cart
                                                    $( "#livecartdatamobile:contains(Your shopping cart is empty)" ).html('Cart is empty.');
                                                    // removes the total rows
                                                    $( "#livecartdatamobile tr.checkoutMobileTR" ).remove();
                                                    // disable input fields
                                                    $( "#livecartdatamobile input" ).prop('readonly', true);
                                                    // remove the REMOVE caption and checkbox
                                                    $( "#livecartdatamobile input[name^='D_']" ).closest('td').remove();
                                                    $( "#livecartdatamobile th:contains(REMOVE)" ).remove();
                                                    $( "#livecartdatamobile th:contains(COST)" ).remove();
                                                    $( "#livecartdatamobile td.kost" ).remove();
                                                     // fix images on Brochure Front Page
                                                      <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">$( "#livecartdatamobile img" ).attr('src', '<actinic:variable name="CatalogDirectory" encoding="perl" selectable="false" />/' + $( "#livecartdatamobile img" ).attr('src'));</actinic:block></actinic:block>
                                                  });
                                                      });
                                                  });
                                                  </script>
                                                  
                                                                  </div> <!-- end dropdown-cart-products -->
                                                                  <div class="dropdown-cart-action">
                                                                      <a class="btn btn-info" href="<actinic:variable name="CartLinkText" />" onclick="AppendParentSection(this)"><actinic:variable name="CartText" /></a>
                                                                      <a class="btn btn-success" href="<actinic:variable name="OrderLinkText" />" onclick="AppendParentSection(this)"><actinic:variable name="CheckOutText" /></a>
                                                                  </div><!-- End .dropdown-cart-action -->
                                                              </div><!-- End .dropdownmenu-wrapper -->
                                                          </div><!-- End .dropdown-menu -->                            
                                                      </div><!-- End .dropdown -->
                              Thanks again to Norman for the guiding light.
                              Jonathan Chappell
                              Website Designer
                              SellerDeck Website Designer
                              Actinic to SellerDeck upgrades
                              Graphicz Limited - www.graphicz.co.uk

                              Comment

                              Working...
                              X