From c76e417c77c28106933a2d2444364f46d2d5d41e Mon Sep 17 00:00:00 2001 From: MrEssCee <67432920+MrEssCee@users.noreply.github.com> Date: Fri, 14 Feb 2025 16:19:01 +0000 Subject: [PATCH 1/3] Create customise-checkout Information on how to amend the checkout to your own specification where required. --- .../packages/checkout/customise-checkout | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 commerce-add-ons/packages/checkout/customise-checkout diff --git a/commerce-add-ons/packages/checkout/customise-checkout b/commerce-add-ons/packages/checkout/customise-checkout new file mode 100644 index 00000000000..8e7b6326bbb --- /dev/null +++ b/commerce-add-ons/packages/checkout/customise-checkout @@ -0,0 +1,28 @@ +--- +description: This is the documentation for the Checkout package for Umbraco Commerce allowing you to customise the chekcout. +--- + +It is assumed that before we begin that you already have an Umbraco website configured and Umbraco Commerce installed and a store set up. If you are not at this stage yet, please read the [core Umbraco Commerce documentation](https://docs.umbraco.com/umbraco-commerce/) to learn how to get started. + +# Overview + +Umbraco Commerce Checkout is a free and open-source add-on package for Umbraco Commerce. It is possible to amend the default behaviour to customise the checkout towards your needs. + +# Setup + +In order to allow customisation you must first 'override' the existing files for the step required to be modified. + +To do this you need to copy the equivalent files and partials found at https://github.com/umbraco/Umbraco.Commerce.Checkout/tree/main/src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout. + +Copy the files from linked location and create Views/UmbracoCommerceCheckout folder if it doesnt already exist in your project. + +Copy all/required files to this location. + +To verify you have set this up correctly, make a simple text change to one of the Views and visit the step where the change was carried out to ensure it displays accordingly. + +## Useful links + +As well as the content in these docs, here are a few useful links to learn more about the Umbraco Commerce Checkout package itself. + +* [Umbraco Commerce Checkout source code](https://github.com/umbraco/Umbraco.Commerce.Checkout) +* [Umbraco Commerce Checkout issue tracker](https://github.com/umbraco/Umbraco.Commerce.Checkout/issues) From 06903e6c91e23e92da3b8292c3404b9e63d54c62 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 19 Feb 2025 06:21:48 +0100 Subject: [PATCH 2/3] Made some required changes --- ...stomise-checkout => customize-checkout.md} | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) rename commerce-add-ons/packages/checkout/{customise-checkout => customize-checkout.md} (51%) diff --git a/commerce-add-ons/packages/checkout/customise-checkout b/commerce-add-ons/packages/checkout/customize-checkout.md similarity index 51% rename from commerce-add-ons/packages/checkout/customise-checkout rename to commerce-add-ons/packages/checkout/customize-checkout.md index 8e7b6326bbb..0a819f68b5b 100644 --- a/commerce-add-ons/packages/checkout/customise-checkout +++ b/commerce-add-ons/packages/checkout/customize-checkout.md @@ -1,24 +1,22 @@ --- -description: This is the documentation for the Checkout package for Umbraco Commerce allowing you to customise the chekcout. +description: This documentation shows how to customize the Checkout package for Umbraco Commerce. --- -It is assumed that before we begin that you already have an Umbraco website configured and Umbraco Commerce installed and a store set up. If you are not at this stage yet, please read the [core Umbraco Commerce documentation](https://docs.umbraco.com/umbraco-commerce/) to learn how to get started. - -# Overview +# Customize Checkout -Umbraco Commerce Checkout is a free and open-source add-on package for Umbraco Commerce. It is possible to amend the default behaviour to customise the checkout towards your needs. +It is assumed that before we begin that you already have an Umbraco website configured and Umbraco Commerce installed and a store set up. If you are not at this stage yet, please read the [core Umbraco Commerce documentation](https://docs.umbraco.com/umbraco-commerce/) to learn how to get started. -# Setup +Umbraco Commerce Checkout is a free and open-source add-on package for Umbraco Commerce. It is possible to amend the default behaviour to customize the checkout towards your needs. -In order to allow customisation you must first 'override' the existing files for the step required to be modified. +## Setup -To do this you need to copy the equivalent files and partials found at https://github.com/umbraco/Umbraco.Commerce.Checkout/tree/main/src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout. +In order to allow customization you must first 'override' the existing files for the step required to be modified. -Copy the files from linked location and create Views/UmbracoCommerceCheckout folder if it doesnt already exist in your project. +To do this you need to copy the equivalent (files and partials)[https://github.com/umbraco/Umbraco.Commerce.Checkout/tree/main/src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout]. -Copy all/required files to this location. +Copy the files and add them to `Views/UmbracoCommerceCheckout` in your project directory. It might be necessary to create the folder first. -To verify you have set this up correctly, make a simple text change to one of the Views and visit the step where the change was carried out to ensure it displays accordingly. +Verify that the files are in use by making a simple text change to one of the Views. Visit the step where the change was carried out to ensure it displays accordingly. ## Useful links From 523540185f20daa6fa824dbd20e0c2e2b34e8149 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 19 Feb 2025 11:17:00 +0100 Subject: [PATCH 3/3] Final adjustments --- .../packages/checkout/customize-checkout.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/commerce-add-ons/packages/checkout/customize-checkout.md b/commerce-add-ons/packages/checkout/customize-checkout.md index 0a819f68b5b..c234908645d 100644 --- a/commerce-add-ons/packages/checkout/customize-checkout.md +++ b/commerce-add-ons/packages/checkout/customize-checkout.md @@ -4,23 +4,26 @@ description: This documentation shows how to customize the Checkout package for # Customize Checkout -It is assumed that before we begin that you already have an Umbraco website configured and Umbraco Commerce installed and a store set up. If you are not at this stage yet, please read the [core Umbraco Commerce documentation](https://docs.umbraco.com/umbraco-commerce/) to learn how to get started. +It is assumed that you already have an Umbraco website configured Umbraco Commerce installed and a store set up. If you are not at this stage yet, please read the [core Umbraco Commerce documentation](https://docs.umbraco.com/umbraco-commerce/) to learn how to get started. -Umbraco Commerce Checkout is a free and open-source add-on package for Umbraco Commerce. It is possible to amend the default behaviour to customize the checkout towards your needs. +Umbraco Commerce Checkout is a free and open-source add-on package for Umbraco Commerce. It is possible to amend the default behavior to customize the checkout to your needs. ## Setup -In order to allow customization you must first 'override' the existing files for the step required to be modified. +To allow customization you must first 'override' the existing files for the step required to be modified. -To do this you need to copy the equivalent (files and partials)[https://github.com/umbraco/Umbraco.Commerce.Checkout/tree/main/src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout]. +To do this follow these steps: -Copy the files and add them to `Views/UmbracoCommerceCheckout` in your project directory. It might be necessary to create the folder first. +1. Copy the equivalent [files and partials](https://github.com/umbraco/Umbraco.Commerce.Checkout/tree/main/src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout). +2. Add them to `Views/UmbracoCommerceCheckout` in your project directory. It might be necessary to create the folder first. +3. Make a small text change to one of the Views to verify that the files are in use. +4. Verify that the changes are carried out and displayed correctly. -Verify that the files are in use by making a simple text change to one of the Views. Visit the step where the change was carried out to ensure it displays accordingly. +You are now ready to start customizing the Checkout page to fit the design of your website. ## Useful links -As well as the content in these docs, here are a few useful links to learn more about the Umbraco Commerce Checkout package itself. +Here are a few useful links to learn more about the Umbraco Commerce Checkout package: * [Umbraco Commerce Checkout source code](https://github.com/umbraco/Umbraco.Commerce.Checkout) * [Umbraco Commerce Checkout issue tracker](https://github.com/umbraco/Umbraco.Commerce.Checkout/issues)