سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

مبلغ کل
0
تسویه حساب
سبد خرید خالی می باشد
0
ورود به پنل
فروشنده شوید

چطوری میتونم یک وب سایت فروشگاهی بسازم با html,css,js ؟ آموزش تصویری رایگان + متنی رایگان
حميد شریفی
حميد شریفی
تعداد کل دانلود ها : 740011
تعداد کل مطالب : 1351

چطوری میتونم یک وب سایت فروشگاهی بسازم با html,css,js ؟ آموزش تصویری رایگان + متنی رایگان

تعداد بازدید:
3549
تاریخ:
۱۴۰۰-۰۶-۲۴
دسته بندی:
آموزش jQuery قالب وردپرس آموزش آنلاین

هشتگ ها :

#
0تومان
افزودن به سبد و خرید

چطوری میتونید وب سایت فروشگاهی بسازید ؟ angel من قول میدم بهتون این کارو براتون خیلی راحت آموزش بدم اگه باور ندارد چند دقیقه وقتتو بذارید ببینید چه راز هایی بهتون خواهم گفت ؟

این آموزش یک آموزش فول استک و کامل برای ساخت یک وب سایت با html می باشد که مشکل بسیار از برنامه نویسان می باشد چرا که یک برنامه نویس باید ساختار وب سایت را درک کند و بتواند در زمان مناسب ریکشن نشان دهد موافقین ؟ اگه موافق هستین پس بزنین بریم 4 تا صفحه زیبا بسازیم، خب صفحه های مورد نیاز در یک وب فروشگاهی چه چیز هایی هستند ؟ احسن به شما، بله ما نیاز به 4 صفحه داریم یکی صفحه اصلی که نشون بده محصولاتمون رو به صورت مختصر و یک صفحه جزئیات محصول و یک صفحه 404 که همان صفحه ای است که مشتری به اشتباه وارد یک صفحه دیگر میشه و صفحه آخری صفحه جستجو است.

دیگه زیاد لفتش نمیدم بزنین بریم به آموزش :

ساختار شماتیک  و فلوچارت پروژه ما بدین صورت می باشد.

 

Folder Structure

خواستین پروژه رو براتون در قسمت دانلود به اشتراک گذاشتم، خب بزنین بریم پروژه رو استارت بزنیم

خب صفحه اصلی ما همان صفحه  index.html که لازمه که کد های صفحه اصلی در این صفحه بارگزاری بشه اگه میپرسین چرا ؟ چون که این اسم به سرور تعریف شده است که صفحه اصلی است و نیازی به نوشتن پسوند برای آن نیست برای مثال هر دو آدرس قابل خواند است : https://www.mellatweb.com و https://www.mellatweb.com/index.html هیچ تفاوتی ندارند و نیازی به نوشتن اسم صفحه نیست فقط در index بدین شکل می باشد. پس شما یک نوت پد باز کنید(ترجیحا notpad ++ ) و  در یک پوشه با اسم index.html ذخیره کنید.

خب در اول از همه باید سایت ما طبق ساختار html دارای سه بخش متا تگ ها و  بدنه سایت باشه پس برای استارت من یک بدنه بهتون میدم که میتونید داخل index.html کپی کنید

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>
  <meta name="description" content="A simple HTML5 Template for new projects.">
  <meta name="author" content="SitePoint">

  <meta property="og:title" content="A Basic HTML5 Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
  <meta property="og:description" content="A simple HTML5 Template for new projects.">
  <meta property="og:image" content="image.png">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

<body>
  <!-- your content here... --> 
</body>

<script src="js/scripts.js"></script>
</html>

 

ساخت نوبار html برای فروشگاه

کد زیر را فایل ایجاد شده index.html در داخل تگ بادی اضافه کنید <body> اینجا </body> ما در این کد یک لوگو یک فرم جستجو و دو آیکن ورود به سایت و سبد خرید را داریم. 

 

<nav class="navbar">
<div class="nav">
    <img src="img/dark-logo.png" class="brand-logo" alt="">
    <div class="nav-items">
        <div class="search">
            <input type="text" class="search-box" placeholder="search brand, product">
            <button class="search-btn">search</button>
        </div>
        <a href="#"><img src="img/user.png" alt=""></a>
        <a href="#"><img src="img/cart.png" alt=""></a>
    </div>
</div>
</nav>

حالا طبق فلوچارت ما دوتا آیکن داریم که در کد هامون به رنگ بنفش می باشد. ما دو آیکن در پوشه img داریم به اسم user , cart که میتوانید آیکن دلخواه با این اسم اضافه کنید و همچنین یک لوگو با اسم dark-logo  توجه داشته باشید پسوند های آیکن و لوگو  png  می باشد سپس یک پوشه css بسازید و یک فایل با نام home.css بسازید و کد زیر را بهش اضافه کنید 

 

home.css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'roboto', sans-serif;
}

.navbar{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: #f5f5f5;
    z-index: 9;
}

.nav{
    padding: 10px 10vw;
    display: flex;
    justify-content: space-between;
}

.brand-logo{
    height: 60px;
}

.nav-items{
    display: flex;
    align-items: center;
}

.search{
    width: 500px;
    display: flex;
}

.search-box{
    width: 80%;
    height: 40px;
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid #d1d1d1;
    text-transform: capitalize;
    background: none;
    color: #a9a9a9;
    outline: none;
}

.search-btn{
    width: 20%;
    height: 40px;
    padding: 10px 20px;
    border: none;
    outline: none;
    cursor: pointer;
    background: #383838;
    color: #fff;
    text-transform: capitalize;
    font-size: 15px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.search-box::placeholder{
    color: #a9a9a9;
}

.nav-items a{
    margin-left: 20px;
}

.nav-items a img{
    width: 30px;
}
خروجی عکس زیر خواهد شد 

nav

حالا نیاز به منو داریم برای ایجاد منو یا دسته بندی شما دقیقا در امتداد کد هایی که برای نوبار اضافه کردیم فعلا کد زیر رو دم دست داشته باشید نمیخوام به کدتون اضافه کنید تا یک روش عالی در ادامه بهتون میگم 

 

<ul class="links-container">
    <li class="link-item"><a href="#" class="link">home</a></li>
    <li class="link-item"><a href="#" class="link">women</a></li>
    <li class="link-item"><a href="#" class="link">men</a></li>
    <li class="link-item"><a href="#" class="link">kids</a></li>
    <li class="link-item"><a href="#" class="link">accessories</a></li>
</ul>

سپس برای زیبا سازی و استایل دهی به منو هامون نیاز داریم به استایل به همین سبب کد زیر را به home.css اضافه میکنیم .

.links-container{
    width: 100%;
    display: flex;
    padding: 10px 10vw;
    justify-content: center;
    list-style: none;
    border-top: 1px solid #d1d1d1;
}

.link{
    text-transform: capitalize;
    padding: 0 10px;
    margin: 0 5px;
    text-decoration: none;
    color: #383838;
    opacity: 0.5;
    transition: .5s;
}

.link:hover{
    opacity: 1;
}
خروجی تصویر زیر خواهد بود.

nav-2

خب مشکلی که اینجا وجود داره اینه که ما باید کد هامون تمیز و مرتب باشه و این کد های بالایی که نوشتیم باید دقیقا در 4 صفحه دیگر نیز اضافه کنیم جهت همین امر ما میریم از جاوااسکریپت کمک میخواهیم پس بیایید یه فانکشن تمام عیار براتون بنویسم خب طبق فلوچارت یک پوشه با نام js و یک فایل با نام nav.js بسازید و کد زیر را بهش اضافه کنید 

 

const createNav = () => {
    let nav = document.querySelector('.navbar');

    nav.innerHTML = `
        <div class="nav">
            <img src="img/dark-logo.png" class="brand-logo" alt="">
            <div class="nav-items">
                <div class="search">
                    <input type="text" class="search-box" placeholder="search brand, product">
                    <button class="search-btn">search</button>
                </div>
                <a href="#"><img src="img/user.png" alt=""></a>
                <a href="#"><img src="img/cart.png" alt=""></a>
            </div>
        </div>
        <ul class="links-container">
            <li class="link-item"><a href="#" class="link">home</a></li>
            <li class="link-item"><a href="#" class="link">women</a></li>
            <li class="link-item"><a href="#" class="link">men</a></li>
            <li class="link-item"><a href="#" class="link">kids</a></li>
            <li class="link-item"><a href="#" class="link">accessories</a></li>
        </ul>
    `;
}

createNav();

اگر کمی از برنامه نویسی جاوااسکریپت اطلاع داشته باشید کد بالایی باعث میشه که داخل کلاس navbar کدهای منو اضافه بشه و در حقیقت این کار باعث میشه خودکار کد html ما هر جایی که کلاس navbar باشه  کد هایی که بهش دادیم رو اضافه کنه. پس ما یک کلاس navbar می سازیم با یک تگ برای فراخوانی جاوا اسکریپت 

<nav class="navbar"></nav>
<script src="js/nav.js"></script>

خب نوبتی هم باشه نوبت ساخت هدر یا همون اسلایدر با html در فروشگاه

خب الان ما یک متن با نام best selling داریم که داخل اسلایدرمون نشون دادیم کد html زیر رو میتونید بعد از اخرین کدی که اضافه کردیم به index.html اضافه کنیم.

<section class="product">
    <h2 class="product-category">best selling</h2>
</section>
خب برای اسلایدر دهی بهش نیز کد زیر رو میتونید در home.css اضافه کنید 
 
 
.product{
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.product-category{
    padding: 0 10vw;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 40px;
    text-transform: capitalize;
}
خروجی : 
card slider

ساخت قسمت نمایش محصول در فروشگاه اینترنتی با html

// inside product section.
<div class="product-container">
    <div class="product-card">
        <div class="product-image">
            <span class="discount-tag">50% off</span>
            <img src="img/card1.png" class="product-thumb" alt="">
            <button class="card-btn">add to whislist</button>
        </div>
        <div class="product-info">
            <h2 class="product-brand">brand</h2>
            <p class="product-short-des">a short line about the cloth..</p>
            <span class="price">$20</span><span class="actual-price">$40</span>
        </div>
    </div>
    +7 more cards
</div>

خب حالا کد بالایی رو بعد به index.html اضافه کنید برای استایل دهی کد زیر رو به home.css اضافه کنید

Home.css
.product-container{
    padding: 0 10vw;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.product-container::-webkit-scrollbar{
    display: none;
}

.product-card{
    flex: 0 0 auto;
    width: 250px;
    height: 450px;
    margin-right: 40px;
}

.product-image{
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.product-thumb{
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.discount-tag{
    position: absolute;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    color: #ff7d7d;
    right: 10px;
    top: 10px;
    text-transform: capitalize;
}

.card-btn{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    width: 90%;
    text-transform: capitalize;
    border: none;
    outline: none;
    background: #fff;
    border-radius: 5px;
    transition: 0.5s;
    cursor: pointer;
    opacity: 0;
}

.product-card:hover .card-btn{
    opacity: 1;
}

.card-btn:hover{
    background: #efefef;
}

.product-info{
    width: 100%;
    height: 100px;
    padding-top: 10px;
}

.product-brand{
    text-transform: uppercase;
}

.product-short-des{
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    opacity: 0.5;
    text-transform: capitalize;
    margin: 5px 0;
}

.price{
    font-weight: 900;
    font-size: 20px;
}

.actual-price{
    margin-left: 20px;
    opacity: 0.5;
    text-decoration: line-through;
}
Output

slider

خب حالا بریم یه تعویض کننده عکس که خیلیاتون با کورس اسلایدر میشناسید بسازیم کد زیر باعث میشه اشاره گر تعویض محصولات ظاهر بشه میتونید بعد از تگ product-container قرار بدید.

// before product-container element.
<button class="pre-btn"><img src="img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="img/arrow.png" alt=""></button>

و کد زیر نیز استایل کد بالایی می باشد که میتوانید داخل home.css آخر تر از همه کد ها قرار دهید.

 

.pre-btn, .nxt-btn{
    border: none;
    width: 10vw;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    cursor: pointer;
    z-index: 8;
}

.pre-btn{
    left: 0;
    transform: rotate(180deg);
}

.nxt-btn{
    right: 0;
}

.pre-btn img, .nxt-btn img{
    opacity: 0.2;
}

.pre-btn:hover img, .nxt-btn:hover img{
    opacity: 1;
}

خب خروجی زیر را خواهیم داشت

slider 2

 

خب حالا کدهای جاوا رو اضافه میکنیم که باعث متحرک شدن اسلایدر ما خواهند شد کد زیر رو به home.js اضافه کنید.

 

const productContainers = [...document.querySelectorAll('.product-container')];
const nxtBtn = [...document.querySelectorAll('.nxt-btn')];
const preBtn = [...document.querySelectorAll('.pre-btn')];

productContainers.forEach((item, i) => {
    let containerDimenstions = item.getBoundingClientRect();
    let containerWidth = containerDimenstions.width;

    nxtBtn[i].addEventListener('click', () => {
        item.scrollLeft += containerWidth;
    })

    preBtn[i].addEventListener('click', () => {
        item.scrollLeft -= containerWidth;
    })
})

 

</section>

.collection-container{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.collection{
    position: relative;
}

.collection img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-size: 50px;
    text-transform: capitalize;
}

.collection:nth-child(3){
    grid-column: span 2;
    margin-bottom: 10px;
}
خروجی

مجموعه

اکنون می توانید بعد از عنصر جمع آوری ، بخش محصول را 2 بار دیگر کپی کنید. و همچنین می توانید تصاویر و داده ها را تغییر دهید. نگران نباشید ما در آینده کارت ها را به صورت پویا با پایگاه داده ایجاد می کنیم.

پس از انجام کپی بخش محصول. تنها چیزی که در صفحه ما باقی می ماند پاورقی است. پس بیایید آن را بسازیم.

<footer>
    <div class="footer-content">
        <img src="img/light-logo.png" class="logo" alt="">
        <div class="footer-ul-container">
            <ul class="category">
                <li class="category-title">men</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
            <ul class="category">
                <li class="category-title">women</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
        </div>
    </div>
</footer>

همانطور که برای navbar انجام دادیم. وارد کردن footer.cssداخل home.cssفایل

Home.css
@import 'nav.css';
@import 'footer.css';
Footer.css
footer{
    position: relative;
    width: 100%;
    padding: 40px 10vw;
    padding-bottom: 80px;
    background: #383838;
}

.footer-content{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.footer-content .logo{
    height: 160px;
}

.footer-ul-container{
    width: 45%;
    display: flex;
    justify-content: space-between;
}

.category{
    width: 200px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    list-style: none;
}

.category-title{
    grid-column: span 2;
    text-transform: capitalize;
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}

.category .footer-link{
    text-decoration: none;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.75);
}

.footer-link:hover{
    color: #fff;
}
خروجی

پاورقی

عناصر اطلاعاتی را در پاورقی ایجاد کنید.

<footer>
    // previous elements
    <p class="footer-title">about company</p>
    <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat tempore ad suscipit, eos eius quisquam sed optio nisi quaerat fugiat ratione et vero maxime praesentium, architecto minima reiciendis iste quo deserunt assumenda alias ducimus. Ullam odit maxime id voluptates rerum tenetur corporis laboriosam! Cum error ipsum laborum tempore in rerum necessitatibus nostrum nobis modi! Debitis adipisci illum nemo aperiam sed, et accusamus ut officiis. Laborum illo exercitationem quo culpa reprehenderit excepturi distinctio tempore cupiditate praesentium nisi ut iusto, assumenda perferendis facilis voluptas autem fuga sunt ab debitis voluptatum harum eum. Asperiores, natus! Est deserunt incidunt quasi placeat omnis, itaque harum?</p>
    <p class="info">support emails - help@clothing.com, customersupport@clothing.com</p>
    <p class="info">telephone - 180 00 00 001, 180 00 00 002</p>
    <div class="footer-social-container">
        <div>
            <a href="#" class="social-link">terms & services</a>
            <a href="#" class="social-link">privacy page</a>
        </div>
        <div>
            <a href="#" class="social-link">instagram</a>
            <a href="#" class="social-link">facebook</a>
            <a href="#" class="social-link">twitter</a>
        </div>
    </div>
    <p class="footer-credit">Clothing, Best apparels online store</p>
</footer>
Footer.css
.footer-title, .info{
    color: rgba(255, 255, 255, 0.75);
    margin: 20px 0;
    text-transform: capitalize;
}

.footer-title{
    margin-top: 80px;
    color: #fff;
}

.footer-social-container{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.social-link{
    color: #fff;
    margin-left: 20px;
    text-transform: capitalize;
}

.social-link:nth-child(1){
    margin-left: 0;
}

.footer-credit{
    width: 100%;
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
}
خروجی

پاورقی 2

کار عالی. همانطور که برای navbar انجام دادیم. بیایید این پاورقی را نیز با JS به صورت پویا بسازیم. footer.jsفایل را باز کنید و همان کاری را که برای navbar انجام دادیم ، انجام دهید.

const createFooter = () => {
    let footer = document.querySelector('footer');

    footer.innerHTML = `
    <div class="footer-content">
        <img src="img/light-logo.png" class="logo" alt="">
        <div class="footer-ul-container">
            <ul class="category">
                <li class="category-title">men</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
            <ul class="category">
                <li class="category-title">women</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
        </div>
    </div>
    <p class="footer-title">about company</p>
    <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat tempore ad suscipit, eos eius quisquam sed optio nisi quaerat fugiat ratione et vero maxime praesentium, architecto minima reiciendis iste quo deserunt assumenda alias ducimus. Ullam odit maxime id voluptates rerum tenetur corporis laboriosam! Cum error ipsum laborum tempore in rerum necessitatibus nostrum nobis modi! Debitis adipisci illum nemo aperiam sed, et accusamus ut officiis. Laborum illo exercitationem quo culpa reprehenderit excepturi distinctio tempore cupiditate praesentium nisi ut iusto, assumenda perferendis facilis voluptas autem fuga sunt ab debitis voluptatum harum eum. Asperiores, natus! Est deserunt incidunt quasi placeat omnis, itaque harum?</p>
    <p class="info">support emails - help@clothing.com, customersupport@clothing.com</p>
    <p class="info">telephone - 180 00 00 001, 180 00 00 002</p>
    <div class="footer-social-container">
        <div>
            <a href="#" class="social-link">terms & services</a>
            <a href="#" class="social-link">privacy page</a>
        </div>
        <div>
            <a href="#" class="social-link">instagram</a>
            <a href="#" class="social-link">facebook</a>
            <a href="#" class="social-link">twitter</a>
        </div>
    </div>
    <p class="footer-credit">Clothing, Best apparels online store</p>
    `;
}

createFooter();

اکنون می توانید عناصر پاورقی را از فایل فهرست حذف کنید. و footer.jsفایل را وارد کنید.

index.html
<footer></footer>

<script src="js/footer.js"></script>
خروجی

پاورقی 2

عالی! کار با صفحه اصلی تمام شده است. حالا ، بیایید صفحه محصول را ایجاد کنیم.

صفحه محصول.

در صفحه محصول قالب HTML 5 بنویسید. و پیوند home.css، product.cssفایل.

<head>
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/product.css">
</head>

و این فایل های JS را وارد کنید.

<script src="js/nav.js"></script>
<script src="js/footer.js"></script>
<script src="js/home.js"></script>
<script src="js/product.js"></script>

و اکنون می توانید با افزودن navو افزودن footerعنصر داخل ، یک نوار و پاورقی ایجاد کنید body.

<nav class="navbar"></nav>
<footer></footer>
خروجی

گرفتن

به این سادگی نیست همچنین می توانید عنصر ظرف محصول را از صفحه اصلی به اینجا کپی کنید. پس از اتمام کار ، کارت ها را کپی کنید. بیایید بخش جزئیات محصول را ایجاد کنیم. آن را بعد از navbar.

<section class="product-details">
    <div class="image-slider">
        <div class="product-images">
            <img src="img/product image 1.png" class="active" alt="">
            <img src="img/product image 2.png" alt="">
            <img src="img/product image 3.png" alt="">
            <img src="img/product image 4.png" alt="">
        </div>
    </div>
</section>
Product.css
.product-details{
    width: 100%;
    padding: 60px 10vw;
    display: flex;
    justify-content: space-between;
}

.image-slider{
    width: 500px;
    height: 500px;
    position: relative;
    background-image: url('../img/product\ image\ 1.png');
    background-size: cover;
}

.product-images{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: #fff;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100px;
    grid-gap: 10px;
    padding: 10px;
}

.product-images img{
    width: 100%;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
}

.product-images img.active{
    opacity: 0.5;
}
خروجی

لغزنده تصویر

همین الان بخش جزئیات را بسازید.

<section>
   // image slider
   <div class="details">
        <h2 class="product-brand">calvin klein</h2>
        <p class="product-short-des">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
        <span class="product-price">$99</span>
        <span class="product-actual-price">$200</span>
        <span class="product-discount">( 50% off )</span>

        <p class="product-sub-heading">select size</p>

        <input type="radio" name="size" value="s" checked hidden id="s-size">
        <label for="s-size" class="size-radio-btn check">s</label>
        <input type="radio" name="size" value="m" hidden id="m-size">
        <label for="m-size" class="size-radio-btn">m</label>
        <input type="radio" name="size" value="l" hidden id="l-size">
        <label for="l-size" class="size-radio-btn">l</label>
        <input type="radio" name="size" value="xl" hidden id="xl-size">
        <label for="xl-size" class="size-radio-btn">xl</label>
        <input type="radio" name="size" value="xxl" hidden id="xxl-size">
        <label for="xxl-size" class="size-radio-btn">xxl</label>

        <button class="btn cart-btn">add to cart</button>
        <button class="btn">add to wishlist</button>
    </div>
</section>

.details{
    width: 50%;
}

.details .product-brand{
    text-transform: capitalize;
    font-size: 30px;
}

.details .product-short-des{
    font-size: 25px;
    line-height: 30px;
    height: auto;
    margin: 15px 0 30px;
}

.product-price{
    font-weight: 700;
    font-size: 30px;
}

.product-actual-price{
    font-size: 30px;
    opacity: 0.5;
    text-decoration: line-through;
    margin: 0 20px;
    font-weight: 300;
}

.product-discount{
    color: #ff7d7d;
    font-size: 20px;
}

.product-sub-heading{
    font-size: 30px;
    text-transform: uppercase;
    margin: 60px 0 10px;
    font-weight: 300;
}

.size-radio-btn{
    display: inline-block;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #383838;
    border-radius: 50%;
    margin: 10px;
    margin-left: 0;
    line-height: 80px;
    text-transform: uppercase;
    color: #383838;
    cursor: pointer;
}

.size-radio-btn.check{
    background: #383838;
    color: #fff;
}

.btn{
    width: 48%;
    padding: 20px;
    border-radius: 5px;
    background: none;
    border: 1px solid #383838;
    color: #383838;
    font-size: 20px;
    cursor: pointer;
    margin: 20px 0;
    text-transform: capitalize;
}

.cart-btn{
    margin-right: 2%;
    background: #383838;
    color: #fff;
}
خروجی

جزئیات

اکنون فقط باید یک قسمت ساده ایجاد کنیم. بخش شرح مفصل Make بیرون استproduct-details

<section class="detail-des">
    <h2 class="heading">description</h2>
    <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, ......</p>
</section>

.detail-des{
    padding: 0 10vw;
    text-transform: capitalize;
}

.heading{
    font-size: 30px;
    margin-bottom: 30px;
}

.des{
    color: #383838;
    line-height: 25px;
}
خروجی

جزئیات

حالا لغزنده تصویر را فعال کنید و دکمه اندازه را فعال کنید. باز کردن product.jsفایل

const productImages = document.querySelectorAll(".product-images img"); // selecting all image thumbs
const productImageSlide = document.querySelector(".image-slider"); // seclecting image slider element

let activeImageSlide = 0; // default slider image

productImages.forEach((item, i) => { // loopinh through each image thumb
    item.addEventListener('click', () => { // adding click event to each image thumbnail
        productImages[activeImageSlide].classList.remove('active'); // removing active class from current image thumb
        item.classList.add('active'); // adding active class to the current or clicked image thumb
        productImageSlide.style.backgroundImage = `url('${item.src}')`; // setting up image slider's background image
        activeImageSlide = i; // updating the image slider variable to track current thumb
    })
})

و سپس این را کد کنید.

// toggle size buttons

const sizeBtns = document.querySelectorAll('.size-radio-btn'); // selecting size buttons
let checkedBtn = 0; // current selected button

sizeBtns.forEach((item, i) => { // looping through each button
    item.addEventListener('click', () => { // adding click event to each 
        sizeBtns[checkedBtn].classList.remove('check'); // removing check class from the current button
        item.classList.add('check'); // adding check class to clicked button
        checkedBtn = i; // upading the variable
    })
})

کار عالی! کار با صفحه محصول نیز به پایان رسیده است. اکنون باید صفحه جستجو را بسازیم که بسیار ساده است.

صفحه جستجو

همانطور که navbar و footer را در صفحه محصول ایجاد کردیم. همین کار را برای این صفحه نیز انجام دهید. این فایلها را به آن پیوند دهید.

<head>
   <link rel="stylesheet" href="css/home.css">
   <link rel="stylesheet" href="css/search.css">
</head>
<body>
    <nav class="navbar"></nav>
    <footer></footer>

    <script src="js/nav.js"></script>
    <script src="js/footer.js"></script>
</body>

حالا کارت های محصول را بسازید. ابتدا عنوان را مشخص کنید.

<section class="search-results">
    <h2 class="heading">search results for <span>product</span></h2>
</section>
Search.css
.search-results{
    width: 100%;
    padding: 60px 0;
}

.heading{
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 40px;
    padding: 0 10vw;
}

.heading span{
    font-weight: 700;
}
خروجی

عنوان
برای کارت ها ، از همان کارتی که برای صفحه اصلی ساخته ایم استفاده می کنیم. کافی است product-containerعنصر را از صفحه اصلی کپی کرده و داخل آن بچسبانید search-results.

اما ما از جعبه فلکس استفاده می کنیم که باعث می شود کارت ها در کنار هم قرار بگیرند. اما ما این را برای صفحه جستجوی خود نمی خواهیم. بنابراین فقط product-containerعنصر عناصر را بنویسید .

Product.css
.product-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: auto;
    grid-row-gap: 40px;
}
خروجی

توری

اکنون ، تقریباً کارمان تمام شده است. تنها صفحه ای که باید ایجاد کنیم صفحه 404 است.

صفحه 404

برای ایجاد نوار ، همین کار را برای این صفحه انجام دهید. من در این صفحه پاورقی نکردم اما اگر می خواهید می توانید آن را نیز تهیه کنید. پس از ایجاد نوار. پیوند 404.cssفایل. و بیایید صفحه را کد کنیم.

<img src="img/404.png" class="four-0-four-image" alt="">
<p class="four-0-four-msg">look like you are lost. Head to beack to our <a href="#">homepage</a></p>
Footer.css
.four-0-four-image{
    display: block;
    margin: 60px auto;
}

.four-0-four-msg{
    text-align: center;
    text-transform: capitalize;
    color: #383838;
}

.four-0-four-msg a{
    color: #383838;
}
خروجی

404

بنابراین برای امروز بنشینید کار عالی. میدونم زیاد بود اما وب سایت تجارت الکترونیک به این سادگی نیست. اگر نمی خواهید قسمت بعدی این مجموعه را از دست بدهید ، من را در youtube و dev.to دنبال کنید.

امیدوارم همه و همه را درک کرده باشید. اگر شک دارید یا چیزی را از دست داده ام ، در نظرات به من اطلاع دهی

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi