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

[graphicz]

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

[NormanRouxel]

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").

[NormanRouxel]

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).

<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).

[graphicz]

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.

[NormanRouxel]

You're welcome. I amended the above to put an IsNotPreviewMode blockif around the code so it plays nice with the desktop previews.

[NormanRouxel]

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.

<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>

[graphicz]

Cracking piece of work, thank you Norman.

[graphicz]

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:

<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?

[NormanRouxel]

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:

                             // 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.

[graphicz]

Genius. Thank you again.

[graphicz]

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.

<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 -->

#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;
}

[Mike Hughes]

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!

[graphicz]

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:

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

Also tried:

<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.

[NormanRouxel]

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.

[graphicz]

For completeness here is my final (so far) code from https://www.graphiczdev.co.uk/porto/The CSS is Bootstrap 4

<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:

<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.