@perceptimagery/dita-configurator-staging 0.1.3001 → 0.1.4002

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +47 -42
  2. package/dist/index.html +14 -0
  3. package/dist/index.js +48406 -3425
  4. package/package.json +48 -52
  5. package/dist/index.js.map +0 -7
package/README.md CHANGED
@@ -1,42 +1,47 @@
1
- # Embed-preview
2
- | An embeddable package for `Previewing` SKUs
3
-
4
-
5
- ## Documentation
6
- https://docs.sprie.io/docs/embed/
7
-
8
- ## Usage
9
- Prod: `https://cdn.jsdelivr.net/npm/@perceptimagery/sprie-embed@latest`
10
- Dev : `https://cdn.jsdelivr.net/npm/@perceptimagery/sprie-embed-staging@latest`
11
-
12
- ```HTML
13
- <!-- index.html -->
14
-
15
-
16
- <!-- Declare element with class `sprie-embed-element` and data-sku. This will get transformed after authentication -->
17
- <div
18
- class="sprie-embed-element"
19
- data-sku="{sku}"
20
- ></div>
21
-
22
- <!-- To inject custom css class to underlying iframe, add data-class property -->
23
- <div
24
- class="sprie-embed-element"
25
- data-sku="{sku}"
26
- data-class="custom-element-class"
27
- ></div>
28
-
29
- <!-- Inject `Sprie Embed` from CDN -->
30
- <script src="https://cdn.jsdelivr.net/npm/@perceptimagery/sprie-embed@latest?apikey={apikey}"></script>
31
-
32
- ```
33
-
34
-
35
- ## Demo
36
- ![](demo.png)
37
-
38
-
39
-
40
- ## [ TODO ]
41
- - [✅] removed React
42
- - [✅] authentication doesnt resolve intitally. Has to be reloaded.
1
+ # Dita-configurator -preview
2
+
3
+ | An embeddable package for `Previewing | and changing.` SKUs
4
+
5
+ ## Documentation
6
+
7
+ <https://docs.sprie.io/docs/?/>
8
+
9
+ ## Usage
10
+
11
+ Prod: `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator@latest`
12
+ Dev : `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator-staging@latest`
13
+
14
+ ```HTML
15
+ <!-- index.html -->
16
+
17
+
18
+ <!-- Declare element with id `‘dita-3dconfig-element’` . This will get transformed after authentication -->
19
+ <div
20
+ id="‘dita-3dconfig-element’"
21
+ ></div>
22
+
23
+
24
+
25
+
26
+ <!-- Inject `Dita configurator` from CDN -->
27
+ <script src="https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator@latest?apikey={apikey}"></script>
28
+
29
+ <!-- call our sdk and load your sku and add event listener for `add-to-cart` event -->
30
+ <!-- Our SDK exposes the Dita -->
31
+ <script>
32
+ function run() {
33
+ const SKU = "YOUR-SKU-CODE";
34
+ window.ditaConfigurator.load(SKU);
35
+ window.ditaConfigurator.events.on("add-to-cart",(eventData)=>{
36
+ console.log(eventData);
37
+ })
38
+ }
39
+
40
+ // on document load execute our run function
41
+ window.onload = () => { run(); } // to make sure our sdk and DOM is successfully loaded.
42
+
43
+ </script>
44
+
45
+ ```
46
+
47
+
package/dist/index.html ADDED
@@ -0,0 +1,14 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Design Component System</title>
8
+
9
+ </head>
10
+ <body>
11
+ <div id="dita-3dconfig-element" style="width: 500px;"></div>
12
+ </body>
13
+ <script src="index.js"></script>
14
+ </html>