Add code file tags

Author: mattbrailsford

15/umbraco-commerce/how-to-guides/currency-switching.md

@@ -31,7 +31,9 @@ A partial view is used on the frontend to allow users to toggle between existing
 
 ![Currency Switcher](images/localization/country-switch.png)
 
-This is done by using the following implementation:
+This is done by creating a `CurerrencySwitcher.cshtml` partial with the following implementation:
+
+{% code title="CurerrencySwitcher.cshtml" %}
 
 ````csharp
 @using Umbraco.Commerce.Core.Api;
@@ -61,12 +63,26 @@ This is done by using the following implementation:
 }
 ````
 
+{% endcode %}
+
+This can then be placed in your sites base template by adding the following:
+
+{% code title="Layout.cshtml" %}
+
+```csharp
+@(await Html.PartialAsync("CurerrencySwitcher"))
+```
+
+{% endcode %}
+
 ## Handle Switching Currencies
 
 Switching the culture is handled by a Surface controller.
 
 Create a new Surface controller called `CultureSurfaceController` and add the following code:
 
+{% code title="CultureSurfaceController.cs" %}
+
 ````csharp
 public class CultureSurfaceController : SurfaceController
 {
@@ -117,15 +133,21 @@ public class CultureSurfaceController : SurfaceController
 }
 ````
 
+{% endcode %}
+
 The `ChangeCountryDto` class binds the country ISO code from the form.
 
+{% code title="ChangeCountryDto.cs" %}
+
 ````csharp
 public class ChangeCountryDto
 {
     public string CountryIsoCode { get; set; }
 }
 ````
 
+{% endcode %}
+
 ## Result
 
 With the currency switcher implemented, users can switch between countries/currencies on your website.

15/umbraco-commerce/how-to-guides/dynamically-priced-products.md

@@ -31,6 +31,8 @@ To provide the correct calculations for an order, the captured data will need to
 
 1. Add a new property to the `AddToCartDto` class to capture the length.
 
+{% code title="AddToCartDto.cs" %}
+
 ```csharp
 public class AddToCartDto
 {
@@ -39,7 +41,11 @@ public class AddToCartDto
 }
 ```
 
-2. Update the `AddToCart` method to store the length against the order line as a [property](../key-concepts/umbraco-properties.md).
+{% endcode %}
+
+2. Update the `AddToCart` method of the `CartSurfaceController` to store the length against the order line as a [property](../key-concepts/umbraco-properties.md).
+
+{% code title="CartSurfaceController.cs" %}
 
 ```csharp
 [HttpPost]
@@ -69,12 +75,16 @@ public async Task<IActionResult> AddToCart(AddToCartDto postModel)
 }
 ```
 
+{% endcode %}
+
 ## Calculating the Order Line Price
 
 We will calculate the price/tax rate of a given order line by multiplying the specified length by the unit price. This is done using a custom order line calculator.
 
 1. Create a new class that implements the `IOrderLineCalculator` interface.
 
+{% code title="SwiftOrderLineCalculator.cs" %}
+
 ```csharp
 public class SwiftOrderLineCalculator : IOrderLineCalculator
 {
@@ -128,55 +138,71 @@ public class SwiftOrderLineCalculator : IOrderLineCalculator
 }
 ```
 
+{% endcode %}
+
 2. Register the custom calculator in the `Startup.cs` file or in an `IComposer`.
 
+{% code title="SwiftShopComposer.cs" %}
+
 ```csharp
-builder.Services.AddUnique<IOrderLineCalculator, SwiftOrderLineCalculator>();
+internal class SwiftShopComposer : IComposer
+{
+    public void Compose(IUmbracoBuilder builder)
+    {
+        builder.Services.AddUnique<IOrderLineCalculator, SwiftOrderLineCalculator>();
+    }
+}
 ```
 
+{% endcode %}
+
 ## Backoffice UI
 
 A useful extra step is to expose the captured data in the order's details in the Backoffice.
 
 This is implemented as a custom [UI Extension](https://docs.umbraco.com/umbraco-commerce/key-concepts/ui-extensions/order-line-properties).
 
-1. Define a new `ucOrderLineProperty` extension for the length property In a UI extension manifest.
-
-```json
-{
-  "type": "ucOrderLineProperty",
-  "alias": "Uc.OrderLineProperty.ProductLength",
-  "name": "Product Length",
-  "weight": 400,
-  "meta": {
-    "propertyAlias": "productLength", 
-    "showInOrderLineSummary": true,
-    "summaryStyle": "inline",
-    "editorUiAlias": "Umb.PropertyEditorUi.TextBox",
-    "labelUiAlias": "Umb.PropertyEditorUi.Label"
-  }
-}
-```
+Create a new `umbraco-package.json` file in a folder in the `App_Plugins` directory in the root of your project and add the following code:
 
-2. Define a `localization` entry for the new properties label and description.
+{% code title="umbraco-package.json" %}
 
 ```json
 {
-  "type": "localization",
-  "alias": "Uc.OrderLineProperty.ProductLength.EnUS",
-  "name": "English",
-  "meta": {
-    "culture": "en",
-    "localizations": {
-      "section": {
-        "ucProperties_productLengthLabel": "Length",
-        "ucProperties_productLengthDescription": "Customer product ordered length"
-      }
-    }
-  }
+    "name": "SwiftShop",
+    "extensions": [
+        {
+            "type": "ucOrderLineProperty",
+            "alias": "Uc.OrderLineProperty.ProductLength",
+            "name": "Product Length",
+            "weight": 400,
+            "meta": {
+                "propertyAlias": "productLength",
+                "showInOrderLineSummary": true,
+                "summaryStyle": "inline",
+                "editorUiAlias": "Umb.PropertyEditorUi.TextBox",
+                "labelUiAlias": "Umb.PropertyEditorUi.Label"
+            }
+        },
+        {
+            "type": "localization",
+            "alias": "Uc.OrderLineProperty.ProductLength.EnUS",
+            "name": "English",
+            "meta": {
+                "culture": "en",
+                "localizations": {
+                    "section": {
+                        "ucProperties_productLengthLabel": "Length",
+                        "ucProperties_productLengthDescription": "Customer product ordered length"
+                    }
+                }
+            }
+        }
+    ]
 }
 ```
 
+{% endcode %}
+
 The length property is now displayed in the order details in the Backoffice.
 
 ![Order Details](images/dynamic-price/order-editor-property.png)

15/umbraco-commerce/how-to-guides/member-based-pricing.md

@@ -42,6 +42,8 @@ Next, you will create a new property editor for the member-based pricing. The in
 
 With the prices defined, it's time to configure Umbraco Commerce to select the correct price based on the logged-in Member. This is done by creating a custom product adapter to override the default product adapter and select the correct price.
 
+{% code title="MemberPricingProductAdapter.cs" %}
+
 ```csharp
 public class MemberPricingProductAdapter : UmbracoProductAdapter
 {
@@ -108,9 +110,13 @@ public class MemberPricingProductAdapter : UmbracoProductAdapter
     }
 }
 ```
+{% endcode %}
+
 
 Add the following to a `Composer` file to register the custom product adapter:
 
+{% code title="SwiftShopComposer.cs" %}
+
 ```csharp
 internal class SwiftShopComposer : IComposer
 {
@@ -121,6 +127,8 @@ internal class SwiftShopComposer : IComposer
 }
 ```
 
+{% endcode %}
+
 ## Results
 
 With all this implemented, the product page will display the correct price based on the logged-in Member.

15/umbraco-commerce/how-to-guides/member-portal.md

@@ -71,6 +71,8 @@ To access the members portal, customers need to log in. Through the following st
 1. Open the `Login.cshtml` template file.
 2. Add the following code to create a login form:
 
+{% code title="Login.cshtml" %}
+
 ```csharp
 @using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin", new { RedirectUrl = "/customer-portal" }))
 {
@@ -92,8 +94,10 @@ To access the members portal, customers need to log in. Through the following st
 }
 ```
 
+{% endcode %}
+
 {% hint style="info" %}
-The `UmbLoginController` class comes pre-installed with Umbraco and handles the login process for you, so you don't need to create a custom controller.
+The `UmbLoginController` class comes pre-installed with Umbraco. It handles the login process, so you don't need to create a custom controller.
 {% endhint %}
 
 On the frontend, customers can enter their username and password and click the **Login** button to access the members portal.
@@ -107,6 +111,8 @@ Now that members can log in, update the `Customer Portal` page to display the or
 1. Open the `CustomerPortal.cshtml` template file.
 2. Add the following code to display the order history:
 
+{% code title="CustomerPortal.cshtml" %}
+
 ```csharp
 @inject IMemberManager memberManager
 @inject IUmbracoCommerceApi commerceApi
@@ -146,6 +152,8 @@ else
 }
 ```
 
+{% endcode %}
+
 The `Customer Portal` page will now display a table of the member's order history, including the order number, date, and total price.
 
 ![Order History](images/member-portal/order-history.png)
@@ -164,6 +172,8 @@ writableOrder.AssignToCustomer(member.Key.ToString());
 
 In your site header, add the following code to display the member login status:
 
+{% code title="Header.cshtml" %}
+
 ```csharp
 @{
     var isLoggedIn = Context.User?.Identity?.IsAuthenticated ?? false;
@@ -182,6 +192,8 @@ In your site header, add the following code to display the member login status:
 }
 ```
 
+{% endcode %}
+
 ![Logged Out Status](images/member-portal/logged-out.png)  
 
 ![Logged In Status](images/member-portal/logged-in.png)  
@@ -193,6 +205,8 @@ To allow customers to register as members, you can create a registration form al
 1. Implement a registration Document Type and page in the same way as the login page.
 2. Open the `Register.cshtml` template file and add the following code to create a registration form:
 
+{% code title="Register.cshtml" %}
+
 ```csharp
 @using (Html.BeginUmbracoForm<UmbRegisterController>("HandleRegisterMember", new { RedirectUrl = "/customer-portal", UsernameIsEmail = true }))
 {
@@ -226,6 +240,8 @@ To allow customers to register as members, you can create a registration form al
 }
 ```
 
+{% endcode %}
+
 {% hint style="info" %}
 The `UmbRegisterController` class comes pre-installed with Umbraco. It handles the login process, so you don't need to create a custom controller.
 {% endhint %}

15/umbraco-commerce/how-to-guides/personalized-products.md

@@ -28,6 +28,8 @@ When the customer adds the product to the cart, the message will be saved in an
 
 1. Add an `Observations` property of the `AddToCartDto` to capture the message.
 
+{% code title="AddToCartDto.cs" %}
+
 ```csharp
 public class AddToCartDto
 {
@@ -37,9 +39,13 @@ public class AddToCartDto
 }
 ```
 
-2. Locate the `AddToCart` action.
+{% endcode %}
+
+2. Locate the `AddToCart`  of the `CartSurfaceController`.
 2. Set a property on the order line if a value has been sent with the request.
 
+{% code title="CartSurfaceController.cs" %}
+
 ```csharp
 [HttpPost]
 public async Task<IActionResult> AddToCart(AddToCartDto postModel)
@@ -67,9 +73,15 @@ public async Task<IActionResult> AddToCart(AddToCartDto postModel)
 }
 ```
 
+{% endcode %}
+
 ## Accessing the Property in the Backoffice
 
-To view the data in the Backoffice order editor, you need to register an `ucOrderProperty` extension along with the relevant label localizations as sampled below:
+To view the data in the Backoffice order editor, you need to register an `ucOrderProperty` extension along with the relevant label localizations as sampled below.
+
+Create a new `umbraco-package.json` file in a folder in the `App_Plugins` directory in the root of your project and add the following code:
+
+{% code title="umbraco-package.json" %}
 
 ````csharp
 {
@@ -105,6 +117,9 @@ To view the data in the Backoffice order editor, you need to register an `ucOrde
   ]
 }
 ````
+
+{% endcode %}
+
 The property is displayed in the Backoffice order editor.
 
 ![Backoffice Order Line Property](images/personalized-products/order-line-property.png)