0% found this document useful (0 votes)
24 views9 pages

Step3 Solution Document Product View Page - Docx - Lyst1294

Uploaded by

pardeshinkki8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
24 views9 pages

Step3 Solution Document Product View Page - Docx - Lyst1294

Uploaded by

pardeshinkki8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Solution Document – Product View Page

E-commerce Website Design


An e-commerce website, by definition, is a website that allows you to buy and sell
tangible goods, digital products or services online.
Here we need to design a website with basic pages/features which are necessary for an
e-commerce website.
Technology
We will be using Bootstrap, HTML, CSS, jQuery & JavaScript for designing the project.
Pages

Important Links Used in Project


Bootstrap:
https://getbootstrap.com/docs/4.5/getting-started/introduction/
Font- awesome Icons:
https://fontawesome.com/icons
Font- awesome Icons CDN:
https://cdnjs.com/libraries/font-awesome/5.10.0

In the previous document, we have created “Product List Page”, Now we will be
designing “Product View Page”.
Product View Page
So, what is a product view page?
A product view page OR product details page (PDP) is a web page on an eCommerce site
that presents the description of a specific product in view. The details displayed often
include size, color, price, shipping information, reviews, and other relevant information
customers may want to know before making a purchase.
Our Product View Page-
We have added “Product details” and “Related Product” Sections. Related product
(items) can also include similar product categories to comparison shop, “people who
bought this item also searched for”, and so on.
Our product View code-

<!-- ==============product_detail starts here============== -->


<section class="product_detail py-5 my-5" id="product_detail">
<div class="container ">
<div class="section_title text-center mb-5">
<h1 class="text-capitalize">product detail</h1>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div id="carouselExampleIndicators" class="carousel slide shadow
rounded"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active">
<img src="assets/images/product1.png" class="d-block w-50
img img-fluid rounded"
width="15px" alt="image">
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">
<img src="assets/images/product2.png" class="d-block w-50
img img-fluid rounded"
width="15px" alt="image">
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">
<img src="assets/images/product3.png" class="d-block w-50
img img-fluid rounded"
width="15px" alt="image">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/product1.png"
class="d-block w-100 img img-fluid rounded" alt="image">
</div>
<div class="carousel-item">
<img src="assets/images/product2.png"
class="d-block w-100 img img-fluid rounded" alt="image">
</div>
<div class="carousel-item">
<img src="assets/images/product3.png"
class="d-block w-100 img img-fluid rounded" alt="image">
</div>
</div>
<!-- <a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="title mb-4">
<h3>Blue denim shirt</h3>
</div>
<div class="category mb-4">
<span class="bg-light-gray p-2"><a
href="category.html">SHIRT</a></span>
</div>
<div class="rating d-flex text-danger mb-4">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price mb-4">
<b><span class="mr-1">₹</span><span>400</span></b>
</div>
<div class="desc ">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum
nemo aliquid ipsum
dolore amet, nesciunt asperiores sequi mollitia iste recusandae.
Dolor eveniet unde
possimus quod magnam, nobis quisquam totam, quaerat
temporibus iusto tenetur ipsam
aperiam. Quasi dolores recusandae aperiam. Aliquam consectetur
suscipit eligendi
temporibus quae, ducimus accusantium adipisci. Ea maiores eum
saepe. Obcaecati
explicabo sapiente nihil officia eligendi nesciunt, nisi repellendus
autem. Fuga
aspernatur quam consequatur dignissimos, error corrupti.
Doloremque reiciendis
quasi, aut eius beatae id sint quis minus culpa.
</p>
</div>
<div class="qty_section border-top pt-2 mb-4">
<label>Quantitiy</label>
<div>
<div class="mb-0 w-100">
<input class="quantity text-center" min="0" max="10"
name="quantity" value="1"
type="number">
</div>
</div>
</div>
<div class="buy">
<a href="cart.html" class="btn btn-primary shadow">Add to
Cart</a>
</div>
</div>
</div>
</div>
</div>

<!-- ----------------related products starts here---------- -->


<section class="related_products py-5 my-5" id="related_products">
<div class="title">
<h3>Related Products</h3>
</div>
<div class="row mt-5">
<div class="col-md-4 col-6">
<div class="border border-dark rounded shadow text-center p-3">
<div class="mb-4">
<img src="assets/images/product1.png" class="img img-fluid"
alt="image">
</div>
<div>
<a href="javascript:;">
<h5>Green Dress with details</h5>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-6">
<div class="border border-dark rounded shadow text-center p-3">
<div class="mb-4">
<img src="assets/images/product2.png" class="img img-fluid"
alt="image">
</div>
<div>
<a href="javascript:;">
<h5>Green Dress with details</h5>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-6">
<div class="border border-dark rounded shadow text-center p-3">
<div class="mb-4">
<img src="assets/images/product3.png" class="img img-fluid"
alt="image">
</div>
<div>
<a href="javascript:;">
<h5>Green Dress with details</h5>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ----------------related products ends here---------- -->
</div>
</section>

<!-- ==============product detail ends here============== -->

Tip: ​Use Bootstrap carousel “With indicators” to create product images gallery section.
Link: ​https://getbootstrap.com/docs/4.5/components/carousel/

You might also like