LaVie - Онлайн дэлгүүр

LaVie нь гоо сайхан, арьс арчилгааны бараа зардаг онлайн дэлгүүр юм. Өмнө нь зөвхөн өөрсдийн салбар дэлгүүртэй байсан ба цахим орчинд авах ямар нэгэн боломжгүй байсан. Харин одоо өөрсдийн гэсэн онлайн дэлгүүртэй болсноор худалдан авагч хаанаас ч, хэзээ ч авах боломжтой болсон нь тухайн дэлгүүрийн борлуулалт маш сайн өсөх баталгаа болно.

Миний хувьд энэ төсөл дээр бүтэн хөгжүүлэлт хийж давхар User Interface дээр түлхүү ажилласан. Одоогоор нийтэд зарлах болоогүй байгаа тул холбоос оруулах боломжгүй.

Intro

Манай захиалагчийн талаас өнгөний хувьд тод биш ба бүтээгдэхүүнтэйгээ маш сайн зохицсон өнгийг баривал зүгээр гэсэн хүсэлтийн үүднээс: 60% өнгө (цагаан), 30% өнгө (бүдэгхэн ягаан), 10% өнгө (тод ягаан) гэж гаргасан.

Нүүр хуудас

Үндсэн нүүр хуудас дээр хамгийн эхэнд том slider оруулж өгөөд, үүн дээр хямдрал урамшуулал, онцлох бүтээгдэхүүн гэх мэт баннер оруулах боломжийг олгосон. Энэ нь худалдан авагчдад цаг алдалгүй мэдээлэл хүргэх боломжийг олгоно. Дараа нь Хямдрал хэсэг орж ирнэ. Дэлгүүр бүтээгдэхүүнээ хямдруулна гэдэг нь тухайн бараагаа хурдан зарахыг эрмэлзэж байна гэсэн үг. Тийм учраас хямдралтай барааг хамгийн чухал гэж үзэн энэ байрлалд оруулсан. Мөн цаашлаад шууд худалдан авах, бүгдийн харах гэх мэт функцуудыг оруулсан. Цаашлаад арьсны төрлөө сонгох боломж, зөвлөгөө өгөх блог хэсэг гэх мэт энгийн ойлгомжтой хэсгүүдийг оруулсан байгаа.

Homepage

Бүртгэл үүсгэх

Ялангуяа e-commerce дээр хэрэглэгчийн бүртгэл хэсэг маш хялбар ба хэдхэн даралтаар бүртгэл үүсгэдэг байх хэрэгтэй. Тийм учир Third Party Apps ашиглан бүртгэл үүсгэх функц нэмж өгсөн. Худалдан авах хүмүүсийн ихэнх хувь нь аль хэдийн Google эсвэл Facebook хаягтай байдаг (ялангуяа Монголд). Sign up with товч оруулж өгснөөр хэрэглэгч ганц л товч дараад шууд бүртгэл үүсгэх боломжтой болно. Мэдээж зүгээр л энгийн өөрийн мэдээллээ оруулаад бас бүртгүүлэх боломжтой. Хэрвээ аль хэдийн бүртгэлтэй бол доор байрлах Нэвтрэх дээр дараад тухайн хуудас руу үсэрнэ.

Register

Каталог

Каталог нь онлайн дэлгүүрүүдийн хамгийн чухал хэсгүүдийн нэг. Эндээс худалдан авагч хамгийн түрүүнд орж, өөрийн авахыг хүссэн бүтээгдэхүүний төрлөө сонгодог. Тиймээс маш ойлгомжтой ба энгийн байх хэрэгтэй. Зүүн талын 3 блок хэсгүүд дээр хэрэглэгчдэд шууд анхаарал татах, чухал бүтээгдэхүүн оруулах боломжийг олгосон. Манай тохиолдолд Мерч зарах мөн онцлох болон шинэ бараануудаа харуулах нь чухал байсан тул доорх шиг байрлуулж өгсөн.

Catalog

Бүтээгдэхүүний жагсаалт

Худалдан авагч энэ хэсгээс өөрийн бүтээгдэхүүнээ худалдан авах эсэхээ хараад шийдэх болно. Тийм учраас чухал мэдээллүүд (гарчиг, үнэ, үнэлгээ) маш тод сайн харагдаж байх ёстой. Мөн хүссэн бараагаа түвэггүй олох боломжийг олгох нь миний үүрэг боломж байгаа юм. Зүүн талын эгнээнд нийт төрлүүд, брэнд, арьсны төрлүүд болон үнийн хэмжээг тохируулан өгөх боломжтой. Баруун дээд талд нь бараагаа үнэ өсөх, үнэ буурах, үнэлгээгээр өсөх, үнэлгээгээр буурах, шинэ, онцлох, хямдралтай гэх мэтээр шүүлтүүр хийх боломжтой. Харин толгой хэсэгт өөрийн хүссэн бараагаа шууд нэрээр нь хайх боломжтой.

List

Бүтээгдэхүүний мэдээлэл

Бүтээгдэхүүн хэсэг нь үндсэн бүтээгдэхүүний дэлгэрэнгүй мэдээлэл, сагсанд нэмэх, худалдан авах товчнууд, сэтгэгдэл болон төстэй бүтээгдэхүүн хэсгүүдээс бүрдэнэ. Гоо сайхан, арьс арчилгааны бүтээгдэхүүн зардаг тул үүний тайлбар, найрлага (орц) ба хэрэглэх заавар заавал байна. Мөн энэхүү дэлгүүр нь оноо цуглуулах системтэй тул сэтгэгдэл их байна гэж үзэж байгаа.

Product

Төлбөр төлөх

Төлбөр төлөх дээр өөрийн бүртгэлийн овог нэр, имэйл хаяг орох бөгөөд өөр хүн хүлээж авах бол тухайн хүний мэдээллийг оруулна. Дараа нь хүргэлтийн төрлөө сонгоно: Хүргүүлэх, Очиж авах. Хүргүүлэх бол хаягаа оруулж өгнө. Хаягаа оруулаад хадгалаад дараагийн удаа худалдан авахдаа тухайн хаягаа шууд сонгоод оруулах боломжтой. Хамгийн сүүлд нь төлбөр төлөх сувгаа сонгоод захиалга амжилттай биелнэ.

Checkout

Бусад

Мэдээж энэ бүхнийг удирдах админ хэсэг шаардлагатай.

Checkout

Мөн цаашлаад хувийн бүртгэлийн хэсэг, оноо цуглуулах, мэдээлэл засах гэх мэт маш олон хэсгүүд бий. Бүх хэсгийг нэг бүрчлэн дурьдах боломжгүй тул энүгээр дизайны сэдвээ дуусгая.

Хөгжүүлэлт

Магадгүй миний амьдралдаа хийж байсан хамгийн том вебсайт байсан. Ганцаараа хөгжүүлж байгаа учраас маш их бодох зүйлстэй, байнгын 100% анхаарлаа хандуулах шаардлага үүсдэг. Frontend талаас 100% NextJS ашиглаж хөгжүүлсэн. NextJS миний алтан цагийг маш их аварч надаа хялбар боломжуудыг ихээр олгосон гэж хардаг. Аюулгүй байдлын ч хувьд, кодоо цэгцтэй бичихын тулд ч маш тохиромжтой.

Аль болох анх эхлэхдээ маш цэгцтэй эхэлсэн учир маш амархан хөгжүүлж байгаа.

Төгсгөл

Эцэст нь e-commerce хийх нь бас тийм ч амар ажил биш гэдгийг ойлгосон. Маш олон зэрэг бодох зүйлс, логик гаргах гэж олон өдөр зарцуулсан. Энэ төсөл нь яг одоогоор хөгжүүлэлтийн шатанд явж байгаа ба дундуур нь дутуу орхисон, алдаа гаргасан маш олон зүйлс байх магадлалтай ба засаад явах болно 😊✌️. Энэ хүртэл уншиж сонирхсонд маш их баярлалаа.