#can I use astro components to build a website form client side script? OR what method would you

4 messages · Page 1 of 1 (latest)

stoic jacinth
#

recommend?

right now this is how I set it up :

<script>
import { addToCart, getExistingCart } from "../lib/cartUtils";
let products = getExistingCart();
let productList = document.getElementById("cart-items");

products.forEach(product => {
// Create elements
let productItem = document.createElement("div");
let productName = document.createElement("h3");
let productImage = document.createElement("img");
let productPrice = document.createElement("p");
let productQuantity = document.createElement("p");

// Populate with data
productName.textContent = product.name;
productImage.src = product.imageUrl;
productImage.alt = product.name; 
productPrice.textContent = "Price: $" + product.price.toFixed(2);
productQuantity.textContent = "Quantity: " + product.quantity;

// Style (more on this in the CSS section)
productItem.classList.add("product-item");

// Put it together
productItem.appendChild(productName);
productItem.appendChild(productImage);
productItem.appendChild(productPrice);
productItem.appendChild(productQuantity);

productList!.appendChild(productItem);

});
</script>

kindred shoreBOT
#

Hi @stoic jacinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, you can use Astro components to build a website and include client-side scripts. Astro components are HTML-only templating components with no client-side runtime by default. However, when your Astro component needs client-side interactivity, you can add standard HTML <script> tags or UI Framework components.

In your case, you can include your JavaScript code within a <script> tag in your Astro component. Here's an example of how you can do this:

---
// Import npm modules.
import { addToCart, getExistingCart } from "../lib/cartUtils";
---

<div id="cart-items"></div>

<script>
  let products = getExistingCart();
  let productList = document.getElementById("cart-items");

  products.forEach(product => {
    // Create elements
    let productItem = document.createElement("div");
    let productName = document.createElement("h3");
    let productImage = document.createElement("img");
    let productPrice = document.createElement("p");
    let productQuantity = document.createElement("p");

    // Populate with data
    productName.textContent = product.name;
    productImage.src = product.imageUrl;
    productImage.alt = product.name; 
    productPrice.textContent = "Price: $" + product.price.toFixed(2);
    productQuantity.textContent = "Quantity: " + product.quantity;

    // Style (more on this in the CSS section)
    productItem.classList.add("product-item");

    // Put it together
    productItem.appendChild(productName);
    productItem.appendChild(productImage);
    productItem.appendChild(productPrice);
    productItem.appendChild(productQuantity);

    productList!.appendChild(productItem); 
  });
</script>
#

This script will run in the browser and add functionality to your Astro components. By default, Astro processes and bundles <script> tags, adding support for importing npm modules, writing TypeScript, and more (source (https://docs.astro.build/en/guides/client-side-scripts#_top)).

Remember, the most important thing to know about Astro components is that they don’t render on the client. They render to HTML either at build-time or on-demand using server-side rendering (SSR). You can include JavaScript code inside of your component frontmatter, and all of it will be stripped from the final page sent to your users’ browsers. The result is a faster site, with zero JavaScript footprint added by default (source (https://docs.astro.build/en/basics/astro-components#_top)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: