آموزش ساخت سبد خرید با جاوا اسکریپت به صورت گام به گام

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

چرا به سبد خرید نیاز داریم؟

فرض کنید وارد یک فروشگاه فیزیکی می‌شوید. اولین کاری که انجام می‌دهید چیست؟ احتمالاً محصولاتی را که به آن‌ها علاقه‌مند هستید برمی‌دارید و داخل سبد خرید قرار می‌دهید. به این ترتیب، می‌توانید به راحتی در فروشگاه بچرخید، گزینه‌های مختلف را بررسی کنید و درنهایت، تمام کالاهای موردنظر خود را یکجا خریداری نمایید. سبد خرید در دنیای وب نیز کارکردی مشابه دارد.

مرجع کامل و تخصصی آموزش جاوا اسکریپت + اعطای گواهینامه دوره

کلیک کنید

جاوا اسکریپت به ما این امکان را می‌دهد که محصولاتی را که کاربر انتخاب می‌کند، به صورت مجازی در سبد خرید ذخیره کنیم. بدین ترتیب، کاربر می‌تواند به راحتی به‌مرور محصولات بپردازد، چندین کالا را به سبد خرید اضافه کند و درنهایت، اقدام به نهایی کردن خرید خود نماید.

آنچه برای ساخت سبد خرید با جاوا اسکریپت به آن نیاز داریم

برای ساخت سبد خرید با جاوا اسکریپت، به چند مورد اساسی زیر نیاز داریم:

• فایل HTML: این فایل ساختار کلی صفحه وب ما را تشکیل می‌دهد.
• فایل CSS: با استفاده از CSS، ظاهر و استایل سبد خرید را شخصی‌سازی می‌کنیم.
• فایل جاوا اسکریپت: این فایل حاوی کدهای جاوا اسکریپت برای مدیریت سبد خرید است.

پیشنهاد مطالعه: آموزش ساخت ماشین حساب با جاوا اسکریپت به صورت گام به گام

پروژه ساخت سبد خرید با جاوا اسکریپت

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

کد HTML ساخت سبد خرید با javascript

ساختار اصلی یا قطعه کد اچ تی ام ال ساخت سبد خرید با جاوا اسکریپت به صورت زیر است:

<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> Nav <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>nav <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"navbar navbar-inverse bg-inverse fixed-top bg-faded"</span><span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col"</span><span class="token operator">></span>
          <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"button"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn btn-primary"</span> data<span class="token operator">-</span>toggle<span class="token operator">=</span><span class="token string">"modal"</span> data<span class="token operator">-</span>target<span class="token operator">=</span><span class="token string">"#cart"</span><span class="token operator">></span><span class="token function">Cart</span> <span class="token punctuation">(</span><span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"total-count"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token punctuation">)</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span><span class="token operator"><</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"clear-cart btn btn-danger"</span><span class="token operator">></span>Clear Cart<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>nav<span class="token operator">></span>


<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> Main <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span>
      <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col"</span><span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span> style<span class="token operator">=</span><span class="token string">"width: 20rem;"</span><span class="token operator">></span>
  <span class="token operator"><</span>img decoding<span class="token operator">=</span><span class="token string">"async"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-img-top"</span> src<span class="token operator">=</span><span class="token string">"http://www.azspagirls.com/files/2010/09/orange.jpg"</span> alt<span class="token operator">=</span><span class="token string">"Card image cap"</span><span class="token operator">></span>
  <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-block"</span><span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc lwptoc-autoWidth lwptoc-baseItems lwptoc-light lwptoc-notInherit"</span> data<span class="token operator">-</span>smooth<span class="token operator">-</span>scroll<span class="token operator">=</span><span class="token string">"1"</span> data<span class="token operator">-</span>smooth<span class="token operator">-</span>scroll<span class="token operator">-</span>offset<span class="token operator">=</span><span class="token string">"24"</span><span class="token operator">></span><span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_i"</span><span class="token operator">></span>    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_header"</span><span class="token operator">></span>
        <span class="token operator"><</span>b <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_title"</span><span class="token operator">></span>فهرست محتوا<span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span>                    <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_toggle"</span><span class="token operator">></span>
                <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_toggle_label"</span> data<span class="token operator">-</span>label<span class="token operator">=</span><span class="token string">"پنهان"</span><span class="token operator">></span>نمایش<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_items"</span> style<span class="token operator">=</span><span class="token string">"display:none;"</span><span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_itemWrap"</span><span class="token operator">></span><span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item"</span><span class="token operator">></span>    <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#Orange"</span><span class="token operator">></span>
                    <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_number"</span><span class="token operator">></span><span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
                <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_label"</span><span class="token operator">></span>Orange<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item"</span><span class="token operator">></span>    <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#Banana"</span><span class="token operator">></span>
                    <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_number"</span><span class="token operator">></span><span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
                <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_label"</span><span class="token operator">></span>Banana<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item"</span><span class="token operator">></span>    <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#Lemon"</span><span class="token operator">></span>
                    <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_number"</span><span class="token operator">></span><span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
                <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_label"</span><span class="token operator">></span>Lemon<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_itemWrap"</span><span class="token operator">></span><span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item"</span><span class="token operator">></span>    <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#Cart"</span><span class="token operator">></span>
                    <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_number"</span><span class="token operator">></span><span class="token number">3.1</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
                <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lwptoc_item_label"</span><span class="token operator">></span>Cart<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span>h4 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-title"</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"Orange"</span><span class="token operator">></span>Orange<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span>
    <span class="token operator"><</span>p <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-text"</span><span class="token operator">></span>Price<span class="token operator">:</span> $<span class="token number">0.5</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
    <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span> data<span class="token operator">-</span>name<span class="token operator">=</span><span class="token string">"Orange"</span> data<span class="token operator">-</span>price<span class="token operator">=</span><span class="token string">"0.5"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"add-to-cart btn btn-primary"</span><span class="token operator">></span>Add to cart<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
  <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col"</span><span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span> style<span class="token operator">=</span><span class="token string">"width: 20rem;"</span><span class="token operator">></span>
  <span class="token operator"><</span>img decoding<span class="token operator">=</span><span class="token string">"async"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-img-top"</span> src<span class="token operator">=</span><span class="token string">"http://images.all-free-download.com/images/graphicthumb/vector_illustration_of_ripe_bananas_567893.jpg"</span> alt<span class="token operator">=</span><span class="token string">"Card image cap"</span><span class="token operator">></span>
  <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-block"</span><span class="token operator">></span>
    <span class="token operator"><</span>h4 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-title"</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"Banana"</span><span class="token operator">></span>Banana<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span>
    <span class="token operator"><</span>p <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-text"</span><span class="token operator">></span>Price<span class="token operator">:</span> $<span class="token number">1.22</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
    <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span> data<span class="token operator">-</span>name<span class="token operator">=</span><span class="token string">"Banana"</span> data<span class="token operator">-</span>price<span class="token operator">=</span><span class="token string">"1.22"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"add-to-cart btn btn-primary"</span><span class="token operator">></span>Add to cart<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
  <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col"</span><span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span> style<span class="token operator">=</span><span class="token string">"width: 20rem;"</span><span class="token operator">></span>
  <span class="token operator"><</span>img decoding<span class="token operator">=</span><span class="token string">"async"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-img-top"</span> src<span class="token operator">=</span><span class="token string">"https://3.imimg.com/data3/IC/JO/MY-9839190/organic-lemon-250x250.jpg"</span> alt<span class="token operator">=</span><span class="token string">"Card image cap"</span><span class="token operator">></span>
  <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-block"</span><span class="token operator">></span>
    <span class="token operator"><</span>h4 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-title"</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"Lemon"</span><span class="token operator">></span>Lemon<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span>
    <span class="token operator"><</span>p <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-text"</span><span class="token operator">></span>Price<span class="token operator">:</span> $<span class="token number">5</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
    <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span> data<span class="token operator">-</span>name<span class="token operator">=</span><span class="token string">"Lemon"</span> data<span class="token operator">-</span>price<span class="token operator">=</span><span class="token string">"5"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"add-to-cart btn btn-primary"</span><span class="token operator">></span>Add to cart<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
  <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>


 <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> Modal <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"modal fade"</span> id<span class="token operator">=</span><span class="token string">"cart"</span> tabindex<span class="token operator">=</span><span class="token string">"-1"</span> role<span class="token operator">=</span><span class="token string">"dialog"</span> aria<span class="token operator">-</span>labelledby<span class="token operator">=</span><span class="token string">"exampleModalLabel"</span> aria<span class="token operator">-</span>hidden<span class="token operator">=</span><span class="token string">"true"</span><span class="token operator">></span>
  <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"modal-dialog modal-lg"</span> role<span class="token operator">=</span><span class="token string">"document"</span><span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"modal-content"</span><span class="token operator">></span>
      <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"modal-header"</span><span class="token operator">></span>
        <span class="token operator"><</span>h5 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"modal-title"</span> id<span class="token operator">=</span><span class="token string">"exampleModalLabel"</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"Cart"</span><span class="token operator">></span>Cart<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>h5<span class="token operator">></span>
        <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"button"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"close"</span> data<span class="token operator">-</span>dismiss<span class="token operator">=</span><span class="token string">"modal"</span> aria<span class="token operator">-</span>label<span class="token operator">=</span><span class="token string">"Close"</span><span class="token operator">></span>
          <span class="token operator"><</span>span aria<span class="token operator">-</span>hidden<span class="token operator">=</span><span class="token string">"true"</span><span class="token operator">></span><span class="token operator">&</span>times<span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"modal-body"</span><span class="token operator">></span>
        <span class="token operator"><</span>table <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"show-cart table"</span><span class="token operator">></span>

        <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span>
        <span class="token operator"><</span>div<span class="token operator">></span>Total price<span class="token operator">:</span> $<span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"total-cart"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"modal-footer"</span><span class="token operator">></span>
        <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"button"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn btn-secondary"</span> data<span class="token operator">-</span>dismiss<span class="token operator">=</span><span class="token string">"modal"</span><span class="token operator">></span>Close<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
        <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"button"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn btn-primary"</span><span class="token operator">></span>Order now<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
  <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>

بررسی کد اچ تی ام ال ساخت سبد خرید با جاوا اسکریپت

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

نوار ناوبری (Navigation Bar):

• این بخش در ابتدای کد قرار دارد و از تگ nav ساخته‌شده است.
• داخل این نوار، یک ردیف (row) و یک ستون (col) وجود دارد که شامل دو دکمه است.
• دکمه اول با متن Cart، به کاربر امکان مشاهده سبد خرید را می‌دهد. تعداد محصولات داخل سبد خرید نیز کنار متن دکمه نمایش داده می‌شود (توجه کنید که در حال حاضر، این تعداد با یک اسپان با کلاس total-count نمایش داده می‌شود که مقدار آن باید توسط جاوا اسکریپت تعیین شود).
• دکمه دوم با متن Clear cart، به کاربر اجازه می‌دهد تا به طور کامل سبد خرید خود را خالی کند.

محصولات (Main):

• این بخش، قسمت اصلی نمایش محصولات فروشگاه را تشکیل می‌دهد.
• یک ردیف (row) با سه ستون (col) در این بخش وجود دارد.
• داخل هر ستون، یک کارت محصول (card) قرار گرفته است.
• هر کارت محصول شامل موارد زیر است:
  • تصویر محصول (img)
  • عنوان محصول (h4)
  • قیمت محصول (p)
  • دکمه افزودن به سبد خرید یا Ad to Cart که با کلیک بر روی آن، محصول به سبد خرید اضافه می‌شود.
  • توجه کنید که این دکمه دارای اطلاعات اضافی است که توسط ویژگی‌های data-name (نام محصول) و data-price (قیمت محصول) حمل می‌شود. این اطلاعات در بخش جاوا اسکریپت برای مدیریت سبد خرید مورداستفاده قرار خواهند گرفت.

پنجره سبد خرید (Modal):

• این بخش از آموزش ساخت سبد خرید با جاوا اسکریپت با تگ‌های div مربوط به کامپوننت مودال ساخته‌شده است.
• مودال به کاربر امکان مشاهده جزئیات سبد خرید را می‌دهد.
• با کلیک بر روی دکمه سبد خرید، این پنجره ظاهر می‌شود.
• داخل این پنجره، یک جدول (table) برای نمایش لیست محصولات موجود در سبد خرید در نظر گرفته شده است (توجه کنید که فعلاً این جدول خالی است و باید توسط جاوا اسکریپت پر شود).
• همچنین، در این بخش، مقدار کل هزینه سبد خرید (total-cart) نمایش داده می‌شود.
• در انتهای پنجره، دو دکمه Close و Order وجود دارد.

کد HTML فوق از آموزش ساخت سبد خرید با Javascript صرفاً ساختار کلی سبد خرید را مشخص می‌کند. برای اینکه این سبد خرید به طور کامل کار کند، نیاز به کدهای جاوا اسکریپت داریم تا بتوانیم عملکردهای افزودن به سبد خرید، نمایش سبد خرید، حذف از سبد خرید و محاسبه کل هزینه را پیاده‌سازی نماییم که در ادامه به آن خواهیم پرداخت.

قطعه کد CSS ساخت سبد خرید با جاوا اسکریپت

در این بخش به استایل‌دهی به سبد خرید خواهیم پرداخت. قطعه کد این بخش از آموزش ساخت سبد خرید با جاوا اسکریپت به صورت زیر است:

body <span class="token punctuation">{</span>
  padding<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">80</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token punctuation">.</span>show<span class="token operator">-</span>cart li <span class="token punctuation">{</span>
  display<span class="token operator">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>card <span class="token punctuation">{</span>
  margin<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>card<span class="token operator">-</span>img<span class="token operator">-</span>top <span class="token punctuation">{</span>
  width<span class="token operator">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>
  height<span class="token operator">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>
  align<span class="token operator">-</span>self<span class="token operator">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

بررسی کد CSS سبد خرید جاوا اسکریپتی

کد CSS ارائه شده در کنار کد HTML، به استایل دهی و چیدمان عناصر مختلف در صفحه وب سبد خرید شما کمک می‌کند. بیایید نگاهی به جزئیات این کد بیندازیم:

تنظیمات کلی:

• body { padding-top: 80px; }: این کد به بدنه صفحه (body) یک فاصله گذاری 80 پیکسل از بالا اضافه می‌کند. این کار می‌تواند برای ایجاد فضایی بین نوار ناوبری و محتوای اصلی صفحه مفید باشد.

سبک دهی به لیست سبد خرید:

• .show-cart li { display: flex; }: این کد به هر آیتم (li) در لیست سبد خرید (با کلاس show-cart) استایل flexbox می‌دهد. این کار باعث می‌شود که آیتم‌ها به صورت ردیفی در کنار هم قرار بگیرند و فضای موجود را به طور مساوی تقسیم کنند.

سبک دهی به کارت‌های محصول:

• .card { margin-bottom: 20px; }: این کد به هر کارت محصول (card) یک فاصله گذاری 20 پیکسل از پایین اضافه می‌کند. این کار باعث می‌شود که کارت‌ها بافاصله‌ی مناسب از یکدیگر نمایش داده شوند.

سبک دهی به تصویر محصول:

• .card-img-top { width: 200px; height: 200px; align-self: center; }: این کد به تصویر محصول (card-img-top) در داخل کارت‌ها استایل می‌دهد. جزئیات این استایل به شرح زیر است:
  • width: 200px;: عرض تصویر 200 پیکسل تعیین می‌شود.
  • height: 200px;: ارتفاع تصویر 200 پیکسل تعیین می‌شود.
  • align-self: center;: تصویر به صورت عمودی در مرکز کارت قرار می‌گیرد.

دوره آموزش جامع HTML و  CSS

کلیک کنید

این کد CSS فقط شامل استایل‌های پایه‌ای برای سبد خرید شما است. شما می‌توانید با توجه به نیاز خودتان، استایل‌های بیشتری را به این کد اضافه کنید و ظاهر سبد خرید را مطابق سلیقه خودتان شخصی‌سازی نمایید. برای مثال، می‌توانید رنگ‌ها، فونت‌ها، حاشیه‌ها و سایه‌ها را به‌دلخواه خودتان تغییر دهید.

پیشنهاد مطالعه: آموزش جاوا اسکریپت در طراحی سایت – کاربردها و مزایا

قطعه کد جاوا اسکریپت ساخت سبد خرید

درنهایت در این آموزش ساخت سبد خرید با جاوا اسکریپت به فایل اصلی پروژه یا همان کد جاوا اسکریپت ساخت سبد خرید می‌رسیم که حاوی کدهای زیر است:

<span class="token comment">// ************************************************</span>
<span class="token comment">// Shopping Cart API</span>
<span class="token comment">// ************************************************</span>

<span class="token keyword">var</span> shoppingCart <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// =============================</span>
  <span class="token comment">// Private methods and propeties</span>
  <span class="token comment">// =============================</span>
  cart <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token comment">// Constructor</span>
  <span class="token keyword">function</span> <span class="token function">Item</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> price<span class="token punctuation">,</span> count</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">=</span> count<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// Save cart</span>
  <span class="token keyword">function</span> <span class="token function">saveCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    sessionStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'shoppingCart'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>cart<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

    <span class="token comment">// Load cart</span>
  <span class="token keyword">function</span> <span class="token function">loadCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    cart <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>sessionStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'shoppingCart'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>sessionStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">"shoppingCart"</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">loadCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>


  <span class="token comment">// =============================</span>
  <span class="token comment">// Public methods and propeties</span>
  <span class="token comment">// =============================</span>
  <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token comment">// Add to cart</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">addItemToCart</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> price<span class="token punctuation">,</span> count</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> item <span class="token keyword">in</span> cart<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">===</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>count <span class="token operator">++</span><span class="token punctuation">;</span>
        <span class="token function">saveCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">var</span> item <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Item</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> price<span class="token punctuation">,</span> count<span class="token punctuation">)</span><span class="token punctuation">;</span>
    cart<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">saveCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// Set count from item</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">setCountForItem</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> count</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token keyword">in</span> cart<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>cart<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">===</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        cart<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>count <span class="token operator">=</span> count<span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token comment">// Remove item from cart</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">removeItemFromCart</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> item <span class="token keyword">in</span> cart<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">===</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>count <span class="token operator">--</span><span class="token punctuation">;</span>
          <span class="token keyword">if</span><span class="token punctuation">(</span>cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>count <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            cart<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
          <span class="token keyword">break</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token function">saveCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// Remove all items from cart</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">removeItemFromCartAll</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> item <span class="token keyword">in</span> cart<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">===</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        cart<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token function">saveCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// Clear cart</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">clearCart</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    cart <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token function">saveCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// Count cart</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">totalCount</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> totalCount <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> item <span class="token keyword">in</span> cart<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      totalCount <span class="token operator">+=</span> cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>count<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> totalCount<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// Total cart</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">totalCart</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> totalCart <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> item <span class="token keyword">in</span> cart<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      totalCart <span class="token operator">+=</span> cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>price <span class="token operator">*</span> cart<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>count<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token function">Number</span><span class="token punctuation">(</span>totalCart<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// List cart</span>
  obj<span class="token punctuation">.</span><span class="token function-variable function">listCart</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> cartCopy <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span>i <span class="token keyword">in</span> cart<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      item <span class="token operator">=</span> cart<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
      itemCopy <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span><span class="token punctuation">(</span>p <span class="token keyword">in</span> item<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        itemCopy<span class="token punctuation">[</span>p<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">[</span>p<span class="token punctuation">]</span><span class="token punctuation">;</span>

      <span class="token punctuation">}</span>
      itemCopy<span class="token punctuation">.</span>total <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>price <span class="token operator">*</span> item<span class="token punctuation">.</span>count<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      cartCopy<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>itemCopy<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> cartCopy<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// cart : Array</span>
  <span class="token comment">// Item : Object/Class</span>
  <span class="token comment">// addItemToCart : Function</span>
  <span class="token comment">// removeItemFromCart : Function</span>
  <span class="token comment">// removeItemFromCartAll : Function</span>
  <span class="token comment">// clearCart : Function</span>
  <span class="token comment">// countCart : Function</span>
  <span class="token comment">// totalCart : Function</span>
  <span class="token comment">// listCart : Function</span>
  <span class="token comment">// saveCart : Function</span>
  <span class="token comment">// loadCart : Function</span>
  <span class="token keyword">return</span> obj<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token comment">// *****************************************</span>
<span class="token comment">// Triggers / Events</span>
<span class="token comment">// *****************************************</span>
<span class="token comment">// Add item</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.add-to-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> price <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'price'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  shoppingCart<span class="token punctuation">.</span><span class="token function">addItemToCart</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> price<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Clear items</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.clear-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  shoppingCart<span class="token punctuation">.</span><span class="token function">clearCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token keyword">function</span> <span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> cartArray <span class="token operator">=</span> shoppingCart<span class="token punctuation">.</span><span class="token function">listCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> output <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token keyword">in</span> cartArray<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    output <span class="token operator">+=</span> <span class="token string">"<tr>"</span>
      <span class="token operator">+</span> <span class="token string">"<td>"</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">"</td>"</span>
      <span class="token operator">+</span> <span class="token string">"<td>("</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>price <span class="token operator">+</span> <span class="token string">")</td>"</span>
      <span class="token operator">+</span> <span class="token string">"<td><div class="</span>input<span class="token operator">-</span>group<span class="token string">"><button class="</span>minus<span class="token operator">-</span>item input<span class="token operator">-</span>group<span class="token operator">-</span>addon btn btn<span class="token operator">-</span>primary<span class="token string">" data-name="</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">">-</button>"</span>
      <span class="token operator">+</span> <span class="token string">"<input type="</span>number<span class="token string">" class="</span>item<span class="token operator">-</span>count form<span class="token operator">-</span>control<span class="token string">" data-name='"</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">"' value='"</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token string">"'>"</span>
      <span class="token operator">+</span> <span class="token string">"<button class="</span>plus<span class="token operator">-</span>item btn btn<span class="token operator">-</span>primary input<span class="token operator">-</span>group<span class="token operator">-</span>addon<span class="token string">" data-name="</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">">+</button></div></td>"</span>
      <span class="token operator">+</span> <span class="token string">"<td><button class="</span><span class="token keyword">delete</span><span class="token operator">-</span>item btn btn<span class="token operator">-</span>danger<span class="token string">" data-name="</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">">X</button></td>"</span>
      <span class="token operator">+</span> <span class="token string">" = "</span>
      <span class="token operator">+</span> <span class="token string">"<td>"</span> <span class="token operator">+</span> cartArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>total <span class="token operator">+</span> <span class="token string">"</td>"</span>
      <span class="token operator">+</span>  <span class="token string">"</tr>"</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.show-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>output<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.total-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>shoppingCart<span class="token punctuation">.</span><span class="token function">totalCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.total-count'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>shoppingCart<span class="token punctuation">.</span><span class="token function">totalCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Delete item button</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.show-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token string">".delete-item"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span>
  shoppingCart<span class="token punctuation">.</span><span class="token function">removeItemFromCartAll</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


<span class="token comment">// -1</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.show-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token string">".minus-item"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span>
  shoppingCart<span class="token punctuation">.</span><span class="token function">removeItemFromCart</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// +1</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.show-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token string">".plus-item"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span>
  shoppingCart<span class="token punctuation">.</span><span class="token function">addItemToCart</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// Item count input</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.show-cart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token string">".item-count"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  shoppingCart<span class="token punctuation">.</span><span class="token function">setCountForItem</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> count<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">displayCart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

پیشنهاد مطالعه: آموزش ساخت اسلایدر با جاوا اسکریپت – آموزش عملی و جذاب

بررسی کد جاوا اسکریپت سبد خرید

کد جاوا اسکریپت ارائه شده، مغز متفکر سبد خرید شما به شمار می‌رود. این کد وظیفه مدیریت، نمایش و به‌روزرسانی سبد خرید را بر عهده دارد. بیایید گام‌به‌گام بخش‌های مختلف این کد را بررسی کنیم:

1. تعریف یک آبجکت برای مدیریت سبد خرید (Shopping Cart API):

در ابتدای کد، یک آبجکت به نام shoppingCart تعریف می‌شود. این آبجکت، تمام توابع و متغیرهای موردنیاز برای مدیریت سبد خرید را در خود جای‌داده است.

دوره آموزش جامع طراحی سایت فرانت اند

کلیک کنید

2. محصولات داخل سبد خرید (cart):

• یک متغیر آرایه‌ای به نام cart وجود دارد که لیست محصولات موجود در سبد خرید را ذخیره می‌کند.
• هر محصول داخل سبد خرید، به صورت یک شیء (object) نمایش داده می‌شود.
• این شیء دارای سه خاصیت (property) است:
  • name: نام محصول
  • price: قیمت محصول
  • count: تعداد واحد از آن محصول که به سبد خرید اضافه‌شده است

3. سازنده محصول (Item):

• یک سازنده (constructor) به نام Item تعریف شده است.
• این سازنده، وظیفه ایجاد اشیاء محصول را بر عهده دارد.
• زمانی که محصولی به سبد خرید اضافه می‌شود، یک شیء از این سازنده ساخته‌شده و به آرایه cart اضافه می‌گردد.

4. ذخیره‌سازی سبد خرید (saveCart):

• تابع saveCart برای ذخیره‌سازی سبد خرید در حافظه مرورگر استفاده می‌شود.
• این تابع، از sessionStorage برای ذخیره‌سازی اطلاعات سبد خرید به صورت متن JSON استفاده می‌کند.

5. بارگذاری سبد خرید (loadCart):

• تابع loadCart برای بارگذاری سبد خرید از حافظه مرورگر استفاده می‌شود.
• این تابع در ابتدای اجرای کد فراخوانی می‌شود و در صورت وجود اطلاعات سبد خرید در sessionStorage، آن را بازیابی کرده و به متغیر cart اختصاص می‌دهد.

6. توابع عمومی مدیریت سبد خرید:

• مجموعه‌ای از توابع کاربردی برای مدیریت سبد خرید در آموزس ساخت سبد خرید با جاوا اسکریپت در نظر گرفته شده است که به صورت عمومی (public) تعریف‌شده‌اند و قابل‌دسترسی از بخش‌های دیگر کد هستند.
  • addItemToCart: این تابع یک محصول جدید را به سبد خرید اضافه می‌کند.
  • removeItemFromCart: این تابع یک محصول را از سبد خرید حذف می‌کند.
  • removeItemFromCartAll: این تابع تمام موارد یک محصول خاص را از سبد خرید حذف می‌کند. (فرض کنید 3 عدد هندوانه به سبد خرید اضافه کرده‌اید، با استفاده از این تابع می‌توانید همه‌ی آن‌ها را یکجا حذف نمایید).
  • clearCart: این تابع به طور کامل سبد خرید را خالی می‌کند.
  • totalCount: این تابع تعداد کل محصولات موجود در سبد خرید را برمی‌گرداند.
  • totalCart: این تابع قیمت کل سبد خرید (با احتساب تعداد محصولات) را برمی‌گرداند.
  • listCart: این تابع لیست کاملی از محصولات موجود در سبد خرید را به همراه جزئیات (نام، قیمت، تعداد و قیمت کل هر محصول) برمی‌گرداند.

7. اتصال رویداد به دکمه‌ها (Triggers / Events):

در بخش بعدی کد آموزش ساخت سبد خرید با جاوا اسکریپت، رویداد کلیک به دکمه‌های ad to cart و clear cart اختصاص داده شده است.

• با کلیک بر روی دکمه ad to cart، تابع addItemToCart فراخوانی می‌شود و محصول موردنظر به سبد خرید اضافه می‌گردد.
• با کلیک بر روی دکمه clear cart، تابع clearCart فراخوانی می‌شود و سبد خرید به طور کامل خالی می‌گردد.

8. نمایش سبد خرید (displayCart):

• تابع displayCart وظیفه نمایش لیست محصولات موجود در سبد خرید و به‌روزرسانی اطلاعات مربوط به تعداد کل محصولات و قیمت کل سبد خرید را بر عهده دارد.
• این تابع، خروجی HTML را بر اساس اطلاعات موجود در سبد خرید تولید می‌کند و آن را داخل جدول سبد خرید قرار می‌دهد.
• خروجی HTML شامل نام محصول، قیمت واحد، تعداد محصول انتخاب شده، دکمه‌های کم کردن و زیاد کردن تعداد، دکمه حذف محصول و قیمت کل آن محصول خاص

9. مدیریت دکمه‌های داخل سبد خرید:

• رویدادهای کلیک به دکمه‌های “clear cart”، “+” و “-” داخل سبد خرید اختصاص داده شده است.
  • با کلیک بر روی دکمه clear cart یک محصول خاص، تابع removeItemFromCartAll فراخوانی شده و آن محصول به طور کامل از سبد خرید حذف می‌گردد.
  • با کلیک بر روی دکمه “-” تعداد یک واحد از محصول کم می‌شود و در صورت رسیدن تعداد به صفر، محصول به طور کامل از سبد خرید حذف می‌گردد.
  • با کلیک بر روی دکمه “+” تعداد یک واحد به محصول اضافه می‌گردد.
• در هر بار تغییر تعداد محصول، تابع displayCart دوباره اجرا می‌شود تا سبد خرید به‌روزرسانی گردد.

10. مدیریت ورودی تعداد محصول:

• رویداد change به ورودی‌های مربوط به تعداد محصول داخل سبد خرید اختصاص داده شده است.
• با تغییر مقدار این ورودی‌ها، تابع setCountForItem فراخوانی شده و تعداد محصول مربوطه به‌روزرسانی می‌گردد.
• پس از به‌روزرسانی تعداد، تابع displayCart دوباره اجرا می‌شود تا سبد خرید نمایش داده شود.

11. نمایش اولیه سبد خرید:

• در انتهای کد، تابع displayCart به صورت مستقیم اجرا می‌شود تا سبد خرید در ابتدای بارگذاری صفحه‌نمایش داده شود.

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

خروجی نهایی پروژه ساخت سبد خرید با جاوا اسکریپت ما به صورت زیر است:

کلام پایانی

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

دوره جامع آموزش Reactjs

کلیک کنید

اگر شما هم دوست دارید در برنامه نویسی جاوا اسکریپت به تخصص خوبی برسید و با آن وارد بازار کار شوید، پیشنهاد ما به شما شرکت در دوره‌های آموزش جاوا اسکریپت مکتب خونه است. در مکتب خونه انواع دوره آموزش برنامه نویسی، آموزش طراحی سایت و غیره نیز برای کمک به شما به همراه ارائه گواهینامه پایان دوره ارائه خواهد شد.

رفرنس مورد استفاده: codepen