From 9beb75f8dd455579b57fa11fd52042431f7a9036 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Wed, 27 Nov 2024 09:18:14 +0100 Subject: [PATCH 1/4] Adding missing Commerce guides --- 14/umbraco-commerce/how-to-guides/overview.md | 3 +-- 15/umbraco-commerce/how-to-guides/overview.md | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/14/umbraco-commerce/how-to-guides/overview.md b/14/umbraco-commerce/how-to-guides/overview.md index 04e265d4214..2bb41124ae1 100644 --- a/14/umbraco-commerce/how-to-guides/overview.md +++ b/14/umbraco-commerce/how-to-guides/overview.md @@ -8,5 +8,4 @@ In this section, we will provide a series of How-To Guides, showcasing how to pe ## Available guides -
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Limit Order Line Quantitylimit-orderline-quantity.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
- +
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Limit Order Line Quantitylimit-orderline-quantity.md
Add item to Cartadd-item.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
diff --git a/15/umbraco-commerce/how-to-guides/overview.md b/15/umbraco-commerce/how-to-guides/overview.md index 04e265d4214..2bb41124ae1 100644 --- a/15/umbraco-commerce/how-to-guides/overview.md +++ b/15/umbraco-commerce/how-to-guides/overview.md @@ -8,5 +8,4 @@ In this section, we will provide a series of How-To Guides, showcasing how to pe ## Available guides -
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Limit Order Line Quantitylimit-orderline-quantity.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
- +
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Limit Order Line Quantitylimit-orderline-quantity.md
Add item to Cartadd-item.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
From 22b9bb4becae93cc053227a623d6d73ffd051d05 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Wed, 27 Nov 2024 09:44:15 +0100 Subject: [PATCH 2/4] Added articles --- 14/umbraco-commerce/SUMMARY.md | 3 + 14/umbraco-commerce/how-to-guides/add-item.md | 199 ++++++++++++++++ .../how-to-guides/delete-item.md | 176 ++++++++++++++ 14/umbraco-commerce/how-to-guides/overview.md | 3 +- .../how-to-guides/update-cart.md | 218 ++++++++++++++++++ 15/umbraco-commerce/SUMMARY.md | 3 + 15/umbraco-commerce/how-to-guides/add-item.md | 199 ++++++++++++++++ .../how-to-guides/delete-item.md | 176 ++++++++++++++ 15/umbraco-commerce/how-to-guides/overview.md | 3 +- .../how-to-guides/update-cart.md | 218 ++++++++++++++++++ 10 files changed, 1196 insertions(+), 2 deletions(-) create mode 100644 14/umbraco-commerce/how-to-guides/add-item.md create mode 100644 14/umbraco-commerce/how-to-guides/delete-item.md create mode 100644 14/umbraco-commerce/how-to-guides/update-cart.md create mode 100644 15/umbraco-commerce/how-to-guides/add-item.md create mode 100644 15/umbraco-commerce/how-to-guides/delete-item.md create mode 100644 15/umbraco-commerce/how-to-guides/update-cart.md diff --git a/14/umbraco-commerce/SUMMARY.md b/14/umbraco-commerce/SUMMARY.md index 297634d86cf..3e926e1cb4a 100644 --- a/14/umbraco-commerce/SUMMARY.md +++ b/14/umbraco-commerce/SUMMARY.md @@ -33,6 +33,9 @@ * [Configure SQLite support](how-to-guides/configure-sqlite-support.md) * [Limit Order Line Quantity](how-to-guides/limit-orderline-quantity.md) * [Use an Alternative Database for Umbraco Commerce Tables](how-to-guides/use-an-alternative-database-for-umbraco-commerce-tables.md) +* [Add item to Cart](how-to-guides/add-item.md) +* [Update Cart](how-to-guides/update-cart.md) +* [Delete item in Cart](how-to-guides/delete-item.md) ## Key Concepts diff --git a/14/umbraco-commerce/how-to-guides/add-item.md b/14/umbraco-commerce/how-to-guides/add-item.md new file mode 100644 index 00000000000..cd74de7d3c4 --- /dev/null +++ b/14/umbraco-commerce/how-to-guides/add-item.md @@ -0,0 +1,199 @@ +--- +description: How-To Guide to add an item to your cart. +--- + +# Add item to Cart + +To add an item to the cart, configure Umbraco with a store and add the necessary properties for interaction. Learn more by following the [Getting started with Umbraco Commerce: The Backoffice tutorial](../tutorials/getting-started-with-commerce). + +You will need the front end to be set up to allow an item to be added to the cart. This can be done by adding a button to the front end to call the Action to add the item to the cart. + +Create a new Document Type with the template. Call it **Product Page** with the following property aliases: `productTitle`, `productDescription`, `price`, `stock`. + +The following property editors are recommeded to be used for the above: + +* `productTitle`: TextString +* `productDescription`: TextArea +* `price`: Umbraco Commerce Price +* `stock`: Umbraco Commerce Stock + +The Product Page template can be implemented as shown below. + +```csharp +@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage +@{ +var store = Model.Value("store", fallback: Fallback.ToAncestors); +var product = CommerceApi.Instance.GetProduct(store.Id, Model.Key.ToString(), "en-GB"); +var price = product.TryCalculatePrice().ResultOrThrow("Unable to calculate product price"); +} +``` + +The code above does the following: + +- You need to access the store to access the relevant properties for your product, such as price. The store has a fallback property allowing you to traverse the tree to find the store. +- You retrieve the product based on the store and a reference for the product. The 'productReference' comes from the Model which is a single product. +- The Product is returned as a ProductSnapshot which is Umbraco Commerce obtaining the page ID and carrying out necessary processes to bring in the data for further processing. +- Finally, you need to calculate the price which is then displayed without VAT. This can also be displayed with VAT. + +To display this you need to add some markup or at least amend it to include a button to add an item. Add the following to the same file: + +```csharp +@using (Html.BeginUmbracoForm("AddToCart", "CartSurface")) +{ + @Html.Hidden("productReference", Model.Key.ToString()) +

@Model.Value("productTitle")

+

@Model.Value("productDescription")

+ +

Our price excluding VAT @price.WithoutTax.ToString("C0")

+ + if (@Model.Value("stock") == 0) + { +

Sorry, out of stock

+ } + else + { + + } + +} +``` + +The hidden field uses the `productReference` to be passed across to the Controller. + +## Adding the Controller + +For the button to work, you need to implement a controller. An example of this is shown below. + +Create a new Controller called `CartSurfaceController.cs`. + +{% hint style="warning" %} + +The namespaces used in this Controller are important and need to be included. + +``` +using Microsoft.AspNetCore.Mvc; +using Umbraco.Cms.Core.Cache; +using Umbraco.Cms.Core.Logging; +using Umbraco.Cms.Core.Models.PublishedContent; +using Umbraco.Cms.Core.Routing; +using Umbraco.Cms.Core.Services; +using Umbraco.Cms.Core.Web; +using Umbraco.Cms.Infrastructure.Persistence; +using Umbraco.Cms.Web.Website.Controllers; +using Umbraco.Commerce.Common.Validation; +using Umbraco.Commerce.Core.Api; +using Umbraco.Commerce.Core.Models; +using Umbraco.Commerce.Extensions; +using Umbraco.Extensions; +``` + +{% endhint %} + +```csharp +public class CartSurfaceController : SurfaceController +{ + public CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) + { + _commerceApi = commerceApi; + } +} +``` + +Below you can see the equivalent code for having this as a Primary Constructor: + +```csharp +public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider) + : SurfaceController(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) +{ +} +``` + +The CartDto class below is used to pass the `productReference` across to the Controller. This class has only one property for the `productReference`. + +```csharp +public class CartDto +{ + public string ProductReference { get; set; } +} +``` + +We now need to add the Action to add the item to the cart. This action will be called when the button is clicked. + +```csharp +[HttpPost] +public IActionResult AddToBasket(CartDto cart) +{ + commerceApi.Uow.Execute(uow => + { + var store = CurrentPage.Value("store", fallback: Fallback.ToAncestors); + + if (store == null) return; + + try + { + var order = commerceApi.GetOrCreateCurrentOrder(store.Id) + .AsWritable(uow) + .AddProduct(cart.ProductReference, 1); + + commerceApi.SaveOrder(order); + + uow.Complete(); + + TempData["SuccessFeedback"] = "Product added to cart"; + return RedirectToCurrentUmbracoPage(); + } + catch (ValidationException ve) + { + throw new ValidationException(ve.Errors); + } + catch (Exception ex) + { + logger.Error(ex, "An error occurred."); + } + }); +} +``` + +The code above does the following: + +- The `store` variable is used to access the store to get the store ID. +- A try-catch block captures any errors that may occur when adding the item to the cart, including any validation errors. +- `order` is used to retrieve the current order if one exists or create a new order against the store found. In the Commerce API, everything is read-only for performance so you need to make it writable to add the product. +- `AddProduct` is called and `productReference` is passed along with the quantity. +- `SaveOrder` is called to save the order. +- `TempData` stores a message to be displayed to the user if the product has been added to the cart. + +{% hint style="warning" %} +Umbraco Commerce uses the Unit of Work pattern to complete saving the item (`uow.Complete`). When retrieving or saving data ideally you would want the entire transaction to be committed. However, if there is an error nothing is changed on the database. +{% endhint %} + +Finally, you need to add the `TempData` to tell the user that the product has been added to the cart. + +## Add a partial view to display the message + +Create a new partial view called `Feedback.cshtml`. + +```csharp +@Html.ValidationSummary(true, "", new { @class = "danger" }) + +@{ + var success = TempData["SuccessFeedback"]?.ToString(); + + if (!string.IsNullOrWhiteSpace(success)) + { +
@success
+ } +} +``` + +You can now run the application, click the button, and see the product added to the cart with a message displayed to the user. diff --git a/14/umbraco-commerce/how-to-guides/delete-item.md b/14/umbraco-commerce/how-to-guides/delete-item.md new file mode 100644 index 00000000000..12b750e77b4 --- /dev/null +++ b/14/umbraco-commerce/how-to-guides/delete-item.md @@ -0,0 +1,176 @@ +--- +description: Learn how to remove items added to the shopping cart. +--- + +# Delete item from cart + +{% hint style="info" %} +This guide builds on the guide on [update-cart.md). It is recommended to follow that guide before starting this one. +{% endhint %} + +This will teach you how to delete an item from the cart. + +Your view for the `cart.cshtml` page will be similar the example below. + +```csharp +@inherits UmbracoViewPage +@{ + var store = Model.Value("store", fallback: Fallback.ToAncestors); + var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); + if (currentOrder == null) return; + + @using (Html.BeginUmbracoForm("UpdateCart", "CartSurface")) + { + @foreach (var item in currentOrder.OrderLines.Select((ol, i) => new + { + OrderLine = ol, + Index = i + })) + { +

+ @Html.Hidden($"orderLines[{item.Index}].Id", item.OrderLine.Id) + @item.OrderLine.Name @Html.Hidden($"orderLines[{item.Index}].Quantity", (int)item.OrderLine.Quantity, new { @type = "number" }) + @Html.Hidden($"orderLines[{item.Index}].ProductReference", item.OrderLine.ProductReference) + Remove Item +

+ + } + + + + var success = TempData["SuccessMessage"]?.ToString(); + + if (!string.IsNullOrWhiteSpace(success)) + { +
@success
+ } + } +} +``` + +The code below allows the Umbraco `SurfaceAction` to call `RemoveFromCart` when the link is clicked. It will also pass the `OrderLineId`. + +```csharp +Remove +``` + +## Adding the Controller + +For the button to work, you need to add some functionality via a Controller. + +Create a new Controller called `CartSurfaceController.cs` + +{% hint style="warning" %} + +The namespaces used in this Controller are important and need to be included. + +``` +using Microsoft.AspNetCore.Mvc; +using Umbraco.Cms.Core.Cache; +using Umbraco.Cms.Core.Logging; +using Umbraco.Cms.Core.Models.PublishedContent; +using Umbraco.Cms.Core.Routing; +using Umbraco.Cms.Core.Services; +using Umbraco.Cms.Core.Web; +using Umbraco.Cms.Infrastructure.Persistence; +using Umbraco.Cms.Web.Website.Controllers; +using Umbraco.Commerce.Common.Validation; +using Umbraco.Commerce.Core.Api; +using Umbraco.Commerce.Core.Models; +using Umbraco.Commerce.Extensions; +using Umbraco.Extensions; +``` + +{% endhint %} + +```csharp +public class CartSurfaceController : SurfaceController +{ + public CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, + AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) + { + _commerceApi = commerceApi; + } +} +``` + +The example below is the equivalent code for having this as a Primary Constructor: + +```csharp +public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, + AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : SurfaceController(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) +{ +} +``` + + + +The `CartDto` is a class used to pass data to the Controller. In this instance, it passes over the `OrderLineId`. + +```csharp + public class CartDto + { + public Guid OrderLineId { get; set; } + } +``` + +You need to add the `Action` to delete the item from the cart. This will be called when the button is clicked. + +```csharp +[HttpGet] +public IActionResult RemoveFromCart(CartDto cart) +{ + try + { + _commerceApi.Uow.Execute(uow => + { + var store = CurrentPage?.Value("store", fallback: Fallback.ToAncestors); + + if (store == null) return; + + var order = _commerceApi.GetOrCreateCurrentOrder(store.Id) + .AsWritable(uow) + .RemoveOrderLine(cart.OrderLineId); + + _commerceApi.SaveOrder(order); + + uow.Complete(); + }); + } + catch (ValidationException) + { + ModelState.AddModelError(string.Empty, "Failed to remove product from cart"); + + return CurrentUmbracoPage(); + } + + TempData["SuccessMessage"] = "Item removed"; + + return RedirectToCurrentUmbracoPage(); +} +``` + +- A `try-catch` block captures any validation errors that may occur when updating items in the cart. +- The `store` variable is used to access the store to retrieve the store ID. +- `order` is used to retrieve the current order. In the Commerce API, everything is read-only for performance so you need to make it writable to add the product. +- `SaveOrder` is called to save the order. +- If there are any validation errors, they are added to a `ModelState` error, and the user is redirected back to the current page. +- `TempData` stores a message to be displayed to the user if the product has been successfully updated. + +{% hint style="warning" %} +Umbraco Commerce uses the Unit of Work pattern to complete saving the item (`uow.Complete`). When retrieving or saving data ideally you would want the entire transaction to be committed. However, if there is an error nothing is changed on the database. +{% endhint %} + +If you have followed the [Add item to cart](add-item.md) article, run the application, add an item to your cart, and navigate to your `cart.cshtml` page. Clicking the `Remove Item` button will delete the item in your cart and display a message. diff --git a/14/umbraco-commerce/how-to-guides/overview.md b/14/umbraco-commerce/how-to-guides/overview.md index 2bb41124ae1..472ba99c910 100644 --- a/14/umbraco-commerce/how-to-guides/overview.md +++ b/14/umbraco-commerce/how-to-guides/overview.md @@ -8,4 +8,5 @@ In this section, we will provide a series of How-To Guides, showcasing how to pe ## Available guides -
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Limit Order Line Quantitylimit-orderline-quantity.md
Add item to Cartadd-item.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
+ +
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Add item to Cartadd-item.md
Update Cartupdate-cart.md
Delete item from Cartdelete-item.md
Limit Order Line Quantitylimit-orderline-quantity.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
diff --git a/14/umbraco-commerce/how-to-guides/update-cart.md b/14/umbraco-commerce/how-to-guides/update-cart.md new file mode 100644 index 00000000000..72825b98838 --- /dev/null +++ b/14/umbraco-commerce/how-to-guides/update-cart.md @@ -0,0 +1,218 @@ +--- +description: Learn how to update your cart when one or more quantities have changed. +--- + +# Update Card + +Functionality is needed to update the cart once an item has been added. In this guide, you can learn how to add this functionality. + +You need a new page to summarize the items in the cart and allow users to update each item. + +Create a new Document With a Template. Call it "Cart Page" and update the template with the following code: + +```csharp +@inherits UmbracoViewPage +@{ + var store = Model.Value("store", fallback: Fallback.ToAncestors); + var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); + if (currentOrder == null) return; +} +``` + +- You need to access the store to see the relevant data for the current cart/order. The store has a `fallback` property allowing you to traverse the tree to find the store. +- `currentOrder` is used to get the current order for the store. If the current order is null then there is nothing to display. + +To display the default layout when an order does exist, you need to add some markup or amend it to include the desired functionality. Add the following code to the template: + +```csharp +@using (Html.BeginUmbracoForm("UpdateCart", "CartSurface")) +{ + @foreach (var item in currentOrder.OrderLines.Select((ol, i) => new + { + OrderLine = ol, + Index = i + })) + { +

+ @Html.Hidden($"orderLines[{item.Index}].Id", item.OrderLine.Id) + @item.OrderLine.Name | @Html.TextBox($"orderLines[{item.Index}].Quantity", (int)item.OrderLine.Quantity, new { @type = "number" }) + @Html.Hidden($"orderLines[{item.Index}].ProductReference", item.OrderLine.ProductReference) + Remove +

+ + } + + + + var success = TempData["SuccessMessage"]?.ToString(); + + if (!string.IsNullOrWhiteSpace(success)) + { +
@success
+ } +} +``` + +You first loop through each item in the `cart/order` and display the product name and quantity. + +A hidden input is added for the order ID, quantity, and product reference. This is so you can update the cart with the new number. + +```csharp + @Html.Hidden($"orderLines[{item.Index}].OrderId", item.OrderLine.Id) +``` + +The line below sets the ID of the order line (or the item in the current cart/order). + +```csharp + @item.OrderLine.Name @Html.Hidden($"orderLines[{item.Index}].Quantity", (int)item.OrderLine.Quantity, new { @type = "number" }) +``` + +As well as setting the product name, the line below sets the quantity of the product in the cart/order. Finally, the number is set to a number input type. + +```csharp + @Html.Hidden($"orderLines[{item.Index}].ProductReference", item.OrderLine.ProductReference) +``` + +This is setting the product reference in the cart/order so there is a way to distinguish between products. This is hidden as it does not need to be displayed to the user. + +{% hint style="warning" %} + +The `remove` button is added here but is not covered in this guide. Learn more in the [Remove from card](delete-item.md) article. + +{% endhint %} + +Finally, a button is added to submit the form to update the cart. This will call the `UpdateCart` action in the `CartSurfaceController` which will then show a success message to the user. + +## Adding the Controller + +Create a new Controller called `CartSurfaceController.cs` + +{% hint style="warning" %} + +The namespaces used in this Controller are important and need to be included. + +``` +using Microsoft.AspNetCore.Mvc; +using Umbraco.Cms.Core.Cache; +using Umbraco.Cms.Core.Logging; +using Umbraco.Cms.Core.Models.PublishedContent; +using Umbraco.Cms.Core.Routing; +using Umbraco.Cms.Core.Services; +using Umbraco.Cms.Core.Web; +using Umbraco.Cms.Infrastructure.Persistence; +using Umbraco.Cms.Web.Website.Controllers; +using Umbraco.Commerce.Common.Validation; +using Umbraco.Commerce.Core.Api; +using Umbraco.Commerce.Core.Models; +using Umbraco.Commerce.Extensions; +using Umbraco.Extensions; +``` + +{% endhint %} + +```csharp +public class CartSurfaceController : SurfaceController +{ + public CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) + { + _commerceApi = commerceApi; + } +} +``` + +The following is the equivalent code for having this as a Primary Constructor: + +```csharp +public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : SurfaceController(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) +{ +} +``` + +The `CartDto` is a class that passes data to the Controller. This is a class that has a property for the `productReference` and an array of `OrderLineQuantityDto[]`. + +```csharp + public class CartDto + { + public string ProductReference { get; set; } + public OrderLineQuantityDto[] OrderLines { get; set; } + } + + public class OrderLineQuantityDto + { + public Guid Id { get; set; } + public decimal Quantity { get; set; } + } +``` + +{% hint style="warning" %} +The code example above adds the `ProductReference` but it is not used in this guide. + +It is an example of passing the product reference to the controller for similar tasks. +{% endhint %} + +You need to add the `Action` to update the items in the cart. This will be called when the button is clicked. + +```csharp +[HttpPost] + public IActionResult UpdateCart(CartDto cart) + { + try + { + _commerceApi.Uow.Execute(uow => + { + var store = CurrentPage?.Value("store", fallback: Fallback.ToAncestors); + + if (store == null) return; + + var order = _commerceApi.GetCurrentOrder(store.Id) + .AsWritable(uow); + + foreach (var orderLine in cart.OrderLines) + { + order.WithOrderLine(orderLine.Id) + .SetQuantity(orderLine.Quantity); + } + + _commerceApi.SaveOrder(order); + + uow.Complete(); + }); + } + catch (ValidationException) + { + ModelState.AddModelError(string.Empty, "Failed to update cart"); + + return CurrentUmbracoPage(); + } + + TempData["SuccessMessage"] = "Cart updated"; + + return RedirectToCurrentUmbracoPage(); + } +``` + +- A `try-catch` block captures any validation errors that may occur when updating items in the cart. +- The `store` variable is used to access the store to retrieve the store ID. +- `order` is used to retrieve the current order. In the Commerce API, everything is read-only for performance so you need to make it writable to add the product. +- You loop through all the `orderLines(items)` in the cart, set the new quantity amount set in the View, and pass it to the CartDto model. +- `SaveOrder` is called to save the order. +- If there are any validation errors, they are added to `ModelState` error, and the user is redirected back to the current page. +- `TempData` stores a message to be displayed to the user if the product has been successfully updated. + +{% hint style="warning" %} +Umbraco Commerce uses the Unit of Work pattern to complete saving the item (`uow.Complete`). When retrieving or saving data you want the entire transaction to be committed. However, if there is an error nothing is changed on the database. +{% endhint %} + +If you have followed the [Add item to cart](add-item.md) article then run the application, add an item to your cart, and navigate to your `cart.cshtml` page. Enter a new quantity, click the Update Cart button, and the item(s) in your cart will tell you the values have been updated. diff --git a/15/umbraco-commerce/SUMMARY.md b/15/umbraco-commerce/SUMMARY.md index a9e1a84bcf5..abcbb3ae58a 100644 --- a/15/umbraco-commerce/SUMMARY.md +++ b/15/umbraco-commerce/SUMMARY.md @@ -32,6 +32,9 @@ * [Configure SQLite support](how-to-guides/configure-sqlite-support.md) * [Limit Order Line Quantity](how-to-guides/limit-orderline-quantity.md) * [Use an Alternative Database for Umbraco Commerce Tables](how-to-guides/use-an-alternative-database-for-umbraco-commerce-tables.md) +* [Add item to Cart](how-to-guides/add-item.md) +* [Update Cart](how-to-guides/update-cart.md) +* [Delete item in Cart](how-to-guides/delete-item.md) ## Key Concepts diff --git a/15/umbraco-commerce/how-to-guides/add-item.md b/15/umbraco-commerce/how-to-guides/add-item.md new file mode 100644 index 00000000000..cd74de7d3c4 --- /dev/null +++ b/15/umbraco-commerce/how-to-guides/add-item.md @@ -0,0 +1,199 @@ +--- +description: How-To Guide to add an item to your cart. +--- + +# Add item to Cart + +To add an item to the cart, configure Umbraco with a store and add the necessary properties for interaction. Learn more by following the [Getting started with Umbraco Commerce: The Backoffice tutorial](../tutorials/getting-started-with-commerce). + +You will need the front end to be set up to allow an item to be added to the cart. This can be done by adding a button to the front end to call the Action to add the item to the cart. + +Create a new Document Type with the template. Call it **Product Page** with the following property aliases: `productTitle`, `productDescription`, `price`, `stock`. + +The following property editors are recommeded to be used for the above: + +* `productTitle`: TextString +* `productDescription`: TextArea +* `price`: Umbraco Commerce Price +* `stock`: Umbraco Commerce Stock + +The Product Page template can be implemented as shown below. + +```csharp +@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage +@{ +var store = Model.Value("store", fallback: Fallback.ToAncestors); +var product = CommerceApi.Instance.GetProduct(store.Id, Model.Key.ToString(), "en-GB"); +var price = product.TryCalculatePrice().ResultOrThrow("Unable to calculate product price"); +} +``` + +The code above does the following: + +- You need to access the store to access the relevant properties for your product, such as price. The store has a fallback property allowing you to traverse the tree to find the store. +- You retrieve the product based on the store and a reference for the product. The 'productReference' comes from the Model which is a single product. +- The Product is returned as a ProductSnapshot which is Umbraco Commerce obtaining the page ID and carrying out necessary processes to bring in the data for further processing. +- Finally, you need to calculate the price which is then displayed without VAT. This can also be displayed with VAT. + +To display this you need to add some markup or at least amend it to include a button to add an item. Add the following to the same file: + +```csharp +@using (Html.BeginUmbracoForm("AddToCart", "CartSurface")) +{ + @Html.Hidden("productReference", Model.Key.ToString()) +

@Model.Value("productTitle")

+

@Model.Value("productDescription")

+ +

Our price excluding VAT @price.WithoutTax.ToString("C0")

+ + if (@Model.Value("stock") == 0) + { +

Sorry, out of stock

+ } + else + { + + } + +} +``` + +The hidden field uses the `productReference` to be passed across to the Controller. + +## Adding the Controller + +For the button to work, you need to implement a controller. An example of this is shown below. + +Create a new Controller called `CartSurfaceController.cs`. + +{% hint style="warning" %} + +The namespaces used in this Controller are important and need to be included. + +``` +using Microsoft.AspNetCore.Mvc; +using Umbraco.Cms.Core.Cache; +using Umbraco.Cms.Core.Logging; +using Umbraco.Cms.Core.Models.PublishedContent; +using Umbraco.Cms.Core.Routing; +using Umbraco.Cms.Core.Services; +using Umbraco.Cms.Core.Web; +using Umbraco.Cms.Infrastructure.Persistence; +using Umbraco.Cms.Web.Website.Controllers; +using Umbraco.Commerce.Common.Validation; +using Umbraco.Commerce.Core.Api; +using Umbraco.Commerce.Core.Models; +using Umbraco.Commerce.Extensions; +using Umbraco.Extensions; +``` + +{% endhint %} + +```csharp +public class CartSurfaceController : SurfaceController +{ + public CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) + { + _commerceApi = commerceApi; + } +} +``` + +Below you can see the equivalent code for having this as a Primary Constructor: + +```csharp +public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider) + : SurfaceController(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) +{ +} +``` + +The CartDto class below is used to pass the `productReference` across to the Controller. This class has only one property for the `productReference`. + +```csharp +public class CartDto +{ + public string ProductReference { get; set; } +} +``` + +We now need to add the Action to add the item to the cart. This action will be called when the button is clicked. + +```csharp +[HttpPost] +public IActionResult AddToBasket(CartDto cart) +{ + commerceApi.Uow.Execute(uow => + { + var store = CurrentPage.Value("store", fallback: Fallback.ToAncestors); + + if (store == null) return; + + try + { + var order = commerceApi.GetOrCreateCurrentOrder(store.Id) + .AsWritable(uow) + .AddProduct(cart.ProductReference, 1); + + commerceApi.SaveOrder(order); + + uow.Complete(); + + TempData["SuccessFeedback"] = "Product added to cart"; + return RedirectToCurrentUmbracoPage(); + } + catch (ValidationException ve) + { + throw new ValidationException(ve.Errors); + } + catch (Exception ex) + { + logger.Error(ex, "An error occurred."); + } + }); +} +``` + +The code above does the following: + +- The `store` variable is used to access the store to get the store ID. +- A try-catch block captures any errors that may occur when adding the item to the cart, including any validation errors. +- `order` is used to retrieve the current order if one exists or create a new order against the store found. In the Commerce API, everything is read-only for performance so you need to make it writable to add the product. +- `AddProduct` is called and `productReference` is passed along with the quantity. +- `SaveOrder` is called to save the order. +- `TempData` stores a message to be displayed to the user if the product has been added to the cart. + +{% hint style="warning" %} +Umbraco Commerce uses the Unit of Work pattern to complete saving the item (`uow.Complete`). When retrieving or saving data ideally you would want the entire transaction to be committed. However, if there is an error nothing is changed on the database. +{% endhint %} + +Finally, you need to add the `TempData` to tell the user that the product has been added to the cart. + +## Add a partial view to display the message + +Create a new partial view called `Feedback.cshtml`. + +```csharp +@Html.ValidationSummary(true, "", new { @class = "danger" }) + +@{ + var success = TempData["SuccessFeedback"]?.ToString(); + + if (!string.IsNullOrWhiteSpace(success)) + { +
@success
+ } +} +``` + +You can now run the application, click the button, and see the product added to the cart with a message displayed to the user. diff --git a/15/umbraco-commerce/how-to-guides/delete-item.md b/15/umbraco-commerce/how-to-guides/delete-item.md new file mode 100644 index 00000000000..12b750e77b4 --- /dev/null +++ b/15/umbraco-commerce/how-to-guides/delete-item.md @@ -0,0 +1,176 @@ +--- +description: Learn how to remove items added to the shopping cart. +--- + +# Delete item from cart + +{% hint style="info" %} +This guide builds on the guide on [update-cart.md). It is recommended to follow that guide before starting this one. +{% endhint %} + +This will teach you how to delete an item from the cart. + +Your view for the `cart.cshtml` page will be similar the example below. + +```csharp +@inherits UmbracoViewPage +@{ + var store = Model.Value("store", fallback: Fallback.ToAncestors); + var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); + if (currentOrder == null) return; + + @using (Html.BeginUmbracoForm("UpdateCart", "CartSurface")) + { + @foreach (var item in currentOrder.OrderLines.Select((ol, i) => new + { + OrderLine = ol, + Index = i + })) + { +

+ @Html.Hidden($"orderLines[{item.Index}].Id", item.OrderLine.Id) + @item.OrderLine.Name @Html.Hidden($"orderLines[{item.Index}].Quantity", (int)item.OrderLine.Quantity, new { @type = "number" }) + @Html.Hidden($"orderLines[{item.Index}].ProductReference", item.OrderLine.ProductReference) + Remove Item +

+ + } + + + + var success = TempData["SuccessMessage"]?.ToString(); + + if (!string.IsNullOrWhiteSpace(success)) + { +
@success
+ } + } +} +``` + +The code below allows the Umbraco `SurfaceAction` to call `RemoveFromCart` when the link is clicked. It will also pass the `OrderLineId`. + +```csharp +Remove +``` + +## Adding the Controller + +For the button to work, you need to add some functionality via a Controller. + +Create a new Controller called `CartSurfaceController.cs` + +{% hint style="warning" %} + +The namespaces used in this Controller are important and need to be included. + +``` +using Microsoft.AspNetCore.Mvc; +using Umbraco.Cms.Core.Cache; +using Umbraco.Cms.Core.Logging; +using Umbraco.Cms.Core.Models.PublishedContent; +using Umbraco.Cms.Core.Routing; +using Umbraco.Cms.Core.Services; +using Umbraco.Cms.Core.Web; +using Umbraco.Cms.Infrastructure.Persistence; +using Umbraco.Cms.Web.Website.Controllers; +using Umbraco.Commerce.Common.Validation; +using Umbraco.Commerce.Core.Api; +using Umbraco.Commerce.Core.Models; +using Umbraco.Commerce.Extensions; +using Umbraco.Extensions; +``` + +{% endhint %} + +```csharp +public class CartSurfaceController : SurfaceController +{ + public CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, + AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) + { + _commerceApi = commerceApi; + } +} +``` + +The example below is the equivalent code for having this as a Primary Constructor: + +```csharp +public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, + AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : SurfaceController(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) +{ +} +``` + + + +The `CartDto` is a class used to pass data to the Controller. In this instance, it passes over the `OrderLineId`. + +```csharp + public class CartDto + { + public Guid OrderLineId { get; set; } + } +``` + +You need to add the `Action` to delete the item from the cart. This will be called when the button is clicked. + +```csharp +[HttpGet] +public IActionResult RemoveFromCart(CartDto cart) +{ + try + { + _commerceApi.Uow.Execute(uow => + { + var store = CurrentPage?.Value("store", fallback: Fallback.ToAncestors); + + if (store == null) return; + + var order = _commerceApi.GetOrCreateCurrentOrder(store.Id) + .AsWritable(uow) + .RemoveOrderLine(cart.OrderLineId); + + _commerceApi.SaveOrder(order); + + uow.Complete(); + }); + } + catch (ValidationException) + { + ModelState.AddModelError(string.Empty, "Failed to remove product from cart"); + + return CurrentUmbracoPage(); + } + + TempData["SuccessMessage"] = "Item removed"; + + return RedirectToCurrentUmbracoPage(); +} +``` + +- A `try-catch` block captures any validation errors that may occur when updating items in the cart. +- The `store` variable is used to access the store to retrieve the store ID. +- `order` is used to retrieve the current order. In the Commerce API, everything is read-only for performance so you need to make it writable to add the product. +- `SaveOrder` is called to save the order. +- If there are any validation errors, they are added to a `ModelState` error, and the user is redirected back to the current page. +- `TempData` stores a message to be displayed to the user if the product has been successfully updated. + +{% hint style="warning" %} +Umbraco Commerce uses the Unit of Work pattern to complete saving the item (`uow.Complete`). When retrieving or saving data ideally you would want the entire transaction to be committed. However, if there is an error nothing is changed on the database. +{% endhint %} + +If you have followed the [Add item to cart](add-item.md) article, run the application, add an item to your cart, and navigate to your `cart.cshtml` page. Clicking the `Remove Item` button will delete the item in your cart and display a message. diff --git a/15/umbraco-commerce/how-to-guides/overview.md b/15/umbraco-commerce/how-to-guides/overview.md index 2bb41124ae1..472ba99c910 100644 --- a/15/umbraco-commerce/how-to-guides/overview.md +++ b/15/umbraco-commerce/how-to-guides/overview.md @@ -8,4 +8,5 @@ In this section, we will provide a series of How-To Guides, showcasing how to pe ## Available guides -
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Limit Order Line Quantitylimit-orderline-quantity.md
Add item to Cartadd-item.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
+ +
Migrate from Vendr to Umbraco Commercemigrate-from-vendr-to-umbraco-commerce
Configure SQLite supportconfigure-sqlite-support.md
Add item to Cartadd-item.md
Update Cartupdate-cart.md
Delete item from Cartdelete-item.md
Limit Order Line Quantitylimit-orderline-quantity.md
Use an alternative database for Umbraco Commerce tablesuse-an-alternative-database-for-umbraco-commerce-tables.md
diff --git a/15/umbraco-commerce/how-to-guides/update-cart.md b/15/umbraco-commerce/how-to-guides/update-cart.md new file mode 100644 index 00000000000..72825b98838 --- /dev/null +++ b/15/umbraco-commerce/how-to-guides/update-cart.md @@ -0,0 +1,218 @@ +--- +description: Learn how to update your cart when one or more quantities have changed. +--- + +# Update Card + +Functionality is needed to update the cart once an item has been added. In this guide, you can learn how to add this functionality. + +You need a new page to summarize the items in the cart and allow users to update each item. + +Create a new Document With a Template. Call it "Cart Page" and update the template with the following code: + +```csharp +@inherits UmbracoViewPage +@{ + var store = Model.Value("store", fallback: Fallback.ToAncestors); + var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); + if (currentOrder == null) return; +} +``` + +- You need to access the store to see the relevant data for the current cart/order. The store has a `fallback` property allowing you to traverse the tree to find the store. +- `currentOrder` is used to get the current order for the store. If the current order is null then there is nothing to display. + +To display the default layout when an order does exist, you need to add some markup or amend it to include the desired functionality. Add the following code to the template: + +```csharp +@using (Html.BeginUmbracoForm("UpdateCart", "CartSurface")) +{ + @foreach (var item in currentOrder.OrderLines.Select((ol, i) => new + { + OrderLine = ol, + Index = i + })) + { +

+ @Html.Hidden($"orderLines[{item.Index}].Id", item.OrderLine.Id) + @item.OrderLine.Name | @Html.TextBox($"orderLines[{item.Index}].Quantity", (int)item.OrderLine.Quantity, new { @type = "number" }) + @Html.Hidden($"orderLines[{item.Index}].ProductReference", item.OrderLine.ProductReference) + Remove +

+ + } + + + + var success = TempData["SuccessMessage"]?.ToString(); + + if (!string.IsNullOrWhiteSpace(success)) + { +
@success
+ } +} +``` + +You first loop through each item in the `cart/order` and display the product name and quantity. + +A hidden input is added for the order ID, quantity, and product reference. This is so you can update the cart with the new number. + +```csharp + @Html.Hidden($"orderLines[{item.Index}].OrderId", item.OrderLine.Id) +``` + +The line below sets the ID of the order line (or the item in the current cart/order). + +```csharp + @item.OrderLine.Name @Html.Hidden($"orderLines[{item.Index}].Quantity", (int)item.OrderLine.Quantity, new { @type = "number" }) +``` + +As well as setting the product name, the line below sets the quantity of the product in the cart/order. Finally, the number is set to a number input type. + +```csharp + @Html.Hidden($"orderLines[{item.Index}].ProductReference", item.OrderLine.ProductReference) +``` + +This is setting the product reference in the cart/order so there is a way to distinguish between products. This is hidden as it does not need to be displayed to the user. + +{% hint style="warning" %} + +The `remove` button is added here but is not covered in this guide. Learn more in the [Remove from card](delete-item.md) article. + +{% endhint %} + +Finally, a button is added to submit the form to update the cart. This will call the `UpdateCart` action in the `CartSurfaceController` which will then show a success message to the user. + +## Adding the Controller + +Create a new Controller called `CartSurfaceController.cs` + +{% hint style="warning" %} + +The namespaces used in this Controller are important and need to be included. + +``` +using Microsoft.AspNetCore.Mvc; +using Umbraco.Cms.Core.Cache; +using Umbraco.Cms.Core.Logging; +using Umbraco.Cms.Core.Models.PublishedContent; +using Umbraco.Cms.Core.Routing; +using Umbraco.Cms.Core.Services; +using Umbraco.Cms.Core.Web; +using Umbraco.Cms.Infrastructure.Persistence; +using Umbraco.Cms.Web.Website.Controllers; +using Umbraco.Commerce.Common.Validation; +using Umbraco.Commerce.Core.Api; +using Umbraco.Commerce.Core.Models; +using Umbraco.Commerce.Extensions; +using Umbraco.Extensions; +``` + +{% endhint %} + +```csharp +public class CartSurfaceController : SurfaceController +{ + public CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) + { + _commerceApi = commerceApi; + } +} +``` + +The following is the equivalent code for having this as a Primary Constructor: + +```csharp +public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccessor, + IUmbracoDatabaseFactory databaseFactory, + ServiceContext services, AppCaches appCaches, + IProfilingLogger profilingLogger, + IPublishedUrlProvider publishedUrlProvider, + IUmbracoCommerceApi commerceApi) + : SurfaceController(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider) +{ +} +``` + +The `CartDto` is a class that passes data to the Controller. This is a class that has a property for the `productReference` and an array of `OrderLineQuantityDto[]`. + +```csharp + public class CartDto + { + public string ProductReference { get; set; } + public OrderLineQuantityDto[] OrderLines { get; set; } + } + + public class OrderLineQuantityDto + { + public Guid Id { get; set; } + public decimal Quantity { get; set; } + } +``` + +{% hint style="warning" %} +The code example above adds the `ProductReference` but it is not used in this guide. + +It is an example of passing the product reference to the controller for similar tasks. +{% endhint %} + +You need to add the `Action` to update the items in the cart. This will be called when the button is clicked. + +```csharp +[HttpPost] + public IActionResult UpdateCart(CartDto cart) + { + try + { + _commerceApi.Uow.Execute(uow => + { + var store = CurrentPage?.Value("store", fallback: Fallback.ToAncestors); + + if (store == null) return; + + var order = _commerceApi.GetCurrentOrder(store.Id) + .AsWritable(uow); + + foreach (var orderLine in cart.OrderLines) + { + order.WithOrderLine(orderLine.Id) + .SetQuantity(orderLine.Quantity); + } + + _commerceApi.SaveOrder(order); + + uow.Complete(); + }); + } + catch (ValidationException) + { + ModelState.AddModelError(string.Empty, "Failed to update cart"); + + return CurrentUmbracoPage(); + } + + TempData["SuccessMessage"] = "Cart updated"; + + return RedirectToCurrentUmbracoPage(); + } +``` + +- A `try-catch` block captures any validation errors that may occur when updating items in the cart. +- The `store` variable is used to access the store to retrieve the store ID. +- `order` is used to retrieve the current order. In the Commerce API, everything is read-only for performance so you need to make it writable to add the product. +- You loop through all the `orderLines(items)` in the cart, set the new quantity amount set in the View, and pass it to the CartDto model. +- `SaveOrder` is called to save the order. +- If there are any validation errors, they are added to `ModelState` error, and the user is redirected back to the current page. +- `TempData` stores a message to be displayed to the user if the product has been successfully updated. + +{% hint style="warning" %} +Umbraco Commerce uses the Unit of Work pattern to complete saving the item (`uow.Complete`). When retrieving or saving data you want the entire transaction to be committed. However, if there is an error nothing is changed on the database. +{% endhint %} + +If you have followed the [Add item to cart](add-item.md) article then run the application, add an item to your cart, and navigate to your `cart.cshtml` page. Enter a new quantity, click the Update Cart button, and the item(s) in your cart will tell you the values have been updated. From a5d93d4aa60d0f6f249627aa7db008a897e1c959 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Wed, 27 Nov 2024 09:57:37 +0100 Subject: [PATCH 3/4] Fixed typo, grammar, broken links --- 13/umbraco-commerce/how-to-guides/delete-item.md | 14 ++++++-------- 13/umbraco-commerce/how-to-guides/update-cart.md | 12 ++++++------ 14/umbraco-commerce/how-to-guides/add-item.md | 4 ++-- 14/umbraco-commerce/how-to-guides/delete-item.md | 8 +++----- 14/umbraco-commerce/how-to-guides/update-cart.md | 6 +++--- 15/umbraco-commerce/how-to-guides/add-item.md | 4 ++-- 15/umbraco-commerce/how-to-guides/delete-item.md | 8 +++----- 15/umbraco-commerce/how-to-guides/update-cart.md | 6 +++--- 8 files changed, 28 insertions(+), 34 deletions(-) diff --git a/13/umbraco-commerce/how-to-guides/delete-item.md b/13/umbraco-commerce/how-to-guides/delete-item.md index 12b750e77b4..d103d3cf7d4 100644 --- a/13/umbraco-commerce/how-to-guides/delete-item.md +++ b/13/umbraco-commerce/how-to-guides/delete-item.md @@ -5,19 +5,19 @@ description: Learn how to remove items added to the shopping cart. # Delete item from cart {% hint style="info" %} -This guide builds on the guide on [update-cart.md). It is recommended to follow that guide before starting this one. +This guide builds on the [Update Cart](update-cart.md) guide. It is recommended to follow that guide before starting this one. {% endhint %} This will teach you how to delete an item from the cart. -Your view for the `cart.cshtml` page will be similar the example below. +Your view for the `cart.cshtml` page will be similar to the example below. ```csharp @inherits UmbracoViewPage @{ - var store = Model.Value("store", fallback: Fallback.ToAncestors); - var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); - if (currentOrder == null) return; + var store = Model.Value("store", fallback: Fallback.ToAncestors); + var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); + if (currentOrder == null) return; @using (Html.BeginUmbracoForm("UpdateCart", "CartSurface")) { @@ -64,7 +64,7 @@ Create a new Controller called `CartSurfaceController.cs` The namespaces used in this Controller are important and need to be included. -``` +```cs using Microsoft.AspNetCore.Mvc; using Umbraco.Cms.Core.Cache; using Umbraco.Cms.Core.Logging; @@ -115,8 +115,6 @@ public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccesso } ``` - - The `CartDto` is a class used to pass data to the Controller. In this instance, it passes over the `OrderLineId`. ```csharp diff --git a/13/umbraco-commerce/how-to-guides/update-cart.md b/13/umbraco-commerce/how-to-guides/update-cart.md index 72825b98838..80fab8f0379 100644 --- a/13/umbraco-commerce/how-to-guides/update-cart.md +++ b/13/umbraco-commerce/how-to-guides/update-cart.md @@ -2,7 +2,7 @@ description: Learn how to update your cart when one or more quantities have changed. --- -# Update Card +# Update Cart Functionality is needed to update the cart once an item has been added. In this guide, you can learn how to add this functionality. @@ -13,9 +13,9 @@ Create a new Document With a Template. Call it "Cart Page" and update the templa ```csharp @inherits UmbracoViewPage @{ - var store = Model.Value("store", fallback: Fallback.ToAncestors); - var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); - if (currentOrder == null) return; + var store = Model.Value("store", fallback: Fallback.ToAncestors); + var currentOrder = CommerceApi.Instance.GetCurrentOrder(store!.Id); + if (currentOrder == null) return; } ``` @@ -77,7 +77,7 @@ This is setting the product reference in the cart/order so there is a way to dis {% hint style="warning" %} -The `remove` button is added here but is not covered in this guide. Learn more in the [Remove from card](delete-item.md) article. +The `remove` button is added here but is not covered in this guide. Learn more in the [Delete item from Cart](delete-item.md) article. {% endhint %} @@ -91,7 +91,7 @@ Create a new Controller called `CartSurfaceController.cs` The namespaces used in this Controller are important and need to be included. -``` +```cs using Microsoft.AspNetCore.Mvc; using Umbraco.Cms.Core.Cache; using Umbraco.Cms.Core.Logging; diff --git a/14/umbraco-commerce/how-to-guides/add-item.md b/14/umbraco-commerce/how-to-guides/add-item.md index cd74de7d3c4..ab0b9282f76 100644 --- a/14/umbraco-commerce/how-to-guides/add-item.md +++ b/14/umbraco-commerce/how-to-guides/add-item.md @@ -4,13 +4,13 @@ description: How-To Guide to add an item to your cart. # Add item to Cart -To add an item to the cart, configure Umbraco with a store and add the necessary properties for interaction. Learn more by following the [Getting started with Umbraco Commerce: The Backoffice tutorial](../tutorials/getting-started-with-commerce). +To add an item to the cart, configure Umbraco with a store and add the necessary properties for interaction. Learn more by following the [Getting started with Umbraco Commerce: The Backoffice tutorial](../tutorials/getting-started-with-commerce.md). You will need the front end to be set up to allow an item to be added to the cart. This can be done by adding a button to the front end to call the Action to add the item to the cart. Create a new Document Type with the template. Call it **Product Page** with the following property aliases: `productTitle`, `productDescription`, `price`, `stock`. -The following property editors are recommeded to be used for the above: +The following property editors are recommended to be used for the above: * `productTitle`: TextString * `productDescription`: TextArea diff --git a/14/umbraco-commerce/how-to-guides/delete-item.md b/14/umbraco-commerce/how-to-guides/delete-item.md index 12b750e77b4..ec7ac680cef 100644 --- a/14/umbraco-commerce/how-to-guides/delete-item.md +++ b/14/umbraco-commerce/how-to-guides/delete-item.md @@ -5,12 +5,12 @@ description: Learn how to remove items added to the shopping cart. # Delete item from cart {% hint style="info" %} -This guide builds on the guide on [update-cart.md). It is recommended to follow that guide before starting this one. +This guide builds on the [Update Cart](update-cart.md) guide. It is recommended to follow that guide before starting this one. {% endhint %} This will teach you how to delete an item from the cart. -Your view for the `cart.cshtml` page will be similar the example below. +Your view for the `cart.cshtml` page will be similar to the example below. ```csharp @inherits UmbracoViewPage @@ -64,7 +64,7 @@ Create a new Controller called `CartSurfaceController.cs` The namespaces used in this Controller are important and need to be included. -``` +```cs using Microsoft.AspNetCore.Mvc; using Umbraco.Cms.Core.Cache; using Umbraco.Cms.Core.Logging; @@ -115,8 +115,6 @@ public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccesso } ``` - - The `CartDto` is a class used to pass data to the Controller. In this instance, it passes over the `OrderLineId`. ```csharp diff --git a/14/umbraco-commerce/how-to-guides/update-cart.md b/14/umbraco-commerce/how-to-guides/update-cart.md index 72825b98838..acc5f71ee2f 100644 --- a/14/umbraco-commerce/how-to-guides/update-cart.md +++ b/14/umbraco-commerce/how-to-guides/update-cart.md @@ -2,7 +2,7 @@ description: Learn how to update your cart when one or more quantities have changed. --- -# Update Card +# Update Cart Functionality is needed to update the cart once an item has been added. In this guide, you can learn how to add this functionality. @@ -77,7 +77,7 @@ This is setting the product reference in the cart/order so there is a way to dis {% hint style="warning" %} -The `remove` button is added here but is not covered in this guide. Learn more in the [Remove from card](delete-item.md) article. +The `remove` button is added here but is not covered in this guide. Learn more in the [Delete item from Cart](delete-item.md) article. {% endhint %} @@ -91,7 +91,7 @@ Create a new Controller called `CartSurfaceController.cs` The namespaces used in this Controller are important and need to be included. -``` +```cs using Microsoft.AspNetCore.Mvc; using Umbraco.Cms.Core.Cache; using Umbraco.Cms.Core.Logging; diff --git a/15/umbraco-commerce/how-to-guides/add-item.md b/15/umbraco-commerce/how-to-guides/add-item.md index cd74de7d3c4..ab0b9282f76 100644 --- a/15/umbraco-commerce/how-to-guides/add-item.md +++ b/15/umbraco-commerce/how-to-guides/add-item.md @@ -4,13 +4,13 @@ description: How-To Guide to add an item to your cart. # Add item to Cart -To add an item to the cart, configure Umbraco with a store and add the necessary properties for interaction. Learn more by following the [Getting started with Umbraco Commerce: The Backoffice tutorial](../tutorials/getting-started-with-commerce). +To add an item to the cart, configure Umbraco with a store and add the necessary properties for interaction. Learn more by following the [Getting started with Umbraco Commerce: The Backoffice tutorial](../tutorials/getting-started-with-commerce.md). You will need the front end to be set up to allow an item to be added to the cart. This can be done by adding a button to the front end to call the Action to add the item to the cart. Create a new Document Type with the template. Call it **Product Page** with the following property aliases: `productTitle`, `productDescription`, `price`, `stock`. -The following property editors are recommeded to be used for the above: +The following property editors are recommended to be used for the above: * `productTitle`: TextString * `productDescription`: TextArea diff --git a/15/umbraco-commerce/how-to-guides/delete-item.md b/15/umbraco-commerce/how-to-guides/delete-item.md index 12b750e77b4..ec7ac680cef 100644 --- a/15/umbraco-commerce/how-to-guides/delete-item.md +++ b/15/umbraco-commerce/how-to-guides/delete-item.md @@ -5,12 +5,12 @@ description: Learn how to remove items added to the shopping cart. # Delete item from cart {% hint style="info" %} -This guide builds on the guide on [update-cart.md). It is recommended to follow that guide before starting this one. +This guide builds on the [Update Cart](update-cart.md) guide. It is recommended to follow that guide before starting this one. {% endhint %} This will teach you how to delete an item from the cart. -Your view for the `cart.cshtml` page will be similar the example below. +Your view for the `cart.cshtml` page will be similar to the example below. ```csharp @inherits UmbracoViewPage @@ -64,7 +64,7 @@ Create a new Controller called `CartSurfaceController.cs` The namespaces used in this Controller are important and need to be included. -``` +```cs using Microsoft.AspNetCore.Mvc; using Umbraco.Cms.Core.Cache; using Umbraco.Cms.Core.Logging; @@ -115,8 +115,6 @@ public class CartSurfaceController(IUmbracoContextAccessor umbracoContextAccesso } ``` - - The `CartDto` is a class used to pass data to the Controller. In this instance, it passes over the `OrderLineId`. ```csharp diff --git a/15/umbraco-commerce/how-to-guides/update-cart.md b/15/umbraco-commerce/how-to-guides/update-cart.md index 72825b98838..acc5f71ee2f 100644 --- a/15/umbraco-commerce/how-to-guides/update-cart.md +++ b/15/umbraco-commerce/how-to-guides/update-cart.md @@ -2,7 +2,7 @@ description: Learn how to update your cart when one or more quantities have changed. --- -# Update Card +# Update Cart Functionality is needed to update the cart once an item has been added. In this guide, you can learn how to add this functionality. @@ -77,7 +77,7 @@ This is setting the product reference in the cart/order so there is a way to dis {% hint style="warning" %} -The `remove` button is added here but is not covered in this guide. Learn more in the [Remove from card](delete-item.md) article. +The `remove` button is added here but is not covered in this guide. Learn more in the [Delete item from Cart](delete-item.md) article. {% endhint %} @@ -91,7 +91,7 @@ Create a new Controller called `CartSurfaceController.cs` The namespaces used in this Controller are important and need to be included. -``` +```cs using Microsoft.AspNetCore.Mvc; using Umbraco.Cms.Core.Cache; using Umbraco.Cms.Core.Logging; From b62fba003ca03203e99952a6c2cbfe0c25d9e111 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Wed, 27 Nov 2024 10:01:48 +0100 Subject: [PATCH 4/4] Minor fixes --- 14/umbraco-commerce/SUMMARY.md | 2 +- 15/umbraco-commerce/SUMMARY.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/14/umbraco-commerce/SUMMARY.md b/14/umbraco-commerce/SUMMARY.md index 3e926e1cb4a..be991e35c11 100644 --- a/14/umbraco-commerce/SUMMARY.md +++ b/14/umbraco-commerce/SUMMARY.md @@ -35,7 +35,7 @@ * [Use an Alternative Database for Umbraco Commerce Tables](how-to-guides/use-an-alternative-database-for-umbraco-commerce-tables.md) * [Add item to Cart](how-to-guides/add-item.md) * [Update Cart](how-to-guides/update-cart.md) -* [Delete item in Cart](how-to-guides/delete-item.md) +* [Delete item from Cart](how-to-guides/delete-item.md) ## Key Concepts diff --git a/15/umbraco-commerce/SUMMARY.md b/15/umbraco-commerce/SUMMARY.md index abcbb3ae58a..2066c239983 100644 --- a/15/umbraco-commerce/SUMMARY.md +++ b/15/umbraco-commerce/SUMMARY.md @@ -34,7 +34,7 @@ * [Use an Alternative Database for Umbraco Commerce Tables](how-to-guides/use-an-alternative-database-for-umbraco-commerce-tables.md) * [Add item to Cart](how-to-guides/add-item.md) * [Update Cart](how-to-guides/update-cart.md) -* [Delete item in Cart](how-to-guides/delete-item.md) +* [Delete item from Cart](how-to-guides/delete-item.md) ## Key Concepts