Update usage guide

docs/Usage-Guide.md

@@ -54,25 +54,62 @@ Step-by-step tutorial to create new pages:
 3. Create new category page and in "Products" field, select all the product detail pages that should be included in the category. The selected products will be displayed as a products listing in the category page.
 
 #### Checkout
-The next step from shopping cart preview page(`Shopify.ShoppingCartPage`) is redirection to official Shopify store checkout page where user can complete the checkout and create the order. Checkout completion using Shopify API is not possible as whole checkout API will be removed from Shopify. To redirect user from Shopify thank you page to DancingGoat, following javascript tag for redirection needs to be inserted into Shopify order status page (you can set it in Shopify administration via `Settings` -> `Checkout` -> `Order status page` ->`Additional scripts`):
-```html
-<script>
-	/// Replace with delay in ms
-	const redirectionDelay = 5000;
-	/// Replace with absolute URL of your XByK thank you page
-	const thankYouPageUrl = "https://my-dancing-goat.com/thank-you";
-    window.setTimeout(function(){
-            var urlPart = "/checkouts/";
-            var currentUrl = window.location.href;
-            if (!currentUrl.includes(urlPart)) {
-                return;
-            }
-            var sourceId= currentUrl.split(urlPart)[1].split("/")[1];
-            window.location.href = thankYouPageUrl + "?sourceId=" + sourceId;
-        }, redirectionDelay);
-</script>
-```
-This script will redirect the user to the Xperience by Kentico Thank you page after 5 seconds. You can adjust the timespan and URL by modifying the `redirectionDelay` and `thankYouPageUrl` constants, respectively. The redirection will occur exclusively from the Shopify thank you page, ensuring users can still check their order status in the future. Query parameter `sourceId` is then used to retrieve created order, update XByK contact information based on the order information and log purchase activity.
+The next step from shopping cart preview page(`Shopify.ShoppingCartPage`) is redirection to official Shopify store checkout page where user can complete the checkout and create the order. Checkout completion using Shopify API is not possible as whole checkout API will be removed from Shopify.
+
+#### Redirection back to DancingGoat site
+After order is completed, users need to be redirected back to DancingGoat. To do this, [web pixels](https://shopify.dev/docs/apps/build/marketing-analytics/pixels) in combination with [liquid templates](https://shopify.dev/docs/api/liquid) needs to be used. 
+
+Step-by-step tutorial:
+1. Create custom web pixel in `Settings` -> `Customer events` -> `Add custom pixel`. In the web pixel, [checkout completed](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed) event will be used to set `orderId` cookie. In `customer privacy` section, set `Permission` to `Not required` so the pixel will always run. Then, insert following code:
+	```javascript
+	analytics.subscribe('checkout_completed', (event) => {
+		const orderId = event.data.checkout.order?.id;
+		document.cookie = "orderId=" + orderId + ";path=/";
+	});
+	```
+	Redirect inside the web pixel cannot be used since it runs inside an iframe that does not allow redirects.
+
+2. Add script to check for `orderId` cookie and redirect back to DancingGoat. Go to `Online store` -> `Themes`. Tap on three dots at your current theme and select `Edit code`. Go to `assets` folder and click `+ Add a new asset` -> `Create a blank file`. Select js extension and create new asset. To the new javascript file, add this code:
+	```javascript
+	function getCookie(cookieName) {
+		let cookies = document.cookie;
+		let cookieArray = cookies.split("; ");
+
+		for (let i = 0; i < cookieArray.length; i++) {
+			let cookie = cookieArray[i];
+			let [name, value] = cookie.split("=");
+
+			if (name === cookieName) {
+				return decodeURIComponent(value);
+			}
+		}
+
+		return null;
+	}
+
+	function deleteCookie(cookieName) {
+	document.cookie =
+		cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+	}
+
+	const orderCookieName = "orderId";
+	const orderId = getCookie(orderCookieName);
+	if (orderId) {
+		deleteCookie(orderCookieName);
+
+		/// Replace with absolute URL of your XByK thank you page
+		const thankYouPageUrl = "https://my-dancing-goat.com/thank-you";
+		window.location.href = thankYouPageUrl + "?orderId=" + orderId;
+	}
+	```
+	When the order is completed and user will go back to the store(for example by pressing the 'Continue shopping' button), this javascript will be executed and if `orderId` cookie exists, user will be redirected back to the DancingGoat site and the cookie will be removed(to prevent further redirections). Query parameter `orderId` is then used to retrieve created order, update XByK contact information based on the order information and log purchase activity.
+
+3. Last step is to add this javascript to the layout. Find `theme.liquid` file inside `layout` folder and add file created in previous step to the `head` HTML element.
+	```html
+	<!-- Change redirect.js to filename created in previous step -->
+	<script src="{{ 'redirect.js' | asset_url }}" defer="defer"></script>
+	```
+
 
 ### Store activity tracking
 The integration allows you to log product-related [activities](https://docs.kentico.com/x/oYPWCQ) via the `IEcommerceActivityLogger` service. The service provides tracking methods for the following events: