ساخت صفحه محصول با استفاده از Html ،CSS3 و jQuery

در این آموزش قصد داریم یک صفحه محصول را با استفاده از Html، CSS3 و جی کوئری ایجاد کنیم.

از این مثال می‌توانید برای نمایش محصولات فروشگاه اینترنتی‌تان استفاده کنید.

ساخت صفحه محصول

در این آموزش از فونت‌های گوگل خصوصاً فونت Roboto استفاده می‌شود. قبل از شروع مطمئن شوید که typeface مربوط به این فونت را به سایت اضافه کرده‌اید.

مقاله مرتبط: ساخت فرم پرداخت با استفاده از HTML ،CSS٣ و jQuery

Html

قدم اول ایجاد یک ساختار Html برای صفحه محصولات‌مان است. مواردی که در این بخش نیاز داریم، عبارت‌اند از:

دو ستون

تصویر هدفون (در سمت چپ)
توضیحات و سفارشی کردن محصول (در سمت راست)
در این بخش عناصر دیگری را قرار می‌دهیم. (مثل دکمه‌ها، فیلدهای رادیویی، لینک‌ها و … .)

برای شروع همه آن‌ها را داخل یک کلاس به نام.container قرار می‌دهیم.

<main class="container">
 
  <!-- Left Column / Headphones Image -->
  <div class="left-column">
    <img data-image="black" src="images/black.png" alt="">
    <img data-image="blue" src="images/blue.png" alt="">
    <img data-image="red" class="active" src="images/red.png" alt="">
  </div>
 
 
  <!-- Right Column -->
  <div class="right-column">
 
    <!-- Product Description -->
    <div class="product-description">
      <span>Headphones</span>
      <h1>Beats EP</h1>
      <p>The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance</p>
    </div>
 
    <!-- Product Configuration -->
    <div class="product-configuration">
 
      <!-- Product Color -->
      <div class="product-color">
        <span>Color</span>
 
        <div class="color-choose">
          <div>
            <input data-image="red" type="radio" id="red" name="color" value="red" checked>
            <label for="red"><span></span></label>
          </div>
          <div>
            <input data-image="blue" type="radio" id="blue" name="color" value="blue">
            <label for="blue"><span></span></label>
          </div>
          <div>
            <input data-image="black" type="radio" id="black" name="color" value="black">
            <label for="black"><span></span></label>
          </div>
        </div>
 
      </div>
 
      <!-- Cable Configuration -->
      <div class="cable-config">
        <span>Cable configuration</span>
 
        <div class="cable-choose">
          <button>Straight</button>
          <button>Coiled</button>
          <button>Long-coiled</button>
        </div>
 
        <a href="#">How to configurate your headphones</a>
      </div>
    </div>
 
    <!-- Product Pricing -->
    <div class="product-price">
      <span>148$</span>
      <a href="#" class="cart-btn">Add to cart</a>
    </div>
  </div>
</main>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

</div>

<span>Headphones</span>

<h1>Beats EP</h1>

<p>The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance</p>

</div>

<span>Color</span>

<div>

</div>

<div>

</div>

<div>

</div>

<span>Cable configuration</span>

<button>Straight</button>

<button>Coiled</button>

<button>Long-coiled</button>

</div>

<a href="#">How to configurate your headphones</a>

</div>

</div>

</main>

حال در قسمت بعدی برای زیبایی، کمی به آن استایل می‌دهیم.

CSS

استایل زیر را به قسمت Body اضافه می‌کنیم.

/* Basic Styling */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
 
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
}

۱۰

۱۱

۱۲

۱۳

۱۴

/* Basic Styling */

html, body {

height: ۱۰۰%;

width: ۱۰۰%;

margin: ۰;

font-family: 'Roboto', sans-serif;

}

.container {

max-width: ۱۲۰۰px;

margin: ۰ auto;

padding: ۱۵px;

display: flex;

}

با دقت در استایل‌های مربوط به کلاس.container می‌بینید که مقدار display برابر flex قرار گرفته است (display: flex) و این کار باعث تراز بندی ستون‌ها می‌شود.

حال عرض ستون‌ها را مشخص می‌کنیم و همچنین position:relative و کلاس.left-column را به آن اضافه می‌کنیم، چون مقدار position مربوط به تصویر را برابر absolute قرار دادیم (یعنی position:absolute).

/* Columns */
.left-column {
  width: 65%;
  position: relative;
}
 
.right-column {
  width: 35%;
  margin-top: 60px;
}

۱۰

/* Columns */

.left-column {

width: ۶۵%;

position: relative;

}

.right-column {

width: ۳۵%;

margin-top: ۶۰px;

}

حال به ستون اولی یا.left-column استایل می‌‌دهیم.

سه تصویر در این ستون قرار دارد، سه هدفون با رنگ‌های مختلف. سپس مقدار opacity را برابر صفر قرار داده (opacity:0) و یک کلاس به نام.active تعریف کرده و استایل opacity:1 را به آن نسبت می‌دهیم که در ادامه به این کلاس نیاز پیدا می‌کنیم.

/* Left Column */
.left-column img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease;
}
 
.left-column img.active {
  opacity: 1;
}

۱۰

۱۱

۱۲

۱۳

/* Left Column */

.left-column img {

width: ۱۰۰%;

position: absolute;

left: ۰;

top: ۰;

opacity: ۰;

transition: all ۰.۳s ease;

}

.left-column img.active {

opacity: ۱;

}

حال ستون سمت راست یا.right-column را استایل دهی می‌دهیم. کار را از قسمت توضیحات محصول یعنی کلاس.product-description شروع می‌کنیم.

/* Product Description */
.product-description {
  border-bottom: 1px solid #E1E8EE;
  margin-bottom: 20px;
}
.product-description span {
  font-size: 12px;
  color: #358ED7;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.product-description h1 {
  font-weight: 300;
  font-size: 52px;
  color: #43484D;
  letter-spacing: -2px;
}
.product-description p {
  font-size: 16px;
  font-weight: 300;
  color: #86939E;
  line-height: 24px;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

/* Product Description */

.product-description {

border-bottom: ۱px solid #E1E8EE;

margin-bottom: ۲۰px;

}

.product-description span {

font-size: ۱۲px;

color: #۳۵۸ED7;

letter-spacing: ۱px;

text-transform: uppercase;

text-decoration: none;

}

.product-description h1 {

font-weight: ۳۰۰;

font-size: ۵۲px;

color: #۴۳۴۸۴D;

letter-spacing: -۲px;

}

.product-description p {

font-size: ۱۶px;

font-weight: ۳۰۰;

color: #۸۶۹۳۹E;

line-height: ۲۴px;

}

حال ما باید قسمت تنظیم رنگ محصول را استایل دهی کنیم.

در اینجا ما سه فیلد رادیوییradio input) ) داریم و باید آن‌ها را به بهترین شکل استایل دهی کنیم. هر فیلد یک رنگ دارد که باید با رنگ هدفون‌ها جفت شود.

سپس از:checked برای مشخص کردن آیکون انتخاب شده استفاده می‌کنیم.

/* Product Color */
.product-color {
  margin-bottom: 30px;
}
 
.color-choose div {
  display: inline-block;
}
 
.color-choose input[type=&quot;radio&quot;] {
  display: none;
}
 
.color-choose input[type=&quot;radio&quot;] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
}
 
.color-choose input[type=&quot;radio&quot;] + label span {
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
 
.color-choose input[type=&quot;radio&quot;]#red + label span {
  background-color: #C91524;
}
.color-choose input[type=&quot;radio&quot;]#blue + label span {
  background-color: #314780;
}
.color-choose input[type=&quot;radio&quot;]#black + label span {
  background-color: #323232;
}
 
.color-choose input[type=&quot;radio&quot;]:checked + label span {
  background-image: url(images/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

/* Product Color */

.product-color {

margin-bottom: ۳۰px;

}

.color-choose div {

display: inline-block;

}

.color-choose input[type="radio"] {

display: none;

}

.color-choose input[type="radio"] + label span {

display: inline-block;

width: ۴۰px;

height: ۴۰px;

margin: -۱px ۴px ۰ ۰;

vertical-align: middle;

cursor: pointer;

border-radius: ۵۰%;

}

.color-choose input[type="radio"] + label span {

border: ۲px solid #FFFFFF;

box-shadow: ۰ ۱px ۳px ۰ rgba(۰,۰,۰,۰.۳۳);

}

.color-choose input[type="radio"]#red + label span {

background-color: #C91524;

}

.color-choose input[type="radio"]#blue + label span {

background-color: #۳۱۴۷۸۰;

}

.color-choose input[type="radio"]#black + label span {

background-color: #۳۲۳۲۳۲;

}

.color-choose input[type="radio"]:checked + label span {

background-image: url(images/check-icn.svg);

background-repeat: no-repeat;

background-position: center;

}

در مرحله بعد به استایل دهی.cable-configuration می‌پردازیم. در این قسمت سه دکمه و یک لینک داریم. بیایید کمی استایل به آن‌ها اضافه کنیم تا ظاهر بهتری داشته باشند.

/* Cable Configuration */
.cable-choose {
  margin-bottom: 20px;
}
 
.cable-choose button {
  border: 2px solid #E1E8EE;
  border-radius: 6px;
  padding: 13px 20px;
  font-size: 14px;
  color: #5E6977;
  background-color: #fff;
  cursor: pointer;
  transition: all .5s;
}
 
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
  border: 2px solid #86939E;
  outline: none;
}
 
.cable-config {
  border-bottom: 1px solid #E1E8EE;
  margin-bottom: 20px;
}
 
.cable-config a {
  color: #358ED7;
  text-decoration: none;
  font-size: 12px;
  position: relative;
  margin: 10px 0;
  display: inline-block;
}
.cable-config a:before {
  content: &quot;?&quot;;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 2px solid rgba(53, 142, 215, 0.5);
  display: inline-block;
  text-align: center;
  line-height: 16px;
  opacity: 0.5;
  margin-right: 5px;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

/* Cable Configuration */

.cable-choose {

margin-bottom: ۲۰px;

}

.cable-choose button {

border: ۲px solid #E1E8EE;

border-radius: ۶px;

padding: ۱۳px ۲۰px;

font-size: ۱۴px;

color: #۵E6977;

background-color: #fff;

cursor: pointer;

transition: all .۵s;

}

.cable-choose button:hover,

.cable-choose button:active,

.cable-choose button:focus {

border: ۲px solid #۸۶۹۳۹E;

outline: none;

}

.cable-config {

border-bottom: ۱px solid #E1E8EE;

margin-bottom: ۲۰px;

}

.cable-config a {

color: #۳۵۸ED7;

text-decoration: none;

font-size: ۱۲px;

position: relative;

margin: ۱۰px ۰;

display: inline-block;

}

.cable-config a:before {

content: "?";

height: ۱۵px;

width: ۱۵px;

border-radius: ۵۰%;

border: ۲px solid rgba(۵۳, ۱۴۲, ۲۱۵, ۰.۵);

display: inline-block;

text-align: center;

line-height: ۱۶px;

opacity: ۰.۵;

margin-right: ۵px;

}

و در نهایت قسمت آخر این ستون، یعنی بخش.product-price را استایل دهی می‌کنیم.

/* Product Price */
.product-price {
  display: flex;
  align-items: center;
}
 
.product-price span {
  font-size: 26px;
  font-weight: 300;
  color: #43474D;
  margin-right: 20px;
}
 
.cart-btn {
  display: inline-block;
  background-color: #7DC855;
  border-radius: 6px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 30px;
  transition: all .5s;
}
.cart-btn:hover {
  background-color: #64af3d;

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

/* Product Price */

.product-price {

display: flex;

align-items: center;

}

.product-price span {

font-size: ۲۶px;

font-weight: ۳۰۰;

color: #۴۳۴۷۴D;

margin-right: ۲۰px;

}

.cart-btn {

display: inline-block;

background-color: #۷DC855;

border-radius: ۶px;

font-size: ۱۶px;

color: #FFFFFF;

text-decoration: none;

padding: ۱۲px ۳۰px;

transition: all .۵s;

}

.cart-btn:hover {

background-color: #۶۴af3d;

نتیجه نهایی را در تصویر زیر مشاهده می‌کنیم.

ساخت صفحه محصول

حال قالبی که طراحی کردیم را واکنش گرا می‌کنیم:

/* Responsive */
@media (max-width: 940px) {
  .container {
    flex-direction: column;
    margin-top: 60px;
  }
 
  .left-column,
  .right-column {
    width: 100%;
  }
 
  .left-column img {
    width: 300px;
    right: 0;
    top: -65px;
    left: initial;
  }
}
 
@media (max-width: 535px) {
  .left-column img {
    width: 220px;
    top: -85px;
  }
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

/* Responsive */

@media (max-width: ۹۴۰px) {

.container {

flex-direction: column;

margin-top: ۶۰px;

}

.left-column,

.right-column {

width: ۱۰۰%;

}

.left-column img {

width: ۳۰۰px;

right: ۰;

top: -۶۵px;

left: initial;

}

@media (max-width: ۵۳۵px) {

.left-column img {

width: ۲۲۰px;

top: -۸۵px;

}

جاوااسکریپت

در این قسمت می‌خواهیم قابلیتی را پیاده کنیم که وقتی روی یک دکمه کلیک شد، تصویر مربوطه، در قسمت تصویر محصول بارگذاری شود. برای این کار باید رنگ فیلد رادیویی انتخاب شده را با رنگ تصویر هدفون مطابقت دهیم. برای این کار از جی کوئری استفاده می‌کنیم؛ اما در ابتدا باید آن را به پروژه‌تان اضافه کنید. سپس از خاصیت data attribute جی کوئری برای این کار استفاده می‌کنیم.

اگر به یاد داشته باشید ما قبلاً کلاس.active را به صفحه اضافه کردیم. حال تعریف می‌کنیم که هرگاه که روی یک رنگ کلیک کردیم تصویر مربوط به آن رنگ در قسمت تصویر محصولات نمایان شود.

$(document).ready(function() {
 
  $('.color-choose input').on('click', function() {
      var headphonesColor = $(this).attr('data-image');
 
      $('.active').removeClass('active');
      $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
      $(this).addClass('active');
  });
 
});

۱۰

۱۱

$(document).ready(function() {

$('.color-choose input').on('click', function() {

var headphonesColor = $(this).attr('data-image');

$('.active').removeClass('active');

$('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');

$(this).addClass('active');

});

بسیار خوب، ما توانستیم با موفقیت پروژه را تکمیل کنیم. می‌توانید دموی کامل پروژه را از اینجا مشاهده کنید. همچنین سورس پروژه از اینجا قابل دانلود است.

پربازدید‌ترین‌های ماه

Gzip چیست؟ آموزش فعال سازی Gzip

دیوار آتش چیست؟ آشنایی با انواع فایروال در شبکه

Local Seo چیست؟ آموزش سئو محلی به زبان ساده

16 عاملی که باعث کاهش رتبه سایت در لیست نتایج گوگل می‌شود

متن جایگزین تصویر یا Alt Text چیست و چه تاثیری در سئو دارد؟

ساخت صفحه محصول با استفاده از Html ،CSS3 و jQuery

Html

دو ستون

CSS

جاوااسکریپت

افزودن دیدگاه

انصراف از پاسخ

پربازدید‌ترین‌های ماه

Html

دو ستون

CSS

جاوااسکریپت

شاید از این ها خوشتان آمد

افزودن دیدگاه