Added to cart dialog

When a user adds a file to the cart, a message will appear to show the file was added. With the cart panel open, no message will show, as the user will see the file appear in the cart. The number of items is also updated in the menu. On certain websites, you may want to display a dialog to clearly indicate that the user successfully added the file. There’s a default dialog and you can also create a custom version. The default dialog has buttons “Go to checkout” and “Continue shopping”. There’s also a checkbox that the user can select if they don’t want to display the dialog anymore.

Enabling the dialog

To enable the “File added to cart” dialog, go to Site configuration in Back office and click on Cart page in the side bar. Then open the section General settings. Check the box in front of display cart dialog with “go to cart” and “continue shopping” when a user adds a file. Scroll to the bottom of the page and click Save. To try the dialog go to a search results page and click on an Add to cart button underneath a thumbnail.

Styling the dialog

If you want to change the look and feel of the default dialog, you can do so by adding CSS in the code editor. How to add CSS is explained in the article Using Custom CSS.

Note that you can change the label Cart, to something else if you wish. E.g. Basket or Order. You can change the label either via Back office, Site configuration, Pages and menu, and then open the section Website menu. Or you can leave this field blank and change the default in the constants file defaults.txt. For further information about changing constants, read Website constants.

Creating a custom dialog

If you want to create a custom version of the dialog, then open the code editor and select the template Added to cart dialog (64) in the group Page fragments. You can load the example HTML to use as a starting point. Click on Load example in the toolbar to open the dialog, select the code example and click Use code. For more information about using the code editor and about customisation, read the articles Using the code editor and Infradox XS customisation.

HTML code example

<div class="cartresponse">
	<table>
	<tbody>
	<tr>
		<td class="cartthumbnail">
			...
		</td>
		<td class="cartmessage">
			<?xs constant('cAddedtocart','cartdialog') ?>
			<p>
			    There are now <?xs session('cartcount') ?> file(s) in your cart
			</p>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<br />
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<a class="gotocart" href="#"><?xs constant('cGotocart','cartdialog') ?></a>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<a class="sitecontinue" href="#"><?xs constant('cContinue','cartdialog') ?></a>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<br />
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="checkbox" class="hidecartdialog"> <?xs constant('cHidedlg','cartdialog') ?>
		</td>
	</tr>
	</tbody>
	</table>
</div>

The class names that are used are essential for the script to function. You can however create your own script if you want. This is explained in the next paragraph. The above example uses constants to output the text. The advantage is that the output will automatically in the selected user interface language. You can however also use normal text if you don’t need localisation, or you can use the xs print() function.

Creating custom Javascript for the dialog

If you want complete control over how the dialog functions, then you can add your own script for it. You can do this regardless of using a custom dialog. This is an advanced feature that requires an understanding of Javascript and JQuery. Read the article about Using Javascript in your pages first as it explains the client object that you will need to add or edit.

The example below shows the function showcartdialog added to the client object. If this function exists, then the standard Infradox script will call it instead of the built-in function used to show the dialog.

var client = {    
    init: function() {
        var o=this;
        ...
    },
    
    // add this function to your client object
    showcartdialog: function(data) {
        addtocartdialog.init(data);
    }
};

The data variable (above) is a JSON object returned by the software as a result of updating the cart.
Next, you’ll need to add your own function. In the above example we’ve called it addtocartdialog but it can have any name you want to use. The complete object is below. It checks if the dialog HTML is already loaded, and if not it will load the HTML with $.get(). This is an asynchronous call so you must handle its result in a callback as shown below.

var addtocartdialog = {

     init: function(data) {
          var o=this;
          o._data=data;

          tools.showmask();

          var dlg=$("#cartdialog");
          if(dlg.length===0) { // the dialog html hasn't been loaded yet, load it now
               var s=settings.dll+"go?a=disp&si="+settings.sesid+"&t=cart\\cartdialog.html";
               $.get(s,function(h){
                   $("<div id='cartdialog'></div>").appendTo("body");
                   dlg=$("#cartdialog");
                   dlg.html(h);
                   o.displaydialog();
               });
          } else { // dialog is already loaded, display it
               o.displaydialog();
          }
    },
    
    displaydialog: function() {
        var o=this;
        var dlg=$("#cartdialog");

        dlg.find(".cartthumbnail").html("<img src='"+o._data.thumbnail+"' />");
        dlg.find(".cartmessage").append(o._data.cartcount+" file(s)");

        dlg.find(".sitecontinue").unbind("click").click(function(e){
           e.preventDefault();
           o.checkhideflag();
           dlg.remove();
           $("#modalmask").remove();
        });
	
        dlg.find(".gotocart").unbind("click").click(function(e){
           e.preventDefault();
           o.checkhideflag();
           dlg.remove();
           location.href="/cart"; // load the cart page	
       });

       dlg.show().position({of:window});
    },

    checkhideflag:function() {
       var o=this;
       var _hide=$("#cartdialog .hidecartdialog").prop("checked");
       if(_hide) tools._ps("&_hidecartdlg=1",function(){}); // update the flag to no longer show the dialog
    }    
};