Instruction file imported from marlenezw/zava-seasonal-storefront (.github/instructions/javascript.instructions.md). Copyright stays with the author.

Vanilla JavaScript Instructions

These instructions apply to all JavaScript code in the Zava Storefront.

Project Uses Vanilla JS

This project intentionally uses vanilla JavaScript (no React, Vue, etc.) for simplicity and performance.

Code Style

Variables

// Use const by default
const API_URL = 'https://api.example.com';

// Use let only when reassignment is needed
let currentSeason = 'Winter 2026';

// Never use var

Functions

// Prefer arrow functions for callbacks
products.forEach((product) => {
    renderProduct(product);
});

// Use regular functions for methods and hoisting needs
function renderProduct(product) {
    // ...
}

Async/Await

// Prefer async/await over .then() chains
async function fetchProducts() {
    try {
        const response = await fetch('/api/products');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Failed to fetch products:', error);
        throw error;
    }
}

DOM Manipulation

// Use querySelector/querySelectorAll
const button = document.querySelector('.submit-btn');
const items = document.querySelectorAll('.product-card');

// Use template literals for HTML
const html = `
    <div class="product-card">
        <img src="${product.image}" alt="${product.name}">
        <h3>${product.name}</h3>
        <p>$${product.price}</p>
    </div>
`;

// Use insertAdjacentHTML for performance
container.insertAdjacentHTML('beforeend', html);

Event Handling

// Add event listeners properly
button.addEventListener('click', handleClick);

// Use event delegation for dynamic content
document.querySelector('.product-grid').addEventListener('click', (e) => {
    if (e.target.matches('.add-to-cart')) {
        handleAddToCart(e.target.dataset.productId);
    }
});

Project Structure

js/
├── app.js      # Main application, product loading, rendering
└── chat.js     # Chat widget class and functionality

Key Patterns Used

Module Pattern (chat.js)

class ZavaChatWidget {
    constructor() {
        this.init();
    }
    
    init() {
        // Setup code
    }
}

document.addEventListener('DOMContentLoaded', () => {
    window.zavaChat = new ZavaChatWidget();
});

Config Loading (app.js)

async function loadSeasonalConfig() {
    const response = await fetch('data/seasonal-config.json');
    return response.json();
}

Error Handling

// Always handle errors gracefully
try {
    const data = await fetchData();
    renderData(data);
} catch (error) {
    console.error('Error:', error);
    showUserFriendlyError('Unable to load data. Please try again.');
}

Performance Tips

1. Minimize DOM queries - Cache element references
2. Use DocumentFragment for bulk inserts
3. Debounce scroll/resize handlers
4. Lazy load images below the fold