You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 13/umbraco-commerce/how-to-guides/add-item
+90-73Lines changed: 90 additions & 73 deletions
Original file line number
Diff line number
Diff line change
@@ -2,14 +2,15 @@
2
2
description: How-To Guide to add an item to your cart.
3
3
---
4
4
5
-
To add an item to the cart, you first need to setup Umbraco with a store and add the relevant properties (i.e. Price and Stock see https://docs.umbraco.com/umbraco-commerce/10.commerce.latest/key-concepts/umbraco-properties) to allow the store to interact with Umbraco.
5
+
# Add item to Cart
6
6
7
-
## Add a product to the Cart
8
-
You will need the Frontend to be setup to add allow an item to be added to the cart. This can be done by adding a button to the frontend that will call the Action to add the item to the cart.
7
+
To add an item to the cart, you need to set up Umbraco with a store and add the relevant properties to allow the store to interact with Umbraco. Learn more by following the [Getting started with Umbraco Commerce: The Backoffice tutorial](../tutorials/getting-started-with-commerce).
9
8
10
-
Create a new Document Type with template, we will call it Product Page with these properties aliases: `productTitle`, `productDescription`, `price`, `stock`.
9
+
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.
11
10
12
-
The Product Page template can be implemented like the below code.
11
+
Create a new Document Type with the template. Call it **Product Page** with the following property aliases: `productTitle`, `productDescription`, `price`, `stock`.
12
+
13
+
The Product Page template can be implemented as shown below.
@@ -20,12 +21,14 @@ var price = product.TryCalculatePrice().ResultOrThrow("Unable to calculate produ
20
21
}
21
22
```
22
23
23
-
- You will need to access the store so you have access to the relevant properties for your product such as price. The store has a fallback property allowing you to traverse up the tree to find the store.
24
-
- We retrieve the product based on the store and a reference for the product (the 'productReference' in this instance is coming from the Model which is a single product).
25
-
- 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 which it can use for further processing.
26
-
- Finally we need to calculate the price which is then displayed without VAT (although can be also displayed with VAT)
24
+
The code above does the following:
25
+
26
+
- 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.
27
+
- 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.
28
+
- 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.
29
+
- Finally, you need to calculate the price which is then displayed without VAT. This can also be displayed with VAT.
27
30
28
-
To display this we need to add some markup or at least amend it to include a button to add an item. In the same file add the below
31
+
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:
The CartDto is a class that is used to pass the productReference across to the Controller. This is a simple class that has a property for the productReference.
114
+
The CartDto class below is used to pass the `productReference` across to the Controller. This class has only one property for the `productReference`.
99
115
100
116
```csharp
101
117
public class CartDto
@@ -104,60 +120,61 @@ public class CartDto
104
120
}
105
121
```
106
122
107
-
We now need to add the Action in order to add the item to the cart. This will be called when the button is clicked.
123
+
We now need to add the Action to add the item to the cart. This action will be called when the button is clicked.
108
124
109
125
```csharp
110
-
[HttpPost]
111
-
public IActionResult AddToBasket(CartDto cart)
126
+
[HttpPost]
127
+
public IActionResult AddToBasket(CartDto cart)
128
+
{
129
+
commerceApi.Uow.Execute(uow =>
112
130
{
113
-
commerceApi.Uow.Execute(uow =>
131
+
var store = CurrentPage.Value<StoreReadOnly>("store", fallback: Fallback.ToAncestors);
132
+
133
+
if (store == null) return;
134
+
135
+
try
114
136
{
115
-
var store = CurrentPage.Value<StoreReadOnly>("store", fallback: Fallback.ToAncestors);
116
-
117
-
if (store == null) return;
118
-
119
-
try
120
-
{
121
-
var order = commerceApi.GetOrCreateCurrentOrder(store.Id)
122
-
.AsWritable(uow)
123
-
.AddProduct(cart.ProductReference, 1);
124
-
125
-
commerceApi.SaveOrder(order);
126
-
127
-
uow.Complete();
128
-
129
-
TempData["SuccessFeedback"] = "Product added to cart";
130
-
return RedirectToCurrentUmbracoPage();
131
-
}
132
-
catch (ValidationException ve)
133
-
{
134
-
throw new ValidationException(ve.Errors);
135
-
}
136
-
catch (Exception ex)
137
-
{
138
-
logger.Error(ex, "An error occurred.");
139
-
}
140
-
});
141
-
}
137
+
var order = commerceApi.GetOrCreateCurrentOrder(store.Id)
138
+
.AsWritable(uow)
139
+
.AddProduct(cart.ProductReference, 1);
140
+
141
+
commerceApi.SaveOrder(order);
142
+
143
+
uow.Complete();
142
144
145
+
TempData["SuccessFeedback"] = "Product added to cart";
146
+
return RedirectToCurrentUmbracoPage();
147
+
}
148
+
catch (ValidationException ve)
149
+
{
150
+
throw new ValidationException(ve.Errors);
151
+
}
152
+
catch (Exception ex)
153
+
{
154
+
logger.Error(ex, "An error occurred.");
155
+
}
156
+
});
157
+
}
143
158
```
144
159
145
-
- store variable is used to access the store to get the store ID.
146
-
- A try catch block is used to capture any errors that may occur when adding the item to the cart, including any validation errors.
147
-
- 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 we need to make it writable in order to add the product.
148
-
- AddProduct is called and the passed in productReference is passed across along with the quantity.
149
-
- SaveOrder is called to save the order.
150
-
- TempData is used to store a message to be displayed to the user if the product has been added to the cart.
160
+
The code above does the following:
161
+
162
+
- The `store` variable is used to access the store to get the store ID.
163
+
- A try-catch block captures any errors that may occur when adding the item to the cart, including any validation errors.
164
+
- `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.
165
+
- `AddProduct` is called and `productReference` is passed along with the quantity.
166
+
- `SaveOrder` is called to save the order.
167
+
- `TempData` stores a message to be displayed to the user if the product has been added to the cart.
151
168
152
169
{% hint style="warning" %}
153
-
Umbraco Commerce uses the Unit of Work pattern in order to complete saviing 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 then nothing is changed on the database.
170
+
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.
154
171
{% endhint %}
155
172
156
-
Finally, we need to add the TempData to display a message to the user that the product has been added to the cart.
173
+
Finally, you need to add the `TempData` to tell the user that the product has been added to the cart.
157
174
158
175
## Add a partial view to display the message
159
176
160
-
Create a new partial view called Feedback.cshtml
177
+
Create a new partial view called `Feedback.cshtml`.
161
178
162
179
```csharp
163
180
@Html.ValidationSummary(true, "", new { @class = "danger" })
@@ -172,4 +189,4 @@ Create a new partial view called Feedback.cshtml
172
189
}
173
190
```
174
191
175
-
Run the application, click the button and the product will be added to the cart with a message displayed to the user.
192
+
You can now run the application, click the button, and see the product added to the cart with a message displayed to the user.
0 commit comments