HTML/CSS/JS Несколько страниц HTML в одном файле
Я новичок в HTML/CSS/JS (около 3 месяцев). В настоящее время я пытаюсь создать веб-сайт электронной коммерции, но у меня возникла проблема со страницей моих продуктов. Всякий раз, когда вы нажимаете на продукт, он должен привести вас на страницу сведений о продукте, показывающую такие вещи, как название, цена, изображение и кнопка добавления в корзину. У меня довольно много продуктов (~ 25 продуктов), поэтому было бы не идеально создавать файл .html для каждого отдельного продукта. Поэтому я хотел знать, возможно ли иметь все страницы продукта в одном файле HTML.
<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>€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>Это то, что содержит все детали для страницы сведений о продукте и то, что загружается, когда вы нажимаете на изображение продукта.
Вот как я делаю изображение кликабельным (это в отдельном файле HTML):
<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>€800.00</p>
</div>
</div>
Я пытался найти, как это сделать, но большинство из них используют плагины (которые я не совсем уверен, как их использовать).
Вы хотите показать все продукты на одной странице или использовать шаблон для создания страницы для каждого продукта?
Я хочу иметь подробную информацию о каждом продукте в одном html-файле. И когда я нажимаю на изображение одного из этих продуктов, он загружает страницу с его подробностями. Короче говоря, я хочу использовать шаблон для создания страницы для каждого продукта, надеюсь, что ответил на ваш вопрос.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку вы не используете серверную часть, для передачи данных каждого продукта на одну и ту же страницу вы можете изменить свой URL-адрес следующим образом.
"window.location.href='product-details.html?product_name=Iphone&product_price=1000'"
и в файле product-details.html вы можете получить данные из URL-адреса с помощью js, обратитесь к этому https://flaviocopes.com/urlsearchparams/
и поместите эти данные внутри html с помощью js.
Надеюсь, это поможет вам решить вашу проблему.
Если вы хотите отобразить все продукты на одной странице, одно из решений, которое не требует внутреннего кода, поскольку вы еще не работали с кодом на стороне сервера, заключается в использовании JavaScript для итерации по каждому продукту и генерации HTML на основе на том.
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>Если вы хотите использовать шаблон для создания страницы для каждого продукта, вам нужно будет написать внутренний код, где ваш сервер будет либо обслуживать API, либо генерировать веб-страницы.
Для этого можно использовать множество языков, таких как PHP, Java, C#, а также внутренний JavaScript (NodeJS).
Вы можете подделать страницу для каждого продукта, используя параметры GET в своем URL-адресе.
Пример: 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.info(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>Я изменил код, чтобы использовать стиль, который я сделал, и, похоже, он работает в некоторой степени. так что большое спасибо. Единственная проблема сейчас заключается в том, что вторая часть стиля не проходит (если это имеет смысл). Когда я использую этот класс <div class = "col-2">, он работает нормально, но стиль col-2 — это белый цвет текста, а мне нужно, чтобы он был черным, поэтому я создал col-6, чтобы изменить это. но если я изменю класс на <div class = "col-2 col-6">, ничего не будет напечатано.
Нвм, я только что сделал новый класс. Я слишком устал. Большое спасибо за решение!
Для этого процесса вы берете все продукты в виде списка и размещаете значения разных продуктов в единой структуре. Например, если вы собираетесь перечислить продукты в элементе карточки, вы помещаете продукты в карточку с помощью цикла for.