ساخت یک صفحه فروشگاه ساده بدون استفاده از چارچوب(FrameWork)

ساخت یک صفحه فروشگاه ساده بدون استفاده از چارچوب(FrameWork)

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

برای مشاهده لینک وارد شود

ما در داخل فایل دانلود چند بخش مهم داریم که عبارتند از کدهای مربوط به استایل ها،کدهای مربوط به جاوااسکریپت،کدهای HTML و همچنین فایل products.json که شامل داده های مربوط به هر محصول را برای ما نگه خواهد داشت.خوب حالا به سراغ آموزش میرویم.

 فایل product.json

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

{
    "id": 1,
    "name": "سونی اکسپریا Z3",
    "price": "1,920,000",
    "specs": {
      "manufacturer":"سونی",
      "storage": 16,
      "os": "اندروید",
      "camera": 15
    },
    "description": "اطلاعات وارد شده فقط برای تست میباشد.شما می توانید با تغییراتی که نیاز دارید از این صفحه بسته به نیاز خود استفاده نمایید.ما در اینجا فقط اطلاعات آزمایشی را قرار دادیم.",
    "rating": 4,
    "image": {
      "small": "assets/images/sony-xperia-z3.jpg",
      "large": "assets/images/sony-xperia-z3-large.jpg"
    }
  },
  {
    "id": 2,
    "name": "آیفون۶",
    "price": "2,800,000",
    "specs": {
      "manufacturer": "اپل",
      "storage": 16,
      "os": "iOS",
      "camera": 8
    },
    "description": "اطلاعات وارد شده فقط برای تست میباشد.شما می توانید با تغییراتی که نیاز دارید از این صفحه بسته به نیاز خود استفاده نمایید.ما در اینجا فقط اطلاعات آزمایشی را قرار دادیم.",
    "rating": 4,
    "image": {
      "small": "assets/images/iphone6.jpg",
      "large": "assets/images/iphone6-large.jpg"
    }
  }

HTML

در داخل فایل HTML ما چندین تگ div قرار دارند که کلاس page را با یکدیگر به اشتراک گذاشته اند.آنها صفحات مختلفی هستند که توسط برنامه نمایش داده میشوند.به هر حال هنگام بارگذاری صفحه تمام آنها توسط کدهای CSS مخفی میشوند و ما برای نمایش آنها به جاوااسکریپت نیاز خواهیم داشت.ایده اصلی این است که فقط یک صفحه در هر زمان نمایش داده شود و این کدهای جاوااسکریپت هستند که تصمیم میگیرند کدام یک نمایش داده شوند.

<div class="main-content">

		<div class="all-products page">

			<div class="filters">
				<form>

					<div class="filter-criteria">
						<span>شرکت سازنده</span>
						<label><input type="checkbox" name="manufacturer" value="اپل">اپل</label>
						<label><input type="checkbox" name="manufacturer" value="سامسونگ">سامسونگ</label>
						<label><input type="checkbox" name="manufacturer" value="نوکیا">نوکیا</label>
						<label><input type="checkbox" name="manufacturer" value="سونی">سونی</label>
						<label><input type="checkbox" name="manufacturer" value="htc">HTC</label>
						<label><input type="checkbox" name="manufacturer" value="zte">ZTE</label>
						
					</div>

					<div class="filter-criteria">
						<span>حافظه داخلی</span>
						<label><input type="checkbox" value="16" name="storage">16 گیگ</label>
						<label><input type="checkbox" value="32" name="storage">32 گیگ</label>
					</div>

					<div class="filter-criteria">
						<span>سیستم عامل</span>
						<label><input type="checkbox" value="اندروید" name="os">اندروید</label>
						<label><input type="checkbox" value="ios" name="os">iOS</label>
						<label><input type="checkbox" value="ویندوز" name="os">ویندوز</label>
					</div>

					<div class="filter-criteria">
						<span>دوربین</span>
						<label><input type="checkbox" value="5" name="camera">5مگاپیکسل</label>
						<label><input type="checkbox" value="8" name="camera">8 مگاپیکسل</label>
						<label><input type="checkbox" value="12" name="camera">12 مگاپیکسل</label>
						<label><input type="checkbox" value="15" name="camera">15 مگاپیکسل</label>
					</div>

					<button>پاک کردن انتخاب ها</button>

				</form>

			</div>

			<ul class="products-list">
				<script id="products-template" type="x-handlebars-template">​
					{{#each this}}
						<li data-index="{{id}}">
							<a href="#" class="product-photo">
								<img src="{{image.small}}" height="130" alt="{{name}}"/>
							</a>
							<h2><a href="#"> {{name}} </a></h2>
							<ul class="product-description">
								<li><span>شرکت سازنده: </span>{{specs.manufacturer}}</li>
								<li><span>حافظه داخلی: </span>{{specs.storage}} گیگابایت</li>
								<li><span>سیستم عامل: </span>{{specs.os}}</li>
								<li><span>دوربین: </span>{{specs.camera}} مگاپیکسل</li>
							</ul>
							<button>خرید کردن</button>
							<p class="product-price">{{price}}تومان</p>
							<div class="highlight"></div>
						</li>
					{{/each}}
				</script>

			</ul>

		</div>


		<div class="single-product page">

			<div class="overlay"></div>

			<div class="preview-large">
				<h3>مشاهده مشخصات محصول</h3>
				<div class="thumb">
					<img src=""/>
				</div>
				<button class="price">خرید کردن</button>
				<p></p>

				<span class="close">×</span>
			</div>

		</div>

		<div class="error page">
			<h3>متاسفیم،در جایی اشتباه شده است:(</h3>
		</div>

	</div>

 ما ۳ صفحه داریم:صفحه تمام محصولات(لیست محصولات)،صفحه یک محصول(فقط یک محصول نمایش داده میشود) و صفحه خطا.

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

شما در زیر یک نمای کلی از آن را مشاهده می کنید.

فروشگاه ساده با استفاده از جاوااسکریپت بدون استفاده از فریم ورک
فروشگاه ساده با استفاده از جاوااسکریپت بدون استفاده از فریم ورک

صفحه یک محصول فقط اطلاعات مربوط به یک محصول را به شما نمایش می دهد که آن هنگام بارگذاری صفحه مخفی است و نمایش داده نمیشود.هنگامی که آدرس هش مناسب دریافت شد،آنگام داده های مربوط به محصول نملیشداده میشود.

صفحه خطا نیز فقط یک پیام خطا برای کاربر نمایش می دهد.

کدهای جاوااسکریپت(مهمترین بخش) 

 در ابتدا اجازه بدهید نگاهی سریع به توابع و  عملکردشان داشته باشیم.

$(function () {
checkboxes.click(function () {
			// hash تغییر آدرس 
			createQueryHash(filters);

		}

	$.getJSON( "products.json", function( data ) {

		// نوشتن داده ها در متغییر های سراسری 
		products = data;

		//فراخوانی تابع برای ایجاد اچ تی ام ال برای تمامی محصولات
		generateAllProductsHTML(products);

		// به کار انداختن دستی "هش چینج" برای شروع برنامه
		$(window).trigger('hashchange');
	});

$(window).on('hashchange', function(){
		render(window.location.hash);
	});

function render(url) {
// دریافت کلمات کلیدی از آدرس
//مخفی کردن تمام چیزهایی که در حال نمایش هستند.
}

function generateAllProductsHTML(data){
//این تابع فقط یک بار هنگام بارگذاری اولیه صفحه فراخوانی میشود
	// آن لست  محصولاتن را از طریق یک قالب فرمانی خاص پر می کند
	//دریافت می کنیمproducts.json آن فقط یک پارامتر را دریافت می کند-داده ای که ما از
}

function renderProductsPage(data){
//این تابع آبجکتی که شامل تمام محصولاتی است که ما میخواهیم نمایش بدهیم  را دریافت می کند.
}

function renderSingleProductPage(index, data){
//باز کردن صفحه ای برای نمایش یک از محصولات
	//پارامترهای آن ایندکس هایی هستند که از هش و آبجکت محصولات  بدست می آیند.
}

	function renderFilterResults(filters, products){
	//پیدا کردن و اجرای نتایج قیلتر کردن داده ها که عبارتن از 
	// فیلترها - متغییرهای سراسری ما - آرایه ای از آبجکت ها در مورد آنچه ما در بارخ آن جست و جو میکردیم
	//محصولات-ابجکتی با لیست تمام محصولات
renderProductsPage(results);
}

function renderErrorPage(){
//نمایش صفحه خطا
	}

	function createQueryHash(filters){
//hash دریافت آبجکت فیلتر ها،تبدیل آن به رشته و نوشتن آن در 
}
}

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

به هر حال،ما هنوز میخواهیم این قابلی ترا داشته باشیم تا در داخل برنامه حرکت کنیمبه عنوان مثال آدرس آن را کپی کنیم  و به دوستانخود ارسال کنیم.اگر ما آدرس برنامه را تغییر ندهیم آنها برنامه را از ابتدا (یعنی حالت شروع) دریافت خواهند کرد  نه آنچیزی که شما میخواهید به آنها نمایش بدهید.برای حل این مشکل ما اطلاعات مربوط به موقعیت برنامه را در داخل آدرس hash# مینویسیم.هش ها جلوی بارگذاری اولیه را می گیرند و باعث میشوند تا اطلاعات به راحتی در دسترس بوده و قابلیت انعطاف بیشتری داشته باشند.

تمام آنچه در بالا ذکر شد را در زیر میتوانید مشاهده نمایید

function render(url) {

		// دریافت کلمات کلیدی از آدرس
		var temp = url.split('/')[0];

		//مخفی کردن تمام چیزهایی که در حال نمایش هستند.
		$('.main-content .page').removeClass('visible');


		var	map = {

			// صفحه خان یا صفحه اصلی
			'': function() {

				//پاک کردن آبجکتهای فیلترها،برداشتن چک تمام چک باکس ها،نمایش تمام محصولات
				filters = {};
				checkboxes.prop('checked',false);

				renderProductsPage(products);
			},

			// صفحه نمایش یک محصول
			'#product': function() {

				//دریافت ایندکس محصولی که ما میخواهیم نمایش بدهیم و فراخوانی تابع مناسب 
				var index = url.split('#product/')[1].trim();

				renderSingleProductPage(index, products);
			},

			//صفحه با محصولات فیلتر شده
			'#filter': function() {

				//'#filter/'دریاف رشته بعد از کلمه کلیدی
				//فراخوانی تابع فیلترکردن
				url = url.split('#filter/')[1].trim();

				//تجزیه و امتحان کردن آبجکتهای فیلتر ها از طریق پرسو جوی رشته ای
				try {
					filters = JSON.parse(url);
				}
					//(اگر جیسون معتبری نبود )به صفحه اصلی برگرد(بقیه کد اجرا نخواهد شد
				catch(err) {
					window.location.hash = '#';
					return;
				}

				renderFilterResults(filters, products);
			}

		};

		//URLاجرای تابع مورد نیاز بسته به کلمه کلیدی 
		if(map[temp]){
			map[temp]();
		}
		//اگر کلمات کلیدی در بالا لیست نشد-صفحه خطا را نمایش بده
		else {
			renderErrorPage();
		}

	}

 این تابع با استفاده از هش آدرس تصمیم میگیرد تا کدام یک از تابع را فراخوانی کرده و اجرا نماید.

با استفاده از کد زیر هنگام اجرا داده های json را بر روی template ما پیاده می کند.

function generateAllProductsHTML(data){

		var list = $('.all-products .products-list');

		var theTemplateScript = $("#products-template").html();
		//کامپایل کردن الگو
		var theTemplate = Handlebars.compile (theTemplateScript);
		list.append (theTemplate(data));


		//هر محصول دارای یک  صفت دیتا-ایندکس است.
		//استفاده می کندurlبا کلیک کردن برای نمایش هر محصول در صفحه جدید از تغییر هش
		//یادآوری:هر هش چینج باعث بارگذاری تابع میشود
		list.find('li').on('click', function (e) {
			e.preventDefault();

			var productIndex = $(this).data('index');

			window.location.hash = 'product/' + productIndex;
		})
	}

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

function renderProductsPage(data){

		var page = $('.all-products'),
			allProducts = $('.all-products .products-list > li');

		//مخفی کردن محصولات در لیست محصولات
		allProducts.addClass('hidden');
		
		//تکرار کردن همه محصولات
		//اگر آیدی آنها در جایی در دیتا آبجکتباشد،کلاس مخفی کردن را برای نمایش آنها  پاک کن
		allProducts.each(function () {

			var that = $(this);

			data.forEach(function (item) {
				if(that.data('index') == item.id){
					that.removeClass('hidden');
				}
			});
		});

		//نمایش فقط خود صفحه
		//تابع رندر(بارگذاری)تمام صفحات را مخفی می کند پس ما برای نمایش صفحه ای که میخواهیم  نمایش داده شود باید به طریق زیر عمل کنیم
		page.addClass('visible');

	}

نمایش صفحه مربوط به یک محصول:

function renderSingleProductPage(index, data){

		var page = $('.single-product'),
			container = $('.preview-large');

		//پیدا کردن محصول مورد نظر ما با استفاده از تکرار دیتا آبجکت و جست وجو کردن برای بستن ایندکس
		if(data.length){
			data.forEach(function (item) {
				if(item.id == index){
					// Populate '.preview-large' with the chosen product's data.
					//نمایش داده میشوند.'.preview-large' این  داده های محصولات  بصورت  
					container.find('h3').text(item.name);
					container.find('img').attr('src', item.image.large);
					container.find('p').text(item.description);
				}
			});
		}

		//صفحه نمایش داده شود
		page.addClass('visible');

	}

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

function renderFilterResults(filters, products){

			//این آرایه شامل تمام فیلتر های ممکن است
		var criteria = ['manufacturer','storage','os','camera'],
			results = [],
			isFiltered = false;

		//برداشتن تمام تیک های گذاشته شده
		// ما تیک آن ها را بصورت تک به تک خواهیم گذاشت
		checkboxes.prop('checked', false);


		criteria.forEach(function (c) {

			//بررسی کردن هر یک از فیلتر ها ممکن که  در آبجکت فیلتر ها قرار دارد
			if(filters && filters.length){


				//بعد از این که ما محصولات را یک بار فیلتر کردیم،ما میخواهیم تا فیلتر های آنها حفظ شود
				//به همین دلیل ما آبجکت را در محصولات جست و جو می کنیم تا یکی را برابر با نتایجمان برابر باشد
				//وقتی که آرایه نتایج  پاک شود،آن با داده های فیلتر جدید ،فیلتر خواهد شد
				if(isFiltered){
					products = results;
					results = [];
				}


				// در این حلقه تو در تو  ما تمام فیلتر ها و محصولات را بارهاتکرار می کنیم
				//و اگر آنها شامل ارزش های یکسانی باشند آنها را انتخاب می کنیم
				//filters.criteria تکرار ورودی ها در داخل 
				filters.forEach(function (filter) {

					//تکرار بیشتر محصولات
					products.forEach(function (item){

						//اگر محصول دارای مشخصات یکسانی با فیلتر داشته باشد
						// می کندtrueآن را در داخل آرایه نتایج قرار می دهد و پرچم آن را که ای"فیلتر شده" است  
						if(typeof item.specs == 'number'){
							if(item.specs == filter){
								results.push(item);
								isFiltered = true;
							}
						}

						if(typeof item.specs == 'string'){
							if(item.specs.toLowerCase().indexOf(filter) != -1){
								results.push(item);
								isFiltered = true;
							}
						}

					});

					// در اینجا ما میتوانیم از چک باکس به عنوان نشان دهنده درستی فیلتر استفاده کنیم
					//که در این صورت اپیلیکیشن را به روز نگه میدارد.
					if(c && filter){
						$('input[name='+c+'][value='+filter+']').prop('checked',true);
					}
				});
			}

		});

		//renderProductsPage فراخوانی 
		//آن  به عنوان آرگومان برای آبجکت با محصول فیلتر شده است 
		renderProductsPage(results);
	}

 نمایش وضعیت خطا:

function renderErrorPage(){
		var page = $('.error');
		page.addClass('visible');
	}

فیلتر کردن آبجکت ها و نوشتن آنها در هش آدرس:

function createQueryHash(filters){

		// ما در اینجا بررسی  میک نیم که فیلتر ها خالی نباشند
		if(!$.isEmptyObject(filters)){
			//  JSON.stringify آبجکت باStringify   
			//'#filter' و نوشتن آن بعد از کلمه کلیدی 
			window.location.hash = '#filter/' + JSON.stringify(filters);
		}
		else{
			//اگر خالی باشد هش را به # تغییر بده(برو به صفحه اصلی
			window.location.hash = '#';
		}

	}

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


نُه × 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>