Dynamically generate deeplink URL template

Keeps the code DRY and ensures that other query params like an access token are included in the generated URL.
lukasbestle · Nov 12, 2022 · 0cf022a · 0cf022a
1 parent 5e5c0d1
commit 0cf022a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 43 deletions.
diff --git a/src/classes/ConfiguratorBlock.php b/src/classes/ConfiguratorBlock.php
@@ -114,14 +114,6 @@ public function options(): array
 	{
 		$defaults = [];
 
-		// URL template for the configurator URL;
-		// the #CONFIGURATIONID# placeholder is dynamically replaced by Roomle
-		$defaults['deeplink'] = (
-			$this->parent()->url() .
-			'?' . $this->htmlId() . '=#CONFIGURATIONID#' .
-			'#' . $this->htmlId()
-		);
-
 		// locale settings from the site's language code
 		$language = $this->kirby()->language();
 		if ($language !== null) {

diff --git a/src/frontend/public/configurator.js b/src/frontend/public/configurator.js
@@ -46,6 +46,13 @@ export default class {
 		const options = this.props.options;
 		options.id = this.currentId;
 
+		// define the deeplink based on the current URL;
+		// use an intermediate placeholder to avoid that the `#` chars get escaped
+		options.deeplink = this.idToUrl(
+			this.props.htmlId + "-PLACEHOLDER",
+			true
+		).href.replace(this.props.htmlId + "-PLACEHOLDER", "#CONFIGURATIONID#");
+
 		// initialize the configured or passed product
 		this.configurator = await RoomleConfiguratorApi.createConfigurator(
 			this.props.configuratorId,

diff --git a/tests/Roomle/ConfiguratorBlockTest.php b/tests/Roomle/ConfiguratorBlockTest.php
@@ -222,11 +222,6 @@ public function testFrontendJson()
 			'configuratorId' => 'defaultConfigurator',
 			'htmlId' => 'roomle-12345678-90ab-cdef-1234-567890abcdef',
 			'options' => [
-				'deeplink' => (
-					'https://example.com/test' .
-					'?roomle-12345678-90ab-cdef-1234-567890abcdef=#CONFIGURATIONID#' .
-					'#roomle-12345678-90ab-cdef-1234-567890abcdef'
-				),
 				'some' => 'default',
 				'other' => 'default',
 				'id' => 'some:product',
@@ -257,11 +252,6 @@ public function testFrontendProps()
 			'configuratorId' => 'defaultConfigurator',
 			'htmlId' => 'roomle-12345678-90ab-cdef-1234-567890abcdef',
 			'options' => [
-				'deeplink' => (
-					'https://example.com/test' .
-					'?roomle-12345678-90ab-cdef-1234-567890abcdef=#CONFIGURATIONID#' .
-					'#roomle-12345678-90ab-cdef-1234-567890abcdef'
-				),
 				'some' => 'default',
 				'other' => 'default',
 				'id' => 'some:product',
@@ -403,11 +393,6 @@ public function testOptions_Defaults()
 		]);
 
 		$this->assertSame([
-			'deeplink' => (
-				'https://example.com/test' .
-				'?roomle-12345678-90ab-cdef-1234-567890abcdef=#CONFIGURATIONID#' .
-				'#roomle-12345678-90ab-cdef-1234-567890abcdef'
-			),
 			'some' => 'default',
 			'other' => 'default',
 			'id' => 'some:product',
@@ -441,11 +426,6 @@ public function testOptions_Locale1()
 		]);
 
 		$this->assertSame([
-			'deeplink' => (
-				'https://example.com/de/test' .
-				'?roomle-12345678-90ab-cdef-1234-567890abcdef=#CONFIGURATIONID#' .
-				'#roomle-12345678-90ab-cdef-1234-567890abcdef'
-			),
 			'locale' => 'de',
 			'some' => 'default',
 			'other' => 'default',
@@ -480,11 +460,6 @@ public function testOptions_Locale2()
 		]);
 
 		$this->assertSame([
-			'deeplink' => (
-				'https://example.com/de-at/test' .
-				'?roomle-12345678-90ab-cdef-1234-567890abcdef=#CONFIGURATIONID#' .
-				'#roomle-12345678-90ab-cdef-1234-567890abcdef'
-			),
 			'locale' => 'de',
 			'overrideCountry' => 'at',
 			'some' => 'default',
@@ -535,11 +510,6 @@ public function testOptions_NoTarget()
 		]);
 
 		$this->assertSame([
-			'deeplink' => (
-				'https://example.com/test' .
-				'?roomle-12345678-90ab-cdef-1234-567890abcdef=#CONFIGURATIONID#' .
-				'#roomle-12345678-90ab-cdef-1234-567890abcdef'
-			),
 			'buttons' => [
 				'requestproduct' => false
 			],
@@ -568,11 +538,6 @@ public function testOptions_Overrides()
 		]);
 
 		$this->assertSame([
-			'deeplink' => (
-				'https://example.com/test' .
-				'?roomle-12345678-90ab-cdef-1234-567890abcdef=#CONFIGURATIONID#' .
-				'#roomle-12345678-90ab-cdef-1234-567890abcdef'
-			),
 			'some' => 'custom value',
 			'other' => 'default',
 			'skin' => [