در این آموزش قصد داریم یک صفحه محصول را با استفاده از 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>

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

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;
}

با دقت در استایل‌های مربوط به کلاس.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;
}

حال به ستون اولی یا.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;
}

حال ستون سمت راست یا.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;
}

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

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

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

/* Product Color */
.product-color {
  margin-bottom: 30px;
}
 
.color-choose div {
  display: inline-block;
}
 
.color-choose input[type="radio"] {
  display: none;
}
 
.color-choose input[type="radio"] + 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="radio"] + label span {
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
 
.color-choose input[type="radio"]#red + label span {
  background-color: #C91524;
}
.color-choose input[type="radio"]#blue + label span {
  background-color: #314780;
}
.color-choose input[type="radio"]#black + label span {
  background-color: #323232;
}
 
.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: "?";
  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;
}

و در نهایت قسمت آخر این ستون، یعنی بخش.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;

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

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

/* 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;
  }
}

جاوااسکریپت

در این قسمت می‌خواهیم قابلیتی را پیاده کنیم که وقتی روی یک دکمه کلیک شد، تصویر مربوطه، در قسمت تصویر محصول بارگذاری شود. برای این کار باید رنگ فیلد رادیویی انتخاب شده را با رنگ تصویر هدفون مطابقت دهیم. برای این کار از جی کوئری استفاده می‌کنیم؛ اما در ابتدا باید آن را به پروژه‌تان اضافه کنید. سپس از خاصیت 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');
  });
 
});

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