Blog posts by PuneetGarg2025-11-10T11:24:15.0000000Zhttps://world.optimizely.com/blogs/puneetgarg/Optimizely WorldAlgolia Search with Optimizely SAAS<h1>Algolia + Optimizely SAAS (Remko Next.js) Integration Guide</h1>
<p>This guide explains how to <strong>integrate Algolia Search with your Optimizely SaaS CMS project</strong> built on the <strong>Remko Starter Kit (Next.js)</strong>.<br />It focuses on the <strong>Crawl Method</strong>, which automatically indexes your published Optimizely pages into Algolia — without manual API synchronization.</p>
<p> </p>
<h2> Overview</h2>
<p><strong>Algolia</strong> is a powerful, fully managed search-as-a-service platform that delivers lightning-fast, relevant, and typo-tolerant search results.</p>
<p>When connected with <strong>Optimizely SaaS</strong>, you can enable:</p>
<ul>
<li>
<p>Real-time full-text search</p>
</li>
<li>
<p>Category or keyword-based filtering</p>
</li>
<li>
<p>Faceted navigation</p>
</li>
<li>
<p>Personalized content discovery</p>
</li>
</ul>
<p>With the <strong>Crawl Method</strong>, Algolia automatically reads and indexes your Optimizely site content — no backend coding required.</p>
<p> </p>
<h2> Prerequisites</h2>
<p>Make sure you have the following ready before you begin:</p>
<div class="_tableContainer_1rjym_1">
<div class="group _tableWrapper_1rjym_13 flex w-fit flex-col-reverse">
<table class="w-fit min-w-(--thread-content-width)">
<thead>
<tr>
<th>Requirement</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>✅ Optimizely SaaS CMS</td>
<td>Project built on <strong>Remko Starter Kit (Next.js)</strong></td>
</tr>
<tr>
<td>✅ Node.js</td>
<td>Version <strong>18+</strong></td>
</tr>
<tr>
<td>✅ Algolia Account</td>
<td>create from Algolia site</td>
</tr>
<tr>
<td>✅ Optimizely API Credentials</td>
<td><em>(Only needed if you plan to fetch content manually)</em></td>
</tr>
</tbody>
</table>
<p> </p>
<h2> Setting Up the Algolia Crawler</h2>
<ol>
<li>
<p>Log in to your <strong>Algolia Dashboard</strong> → <strong>Crawler</strong> section.</p>
</li>
<li>
<p>Click <strong>“Create a new crawler.”</strong></p>
</li>
<li>
<p>Add your site URL — e.g.</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4"><code class="whitespace-pre!">https:<span class="hljs-comment">//optimizely-something.vercel.app/</span>
</code></div>
</div>
</li>
<li>
<p>Define your crawling rules — typically, you’ll want to include pages that have:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4"><code class="whitespace-pre! language-html"><span class="hljs-tag"><<span class="hljs-name">meta</span></span> <span class="hljs-attr">name</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"..."</span> /></code></div>
<div class="overflow-y-auto p-4"><code class="whitespace-pre! language-html"><span class="hljs-tag"><<span class="hljs-name">meta</span></span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"..."</span> /></code></div>
<div class="overflow-y-auto p-4"><code class="whitespace-pre! language-html"><span class="hljs-tag"><<span class="hljs-name">meta</span></span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"..."</span> />
</code></div>
</div>
</li>
<li>
<p>Start the crawl. Once complete, Algolia will automatically create an <strong>index</strong> containing your site’s structured content.</p>
</li>
</ol>
<p><em>Tip:</em> You can view and fine-tune your index data in <strong>Algolia → Indices → [your index name]</strong>.</p>
<p> </p>
<h2> Environment Variables</h2>
<p>These variables connect your frontend with your Algolia app.</p>
<div class="_tableContainer_1rjym_1">
<div class="group _tableWrapper_1rjym_13 flex w-fit flex-col-reverse">
<table class="w-fit min-w-(--thread-content-width)">
<thead>
<tr>
<th>Variable</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ALGOLIA_APP_ID</code></td>
<td>Identifies your Algolia app</td>
</tr>
<tr>
<td><code>ALGOLIA_SEARCH_KEY</code></td>
<td>Safe public key for frontend search</td>
</tr>
<tr>
<td><code>ALGOLIA_INDEX_NAME</code></td>
<td>Your index name in Algolia</td>
</tr>
<tr>
<td><code>ALGOLIA_ADMIN_KEY</code></td>
<td>Private admin key (backend use only)</td>
</tr>
<tr>
<td><code>OPTIMIZELY_API_URL</code></td>
<td>Only required for API-based indexing</td>
</tr>
<tr>
<td><code>OPTIMIZELY_API_KEY</code></td>
<td>Access token if using Optimizely REST API</td>
</tr>
</tbody>
</table>
<p> </p>
<p><strong>Note:</strong></p>
<ul>
<li>
<p><code>NEXT_PUBLIC_</code> prefix is required so your keys are available in the browser.</p>
</li>
<li>
<p>Do <strong>not</strong> include your <code>ALGOLIA_ADMIN_KEY</code> in frontend code — it’s sensitive.</p>
</li>
</ul>
<p> </p>
<h2> Add Algolia to Your Next.js App</h2>
<p>Install the required dependencies:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4"><code class="whitespace-pre! language-bash">npm install algoliasearch react-instantsearch
</code></div>
</div>
<p> </p>
<hr />
<h2> Implementing the Search Component</h2>
<p>Create a file like <code>components/Search.tsx</code>:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4">
<pre class="language-html"><code>import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch';
const searchClient = algoliasearch(
process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY!
);
export default function Search() {
return (
<InstantSearch
searchClient={searchClient}
indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME!}
>
<div className="p-6">
<SearchBox />
<Hits hitComponent={Hit} />
</div>
</InstantSearch>
);
}
function Hit({ hit }: any) {
return (
<div className="p-4 border-b border-gray-200">
<h3 className="font-semibold text-lg">{hit.title}</h3>
<p className="text-gray-600">{hit.description}</p>
</div>
);
}
</code></pre>
<p>Note - you can add pagination , facet and other stuff as well.</p>
<h2> Deploying to Vercel</h2>
<ul>
<li>
<p>Push your code to GitHub (or GitLab/Bitbucket).</p>
</li>
<li>
<p>Connect your repo to <strong><a class="decorated-link" href="https://vercel.com">Vercel</a></strong>.</p>
</li>
<li>
<p>In Vercel → <strong>Project Settings → Environment Variables</strong>, add the same values as in your <code>.env.local</code>.</p>
</li>
<li>
<p>Click <strong>Deploy</strong> — your search-enabled Optimizely SaaS site goes live!</p>
</li>
</ul>
<p> </p>
<p> Advantages of Using Algolia with Optimizely SaaS</p>
<table>
<thead>
<tr>
<th>Benefit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Ultra-Fast Search</strong></td>
<td>Delivers instant search results with minimal latency using Algolia’s distributed infrastructure.</td>
</tr>
<tr>
<td><strong>Intelligent Relevance</strong></td>
<td>Built-in typo tolerance, synonyms, and ranking formulas improve result accuracy.</td>
</tr>
<tr>
<td><strong>No Backend Complexity</strong></td>
<td>The crawler eliminates the need for building sync APIs — setup takes minutes.</td>
</tr>
<tr>
<td><strong>Highly Customizable UI</strong></td>
<td>Algolia’s React InstantSearch library allows you to create dynamic and interactive search interfaces.</td>
</tr>
<tr>
<td><strong>Built-in Analytics</strong></td>
<td>Gain insights into user behavior, popular searches, and zero-result queries.</td>
</tr>
<tr>
<td><strong>Scalable & Cloud-Hosted</strong></td>
<td>Perfectly complements Optimizely SaaS’s headless architecture and cloud hosting model.</td>
</tr>
<tr>
<td><strong>Secure Key Management</strong></td>
<td>Use public search keys on frontend, while keeping admin keys private for backend-only tasks.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>2025-11-10T11:24:15.0000000ZBlog postIntegrating Address Validation in Optimizely Using Smarty<p>Address validation is a crucial component of any ecommerce platform. It ensures accurate customer data, reduces shipping errors, and improves the overall user experience. In this post, we’ll walk through how to integrate address validation in Optimizely (formerly Episerver) using <a class="" href="https://www.smarty.com/">Smarty</a> with the <code>smartystreets-dotnet</code> SDK.</p>
<p> </p>
<h3><strong>Why Smarty?</strong></h3>
<p>Smarty provides powerful APIs for:</p>
<ul>
<li>
<p>Autocompleting address input</p>
</li>
<li>
<p>Verifying domestic and international addresses</p>
</li>
<li>
<p>Validating zip/postal codes</p>
</li>
</ul>
<p>It offers both US-specific and international endpoints, making it suitable for global ecommerce implementations.</p>
<p> </p>
<h2><strong>Setting Up Smarty in Optimizely</strong></h2>
<h3>1. <strong>Configure Credentials</strong></h3>
<p>First, define your configuration model to hold Smarty credentials:</p>
<pre class="language-csharp"><code>public class SmartyConfiguration
{
public string ApplicationId { get; set; }
public string ApplicationSecret { get; set; }
}
</code></pre>
<p> </p>
<p>Extend your configuration setup:</p>
<pre class="language-csharp"><code>public static class SmartyConfigurationLoader
{
public static IConfiguration SmartyConfiguration(this IConfiguration configuration) =>
configuration.GetSection("SmartyConfiguration");
}
</code></pre>
<p> </p>
<h3>2. <strong>Define Smarty Settings for Your CMS</strong></h3>
<p>Create a model for managing country exclusions:</p>
<pre class="language-csharp"><code>public class SmartySettingsModel
{
[JsonProperty("autocompleteExcludedCountries")]
public string AutocompleteExcludedCountries { get; set; }
[JsonProperty("verificationExcludedCountries")]
public string VerificationExcludedCountries { get; set; }
}
</code></pre>
<p>Display settings in the UI using a ViewComponent:</p>
<pre class="language-csharp"><code>public class SmartySettingsViewComponent : ViewComponent
{
private readonly ISmartyService _smartyService;
public SmartySettingsViewComponent(ISmartyService smartyService)
{
_smartyService = smartyService;
}
public IViewComponentResult Invoke()
{
var viewModel = _smartyService.GetSettings();
return View("~/Features/Smarty/Components/SmartySettings/Default.cshtml", viewModel);
}
}
</code></pre>
<h3>3. <strong>Implement the Smarty Controller</strong></h3>
<p>The controller handles front-end requests for autocomplete and address validation:</p>
<pre class="language-csharp"><code>[Route("smarty/autocomplete")]
public IActionResult Autocomplete(AutocompleteRequestModel model)
[Route("smarty/street")]
public IActionResult Street(...)
</code></pre>
<p>Both actions use a caching layer to optimize repeated queries.</p>
<h3>4. <strong>Create the Smarty Service</strong></h3>
<p>The heart of the integration is the <code>SmartyService</code> that communicates with the Smarty APIs:</p>
<ul>
<li>
<p><strong>US Autocomplete</strong> via <code>USAutocompleteProApi</code></p>
</li>
<li>
<p><strong>International Autocomplete</strong> via <code>InternationalAutocompleteApi</code></p>
</li>
<li>
<p><strong>US Street Verification</strong> via <code>USStreetApi</code></p>
</li>
<li>
<p><strong>International Address Verification</strong> via <code>InternationalStreetApi</code></p>
</li>
</ul>
<p>Example method:</p>
<pre class="language-csharp"><code>public object Autocomplete(AutocompleteRequestModel request)
{
// Handles US or international logic
}
public object Street(AddressModel addressModel)
{
// Determines whether to use US or international client
}
</code></pre>
<p>Fallback strategies like trying with placeholder streets (“A” or “B”) for ZIP code validation enhance reliability (if your checkout don't have full address.)<br /><br /><br /></p>
<h2><strong>Client-side JavaScript Integration</strong></h2>
<p>You can call <code>/smarty/autocomplete</code> or <code>/smarty/street</code> from your JavaScript to power address suggestions and validation. For example:</p>
<pre class="language-javascript"><code>fetch(`/smarty/autocomplete?countryCode=USA&line1=123 Main`)
.then(response => response.json())
.then(data => {
// Render autocomplete suggestions
});
</code></pre>
<p> </p>
<p>Customize your UI interactions based on the response schema.</p>
<p> </p>
<p> </p>
<h2><strong>Benefits of Smarty Integration</strong></h2>
<ul>
<li>
<p><strong>Improved accuracy</strong> in shipping addresses</p>
</li>
<li>
<p><strong>Reduced failed deliveries</strong></p>
</li>
<li>
<p><strong>Better customer experience</strong> with live autocomplete</p>
</li>
<li>
<p><strong>Support for international addresses</strong></p>
</li>
</ul>
<p> </p>
<h2><strong>Conclusion</strong></h2>
<p>Integrating address validation using Smarty in Optimizely helps elevate your e-commerce platform’s user experience. Smarty becomes a powerful ally for global address accuracy with robust APIs and thoughtful error handling.</p>2025-05-21T17:26:03.0000000ZBlog postShared optimizely cart between non-optimizley front end site<p>E-commerce ecosystems often demand a seamless shopping experience where users can shop across multiple sites using a single cart. Sharing a cart between an Optimizely site and a non-Optimizely site can be a challenge, but it's achievable with the right strategy. Here's a guide on how to set this up.</p>
<h4><strong>Overview</strong></h4>
<p>The goal is to enable users to share their cart and product information seamlessly across platforms. We achieve this by creating APIs that interact with the cart and product information. I've not added API's here.This implementation covers two scenarios:</p>
<ol>
<li><strong>Logged-In Users</strong></li>
<li><strong>Anonymous Users</strong></li>
</ol>
<h3><strong>1. Handling Logged-In Users</strong></h3>
<p>For logged-in users, leveraging their <strong>SSOID</strong> ensures that their context, including customer information and cart data, is consistent across sites. The SSOID is passed in the request header from the front end to the API.</p>
<p> </p>
<h4><strong>Implementation Steps</strong></h4>
<ol>
<li>
<p><strong>Capture SSOID from Header</strong><br />Use the <code>Request.Headers</code> to extract the userId (SSOID) in the backend.</p>
<pre class="language-csharp"><code>Request.Headers.TryGetValue("userId", out var ssoId);
</code></pre>
</li>
<li><strong>Fetch Customer Contact</strong><br />Using the SSOID, retrieve the logged-in user's context and cart data.
<pre class="language-csharp"><code>private static CustomerContact GetCustomer(string ssoId)
{
var currentContact = CustomerContext.Current.CurrentContact;
if (string.IsNullOrEmpty(ssoId))
return currentContact;
currentContact = CustomerContext.Current.GetContactByUserId($"String:{ssoId}");
return currentContact;
}
</code></pre>
</li>
<li><strong>Sync Cart Data</strong>With the <code>CustomerContact</code> object, the cart data can be fetched and synced between the sites.</li>
</ol>
<h4><strong>Key Notes</strong></h4>
<ul>
<li>Ensure that the SSOID is securely transmitted in the header.</li>
<li>Proper error handling is crucial to avoid unexpected failures if the SSOID is missing or invalid.</li>
</ul>
<p> </p>
<h3><strong>2. Handling Anonymous Users</strong></h3>
<p>Anonymous users lack a consistent SSOID, but their session can still be tracked using a cookie (<code>EPiServer_Commerce_AnonymousId</code>).</p>
<h4><strong>Implementation Steps</strong></h4>
<ol>
<li>
<p><strong>Capture Anonymous ID from Cookies</strong><br />Extract the cookie value that stores the anonymous user ID.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-csharp"><code> Request.Cookies.TryGetValue("EPiServer_Commerce_AnonymousId", out var cookieValue); </code></pre>
</div>
</div>
</div>
<div class="overflow-y-auto p-4"><code class="!whitespace-pre hljs language-csharp"></code><strong>Use Anonymous Cart</strong><br />With the <code>cookieValue</code>, fetch the anonymous user's cart from the backend.</div>
</div>
</li>
<li>
<p><strong>Share Cart Across Sites</strong><br />Sync the cart data between the sites using the retrieved anonymous user ID.</p>
</li>
</ol>
<h4><strong>Key Notes</strong></h4>
<ul>
<li>Cookies must be configured for cross-domain access if the sites are hosted on different domains.</li>
<li>Ensure proper handling of cookie expiration and invalidation scenarios.</li>
</ul>
<p> </p>
<h3><strong>API Design</strong></h3>
<p>Below is a high-level example of how the API endpoints could look:</p>
<h4><strong>Get Cart for Logged-In User</strong></h4>
<p><strong>Endpoint</strong>: <code>GET /api/cart/loggedin</code></p>
<p><strong>Header: </strong><span style="background-color: #f5f2f0; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; word-spacing: normal;">userId: <SSOID></span></p>
<h4><strong>Get Cart for Anonymous User</strong></h4>
<p><strong>Endpoint</strong>: <code>GET /api/cart/anonymous</code><br /><strong>Cookie</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-csharp"><code>EPiServer_Commerce_AnonymousId=<cookieValue></code></pre>
</div>
</div>
</div>
<div class="overflow-y-auto p-4"> </div>
</div>
<h4><strong>Response Example</strong></h4>
<p>Both endpoints would return the cart in a standardized format, e.g.:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="overflow-y-auto p-4"><code class="!whitespace-pre hljs language-json"><code class="!whitespace-pre hljs language-json"></code></code>
<pre class="language-csharp"><code>{
"items": [
{
"productId": "12345",
"name": "Product A",
"quantity": 2,
"price": 50.0
},
{
"productId": "67890",
"name": "Product B",
"quantity": 1,
"price": 25.0
}
],
"total": 125.0
}
</code></pre>
<code class="!whitespace-pre hljs language-json"> </code></div>
</div>
<hr />
<h3><strong>Conclusion</strong></h3>
<p>By leveraging SSOID for logged-in users and cookies for anonymous users, we ensure a seamless shopping experience across sites. With a robust API that interacts with the cart and product information, users can enjoy a unified cart system, enhancing user satisfaction and driving conversions.</p>
<p> </p>
<p>Note:- This is the work only when all sites share the same top main domain.</p>2024-12-03T18:01:39.0000000ZBlog postHeadless with Content Delivery API<p>Hello Everyone,</p>
<p>This blog will help anyone who wants to start or build an architecture of headless using content delivery api.</p>
<p>When we shifted to headless CMS 12 my first question was how content would be fetched from the front end (I know we have direct API's for them) it's about the building JSON for those pages or blocks.</p>
<p>So I'll share my code experience step by step (I'm taking an example of a page but we can do the same for blocks)</p>
<ol>
<li>Create a normal Page Type.</li>
<li>Now how will your compiler know which page it has to run we are not directly calling it from view to controller as we are used to it in normal architecture so for that we will create ApiFilters(it will run all every call)
<ul>
<li>Register that Api Filter as Singleton like this _services.AddSingleton<IContentApiModelFilter, ProductCollectionPageApiModelFilter>();</li>
<li>Inside your filter, you need to check if the current request matches your type If not return and do nothing.</li>
<li>If it matches your type then we need to create custom code to add our contentarea to our JSON results for that we will create a method where we will do our filtering and binding our model that will be passed in JSON.</li>
<li>
<pre class="language-csharp"><code>public void AddContentAreaItemsToContentApiModel(string key, ContentArea contentArea, ContentApiModel contentApiModel)
{
var items = new Dictionary<string, object>();
if (contentArea == null || contentArea.FilteredItems == null)
{
contentApiModel.Properties.Add(key, items);
return;
}
var Filtereditems = contentArea.FilteredItems;
var index = 0; //Will be appended to the item name in the contentApiModel to prevent duplicate keys in case we have multiples of the same block type
foreach (var contentAreaItem in Filtereditems)
{
_contentLoader.TryGet<IContent>(contentAreaItem.ContentLink, out var content);
if (content == null)
continue;
switch (content)
{
// all blocks and pages that will be there in the content area create a case for it like this
case PageType x:
{
items.Add(nameof(PageType ) + "_" + index, _commerceViewModelBuilder.GetPageDetails(x));
index++;
break;
}
default:
{
index++;
break;
}
}
}
contentApiModel.Properties.Add(key, items);
}
</code></pre>
</li>
<li>this filter will create a key-value pair which will be our JSON result.</li>
<li>GetPageDetails -> method that will accept that type and create the model we want to add.</li>
</ul>
</li>
<li>Add this method to our Page type filter, and call your content area in that to filter all things example
<pre class="language-csharp"><code> public class PageApiModelFilter : ContentApiModelFilter<ContentApiModel>
{
public override void Filter(ContentApiModel contentApiModel, ConverterContext converterContext)
{
try
{
if (!_contentLoader.TryGet(converterContext.ContentReference, out ProductCollectionPage productCollectionPage) || productCollectionPage is not ProductCollectionPage)
{
return;
}
AddContentAreaItemsToContentApiModel(nameof(productCollectionPage.TopContentArea), productCollectionPage.TopContentArea, contentApiModel);
AddContentAreaItemsToContentApiModel(nameof(productCollectionPage.MainContentArea), productCollectionPage.MainContentArea, contentApiModel);
AddContentAreaItemsToContentApiModel(nameof(productCollectionPage.BottomContentArea), productCollectionPage.BottomContentArea, contentApiModel);
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
</code></pre>
</li>
</ol>
<p>4. Now you can call your API from the front end using ID or any other means and in JSON you will have all data that was serialized.</p>
<p>If you want to remove extra data pre and post serialization you can refer to my other blog here is the link <a href="/link/a7fcc0c8245a45adb5a2cec79f0687ff.aspx">https://world.optimizely.com/blogs/puneetgarg/dates/2024/9/remove-unwanted-properties-for-headless-implementation-using-content-delivery-api-/</a></p>
<p>Hope that helps!</p>
<p>Thank you </p>
<p> </p>2024-10-15T15:41:30.0000000ZBlog postRemove Unwanted properties for Headless Implementation using Content Delivery API <p>While working with Headless, whenever we want to send data to the front end, many properties are also shown in JSON that we don't wish to, which creates a big and unreadable response.</p>
<p>To refactor that we can create Filter which will kick before and after every call.</p>
<p>Example:-</p>
<p><strong>PreSerialization Content filter </strong></p>
<ul>
<li>This class prevents the serialization of certain properties before the serialization</li>
<li>Register that Service as Singleton </li>
</ul>
<pre class="language-csharp"><code>internal class PreSerializationContentFilter : ContentFilter<IContent>
{
public override void Filter(IContent content, ConverterContext converterContext)
{
content.Property.Remove("TopContentArea");
content.Property.Remove("MainContentArea");
content.Property.Remove("BottomContentArea");
content.Property.Remove("MetaTitle");
content.Property.Remove("MetaKeywords");
content.Property.Remove("MetaDescription");
content.Property.Remove("DisableIndexing");
content.Property.Remove("EnableNoFollow");
content.Property.Remove("OgContentType");
content.Property.Remove("Categories");
}
}</code></pre>
<p><strong>PostSerialization ApiModelFilter</strong></p>
<ul>
<li>This generic class adds properties to the ContentApiModel after the serialization before sending the request</li>
<li>Register that Service as Singleton </li>
</ul>
<pre class="language-csharp"><code> public class PostSerializationApiModelFilter : ContentApiModelFilter<ContentApiModel>
{
public override void Filter(ContentApiModel contentApiModel, ConverterContext converterContext)
{
try
{
// Set those values below as null, and configure ContentApiOption.IncludeNullValues = false in Initialization
// then, response data will not include those ones.
contentApiModel.ContentLink = null;
contentApiModel.Language = null;
contentApiModel.ExistingLanguages = null;
contentApiModel.MasterLanguage = null;
contentApiModel.ParentLink = null;
contentApiModel.StartPublish = null;
contentApiModel.StopPublish = null;
contentApiModel.RouteSegment = null;
contentApiModel.Changed = null;
contentApiModel.Created = null;
contentApiModel.Saved = null;
contentApiModel.Status = null;
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
}</code></pre>
<p>Using these classes you can remove unwanted properties.</p>
<p>Hope that helps !! :-) </p>2024-09-04T14:45:50.0000000ZBlog postRetain Cart when market is change<p><span>A cart is a collection of products that are selected by a website customer.</span></p>
<p><span>Working on multi-market site, comes with a problem when we switch from one market to another market it does create new cart for each market.</span></p>
<p><span><strong>Note from optimizely</strong> :- <em>Carts are market-dependent, so are unique to a user and market, instead of just a user. If a site lets a user switch markets, then switching the market may also switch associate carts to a new or different carts.</em></span></p>
<p><span>So, here is my solution for this instead of recreating the whole cart, we can just change the market fields and payment data in cart and market data in cookie(i.e for users).</span></p>
<p><span><strong>Step-1</strong> </span></p>
<p><span>Delete if any existing carts are present to your desitination market.</span></p>
<pre class="language-csharp"><code> var userId = _customerContext.CurrentContactId.ToString();
var cartName = cart.Name;
var previousCart = _orderRepository.LoadCart<ICart>(new Guid(userId), cartName, selectedShippingAddressRegion);
if (previousCart != null)
_orderRepository.Delete(previousCart.OrderLink);</code></pre>
<p><span> </span></p>
<p><strong>Step-2</strong></p>
<p><span>Change Market data in current cart</span></p>
<pre class="language-csharp"><code>cart.MarketId = new MarketId(destinationMarket);
var marketName = _marketManager.GetAllActiveMarkets().Where(c => c.IsEnabled)
.FirstOrDefault(x => x.MarketId.Value == destinationMarket)?.MarketName;
cart.MarketName = marketName;
this._orderRepository.Save(cart);</code></pre>
<p><span> </span></p>
<p><strong>Step-3 </strong></p>
<p><span>Update cookie with destinatin market</span></p>
<pre class="language-csharp"><code> var market = GetMarket(marketId);
SiteContext.Current.Currency = market.DefaultCurrency;
_cookieService.Set(MarketCookie, marketId.Value);
MarketEvent.OnChangeMarket(market, new EventArgs());</code></pre>
<p><strong>Step-4 </strong></p>
<div>
<div><span>Updated cart amount(price) with new price from commerce manager</span> </div>
</div>
<pre class="language-csharp"><code>if (cart != null)
{
UpdateLineItemPrice(cart);
_orderRepository.Save(cart);
}
public void UpdateLineItemPrice(ICart cart)
{
if (cart == null)
return;
foreach (var lineItem in cart.GetAllLineItems())
{
lineItem.PlacedPrice = _priceCalculationManager.GetSalePrice(lineItem.Code, cart.MarketId, cart.Currency).UnitPrice.Amount;
}
ValidateCart(cart);
}
</code></pre>
<p>Result:- With these steps when we change the market it will carry our current cart to new market with updated market fields and price.</p>
<p><strong>Notes :- </strong></p>
<ul>
<li>All service call made with dependency injection and all of them are present with optimizely liberary.</li>
<li>Depending with impemention of cart , we might need to update shipping address as well it will be similar like what we did with price.</li>
<li>Price should be present at the variant level in commerce manager with respect to market.</li>
</ul>2024-01-16T16:32:33.0000000ZBlog postOutput Cache Options in Optimizely CMS 12<h2><span style="font-family: 'times new roman', times, serif; font-size: 18pt;"><strong>Let's start with the basics what is Output Caching?</strong></span></h2>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Output Cache is a feature that allows you to store the rendered output of a webpage in memory or on disk, so subsequent requests for the same page can be served directly from the cache without executing the entire page rendering process again. This helps to improve the performance and scalability of your website.</span></p>
<ul>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Before CMS 12 output caching was inbuilt but it got cut off in cut off in September 2021.</span></li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">However, Optimizely CMS provides caching mechanisms at various levels to optimize performance. Here are some examples:</span>
<ul>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Fragment Caching</span></li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Response caching </span></li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Block Caching</span></li>
</ul>
</li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">If you are on DXP use CDN ( Content Delivery Network )</span></li>
</ul>
<h3><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong>Fragment Caching:-</strong></span></h3>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Fragment caching can be implemented to improve the performance of your website by caching specific parts or fragments of a page.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Example (Generic):-</span></p>
<ul>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Identify the dynamic content within your page or user control that you want to cache. Let's assume you have a dynamic content block that displays the current date and time.</span></p>
</li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Wrap the dynamic content with the <code>CachedFragment</code> control. This control defines the portion of content that will be cached. Here's an example:</span>
<pre class="language-markup"><code>@using EPiServer.Web.Mvc.Html
@using System.Web.Mvc.Html
@{
var cacheKey = "FragmentCacheKey";
var cacheDuration = new TimeSpan(0, 10, 0); // Cache for 10 minutes
}
@Html.Cache(cacheKey, cacheDuration, () =>
{
// Content to cache goes here
<div>
<!-- Your fragment content -->
</div>
})
</code></pre>
</li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Save your page or user control. The dynamic content wrapped in the <code>CachedFragment</code> control will now be cached for subsequent requests within the specified duration.</span></li>
</ul>
<h3><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong>Block Caching:-</strong></span></h3>
<ul>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Use the Block Caching feature to cache individual blocks and serve their rendered output directly from the cache on subsequent request</span></li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Here's an example of how to use Block Caching:</span>
<ul>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Identify the block type that you want to cache. Let's assume you have a block type called <code>MyBlock</code> that represents a frequently accessed block.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Add the <code>[Cache]</code> attribute to your block class, specifying the caching duration in seconds. Here's an example:</span></p>
<pre class="language-csharp"><code>[Cache(Duration = 3600)] // Cache duration of 3600 seconds (1 hour)
public class MyBlock : BlockData
{
// Block properties
}
</code></pre>
</li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Use the <code>MyBlock</code> in your page or content area. The first request to render the page will generate the block's output, and it will be cached. Subsequent requests within the caching duration will retrieve the cached output instead of executing the block's code again.</span></li>
</ul>
</li>
</ul>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong>Note:- <span class="ui-provider cex cey c d e f g h i j k l m n o p q r s t cez cfa w x y z ab ac ae af ag ah ai aj ak">block cache does not automatically invalidate when you publish content. By default, the block cache is not tied to the publishing process</span></strong></span><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong></strong></span></p>
<h3><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong>Response caching </strong></span></h3>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Response caching to cache the entire output of a specific action or controller, improving the performance and reducing the load on your server.<strong></strong></span></p>
<ul>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Adding response caching may cause a stale response to be delivered.</span>
<pre class="language-csharp"><code>using Microsoft.AspNetCore.Mvc;
[ResponseCache(Duration = 3600)] // Cache for 1 hour
public class HomeController : Controller
{
public IActionResult Index()
{
// Action logic goes here
return View();
}
}
</code></pre>
</li>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Using response caching may cause contents to not update instantly after publishing from CMS, and causes differences among web instances of a load-balanced environment.</span><br /><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Response caching should not be used if you have <code class="rdmd-code lang- theme-light"><span class="cm-s-neo">Html.RenderEPiServerQuickNavigatorAsync()</span></code> in Razor view.</span></li>
</ul>
<ul>
<li><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Here is the link for the response caching.</span><br /><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><a href="https://learn.microsoft.com/en-us/aspnet/core/performance/caching/middleware?view=aspnetcore-5.0">https://learn.microsoft.com/en-us/aspnet/core/performance/caching/middleware?view=aspnetcore-5.0</a></span></li>
</ul>
<h3><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong>CDN Caching</strong></span></h3>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong>Purge CDN Cache</strong> clears cached content on server proxies so that visitors can get the latest page versions.</span></p>
<p><strong><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">To configure a CDN (Content Delivery Network) with a DXP (Digital Experience Platform) account in Optimizely CMS 12, you'll need to follow these steps:</span></strong></p>
<ul>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Choose a CDN provider: Select a CDN provider that suits your needs. Some popular CDN providers include Cloudflare, Akamai, Amazon CloudFront, and Fastly.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Set up CDN with your provider: Sign up for a CDN service and follow their instructions to configure the CDN. This typically involves creating a CDN distribution or configuring an existing one. Refer to your CDN provider's documentation for detailed instructions.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Obtain CDN URL: Once your CDN is set up, you will be provided with a CDN URL or endpoint that you can use to serve your static assets.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Update DXP configuration: In your Optimizely DXP account, you need to update the configuration to use the CDN for serving static assets. This involves modifying the web.config file in your DXP solution.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">a. Access your DXP solution's web.config file.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">b. Locate the <code><episerver.staticContent></code> section and add the following configuration to use the CDN URL:</span></p>
<div class="bg-black rounded-md mb-4">
<div class="p-4 overflow-y-auto">
<pre class="language-markup"><code><episerver.staticContent> <clientResources baseUrl="https://yourcdnurl.com" /> </episerver.staticContent></code></pre>
</div>
</div>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Replace <code>https://yourcdnurl.com</code> with the base URL of your CDN.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Verify CDN integration: After saving the web. config changes, deploy, and test your DXP solution to ensure that the static assets are being served through the CDN. Inspect the source code of your web pages and confirm that the URLs of the static assets are now pointing to the CDN domain.</span></p>
</li>
</ul>
<p><strong><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Here's an example of how you can configure CDN caching with Optimizely CMS 12 using a popular CDN provider, Cloudflare:</span></strong></p>
<ul>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Enable CDN support: Sign up for a Cloudflare account and follow their setup instructions to configure your Optimizely CMS 12 website to work with Cloudflare as your CDN. This typically involves updating your DNS settings to point your domain to Cloudflare's servers.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Configure caching headers in Optimizely CMS 12: In the Optimizely CMS 12 administration interface, navigate to the "Admin" section and go to "Configurations". Select "Manage Websites" and choose your website. Under the "Site Settings" tab, look for the "Static files" section.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Set the appropriate caching headers for your static files. For example, you can set the "Cache-Control" header to <code>public, max-age=86400</code> to cache static files for 24 hours.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Verify CDN caching: After configuring the caching headers, you can verify that CDN caching is working by checking the caching headers returned for your assets. You can use browser developer tools or tools like cURL or Postman to inspect the response headers.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">For example, you can run the following cURL command to check the caching headers for a specific CSS file:</span></p>
<div class="bg-black rounded-md mb-4">
<div class="p-4 overflow-y-auto"><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><code class="!whitespace-pre hljs language-arduino">curl -I https:<span class="hljs-comment">//www.example.com/css/style.css</span>
</code></span></div>
</div>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Look for the "Cache-Control" and "Expires" headers in the response to ensure they reflect the desired caching behavior.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Cache invalidation: Cloudflare provides several options for cache invalidation:</span></p>
<ul>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Manual cache invalidation: You can manually purge or clear specific URLs from the Cloudflare cache whenever the content is updated in Optimizely CMS 12. Cloudflare provides a RESTful API that allows you to make purge requests.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Versioning or fingerprinting: Modify the URLs of your assets whenever they change by appending a version number or fingerprint to the URL. For example:</span></p>
<div class="bg-black rounded-md mb-4">
<div class="p-4 overflow-y-auto"><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><code class="!whitespace-pre hljs language-bash"><<span class="hljs-built_in">link</span> rel=<span class="hljs-string">"stylesheet"</span> href=<span class="hljs-string">"https://www.example.com/css/style.css?v=2"</span>>
</code></span></div>
</div>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">This technique ensures that the updated asset is considered a new resource by the CDN cache, and it retrieves the latest version.</span></p>
</li>
<li>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Time-based cache invalidation: Set shorter cache durations for specific assets that require frequent updates. For example, you can set a cache duration of <code>max-age=300</code> (5 minutes) for a CSS file that frequently changes.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Choose the appropriate cache invalidation strategy based on your content update frequency and requirements.</span></p>
</li>
</ul>
</li>
</ul>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Remember to consult Cloudflare's documentation for specific instructions on cache invalidation methods and API usage.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">By configuring CDN caching with Optimizely CMS 12 and Cloudflare, you can take advantage of CDN's edge caching to serve your static assets faster and reduce the load on your origin server.</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Thank you for reading it !!</span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong></strong></span></p>
<p><span style="font-family: 'times new roman', times, serif; font-size: 14pt;"><strong></strong></span></p>2023-05-16T10:54:39.0000000ZBlog postContent Migration from one to another property for live site<p>In one of my projects I recently faced an issue where we have to change all the standard category properties to <strong>IList<ContentReference> </strong>and the site was live so we just couldn't take the field and get it over with.</p>
<p>So I create new IList<ContentReference> properties and migrate the data and change the logic. Here are the steps that I followed.</p>
<h3><span style="font-size: 18pt;"><strong>Step To follow:-</strong></span></h3>
<ul>
<li>
<ul>
<li><strong>Create new fields -- for all categories while don't remove old ones once</strong></li>
<li><strong>Create a scheduled job that migrates data from the old field to the new field</strong></li>
<li><strong>Switch the logic from old to new fields as new fields have multiple categories</strong></li>
<li><span><strong><em>remove old fields (only after running the migration job)</em></strong></span></li>
</ul>
</li>
</ul>
<p><span><strong><em></em></strong></span></p>
<h3><span><strong>Step-1:-</strong></span></h3>
<p>We create new <strong>Ilist<contentreference></strong> properties for every standard category property.</p>
<p> </p>
<pre class="language-csharp"><code> [Display(
Name = "Something",
GroupName = SystemTabNames.Content,
Order = 10)]
[Categories]
public virtual IList<ContentReference> Something { get; set; }</code></pre>
<p><strong></strong></p>
<h3><strong>Step-2:-</strong></h3>
<p>Here we have to write the code so that content that is already existing on the live site migrates from old to new properties.</p>
<p>Few things that I did while creating a scheduled job:</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>Get all the pages where I changed the property, So for that, I created a generic method.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre class="language-csharp"><code> private IEnumerable<T> GetDataList<T>()
where T : ContentData
{
var objectType = _contentTypeRepository.Load<T>();
var usages = _contentModelUsage.ListContentOfContentType(objectType)
.Select(x => x.ContentLink.ToReferenceWithoutVersion())
.Distinct()
.Select(x => _contentLoader.Get<IContentData>(x))
.OfType<T>()
.ToList();
return (IEnumerable<T>)usages;
}</code></pre>
<p> </p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>After this method call loop through all the pages and create a writeable clone so that we change the data</li>
<li>invoke the list and then assign the value to it.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre class="language-csharp"><code> OnStatusChanged($"Migration start for ChapterDetailPage");
var chapterDetailPages = GetDataList<ChapterDetailPage>();
if (chapterDetailPages != null)
{
foreach (var cdp in chapterDetailPages)
{
//migrate data
var page = (ChapterDetailPage)cdp.CreateWritableClone();
page.LocationIdNew = new List<ContentReference>();
var hit = _getaCatRep.TryGet(new ContentReference(page.LocationID), out stdCat) ? stdCat : null;
if (hit != null)
{
page.LocationIdNew.Add(hit.ContentLink);
_contentRepository.Save(page, SaveAction.Publish, AccessLevel.NoAccess);
}
}
}
OnStatusChanged($"Migration end for ChapterDetailPage");</code></pre>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>Then Save the page using the<strong> Content Repository.</strong></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3><strong>Step-3</strong></h3>
<p>Change all the existing logic so that pages don't error.</p>
<h3><strong>Step-4</strong></h3>
<p>The last step will be to remove all old properties.</p>2022-04-26T07:00:15.0000000ZBlog postCustom radio control form element that displays the input box CMS 12<p><span>Episerver Forms does provide a lot of built-in functionality, but sometimes it is necessary to extend that functionality, which might give you some problems or difficulties. So in this post, I'm going to share my experience while customizing the Episerver form.</span></p>
<p><span>Note:- I'm doing this on CMS 12 and Episerver form 5.0.1</span></p>
<p><span>In this, we are going to extend the ability of the <em><strong>Selection element </strong></em>by inserting a text box with them.</span></p>
<h3><strong><span style="font-size: 14pt;">1. Custom form element type</span></strong><strong></strong></h3>
<p><span style="font-size: 12pt;">Since form elements are blocks, you create them the same way as any form of IContent. Instead of <span>inheriting </span>from BlockData inherit it from </span>SelectionElementBlockBase<T>, ValidatableElementBlockBase, and many others, Right now we are going to work with the selection element so we are going to use <em>SelectionElementBlockBase</em>.</p>
<pre class="language-csharp"><code> public class InputBoxInChoiceElementBlock : SelectionElementBlockBase<ExtendedOptionItem>
{
[Display(GroupName = "Information", Order = -3000)]
[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<ExtendedOptionItem>))]
public override IEnumerable<ExtendedOptionItem> Items { get; set; }
[Ignore]
public override string PlaceHolder { get; set; }
[Ignore]
public override bool AllowMultiSelect { get; set; }
public string GetDefaultSelectedString(ExtendedOptionItem item)
{
string defaultValue = this.GetDefaultValue();
return this.GetDefaultSelectedString(item, defaultValue);
}
public string GetDefaultSelectedString(ExtendedOptionItem item, string defaultValue)
{
string str = item.Value;
return (string.IsNullOrEmpty(str) || string.IsNullOrEmpty(defaultValue) || !((IEnumerable<string>)defaultValue.Split(',')).Contains<string>(str, (IEqualityComparer<string>)StringComparer.OrdinalIgnoreCase)) && (!item.Checked.HasValue || !item.Checked.Value || !string.IsNullOrEmpty(defaultValue)) ? string.Empty : "data-f-default-value=\"true\"";
}
}</code></pre>
<h3><strong><span style="font-size: 14pt;">2. Create a Class that inherits from IOptionItem.</span></strong></h3>
<p>This class will have all the properties of the radio button that you want to show i.e Label/Caption, Value, and others.</p>
<pre class="language-csharp"><code> public class ExtendedOptionItem : IOptionItem
{
[DisplayName("/episerver/forms/contentediting/optionitem/caption")]
[Display(Order = 1000)]
public virtual string Caption { get; set; }
[DisplayName("/episerver/forms/contentediting/optionitem/value")]
[Display(Order = 2000)]
[RegularExpression("([^,])*", ErrorMessage = "/episerver/forms/contentediting/optionitem/containsinvalidcharacter")]
public virtual string Value { get; set; }
[DisplayName("/episerver/forms/contentediting/optionitem/checked")]
[Display(Order = 3000)]
public virtual bool? Checked { get; set; }
}
[PropertyDefinitionTypePlugIn]
public class ExtendedOptionItemProperty : PropertyList<ExtendedOptionItem>
{
}</code></pre>
<h3><strong><span style="font-size: 14pt;"> 3. Your view</span></strong></h3>
<p><span style="font-size: 12pt;">You need to create your own rendering which somewhat looks like this. I didn't check for null in this code when you copy this does place your null checks.</span></p>
<pre class="language-markup"><code>@using (Html.BeginElement(Model, new { id = formElement.Guid, @class = "FormChoice" + cssClasses, data_f_type = "choice", aria_invalid = Util.GetAriaInvalidByValidationCssClasses(cssClasses) }, true))
{
<fieldset aria-describedby="@Util.GetAriaDescribedByElementName(formElement.ElementName)">
<legend class="Form__Element__Caption">@Model.Label</legend>
@foreach (var item in items)
{
var defaultCheckedString = Model.GetDefaultSelectedString(item);
var checkedString = string.IsNullOrEmpty(defaultCheckedString) ? string.Empty : "checked";
<label> <input type="radio" name="@formElement.ElementName" value="@item.Value" class="FormChoice__Input FormChoice__Input--Radio" @checkedString @defaultCheckedString data-f-datainput />@item.Caption</label>
}
<label>
<input type="radio" id="chk" name="@formElement.ElementName" class="FormChoice__Input FormChoice__Input--Radio" data-f-datainput value=""/> Other Amount ($) <input type="number" id="otherAmount" class="FormTextbox__Input wrap" data-f-datainput />
</label>
</fieldset>
@Html.ValidationMessageFor(Model)
}</code></pre>
<h3><strong><span style="font-size: 14pt;">4. Java Script</span></strong></h3>
<p><span style="font-size: 12pt;">Now we need to customize our text box like when you click on that particular radio button then only it shows and all. Do remember that by default Episerver form stores the value of the radio button, not the input box so we need to update it.</span></p>
<pre class="language-javascript"><code> $(document).ready(function () {
// By Default Disable Input
$("#otherAmount").attr('disabled', true);
$(".wrap").css('opacity', '2');
$("form input:radio").change(function () {
if ($("#chk").is(":checked")) {
$("#otherAmount").attr('disabled', false);
$(".wrap").css('opacity', '2');
}
else {
$("#otherAmount").attr('disabled', true);
$("#otherAmount").val('');
$(".wrap").css('opacity', '1');
}
});
//Updating value of radio button
$("#otherAmount").blur(function () {
if ($("#chk").is(":checked")) {
var otherAmountVal = parseInt($("#otherAmount").val());
$("#chk").attr("value", otherAmountVal);
}
});
});</code></pre>
<p><span>That'll you need to customize the Episerver form.</span></p>
<p><span>Thank you</span></p>
<p><span>Puneet Garg</span></p>2022-01-28T11:00:18.0000000ZBlog post