Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions 13/umbraco-commerce/how-to-guides/add-item.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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](../getting-started/umbraco-configuration.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.

Expand All @@ -30,30 +30,30 @@ var price = product.TryCalculatePrice().ResultOrThrow("Unable to calculate produ

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.
* 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())
<h1>@Model.Value<string>("productTitle")</h1>
<h2>@Model.Value<string>("productDescription")</h2>
@Html.Hidden("productReference", Model.Key.ToString())
<h1>@Model.Value<string>("productTitle")</h1>
<h2>@Model.Value<string>("productDescription")</h2>

<p>Our price excluding VAT <strong>@price.WithoutTax.ToString("C0") </strong></p>
<p>Our price excluding VAT <strong>@price.WithoutTax.ToString("C0") </strong></p>

if (@Model.Value<int>("stock") == 0)
{
<p>Sorry, out of stock</p>
}
else
{
<button type="submit">Add to Basket</button>
}
if (@Model.Value<int>("stock") == 0)
{
<p>Sorry, out of stock</p>
}
else
{
<button type="submit">Add to Basket</button>
}

}
```
Expand Down Expand Up @@ -166,12 +166,12 @@ public IActionResult AddToBasket(CartDto cart)

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.
* 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.
Expand All @@ -187,12 +187,12 @@ Create a new partial view called `Feedback.cshtml`.
@Html.ValidationSummary(true, "", new { @class = "danger" })

@{
var success = TempData["SuccessFeedback"]?.ToString();
var success = TempData["SuccessFeedback"]?.ToString();

if (!string.IsNullOrWhiteSpace(success))
{
<div class="success">@success</div>
}
if (!string.IsNullOrWhiteSpace(success))
{
<div class="success">@success</div>
}
}
```

Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-commerce/how-to-guides/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@

## Available guides

<table data-card-size="large" data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center">Migrate from Vendr to Umbraco Commerce</td><td><a href="migrate-from-vendr-to-umbraco-commerce/">migrate-from-vendr-to-umbraco-commerce</a></td></tr><tr><td align="center">Configure SQLite support</td><td><a href="configure-sqlite-support.md">configure-sqlite-support.md</a></td></tr><tr><td align="center">Add item to Cart</td><td><a href="add-item.md">add-item.md</a></td></tr><tr><td align="center">Update Cart</td><td><a href="update-cart.md">update-cart.md</a></td></tr>
<table data-card-size="large" data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center">Migrate from Vendr to Umbraco Commerce</td><td><a href="../upgrading/migrate-from-vendr-to-umbraco-commerce/README.md">migrate-from-vendr-to-umbraco-commerce</a></td></tr><tr><td align="center">Configure SQLite support</td><td><a href="configure-sqlite-support.md">configure-sqlite-support.md</a></td></tr><tr><td align="center">Add item to Cart</td><td><a href="add-item.md">add-item.md</a></td></tr><tr><td align="center">Update Cart</td><td><a href="update-cart.md">update-cart.md</a></td></tr>

Check warning on line 11 in 13/umbraco-commerce/how-to-guides/overview.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [UmbracoDocs.UmbracoTerms] We prefer 'Umbraco' over 'umbraco.' Raw Output: {"message": "[UmbracoDocs.UmbracoTerms] We prefer 'Umbraco' over 'umbraco.'", "location": {"path": "13/umbraco-commerce/how-to-guides/overview.md", "range": {"start": {"line": 11, "column": 330}}}, "severity": "WARNING"}
<tr><td align="center">Delete item from Cart</td><td><a href="delete-item.md">delete-item.md</a></td></tr><tr><td align="center">Limit Order Line Quantity</td><td><a href="limit-orderline-quantity.md">limit-orderline-quantity.md</a></td></tr><tr><td align="center">Use an alternative database for Umbraco Commerce tables</td><td><a href="use-an-alternative-database-for-umbraco-commerce-tables.md">use-an-alternative-database-for-umbraco-commerce-tables.md</a></td></tr></tbody></table>
2 changes: 1 addition & 1 deletion 13/umbraco-commerce/key-concepts/product-bundles.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,4 @@ By adding sub-products to a bundle, Umbraco Commerce knows to automatically sum

As you can imagine, product bundles could get rather large making it a little difficult to display them in the backoffice. Umbraco Commerce bundles order lines together in a collapsible user interface. This gives you a clear view of your orders whilst still being able to drill into the detail of the items purchased.

![Product bundles in the backoffice](../media/backback-office-bundles.png)
![Product bundles in the backoffice](../media/back-office-bundles.png)
2 changes: 1 addition & 1 deletion 13/umbraco-commerce/reference/stores/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ Further store configuration can be achieved by setting up different categories o

The available configuration options are:

* **Locations** - Defines different locations for a store. See [Locations reference documentation](broken-reference) for more details.
* **Locations** - Defines different locations for a store.
* **Order Statuses** - Defines the order statuses to be used by a store.
* **Shipping Methods** - Defines the different shipping options available in the store. See [Shipping reference documentation](../shipping/) for more details.
* **Payment Methods** - Defines the different payment options available in the store.
Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-commerce/release-notes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ In this section, we have summarized the changes to Umbraco Commerce that were re
If there are any breaking changes or other issues to be aware of when upgrading they are also noted here.

{% hint style="info" %}
If you are upgrading to a new major version, check the breaking changes in the [Version Specific Upgrade Notes](upgrading/version-specific-upgrades.md) article.
If you are upgrading to a new major version, check the breaking changes in the [Version Specific Upgrade Notes](../upgrading/version-specific-upgrades.md) article.
{% endhint %}

## Release History
Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-commerce/upgrading/version-specific-upgrades.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: >-
This page covers specific upgrade documentation for when migrating to major 13 of Umbraco Commerce.

{% hint style="info" %}
If you are upgrading to a new minor or patch version, you can find information about the breaking changes in the [Release Notes](../release-notes.md) article.
If you are upgrading to a new minor or patch version, you can find information about the breaking changes in the [Release Notes](../release-notes/README.md) article.
{% endhint %}

## Version Specific Upgrade Notes History
Expand Down
Loading