Docs: Updated README and index.html for new Config

README.md

@@ -12,8 +12,8 @@ Add Javascript dependencies to your page:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded/dist/genesys-deps.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded/dist/genesys-ui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha7/dist/genesys-deps.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha7/dist/genesys-ui.js"></script>
 <!-- Optionally use bootstrap CSS -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
 ```
@@ -21,26 +21,28 @@ Add Javascript dependencies to your page:
 Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>`:
 
 ```html
-  <div class="container-fluid mb-5" id="genesys-container"></div>
-
-  <script type="text/javascript">
-    // Embedded Genesys configuration
-    const genesysConfig = {
-      apiUrl: 'https://api.sandbox.genesys-pgr.org',
-      clientId: 'clientid@genesys',
-      clientKey: 'changeme',
-      filter: { institute: { code: ['ETH013'] } },
-    };
-
-    // Detect language from query string
-    const queryLang = document.location.search && document.location.search.substr(1) || undefined;
-
-    // Show UI
-    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig, queryLang);
-
-    // Or, to display ONLY "Collection Overview" use:
-    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig, queryLang);
-  </script>
+<div class="container-fluid mb-5" id="genesys-container"></div>
+
+<script type="text/javascript">
+  // Embedded Genesys configuration
+  const genesysConfig = {
+    apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
+    clientId: 'clientid@genesys', // Client ID
+    clientKey: 'changeme', // Client key
+    filter: { 
+      institute: {  code: [ 'ETH013' ] }, // Genesys data filter
+    },
+    shoppingCart: {
+      enabled: true, // Enable shopping cart
+    }
+  };
+
+  // Show UI
+  genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig);
+
+  // Or, to display ONLY "Collection Overview" use:
+  // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig);
+</script>
 ```
 
 **Note:** Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.
@@ -57,3 +59,25 @@ to *@geneesys-pgr/ui-embedded*:
 |`clientId`     | **Required** | Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.<br />The API keys are limited to your website and will not work on a different domain. |
 |`clientSecret` | **Required** | Ditto. |
 |`filter`       |`undefined` | Allows for narrowing the scope of requested accession data from Genesys API. <br />To filter for accessions from your genebank, use: `{ institute: { code: ['XXX000'] } }` with the FAO WIEWS Code of your genebank. Default `undefined` value will return all accessions. |
+|`language`|`'en'`| Specify the language of the user interface.<br />Fully supported: `en`<br />Partially supported: `es` |
+| `shoppingCart` | `{ ... }` | See *Shopping cart* configuration |
+
+Additional configuration options are described below.
+
+### Shopping cart options
+
+The shopping cart is **disabled by default**. To allow users to add accessions to the cart, access the cart and submit requests for material you must explicity enable it in your configuration:
+
+```
+const genesysConfig = {
+  // Shopping cart enabled
+  shoppingCart: {
+    enabled: true,
+  },
+};
+```
+
+|Property|Default|Description|
+|---|---|---|
+|`enabled`|`false`| Toggle Shopping cart functionality |
+

index.html

@@ -58,23 +58,29 @@
   <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha7/dist/genesys-deps.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha7/dist/genesys-ui.js"></script>
   <script type="text/javascript">
+    // Detect language from query string
+    const queryLang = document.location.search && document.location.search.substr(1) || undefined;
+
     // Embedded Genesys configuration
     const genesysConfig = {
       apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
       clientId: 'TDlQz.LUmnd6YIOtWr4kjnVEFi@api.sandbox.genesys-pgr.org', // Client ID
       clientKey: 'gnE1dPz5CWnbn0IsFvL8iSP1QDxBpmU0', // Client key
-      filter: { institute: { code: ['COL003', 'BEL084'] } }, // Genesys data filter
+      filter: { 
+        institute: { code: ['COL003', 'BEL084'] }, // Genesys data filter
+      },
+      language: queryLang,
+      shoppingCart: {
+        enabled: true,
+      }
     };
 
-    // Detect language from query string
-    const queryLang = document.location.search && document.location.search.substr(1) || undefined;
-
     // Show UI
-    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig, queryLang);
+    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig);
 
     // Or, to display ONLY "Collection Overview" use:
-    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig, queryLang);
+    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig);
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>