Build a Site with HTML and JavaScript

Before you begin

• Sign in to the Liteshop dashboard.
• Install a tool that creates ZIP files. The examples use the zip command, which macOS and most Linux distributions include.

Create the files

1. Create a folder named my-site.
2. In my-site, create liteshop.json. This manifest declares the Site and its contact Form:
   {
     "$schema": "https://docs.liteshop.me/schemas/site-v0.1.json",
     "specVersion": "0.1",
     "site": {
       "name": "My Site",
       "defaultLocale": "en",
       "supportedLocales": ["en"],
       "timezone": "Europe/Paris"
     },
     "frontend": {
       "entry": "index.html"
     },
     "capabilities": {
       "forms": [
         {
           "id": "contact",
           "name": { "en": "Contact" },
           "fields": [
             { "id": "email", "type": "email", "label": { "en": "Email" }, "required": true },
             { "id": "message", "type": "textarea", "label": { "en": "Message" }, "required": true }
           ]
         }
       ]
     }
   }
   
3. Create index.html. The page loads the Liteshop SDK from the Site’s own address, /_liteshop/sdk/v1.js, before your script:
   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>My Site</title>
     </head>
     <body>
       <h1>Contact us</h1>
       <form id="contact-form">
         <label>Email <input name="email" type="email" required /></label>
         <label>Message <textarea name="message" required></textarea></label>
         <button type="submit">Send</button>
         <p id="status" role="status"></p>
       </form>
       <script src="/_liteshop/sdk/v1.js"></script>
       <script src="main.js"></script>
     </body>
   </html>
   
4. Create main.js. It sends the form to Liteshop instead of letting the browser post it:
   const form = document.querySelector("#contact-form");
   const status = document.querySelector("#status");
   
   form.addEventListener("submit", async (event) => {
     event.preventDefault();
     const data = new FormData(form);
     try {
       await liteshop.forms.submit("contact", {
         email: String(data.get("email")),
         message: String(data.get("message")),
       });
       form.reset();
       status.textContent = "Thanks, your message was sent.";
     } catch (error) {
       status.textContent = error.message;
     }
   });
   
   Pass the Form ID as a literal string, as shown. Liteshop reads that call in your JavaScript to check that the declared Form has a handler.

Package and publish the Site

1. Create a ZIP file of the folder’s contents, so that index.html and liteshop.json are at the root of the archive:
   cd my-site
   zip -r ../site.zip .
   
2. In the Liteshop dashboard, click Website > Upload files.
3. Enter a Site name and subdomain, select site.zip, and click Check and publish.

Test the form

1. Open the live Site, for example https://my-site.liteshop.me.
2. Send a message with the form.
3. In the Liteshop dashboard, click Messages. Your message appears there.

What’s next

• Test the Site on your computer
• Publish updates, preview them, and undo them
• Add bookings or a catalogue