Question 42609 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS/JS Multiple pages of HTML in one file

I’m fairly new to HTML/CSS/JS (about 3 months now). I’m currently trying to create an e-commerce website but i’m having an issue with my products page. Whenever you click a product, It’s supposed to take you to a product details page showing things such as the name, price, a picture, and an add to cart button. I have a quite a few products (~25 products) so it wouldn’t be Ideal to create a .html file for every single product. So i wanted to know if it was possible to have all the product pages in one HTML file.

<div class="small-container single-product">
  <div class="row">
    <div class="col-2 col-6" id="gpu1">
      <img src="Images/strix3080.png" width="70%">
    </div>
    <div class="col-2 col-6" id="gpu1">
      <p>Home / Products / ROG STRIX GeForce RTX 3080</p>
      <h1>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h1>
      <h4>&euro;800.00</h4>
      <input type="number" value="1" max="5">
      <a href="" class="btn add-cart">Add To Cart</a>
      <h3>Specifications<i class="fa fa-indent" onclick="toggleSpecs()"></i></h3>
      <br>

      <div id="specs">
        <p>
          Bus Standard: PCI Express 4.0<br> Video Memory: 10GB GDDR6X<br> Engine Clock: 1440 MHz (Base Clock) 1935 MHz (Boost Clock)<br> CUDA Core: 8704<br> Memory Speed: 19 Gbps<br> Interface: Yes x2 (Native HDMI 2.1), Yes x3 (Native DisplayPort 1.4a),
          HDCP Support Yes (2.3)<br> Resolution: Digital Max Res. 7680 x 4320<br> Dimensions: 12.53" x 5.51" x 2.27" Inch 31.85 x 14.01 x 5.78 Centimeter<br> Recommended PSU: 850W<br> Power Connectors: 3 x 8-Pin
        </p>
      </div>
    </div>
  </div>
</div>

This is what contains all the details for the product details page and what is loaded when you click on a product’s picture.

This is how I’m making the picture clickable (This is in a separate HTML file):

<div class="row">
  <div onclick="window.location.href='product-details.html'" class="col-4">
    <img src="Images/asus3080.png" />
    <h4>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h4>
    <p>&euro;800.00</p>
  </div>
</div>

I’ve tried looking up how to do this but most of them are to use plugins (which im not rlly sure how to use).

Tags:

2

Answers


  1. 0

    As you are not using backend, for passing data of each product to same page you can change your url like this

    "window.location.href='product-details.html?product_name=Iphone&product_price=1000'"

    and in product-details.html file you can fetch data from url using js,
    refer this https://flaviocopes.com/urlsearchparams/

    and place these data inside html using js.

    Hope this will help you to solve your issue.

    Login or Signup to reply.
  2. 0

    If you want to show all products on a single page, one solution that doesn’t require back-end code, as you haven’t worked with server-side code yet, is to use JavaScript to iterate over every product and generate HTML based on that.

    const productsArray = [
  {
    name: "ASUS computer",
    image: "asus3080.png",
    price: 50
  },
  {
    name: "Lenovo computer",
    image: "Lenovo.png",
    price: 50
  },
  {
    name: "Macbook",
    image: "Mac.png",
    price: 50
  }
]

const root = document.getElementById("root")

for (let i = 0; i < productsArray.length; i++) {
  root.innerHTML += `<div class="row">
                        <div onclick="window.location.href='product-details.html'" class="col-4">
                        <img src="Images/${productsArray[i].image}">
                        <h4>${productsArray[i].name}</h4>
                        <p>${productsArray[i].price}</p>
                    </div>`
}
    <div id="root"></div>

    If you mean to use a template to generate a page for every product, you are going to need to write back-end code where your server will either serve an API or generate the web pages.

    There are many languages like PHP, Java, C# and also back-end JavaScript (NodeJS) you can use to achieve this.

    You could fake having a page for every product, by using the GET parameters in your URL.

    Example: https://localhost/?product=1

    const productsArray = [
  {
    id: 1,
    name: "ASUS computer",
    image: "asus3080.png",
    price: 50
  },
  {
    id: 2,
    name: "Lenovo computer",
    image: "Lenovo.png",
    price: 50
  },
  {
    id: 3,
    name: "Macbook",
    image: "Mac.png",
    price: 50
  }
]

// This si for the example
const parameterList = new URLSearchParams("?product=1")
const productId = parameterList.get("product")

const root = document.getElementById("root")

const product = productsArray.find(p => p.id == productId);

console.log(productId)

root.innerHTML += `<div class="row">
                      <div onclick="window.location.href='product-details.html'" class="col-4">
                      <img src="Images/${product.image}">
                      <h4>${product.name}</h4>
                      <p>${product.price}</p>
                  </div>`
    <div id="root"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search