1 Litium Certified Developer 2 Welcome who are

1 Litium Certified Developer

2 Welcome, who are you?

3 Installation

4 Installation Pre-requisites • System requirements https: //docs. litium. com/documentation/get-started/systemrequirements • VS 2017 • Sql Server 2012 • . NET 4. 7. 2 dev pack • Litium Nu. Get feed https: //docs. litium. com/download/litium-nuget-feed • Requires docs. litium. com account with download rights • IIS should have. net development enabled. (From turn windows features on/off, in IIS section)

5 Enable (install) IIS on Windows

6 Installation • Installation is done through Visual Studio • With or without accelerator • Litium is available only through Litium Nu. Get-feed (private) • Nu. Get-feed is connected to your user account in http: //docs. litium. com • One DLL = one Nu. Get package

7 Nu. Get package for installation Litium. Web. Setup. Complete Litium. Setup. Complete

8 Distribution – Add-Ons/Accelerator • Compiled Add-Ons (e. g. payment provider add. Ons) • Install via Nu. Get packages • Accelerator and source code Add-Ons (e. g. Integration Kit) • Download from KC (Litium Knowledge Center) • The Litium platform and licensed Add-Ons (e. g. Accelerator and Integration Kit) can not be reused or shared after download

9 Litium Accelerator

10 What is Litium Accelerator? • A packaged technical solution, • Speed up staring new projects. • No need to build everything from scratch, • Provides the base for common functionality to start development. • Delivered as source code. • Once customized, accelerator will be part of the solution.

11 Litium Accelerator 7 • Based on ASP. NET • Mvc, React and Redux • ES 6 • BEM (Block Element Modifier) methodology • Responsive design framework - Foundation Zurb • Email html generation – Foundation email by Zurb • No JQuery

12 Task: Install Litium Accelerator (Part 1) 1. Login to docs. litium. com 2. Download and unzip latest MVC accelerator source from KC 3. Assert that you have set up Litium Nu. Get feed according to https: //docs. litium. com/download/litium-nuget-feed 4. Open the Accelerator. sln in Visual Studio 5. In Package Manager Console, run Update-Package –Re. Install 6. Optional tip, init git repo in folder to document progress (and possibly revert) changes

13 Installation review

14 Database • Database installed to web/App_data • Moving database from App_data to sql server • In some machines, the Sql server permissions may fail due to sql server not having enough permissions in windows. • You may manually mount the database, the files are located in ” packagesLitium. Setup. Core. 7. 0. 0Toolsdb” folder. • Copy the files to a different location! • You might need to run the sql server management studio as an Administrator in certain cases. CREATE DATABASE Kc. Samples. L 5 ON (FILENAME = 'D: SandboxKc. Samples. L 5DBKc. Samples. L 5. mdf'), (FILENAME = 'D: SandboxKc. Samples. L 5DBKc. Samples. L 5_log. ldf') FOR ATTACH;

15 Options in Web. config • Update database connection string • Update the files folder. • Used for • Temporary files. • Lucene search index. • Media files. • Common. Files. Directory • Sessionstate, in. Proc vs State. Server • …and more (SMTP, HTTPS etc. ) https: //docs. litiumstudio. com/documentation/get-started/configure/web_config

16 Should you use IIS in dev? • IIS Express has limitations, by using IIS during development these will not come as a surprise when moving to production • If you ever need to check something, without opening visual studio! https: //msdn. microsoft. com/en-us/library/58 wxa 9 w 5(v=vs. 120). aspx

17 Configuring IIS • Remember to add Https • If not possible, use. Secure. Connection = false • • Set ping enabled to false for application pool

18 Useful tools • Localtest • You can use <your. Domain. Name>. localtest. me instead of using windows hosts file • Will not work offline • Re. Attach, a Visual Studio addon that makes it easy to attach to IIS process for debugging. • Baretail or Wintail to keep an eye on the log • Paper. Cut for local email testing

19 Login to backoffice • <mydomain>/litium • If you belong to the local administrators group in windows, use your windows account user name and password. • Otherwise, you need to change web. config to specify a different group to allow login locally.

Backoffice Settings Personal settings 20

21 Task: Install Litium Accelerator (Part 2) Return to the Accelerator site created in Part 1 and: 1. Run the site when nuget is completed (Ctrl+F 5) 2. Login to Litium Backoffice using local windows admin • http: //<your domain>/Litium • my. name@litium. com 3. Control panel > Deployment > Accelerator B 2 B/B 2 C 4. Remove /litium. . . from url to visit public website

22 Accelerator • What is deployed? • • New site in websites area New assortment in products area Fields and templates in Blocks, Customers, Websites and PIM Globalization artifacts • Channel, Country, Currency, Domain name, Market and Tax class • Explore Accelerator and backoffice • Create an order

23 Task: brief overview of Litium back-office • Create an order • In back-office • View order • View created person • Explore the products that are bought • • Base product and variants Prices Stock balances Publishing to channel • View the website and checkout page

24 Architecture

25 Web solution ASP. NET web app running on IIS Accelerator (MVC REACT) Foundation by Zurb Foundation Email by Zurb Integration - file based / Web APIs / Headless - Windows Service /ASP. NET web app running on IIS Litium API Sites Products Orders Search Campaign Engine State Transitions Field framework Querying Batching Security Dependency injection Log Customer Media Price calculations Validation rules Auditing Event Globalizatio n Infrastructure Database File Storage Service bus CDN Dashboard

26 Litium API • New API • Products – Litium 5. x • Media and Customers – Litium 6. x • Websites – Litium 7. x • Ecommerce – Litium 8. x • Service Oriented design • Each entity has its service for create/update/delete operations • Business logic in extensible interface implementations • Use decorator pattern to extend • Old API (Ecommerce module) • Based on architecture popular in year 2000 to 2010 • “Collection” classes as object creators • “Carrier” is a pure code object (no operations) • “Entity” has operations • Business logic in extensible interface implementations • Use inheritance to extend

27 Entity model • Each entity has its own “entity service” • Use the service to get, create, update and delete entities • Example:

28

29 Entity model - Updating an entity • Create a updatable copy from calling the Make. Writable. Clone() method on the entity. • Then update the cloned copy and call the update method of the respective entity service. • The objects are read. Only because “Cached“ entities should be “non modifiable”

30 Create a writable clone()

31 Entity model - Relationships between entities • Where domain model contains • “main entity” – “child entity” relationships • Other “entity” – “entity” relationships • Main entity only have “Links” to the other entities • The link has the “System. Id” of “Child entity” • Link may have other information related to the relationship

32 Link specific information Note that Tax. Class can exist on its own, but Country. To. Tax. Class. Link needs a Country to exist. Implication: Tax. Class has its own Tax. Class. Service, but there is no Country. To. Tax. Class. Link. Service

--Check whether page type already registered in db 33 SELECT * FROM [Common]. [Setting] where [Key] like ‘%Author%' Task – Create Author Page. Type 1. Copy SrcLitium. Accelerator. MvcControllersArticle. Controller. cs and paste as Author. Controller. cs 2. Copy SrcLitium. AcceleratorBuildersArticle. View. Model. Builder. cs and paste as Author. View. Model. Builder. cs 3. Copy SrcLitium. AcceleratorView. ModelsArticle. View. Model. cs and paste as Author. View. Model. cs • Modify the class name accordingly. • Modify the Mappings class accordingly. 4. Copy SrcLitium. Accelerator. MvcViewsArticleIndex. cshtml and paste as src Litium. Accelerator. Mvc ViewsAuthorIndex. cshtml • Modify the @model directive accordingly. 5. Modify SrcLitium. Accelerator. MvcDefinitionsField. Template. Setup. Decorator. cs to map the controller. 6. Copy SrcLitium. AcceleratorDefinitionsPagesArticle. Page. Template. Setup. cs and paste as Author. Page. Template. Setup. cs in the same folder • Modify the class name to Author. Page. Template. Setup. • Change the template name from “Page. Template. Name. Constants. Article” to “Author” 7. For template name, enter an entry into SrcLitium. Accelerator. MvcSiteResourcesAdministration. resx 1. Entry name key is fieldtemplate. websitearea. Author. name • Delete the template from back-office, restart site, it is not recreated! • Reason: Is. Already. Executed<T> in the SrcLitium. AcceleratorDefinitionsDefinition. Setup. cs • Entry in the Common. Settings table ; delete it from database! Need to restart site after sql operations to flush

34 Component model • Namespaces • Same namespace for domain entity and its service contract. • Example: Variant and Variant. Service in same Litium. Products namespace • Assembly Structure, examples • • • Litium. Abstractions Litium. Web. Mvc. Abstractions Litium. Web. Api. Abstractions Litium. Web. Administration. Abstractions • Implementations • Litium. Application • Litium. Infrastructure. Microsoft. Service. Bus

35 Component model - Assemblies • Litium. Abstractions • Domain entities, events and service contracts. • When there are breaking changes • Information in release notes. • Except items where namespace name include ”Internal” • Litium. Application • Implementation of service contracts. • Litium. Infrastructure. X • Implementation of external services, e. g: Service Bus

36 Service Model • Litium contracts (Services) • Artifacts that have “methods” or “operations” • Interfaces • Implement an interface to extend the functionality • Or change default functionality by extending default implementation (service decorator pattern) • Example: IPrice. Calculator • Abstract Classes • Declare service definitions that implementation projects are not expected to change. • Example: Base. Product. Service

37 Litium Service Decorator • To change or replace default implementation • Usually to inject business logic • “Strategy pattern” in software design • To inject new business logic • “Decorator pattern” in software design • Advantages over “inheritance” (subclass) • Dynamically add/replace business logic • Reference Litium abstraction namespaces only • Extend without knowing which class implements interface • https: //docs. litium. com/documentation/architecture/dependencyinjection/service-decorator

38 using Litium. Runtime. Dependency. Injection; Take note of run-time dependency! Replace business logic Modify business logic

39 custom implementation run-time depends on default implementation

40 Dependency injection Litium. Runtime. Dependency. Injection • What is it? • Say object A needs object B, the one who “creates/invokes” object A “gives” the object B to A. • Object A is not required to ”know”, how to find/create ”B” • If the reference from A to B is through an interface, the coupling between A and B is independent from implementation of B.

41 Dependency injection Litium. Runtime. Dependency. Injection

42 Litium. Runtime. Dependency. Injection Dependency injection Lifetime • Scoped • For every request within a scope (usually the web request) • Transient • A new instance of the component will be created each time the service is requested from the container • Singleton • Clients will always receive that same instance from the container

43 Dependency injection in Web. Forms

44 Security Token • In Litium, permissions are enforced by using “Security. Token” object • Security. Token. Current. Security. Token contains the security token for the logged in user • Current token is automatically “applied” in the “code execution context” • Current running code has the current logged in users permissions • Just anonymous permission if no one is logged in

45 If a user who do not have permissions calls this method, it will throw a Litium. Security. Authorization. Exception

46 Security Token – Impersonate System. User • To give “system permissions” use Security. Context. Service. Act. As. System() • E. g. . . SrcLitium. AcceleratorServicesLogin. Service. Impl. cs • Gives system permission to update the user after changing password

47 Security Token – Old API (Ecommerce) • In old api sections, token is passed into every API method that requires permission enforcement • Current Security. Token can be constructor injected • Can also be taken from Security. Token. Current. Security. Token • SrcLitium. AcceleratorServicesCheckout. Service. Impl. cs

48 Accelerator 7

Litium Accelerator 7 Most pages React Redux MVC Web api Business Logic Layer (BLL) Litium API Selected components

Improvements Accelerator 7 • A complete re-write • Total business logic separation • True MVC design pattern • Blocks instead of old sections • Settings moved into platform

51 Technical choices • Design - less is more • Zurb Foundation for Sites • Zurb Foundation for E-mails • Styles • Component based • SASS • Block, Element, Modifier methodology (BEM) • Java. Script • • Component based React Webpack No JQuery

52 MVC • Used when not much jscript needed • Litium. Accelerator. Mvc/Controllers • Litium. Accelerator. Mvc/Views • Litium. Accelerator/View. Models React + Redux • Used when lot of js is needed • Web. Pack used to compile • All client resources in folder • Litium. Accelerator. MvcClient • Litium. Accelerator. Mvc/Controllers/Api has the webapi endpoints

53 The Buy button! • To understand the frontend-backend interaction • Combines MVC rendering or buy button with Redux update of Mini cart • Its rendered in the MVC view: SrcLitium. Accelerator. MvcViewsProduct_Variant. Item. cshtml • Its on. Click invokes on. Add. To. Cart. Button. Click() jscript method

54 Buy button is rendered in the MVC view: SrcLitium. Accelerator. MvcViewsProduct_Variant. Item. cshtml @Html. Buy. Button is a extension method that creates the html

55 Html is created in: SrcLitium. Accelerator. MvcExtensionsProduct. Item. View. Model. Html. Extensions. c s On. Click Jscript function

56 Look in. /Actions/Cart. action SrcLitium. Accelerator. MvcClientScriptsindex. js

57 . /Actions/Cart. action Invokes the webapi call in endpoint /api/cart/add Implemented in: SrcLitium. Accelerator. MvcControllersApiCart. Controller. cs Use of Model. Builder to separate model building from controller action It returns a Cart json object back

58 Response received to redux state “cart” - The reducer that handles this action is Cart. reducer. js. - All components that consume this state will be updated, for example the mini cart. - At the same time, a request to show the notification is added to the state named notification. - The component Notification. Container is then rendered to show the notification message. - The Notification. Container itself has a timer to hide the notification after a certain time.

Front end code structure • Component based • ES 6 • React + Redux • No JQuery • BEM (Block, Element, Modifier methodology) for CSS • Modular: Styling independent of elements type and nesting • Avoids multilevel nesting and minimal CSS selectors • Foundation Zurb • Foundation Email

60 Globalization

61 Web solution ASP. NET web app running on IIS Accelerator (MVC REACT) Foundation by Zurb Foundation Email by Zurb Integration - file based / Web APIs / Headless - Windows Service /ASP. NET web app running on IIS Litium API Sites Products Orders Search Campaign Engine State Transitions Field framework Querying Batching Security Dependency injection Log Customer Media Price calculations Validation rules Auditing Event Globalizatio n Infrastructure Database File Storage Service bus CDN Dashboard

62 Litium. Globalization • Entities that are common across areas • • Domain. Name Tax. Class Language Currency Country Channel Market • Channel and Market has data modelling

63 Market • Programmatically a market is a “grouping of” channels • Supports data modelling • “Products are sold in a market through different channels”

64 Channel • Has domain names • Belongs to a market • May have a website • Languages • Website language • Products language • Defined for a list of countries • Supports data modelling

65 Country & Tax classes • Products “belong” to tax classes, i. e. tax class is a grouping of products • Country has tax classes, for which the VAT percentages are defined • All products in a given tax class has same VAT percentage for a given country

66 Data Modelling

67 Data modelling • Designing data requirements of the business • What information fields are needed? • What are their basic data type? • What are the relationships between entities?

68 Example • Book store • What information about the book are shown to the end customer? • Are there common information among books? • Author, whether its hard bound or paper back, Description • A separate page about each author • A separate page about publisher • Relationships between books • “You may be interested in” • “Others also bought” • Relationship between book and author • Relationship between book and publisher

69 Basic division of information requirement • What are product Data? • Data in Base Product: Author, Description • Data in Variants: Title, Bind (Hardbound, Paperback) • What are website Data? • Author pages, Publisher pages • Data in other pages: Checkout page, my pages, about us, start page, landing pages • What are Market and Channel Data? • What are the relationships among different entities?

70 Structuring data • After information for each entity is decided, it is required to decide how to structure the data in a given entity • Fields • • Name and basic type of the field Multi value fields Pointer fields Mult-fields: i. e fields of other fields • Grouping fields into “field groups” • Grouping “field groups” into “Field Template”s • How rendering of “Field template” should work is “Display template”

71 Data modelling Entities • Entities which supports data modelling • from Litium 7 are shown in green • from Litium 5 and Litium 6 versions are shown in blue

72 Field Framework Litium. Field. Framework • Handles all “dynamic” fields • Can create your own field types • Field types are per Installation • The field need not be added to the Field template to use it. • Consider field template as a grouping, and a way to point out the display template. • Field template is not the container of fields. • In accelerator, setup is done in SrcLitium. AcceleratorDefinitions

73 Field Definition • Defined for each Area • • • Litum. Web. Sites. Web. Site. Area Litium. Products. Product. Area Litium. Customers. Customer. Area Litium. Blocks. Block. Area SrcLitium. AcceleratorDefinitions

74 Field Template • The field definitions are grouped into field groups and added to a field template

75 Field Template • Fields are added to a field group by Field definition id • Field group added to template

76 Usage – Getting data from fields SrcLitium. AcceleratorBuildersProductVariant. Info. Builder. cs Extension method

Pointer Can be any entity • One field type that points to other entities • Single or multi select Pointer Image Product

Multi field • One field that is combine multiple other fields • Can be used as array Slide Image Text Link

79 Auto. Mapper automapper. org What is Auto. Mapper? “Auto. Mapper is a simple little library built to solve a deceptively complex problem - getting rid of code that mapped one object to another. This type of code is rather dreary and boring to write, so why not invent a tool to do it for us? ”

80 Auto. Mapper using Litium. Runtime. Auto. Mapper; SrcLitium. AcceleratorView. ModelsPersonsAddress. View. Model. cs Setup to copy values between Address. View. Model and Address objects And Address. View. Model and Address. Carrier (in Ecommerce) objects

81 Area: Ecommerce

82 Creating order https: //docs. litium. com/documentation/litium-documentation/sales/how-to-place-an-order Image from https: //docs. litium. com/documentation/litium-documentation/sales/checkout_flow

DEMO 83 https: //kc. litiumstudio. se/documentation/litium-documentation/sales/how-to-place-an-order

84 Checkout process • Debug through Demo • SrcLitium. AcceleratorServicesCheckout. Service. Impl. cs • Place. Order method.

85 The shopping cart • Cart object is kept in Session • Can be persisted • Saves article number and quantity • Any other information is not saved because they might change, e. g. Prices • In DB – need to be logged in • Per machine – using cookies https: //kc. litiumstudio. se/documentation/litium-documentation/sales/shopping_cart

86 Checkoutflow info • Checkout flow is the process of buying the items in the shopping cart. • Checkout. Flow. Info Keeps additional information required during checkout that is not saved in the Order • Example: Used to pass Cancel. Url and Return. Url payment providers

87 Payment providers • Used to collect payment from the end customer https: //docs. litium. com/documentation/developer-guides/sales/payment-providers https: //docs. litium. com/documentation/add-ons/payments/overview

88 Plugins in Ecommerce https: //docs. litium. com/documentation/developer-guides/sales/architecture-design https: //docs. litium. com/documentation/developer-guides/sales/architecturedesign/ecommercepluginarchitecture/ipluginselector-interface-and-plugin

89 Pricing rules • Pricing rules defines how price of a product is determined and how the order grand total and taxes are calculated • The pricing rules plugin use info from order price fields to do calculations • Plugins can be replaced by custom code https: //docs. litium. com/documentation/litium-documentation/sales/pricing_rules_1/changing-pricing-rules

90 State transitions • Order. State, Delivery. State and Paymentstate flows execute together • Payment. State inside Litium, not possible to modify • States can only be changed according to predefined conditions • The implementation project can add/remove/modify states and the various conditions and transitions among them https: //docs. litium. com/documentation/developer-guides/sales/working_with_state_transitions https: //docs. litium. com/documentation/developer-guides/sales/architecture-design/state_transition_plugin_1

91 State transitions – In Accelerator • All the transitions are done automatically based on Delivery state and Payment state transitions https: //docs. litium. com/documentation/developer-guides/sales/working_with_state_transitions/accelerator-state-transitions

92 Campaigns • A campaign has a single action and multiple conditions • All conditions need to be true for action to be applied • Possible to develop custom campaign actions & conditions https: //docs. litium. com/documentation/developer-guides/sales/campaigns