سکریچ سے ایک ای کامرس سائٹ کی تعمیر

Feb 3, 2026
کيسے

حالیہ برسوں میں ای کامرس بہت مقبول ہو گیا ہے، اب اس کے بغیر مستقبل کا تصور کرنا مشکل ہے. انٹرنیٹ کی طاقت نے گاہکوں کے ساتھ کاروبار اور برانڈز کے لئے ایک ہوا سے منسلک کیا ہے، اور ای کامرس، زیادہ تر حصے کے لئے، مصنوعات کو ان کے سامعین کو فراہم کرنے کا سب سے آسان طریقہ ہے.

فاؤنڈیشن کی عمارت کے بلاکس لائبریری کوڈڈ UI اجزاء کی لائبریری کو ڈیزائن کیا گیا ہے کہ یہ حتمی مصنوعات کو تیزی سے پہنچنے میں آسان بنائے. ٹیمپلیٹس کے برعکس، عمارت کے بلاکس کو یہ بتانا نہیں ہے کہ آپ کی سائٹ کو کس طرح نظر آنا چاہئے یا تشکیل دیا جائے. وہ صرف آپ کے اپنے اپنی مرضی کے مطابق نظر بنانے اور بہت تیزی سے محسوس کرنے کے لئے آپ کو آلات فراہم کرتے ہیں.

اس سبق میں، آپ سیکھیں گے کہ ای کامرس کٹ کا استعمال کرتے ہوئے سکریچ سے ایک جامد ای کامرس کی ویب سائٹ کی تعمیر کیسے کریں، عمارت کے بلاکس کی ایک منحنی مجموعہ جس میں آپ کو مخصوص قسم کی ویب سائٹس کی تعمیر میں مدد کرنے کے لئے ڈیزائن کیا گیا ہے. اگرچہ یہ چوٹ ایک پروٹوٹائپ ہے، عمارت کے بلاکس ہم استعمال کر رہے ہیں اور ترتیب کے ساتھ ہم ختم ہو سکتے ہیں کسی بھی نظام پر لاگو کیا جا سکتا ہے.

شروع ہوا چاہتا ہے

Building Blocks don’t dictate how your site should look

بلڈنگ بلاکس یہ نہیں کہ آپ کی سائٹ کو کس طرح نظر آنا چاہئے

ہمیں کرنے کی پہلی چیز سائٹ کی تعمیر کے لئے ایک ماحول قائم ہے. اس ٹیوٹوریل کے لئے، آپ کو NODE.JS ڈاؤن لوڈ کرنے کی ضرورت ہوگی. ایک بار جب انسٹال ہو تو، آپ کمانڈ کا استعمال کرتے ہوئے فاؤنڈیشن CLI انسٹال کرنا چاہتے ہیں این پی ایم انسٹال-جی فاؤنڈیشن-کلی .

اب آپ کے پاس آپ کے سسٹم پر فاؤنڈیشن انسٹال ہے، ہم کمانڈ فاؤنڈیشن نئے ای کامرس سائٹ کا استعمال کرتے ہوئے ایک نئی بنیاد پر منصوبے شروع کرتے ہیں. مندرجہ ذیل فہرست میں، پہلا اختیار منتخب کریں، 'ویب سائٹ (سائٹس کے لئے فاؤنڈیشن)'، ہمارے پروجیکٹ کا نام 'ای کامرس سائٹ' میں ٹائپ کریں، اور پھر 'زرب سانچہ' کو منتخب کریں. یہ ایک بنیاد ٹیمپلیٹ اور ترقیاتی سرور شروع کرے گا تاکہ ہم آسانی سے اپنی ویب سائٹ کی تعمیر شروع کر سکیں. رن این پی ایم شروع منصوبے کو چلانے کے لئے ٹرمینل میں.

اگلا، ایک ٹیکسٹ ایڈیٹر میں اسے کھولنے کے ذریعے ہمارے نئے منصوبے کے کوڈ کے پیچھے ایک نظر ڈالیں. یہاں میں، آپ SRC / صفحات / index.html میں ایک نمونہ صفحہ تلاش کریں گے. ہم یہاں تمام کوڈ کو دور کرنے جا رہے ہیں.

ایڈیٹر کا نوٹ: آپ کے کاروبار کے لئے ایک ای کامرس ویب سائٹ کے ڈیزائن کی تلاش میں؟ اگر آپ اپنے آپ کو منتخب کرنے میں مدد کرنے کے لئے معلومات کی تلاش کر رہے ہیں تو، آپ کو مفت کے لئے مختلف وینڈرز سے معلومات فراہم کرنے کے لئے ذیل میں سوالنامہ کا استعمال کریں:

ایک کٹ انسٹال

ہم کسی بھی کوڈ کو لکھنے سے پہلے، ہم فاؤنڈیشن کی CLI کے ساتھ بنیاد کی ای کامرس کٹ میں ھیںچو گے. آپ کے ٹرمینل کے سربراہ اور کمانڈ فاؤنڈیشن کٹس ای کامرس انسٹال کریں.

اگر یہ کمانڈ کام نہیں کرتا تو، ڈبل چیک کریں کہ آپ کی بنیاد CLI 2.2.3 تک اپ ڈیٹ کیا جاتا ہے. آپ کونسی ورژن چیک کرنے کے لئے، چلاتے ہیں فاؤنڈیشن آپ کے ٹرمینل میں. اگر آپ کو اپ ڈیٹ کرنے کی ضرورت ہے، تو صرف CLI کے ساتھ انسٹال کریں این پی ایم انسٹال-جی فاؤنڈیشن-کلی اور اس کے ساتھ دوبارہ انسٹال کریں این پی ایم انسٹال-جی فاؤنڈیشن-کلی .

اس نے ہمارے ای کامرس کٹ کے اندر تمام عمارتوں کے تمام بلاکس کو ڈاؤن لوڈ کیا! کسی بھی وقت آپ عمارت کے بلاک کو انسٹال کرتے ہیں، یہ اندر آئیں گے SRC / جزوی / بلڈنگ بلاکس . آپ کو معلوم ہو گا کہ آپ کا کٹ صحیح طریقے سے نصب کیا جاتا ہے اگر عمارتوں کے بلاکس خود بخود آپ میں درآمد کیا گیا ہے App.scss فائل.

ان میں سے کچھ عمارت کے بلاکس میں فونٹ بہت اچھے سے شبیہیں شامل ہیں، لہذا آپ ان کو دستی طور پر انسٹال کرنا چاہتے ہیں یا ان کے سی ڈی این کو شامل کریں گے & lt؛ سر اور جی ٹی؛ آپ کی سائٹ کا. ایسا کرنے کے لئے، پر نیویگیشن SRC / ترتیب / Default.html. اور شامل & lt؛ لنک href = "https://cdnjs.cloudflare.com/ajax/libs/font-wesome/4.7.0/css/font- worsome.css" rel = "styleSheet" اور GT؛ کے درمیان & lt؛ سر اور جی ٹی؛ ٹیگز.

سائٹ کی سہولیات

Mix and match blocks to achieve your ideal eCommerce layout

اپنے مثالی ای کامرس ترتیب کو حاصل کرنے کے لئے بلاکس مکس اور مماثل کریں

آئیے عمارت میں آتے ہیں! ہمارے کٹ انسٹال کے ساتھ، اگلے دو قدموں کو Lego کے ساتھ کھیلنے کی طرح تھوڑا سا محسوس ہوتا ہے: آپ کے اپنے منصوبوں میں، آپ ان سب کو استعمال کرنے کا انتخاب کرسکتے ہیں، یا آپ صرف ایک انتخاب استعمال کرسکتے ہیں. اپنے خواب ای کامرس ترتیب کو حاصل کرنے کے لئے عمارت کے بلاکس کو ملا اور ملنے کے لئے آزاد محسوس کریں.

اس سبق کے لئے، پہلے دو بلاکس ہم ہیڈر اور پرومو ہیرو کے ساتھ شروع کریں گے. ایسا کرنے کے لئے، ہم ہینڈبس جزوی میکانیزم استعمال کرنے جا رہے ہیں. ہمارے خالی index.html فائل میں، ہم جزو میں پھینک دیتے ہیں {{& gt؛ ای کامرس ہیڈر}} اور {{& gt؛ ای کامرس - پرومو- ہیرو}} . صرف ان دو عمارتوں کے بلاکس کے ساتھ، ہمارے ای کامرس لینڈنگ کے صفحے پہلے سے ہی آدھے راستے پر نظر آتے ہیں.

اگلا، ہم اپنے ہیرو سیکشن کے نیچے کچھ پروڈکٹ کارڈز میں پھینک دیں گے. پروڈکٹ کارڈ بلڈنگ بلاک کا استعمال کرنے کے لئے، ہم فاؤنڈیشن کے بلاک گرڈ کا استعمال کریں گے تاکہ کارڈ ایک گرڈ کے اندر اندر بیٹھے. یہ بعد میں ان کارڈوں کی ترتیب کو تبدیل کرنے میں بھی آسان بنائے گا.

چلو کے ساتھ شروع کرو & lt؛ div class = "صف چھوٹے-اپ 2 درمیانے-اپ 5" اور جی ٹی؛ . اس ڈیو کے اندر، ہر کالم کے اندر مصنوعات کے کارڈ کے ساتھ دس کالموں میں پھینک دیں & lt؛ div class = "کالم" & gt؛ {{& gt؛ ای کامرس پروڈکٹ کارڈ}} & lt؛ / div & gt؛ .

ہم اپنے گاہکوں کو ہماری مصنوعات کو زیادہ سے زیادہ حاصل کرنے کا راستہ دینا چاہتے ہیں، لہذا ہمارے پروڈکٹ کارڈ کے نیچے ایک کال آؤٹ بٹن شامل کریں. سب سے پہلے ہمیں ہماری تخلیق کرنے کی ضرورت ہے & lt؛ div class = "صف کالم ٹیکسٹ سینٹر" & gt؛ تاکہ ہمارے بٹن کو صفحے پر مرکوز کیا جائے گا. اگلا، ہم اپنے کال آؤٹ بنانے کے لئے بنیاد کے بٹن کے اجزاء کا استعمال کریں گے. A شامل کریں & lt؛ بٹن کی کلاس = "بٹن" اور GT؛ تمام مصنوعات کی دکانیں اور ایل ٹی؛ / بٹن اور جی ٹی؛ کے اندر .قطار کے کالم .

صفحہ تقریبا مکمل طور پر محسوس ہوتا ہے، لیکن ہم اپنے ہیرو اور پروڈکٹ کارڈز کے درمیان ایک ہیڈر بھی شامل ہیں جو تھوڑا سا سیاق و سباق فراہم کرتے ہیں. ہیرو کے تحت، A شامل کریں & lt؛ div class = "صف کالم" & gt؛ ہمارے ہیڈر پر مشتمل ہونا & lt؛ h1 & gt؛ تازہ ترین آمد & lt؛ / h1 & gt؛ .

زیادہ تر ای کامرس ہوم صفحات ان کی مصنوعات کے نیچے زیادہ پروموشنل مواد ہیں. آئیے عمارت کے بلاک کا استعمال کرتے ہیں {{& gt؛ ای کامرس-ہیرو سلائیڈر-چھوٹا}} یہاں. صفحے کی چوڑائی کو پھیلانے سے سلائیڈر کو روکنے کے لئے، ہم اس کے ارد گرد لپیٹیں گے & lt؛ div class = "صف کالم" & gt؛ .

چونکہ ای کامرس سائٹس عام طور پر بہت سے صفحات پر مشتمل ہوتے ہیں، زیادہ سے زیادہ صفحات کے حجم کو سنبھالنے کے بہت سے لنکس کے ساتھ میگا فوٹر کی ضرورت ہوگی. ہمارے ای کامرس کٹ اس عین مطابق استعمال کے کیس کے لئے فوٹر کے ساتھ آتا ہے. اس چوٹ کو لپیٹ کرنے کے لئے، چلو میں چھوڑ دو {{& gt؛ ای کامرس فوٹر}} ہمارے ایچ ٹی ایم ایل کے بہت نیچے پر.

ذمہ داری کے لئے چیک کریں

ان دنوں، کسی بھی سائٹ کے لئے موبائل دوستانہ ہونے کے لۓ یہ مشکل ہے. یہ خاص طور پر ای کامرس سائٹس کے لئے سچ ہے. اب یہ آن لائن شاپنگ کا معیار بن گیا ہے، ہم صارفین کے اس فیصد سے محروم نہیں کرنا چاہتے ہیں جو ان کے موبائل فون کے ذریعہ کرتے ہیں.

موبائل سب سے پہلے ہمارے موٹو کے بعد، بنیاد کی عمارت کے بلاکس کو قدرتی طور پر ذمہ دار ہونے کے لئے بنایا گیا ہے. چھوٹے اسکرین پر فوری چیک ظاہر کرتا ہے کہ ہماری سائٹ اب بھی بہت اچھی لگ رہی ہے.

تاہم، جب ہم ہیمبرگر مینو پر کلک کرتے ہیں تو، ہمارے آف کینوس کو مناسب طریقے سے ہک نہیں دیا گیا ہے. یہ حصہ تھوڑا مشکل ہو جاتا ہے، لیکن فکر مت کرو! ہم اس آف کینوس مینو میں کیا ہو رہا ہے اس کو توڑ دیں گے اور پھر اس کو ہیک کرنے کے لۓ چلتے ہیں.

اگر آپ ای کامرس ہیڈر. HTML فائل میں نظر آتے ہیں، تو آپ کو یہ محسوس ہوگا کہ یہ ہیڈر ایک آف کینوس ہے جس میں اس میں تعمیر کیا گیا ہے. تو، یہ کیوں کام نہیں کیا؟ جب ہم ہیمبرگر مینو پر کلک کرتے ہیں، تو صرف ایک ہی چیز 'دھکا دیا گیا تھا' ہیڈر تھا. باقی باقی صفحے پر نظر آتے ہیں، جو کچھ عجیب نظر آتے ہیں.

یہی وجہ ہے کہ اس ہیڈر کو اپنے کام پر کام کرنے کے لئے بنایا گیا تھا، لیکن حقیقت میں یہ پورے صفحے کے ساتھ کام کرنے کی ضرورت ہے. دوسرے الفاظ میں، اس صفحے پر تمام مواد کو دھکا دینے کی ضرورت ہے جب آف کینوس مینو کو متحرک کیا جاتا ہے، نہ صرف ہیڈر مینو. یہ ای کامرس ہیڈر اس طرح لکھا گیا تھا کیونکہ ایک آف کینوس قائم کرنے کی ضرورت ہے آپ کو ڈائیونگ کی ضرورت ہے SRC / ترتیب / Default.html. صفحہ، جو عمارت کے بلاک کے تک پہنچنے سے باہر ہے.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet

یہ وہی ہے جو ہم فی الحال دیکھ رہے ہیں کیونکہ آف کینوس ابھی تک ہیک نہیں کیا گیا ہے

اس کو ٹھیک کرنے کے لئے، ہم سب کو کرنے کی ضرورت ہے کے اندر سب کچھ لے لو & lt؛ div class = "آف کینوس ای کامرس-ہیڈر آف کینوس پوزیشن-بائیں" id = "ای کامرس ہیڈر" ڈیٹا آف آف کینوس اور جی ٹی؛ اور اسے SRC / ترتیب / Default.html میں منتقل کریں . اگلا، ہم لپیٹ لیں گے {{& gt؛ جسم}} اے کے اندر ہماری سائٹ کی & lt؛ div class = "آف کینوس-مواد" ڈیٹا آف آف کینوس-مواد اور جی ٹی؛ . یہ ہماری سائٹ کا جسم دھکا دے گا جب آف کینوس کو شروع ہوتا ہے.

اب جب ہم اپنے ہیمبرگر پر کلک کریں تو، پوری سائٹ آف کینوس مینو کے لئے چلتا ہے! ہمارے جسم Default.html. صفحہ اس طرح نظر آنا چاہئے: 

& lt؛ جسم اور جی ٹی؛
  & lt؛ div class = "آف کینوس ای کامرس-ہیڈر آف کینوس پوزیشن-بائیں" id = "ای کامرس ہیڈر" ڈیٹا آف آف کینوس اور جی ٹی؛
& lt؛ بٹن کی کلاس = "قریبی بٹن" آریا-لیبل = "قریبی مینو" قسم = "بٹن" ڈیٹا-قریبی اور جی ٹی؛
  & lt؛ اسپین ایریا-پوشیدہ = "سچ" اور جی ٹی؛ & amp؛ اوقات؛ & lt؛ / span & gt؛
& lt؛ / بٹن اور جی ٹی؛
& lt؛ UL کلاس = "عمودی مینو" اور جی ٹی؛
  & lt؛ لی کلاس = "مین نیوی لنک" اور جی ٹی؛ & lt؛ a href = "زمرہ جات. html" & gt؛ زمرہ 1 & lt؛ / & gt؛ & lt؛ / l & gt؛
  & lt؛ لی کلاس = "مین نیوی لنک" اور جی ٹی؛ & lt؛ a href = "#" & gt؛ زمرہ 2 & lt؛ / & gt؛ & lt؛ / li & gt؛
  & lt؛ لی کلاس = "مین نیوی لنک" اور جی ٹی؛ & lt؛ ایک href = "کیوں.html" & gt؛ زمرہ 3 & lt؛ / & gt؛ & lt؛ & gt؛
  & lt؛ لی کلاس = "مین نیوی لنک" اور جی ٹی؛ & lt؛ ایک href = "build.html" & gt؛ زمرہ 4 & lt؛ / & gt؛ & lt؛ / gt؛
  & lt؛ لی کلاس = "مین نیوی لنک" اور جی ٹی؛ & lt؛ a href = "#" & gt؛ زمرہ 5 & lt؛ / & gt؛ & lt؛ / li & gt؛
& lt؛ / ul & gt؛
& lt؛ hr & gt؛

& lt؛ یو ایل کلاس = "مینو عمودی" اور جی ٹی؛
  & lt؛ لی & gt؛ & lt؛ ایک href = "#" & gt؛ مدد & lt؛ / & gt؛ & lt؛ / li & gt؛
  & lt؛ لی اور جی ٹی؛ & lt؛ ایک href = "#" & gt؛ آرڈر کی حیثیت & lt؛ / & gt؛ & lt؛ / li & gt؛
  & lt؛ لی اور جی ٹی؛ & lt؛ ایک href = "#" & gt؛ رابطہ & lt؛ / & gt؛ & lt؛ / li & gt؛
  & lt؛ لی اور جی ٹی؛ & lt؛ ایک href = "#" & gt؛ میرا اکاؤنٹ & lt؛ / & gt؛ & lt؛ / li & gt؛
& lt؛ / ul & gt؛
  & lt؛ / div & gt؛

  & lt؛ div class = "آف کینوس-مواد" ڈیٹا آف آف کینوس-مواد اور جی ٹی؛
{{& gt؛ جسم}}
  & lt؛ / div & gt؛
  & lt؛ سکرپٹ SRC = "{{rot}} اثاثوں / جے ایس / App.js" & gt؛ & lt؛ / script & gt؛
& lt؛ / جسم اور جی ٹی؛

نتیجہ

ہم نے آپ کو دکھایا ہے کہ آپ کو فاؤنڈیشن ای کامرس کٹ کے ساتھ اپنے ای کامرس سائٹ کو کس طرح شروع کرنا ہے، لیکن وہاں بند نہ کرو! 100 سے زائد عمارتوں کے بلاکس ہیں جو آپ کے صفحات کو بڑھانے میں مدد کے لئے استعمال کیا جا سکتا ہے. منٹوں کے معاملے میں، ہم نے عمارت کے بلاکس کے ساتھ ایک مستحکم ای کامرس سائٹ کو چالو کیا ہے. یہ آپ کو ایک بہت اچھا وقت بچاتا ہے کہ آپ اب آپ کے برانڈ کو فٹ ہونے کے لئے ویب سائٹ اور سٹائل میں پرت میں پرت استعمال کر سکتے ہیں.

یہاں تک کہ اگر آپ اسے مزید لے جا رہے ہیں اور بیک اپ کے اختتام کے نظام کا استعمال کرتے ہوئے، مختلف جزوی میکانیزم یا آپ کے ڈیٹا کو سائٹ میں حاصل کرنے کا ایک اور طریقہ ہے، عمارت کے بلاکس کے ساتھ دیئے گئے کام کے بہاؤ واقعی آپ کو وقت اور پیسہ فراہم کرے گا. فاؤنڈیشن کی عمارت کے بلاکس شروع کرنے کا ایک بہت اچھا طریقہ ہے کیونکہ وہ آپ کے موجودہ شیلیوں میں فٹ ہونے کے لئے، اور کسی بھی درخواست کے نظام میں استعمال ہونے کا مطلب ہے.

یہ مضمون اصل میں شائع ہوا نیٹ میگزین مسئلہ 266. اسے خریدیں یہاں .

متعلقہ مضامین:

  • فاؤنڈیشن کے ساتھ ایک کارڈ پر مبنی UI کی تعمیر
  • 10 خوبصورت نئی ای کامرس سائٹس آپ کو ضرور دیکھنا ضروری ہے
  • ای کامرس سائٹس کی کارکردگی کو بہتر بنانے کے لئے

کيسے - انتہائی مشہور مضامین

اپنی مرضی کے مطابق سلیک بوٹ بنائیں

کيسے Feb 3, 2026

(تصویری کریڈٹ: ویب ڈیزائنر) سلیک کاروباری اور ٹیموں کے لئے تیزی س�..

8 حیرت انگیز نیا گرافک ڈیزائن سبق

کيسے Feb 3, 2026

چاہے آپ صرف گرافک ڈیزائن یا ایک موسمی پرو میں شروع ہو رہے ہیں، اگر آپ کھیل سے پہلے رہنا چاہتے ہیں تو سیکھنے..

آپ کی ویب سائٹ پر پرتوں پارلایکس اثر کیسے بنانا

کيسے Feb 3, 2026

(تصویری کریڈٹ: www.beargrylls.com) Parallax تحریک، مختلف رفتار پر منتقل کرنے ک..

انفینٹی ڈیزائنر: برآمد کار استعمال کرنے کے لئے کس طرح

کيسے Feb 3, 2026

انفینٹی ڈیزائنر ایک مقبول ویکٹر ایڈیشن کا آلہ ہے. اس کے ساتھ ساتھ میک او..

وی رے کے ساتھ سکریٹر درخت

کيسے Feb 3, 2026

آپ کے منظر میں تفصیلات شامل کرنا ہمیشہ آپ کے پاس جانے کا راستہ ہے جب آپ ا..

3DS زیادہ سے زیادہ میں آپ کی مشکل سطح کی ماڈلنگ کو تیز کریں

کيسے Feb 3, 2026

اس ٹیوٹوریل میں، میں اس تکنیکوں اور طریقوں کو اشتراک کرنے جا رہا ہوں جو ..

موسم سرما کے ماحول کو کیسے بنائیں

کيسے Feb 3, 2026

ایک ذاتی تصویر پر کام کرنا شروع کرنے سے پہلے میں عام طور پر تیار کام میں ..

10 اوپر Houdini سبق

کيسے Feb 3, 2026

Houdini ایک طاقتور جانور ہے، بہت سے ہالی وڈ فلموں میں استعمال ہونے والی VFX کی تعمیر کے اوزار کے ساتھ. لیکن ابتد..

اقسام