Author: Andreas Plahn

EPiServer Commerce Workflows

A workflow is the method of automating actions based on events. A chain of events can be set up leading from a start to an end action with each event waiting for a trigger in the chain before being activated, all under the whatchful eye of the workflow runtime. Workflows are commonly used in many different areas, for instance in content publishing procedures and in online e-commerce business processes.

In EPiServer Commerce, workflows are used for validation and calculating totals in the checkout process, and there are several default workflows included (BusinessLayer/OrderSystem/OrderWorkflow project). Checkout activities like calculating cart totals, updating inventory, and processing payments are handled outside of the core API usingWindows Workflow Foundation (WWF) workflows shipped with the .NET Framework.

Each workflow contains a number of activities, each with a distinct purpose such as calculating discounts, and the activities may be re-used among workflows. This division allows for greater flexibility and easier business rules management. If you want to change the business rules associated with checkout, EPiServer Commerce allows you to incorporate your own workflows. Refer to Customizing Order Processing Workflows for more information.

http://world.episerver.com/Documentation/Items/Developers-Guide/EPiServer-Commerce1/751/Workflows/Workflows/

EPiServer Commerce 1 and Associations

If working with associations in EPiServer commerce (e.g accessories or related products) and wonder which associations are active – just look in the tables CatalogAssociation  and CatalogEntryAssociation.

SELECT *
FROM [MyCommerceDB].[dbo].[CatalogAssociation]
WHERE Associationname LIKE '%Free%'

The column CatalogAssociationId indicates the foreign key in CatalogEntryAssociation table.

SELECT
[CatalogAssociationId]
,[CatalogEntryId]
,[SortOrder]
,[AssociationTypeId]
FROM [MyCommerceDB].[dbo.[CatalogEntryAssociation] where CatalogAssociationId = 123

Replace 123 with your CatalogAssoicationId.

 

 

Simple jQuery loader image function – attached to all ajax and form posts

So I needed a simple ajax loader box indicating when there was a ajax request going on in the page.

Fortunately jquery ajax have global events you can attach to enable this behavior.

Code:
Html at the end of masterpage perhaps (before </body>):

	    <div id="loadingbox">
            <img src="../../Assets/Images/Loadingbox/ajax-loader-big.gif" alt="Loading..."/>
	    </div>

Ajax loader images can be found here: http://ajaxload.info/

Javascript:

//Generic loader image function. 
//Attached to global jquery ajax calls and form posts.

$(document).bind("ajaxStart", function () {
    $("#loadingbox").show();
});

$(document).bind("ajaxComplete", function () {
    $("#loadingbox").hide();
});

$(document).bind("ajaxError", function () {
    $("#loadingbox").hide();
});

$(document).submit(function () {
    $("#loadingbox").show();
});

The 3 first functions is attached to global ajax events. They are per default always raised by jquery ajax functions. More info: http://api.jquery.com/category/ajax/global-ajax-event-handlers/

The last function attaches to all form posts. (E.g. not ajax but might still be good to have).

Further extension would be to add more click event handlers. E.g. on certain a-elements perhaps. A problem though: if a user clicks a link the request will happen before the js. Therefore you must use e.preventDefault() and then show the loader. After that need to redirect the user to the desired url.

Add a script element for the js file in masterpage <head>:

<script src="/Assets/Scripts/loadingbox.js" type="text/javascript"></script>

Css:

#loadingbox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    background-color: #fff;
    opacity: 0.9;
    border: 1px solid black;
    border-radius: 5px;
    padding: 25px;
    margin-left: -41px;
    margin-top: -41px;
}

Initially on every page load the loading box will be hidden. (Display: none).

Position fixed is needed so that the loaderbox always be placed in an fixed location relative to the browser window. Also enables the ability to let the box appear above the other html elements. (a high z-index).

Its then placed in the middle, vertically and horisontally: top: 50% and left: 50%.

A little opacity is added, a thin black border and rounded corners (radius). Padding adds white space between the image and the black border.

The negative margins is used to place the loader box in perfect center. Everything in css is placed according to topleft corner of the window as a startingpoint. The box is 82px wide (image is 32px wide and padding on both side is 50px (25+25px padding)).

This means the loadingbox and image will be slightly tilted to right and below the perfect center lines. We adjust this by setting negative margin to half the width and height of the box. (-41px respectively).

Chrome Web Store – Visual Event – Show jQuery event listening code

Ever want to know which line of javascript code that is listening to a certain event on an element? Even when working with jQuery?

This tool for Chrome is really sweet!
Chrome Web Store – Visual Event.

However its seems to be native functionality in Chrome already?
See Paul Irish posting here:
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Didnt get it to work in my Chrome browser although. (just like the latest posts in above forum – just shows jquery source code)