@salla.sa/twilight 2.9.8 → 2.9.10

package/README.md

@@ -33,10 +33,7 @@
                <li><a href="#sdks-main-apis">SDK's main APIs</a></li>
               <li><a href="#use-cases">Use cases</a></li>
                </ul>
-               <li><a href="#installation">Installation</a></li>
-                         <ul>
-               <li><a href="#initialization">Initialization</a></li>
-               </ul>
+               <li><a href="#installation-and-initialization">Installation and initialization</a></li>
           <li><a href="#usage">Usage</a></li>
                          <ul>
                <li><a href="#basic-configuration">Basic configuration </a></li>
@@ -80,8 +77,38 @@ Following are some of the possible uses of the Twilight JS SDK:
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
-## Installation 
-**Twilight JS SDK** can be installed from the `npm` using the following commands:
+## Installation and initialization
+**Twilight JS SDK** can be used without the need to be downloaded or installed; instead it needs to be included as a short piece of regular JavaScript in the HTML that will asynchronously load the SDK into the Twilight theme. 
+
+#### Twilight Themes
+In case of using the **Twilight JS SDK** inside the Twilight themes,  the developer doesn't need to include the **Twilight JS SDK** in the theme project's bundle or inside the html, **Twilight theme engine** will inject the latest version of the **Twilight JS SDK** in the page.
+
+Basically, the developer does not need to call the method `salla.init()` for twilight themes, because it will be called automatically upon the installation of the Twilight theme engine. This is done thanks to the [body:end hook](https://salla.stoplight.io/studio/twilight-themes-documentation?#bodyend-hook) `{% hook 'body:end' %}`.
+
+#### HTML and CDN
+The most common approach for setting up the **Twilight JS SDK** is load it via `<script>` befor closing the `body` tag of the HTML document. 
+
+```html title="Code Snippet"
+<script src="https://cdn.jsdelivr.net/npm/@salla.sa/twilight@latest/dist/@salla.sa/twilight.min.js"></script>
+```
+
+The following snippet of code will give the basic version of the SDK where the configurations are set to their minimum requirements, for example, store URL. The method `salla.init()` is used to setup and initialize the SDK. 
+
+```js
+<script>
+  salla.init({
+    debug: true, // disbale it in prod
+    language_code: 'ar', // en
+    store: {
+      id: 1305146709, // The store id can found via store pages.
+      url: "https://the-best-store-ever.sa"
+    }
+  });
+</script>
+```
+
+#### Bundler/ES modules
+Developer may also install the **Twilight JS SDK** using the following commands:
 
 ```npm title="NPM Installation Command"
 npm install @salla.sa/twilight --save
@@ -91,22 +118,27 @@ npm install @salla.sa/twilight --save
 yarn add @salla.sa/twilight
 ```
 
-### Initialization
+Initially, the developer must import the Salla JS Events library as follows:
 
-The following snippet of code will give the basic version of the SDK where the configurations are set to their minimum requirements, for example, store URL. The method `salla.init()` is used to setup and initialize the SDK. 
+
+```js
+import '@salla.sa/twilight';
+```
+
+The following snippet of code will give the basic version of the SDK where the configurations are set to their minimum requirements, for example, store URL. The method `salla.init()` is used to setup and initialize the SDK. 
 
 ```js
 <script>
   salla.init({
-    debug: true, 
+    debug: true, // disbale it in prod
+    language_code: 'ar', // en
     store: {
-        id: 693312468,
-        url: "https://my_store.test/"
+      id: 1305146709, // The store id can found via store pages.
+      url: "https://the-best-store-ever.sa"
     }
-});
+  });
 </script>
 ```
-<p align="right">(<a href="#top">back to top</a>)</p>
 
 ## Usage