Posts

Showing posts with the label Episerver

How your site appears in google search results

Image
Search engines now look deep into site contents and try to understand more about your site e.g. Google uses structure data to understand more about the content on your page. By providing structured data we not only can get the benefit of special features like rich snippets but also our site will be eligible to appear in graphic search results. By providing structured data you can outstand your site presence in the google search results and in result increase in clickthrough. While searching keyword 'eCommerce' (from the UK, 5th of May 2020) I get the following results. These are the highlights of the page Featured snippet Related Images Article Books People also searched for FAQ and the rest of the search results. Google supports structured data in the following formats  JSON-LD  (recommended, use this format whenever possible),  Microdata , and  RDFa . Google also uses  schema.org vocabulary, but for definitive, google search behaviors, r...

Add Angular component in your EPiServer site

Image
Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps. It is easy to add Angular Components in our EpiServer MVC website with the following steps. Installations Prerequisite: Install the latest version of Node JS   before proceeding. Install Angular CLI - ( npm install -g @angular/cli ) The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console. Create New Angular Component Once prerequisites are installed, open the node js command prompt and browse to your alloy/quicksilver/EPiServer site root location. Create a new Angular application by running this command  ng new firstEPiApp –...

EPiServer CMS 11 Useful SQL Queries - 2

Here is a set of few queries that we have been using in different investigations Get usages of EPiServer contents including pages and blocks Check Table size No contents have been added for following content types Looking into Activity Logs Unmapped Property List Get usages of EPiServer contents including pages and blocks SELECT   tct.Name,    tct.ModelType,    COUNT(tc.pkID) AS PageCount FROM   tblContent AS tc RIGHT OUTER JOIN   tblContentType AS tct ON tc.fkContentTypeID = tct.pkID Where tct.ModelType is not null and tct.ModelType not like 'EPiServer.%' GROUP BY   tct.Name, tct.ModelType ORDER BY  PageCount desc Check table size EXEC sp_spaceused 'tblBigTable' No contents have been added for following content types SELECT   tct.Name,    tct.ModelType FROM   tblContent AS tc RIGHT OUTER JOIN   tblContentType AS tct ON tc.fkContentTypeID = tct.pkID Where tct.ModelType is not null a...

EPiServer CMS 11 Useful SQL Queries - 1

Here is a set of few queries that we have been using in different investigations Check How Big is your Database Get Data for Each Property and from Each Content Type Complete Tree Structure of your web site Check EPiServer DB Version Check How Big is Database SELECT      t.NAME AS TableName,     s.Name AS SchemaName,     p.rows AS RowCounts,     SUM(a.total_pages) * 8 AS TotalSpaceKB,      CAST(ROUND(((SUM(a.total_pages) * 8) / 1024.00), 2) AS NUMERIC(36, 2)) AS TotalSpaceMB,     SUM(a.used_pages) * 8 AS UsedSpaceKB,      CAST(ROUND(((SUM(a.used_pages) * 8) / 1024.00), 2) AS NUMERIC(36, 2)) AS UsedSpaceMB,      (SUM(a.total_pages) - SUM(a.used_pages)) * 8 AS UnusedSpaceKB,     CAST(ROUND(((SUM(a.total_pages) - SUM(a.used_pages)) * 8) / 1024.00, 2) AS NUMERIC(36, 2)) AS UnusedSpaceMB FROM      sys.tables t INNER JOIN       ...

Get Specific Elements Blocks from EPiServer Forms

A small extension to get the specific form elements block with all properties rather relying on   FriendlyNameInfo  with the limited set of properties. EPi Form Extensions Gist Example: Custom form element block: public   class   HiddenExternalValueElementBlock  :  HiddenElementBlockBase {     [ Display (Name =  "Enable if its a special campaign" )]      public   virtual   bool  MySpecialCampaign {  get ;  set ; }     [ Display (Name =  "Propperty 1" )]      public   virtual   bool  Property1 {  get ;  set ; }     [ Display (Name =  "Property 2" )]      public   virtual   bool  Property2 {  get ;  set ; } } Extension Methods: using  EPiServer.Core; using  EPiServer.F...

Azure based architecture for serving EPiServer CMS As Content Hub

Image
This architecture uses the Azure API Management to provide access to content from EPiServer for different channels. Contents are exposed via headless API and other Custom written APIs. Editors and admins will have secure access to EPIServer CMS. API Management is used to publish APIs to external, partner and channels, securely and at scale. Application Insights is used to detect issues, diagnose crashes and track usages. AAD - Azure Active Directory is used for secure, enterprise-grade authentication. Traffic Manager is used to determining which web app is geographically best placed to handle each request, and will be used to obtain zero downtime.  A CDN - content delivery network serves static content, such as images, script, and CSS for different channels. Azure SQL DB/Redis Cache/Azure Blob Storage to server data about the site in a high performance and highly scalable way References: Episerver headless white paper Cont...

Serialize IContent to use in Angular like front technologies

(A self note) A generic service to convert IContent into an Expando Object , ExpandoObject  can be converted into JSON to use in Angular/React components. Find the code gist  https://gist.github.com/khurramkhang/e8d4b9ef093fe30610be986efa352744 Limitations: not supporting multilingual not preparing friendly urls

Schedule Jobs revised

Schedule jobs has been revised in version 10.8. we have a new property Restartable on the ScheduledPlugIn attribute, that can be defined as following [ScheduledPlugIn(Restartable = true)] Jobs having property "Restartable=true" will make sure it can be re-run to completion in case of crashes before next schedule time. There are few considerations for developers before using this. The job should also be implemented in such a way that it can be started repeatedly.  If the job processes data, it should be able to continue where it was aborted.  It is also recommended to implement a stoppable job, but be aware that the Stop method will only be called for controlled shutdowns which can be picked up by ASP.NET, and not for uncontrolled shutdowns such as an IIS crash or other external changes. In the unlikely event the job is repeatedly cancelled, or the job it

How CDN can effect personalisation

Image
Without going into detailed benefits of CDN, generally CDNs are used to deliver the contents from fastest and closest available server.  In Episerver Digital Experience Cloud services, CDN has its own URL pointing to the original URL. The visitor will navigate to something like "www.customer.com". The request will go to the CDN, which in turn goes to the origin URL for non-cached data. The request will return to the CDN, which will cache the content.   Personalisation based on Geolocation will be effected as IP detection services will receive edge server’s IP. In a CDN setup, requests to the web server often come from an edge server and not from the actual client; therefore the HttpContext.Request.UserHostAddress property reflects the edge server's IP address rather than the connecting client's. This can be corrected by configuring the header with true IP.  Add following settings in AppSettings key="episerver:ClientIPAddressHeader" value=...

How to render SVG in edit mode

Self note: SVG is a smart media format that enables us to use same image in different sizes without compromising on quality and performance. EPiServer supports SVGs but images will not display in editor mode while using the IMG tag, as media urls are updated with version details. e.g. "globalassets/160-835st_bilok_2_screw_straight8mm_x_35mm.svg" will change as  "/episerver/CMS/Content/globalassets/en/160-835st_bilok_2_screw_straight8mm_x_35mm.svg,,1823?epieditmode=False&visitorgroupsByID=undefined". EpiServer will resolve urls for media in this way in Edit and Preview mode. In result svg will not be shown in editor mode. To display the SVG in edit mode, we will be required to resolve url in Default mode, this can be done by calling an overload of the GetUrl-method of the UrlResolver: UrlResolver.Current.GetUrl(svgContent, language, new VirtualPathArguments () { ContextMode = ContextMode.Default })

Custom Line Item Validator

Amazon offers AddOn products that can be bough with some other product only. Addon products must be removed from basket if added without the parent product. This type of validation can be done easily by implementing ILineItemValidotr interface. You can find a test implementation of custom Line Item Validator on Git. You will require to register new custom validation class implicitly into your container. It will be helpful if in future versions a generic type can be used rather ValidationIssue Enum in Validate method.

Handle Exceptions in Find

If it's repetitive, it can be automated. Think about the following requirements. Have you ever hoped there would be a better way to implement them? INotifyPropertyChanged Undo/redo Code contracts (preconditions) Logging Transaction handling Exception handling Thread dispatching Thread synchronization Immutable Authorization Audit Caching Exceptions in Find Generally we will be doing this         private SearchResults<DummyObject> GetResults()         {             try             {                 var query = client.Search<DummyObject>();                 var results = query.Take(10).StaticallyCacheFor(TimeSpan.FromMinutes(5)).GetResult();                 return results;             } ...

Blocks for EPiServer Commerce Catalog Nodes

Can we use Blocks with Catalog nodes? In theory Yes, what can stop you. We had a requirement when CMS editor can add a Carousel Block to Catalog Nodes. But Block Gadget was not available in CMS Catalog Edit Mode. Only available gadgets were Catalog, Media, Latest and Versions. From architecture point of view I was convinced that we can add ContentArea for Catalog Nodes and Blocks can be reused for Catalog Nodes also. I googled the issue and find an answer by Linus. Its simple I want to keep solution as a self note. Add the following section under your <episerver.shell> section in web.config and the blocks gadget should appear for the commerce view (given that you have not customized your view):<viewManager> <views> <add name="/episerver/commerce/catalog"> <settings> <add name="AddSharedBlocks" transformationType="Add" definitionName="EPiServer.Cms.Shell.UI.Components.SharedBlocksComponent" plugInA...

Assets and media in EpiServer Commerce 7.5

Asset management in Commerce By default the new content-based asset management system with the blob provider model  is used for adding assets to the catalog nodes and entries when manging catalogs. All files are stored in the same location as the EPiServer CMS files, providing a more unified user experience. In a Commerce installation, products and product variants from the product catalog can be accessed from the Catalogs gadget in the Assets pane, with general support for drag and drop of content items into CMS pages and blocks. The integration is done using content type classes EPiServer.Commerce.Catalog, EPiServer.Commerce.Catalog.ContentTypes and EPiServer.Commerce.Catalog.Provider. Configuration of asset management systemThe legacy Asset Management system for Commerce Manager is still available in EPiServer Commerce, but by default the new asset management system is configured to be used. A notification message with this information is displayed. The configuration setti...

Get the CatalogNode of Product Listing Page

  There are some instances when we need to know the Parent nodes of a Page based on [catalogue] Product Listing. E.g. I have a scenario when we are setting up header menus for products. Editor can select a parent Node for display child nodes as menus. But episerver classes doesnot provide any public function to return the CatalogNode of an active Product listing page. Following piece of code can help us in these scenarios. private string nodeName = string .Empty; //Is it a category listing Page bool isCatalogNodePage = BreadcrumbsFactory .IsCatalogNodePage(CurrentPage); //Is it a product listing page bool isProductPage = BreadcrumbsFactory .IsProductPage(CurrentPage);             //Get the parent catalog node/s of this page. if (isCatalogNodePage) { CatalogNode node = CurrentPage.GetParentCatalogNodeCode();        if (node != null )    ...