Welcome to Part 3 of the React Laravel 12 Ecommerce App Tutorial Series 🛒🚀 In this video, we’ll design the Product Page, Cart Page, and Checkout Page UI for our Ecommerce application using React JS frontend. These pages are essential for creating a complete online store where users can view products, add them to cart, and proceed to checkout. 🔥 What you’ll learn in this video: ✅ Design a Product Page UI with product details layout ✅ Create a Cart Page UI to show added products ✅ Build a Checkout Page UI for order summary & payment flow ✅ Structure pages for future backend API integration (Laravel 12) ✅ Build responsive and clean ecommerce pages using React Watch the video: 👉 Trash Icon : <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-trash3" viewBox="0 0 16 16"> <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5...
Welcome to Part 3 of the React Laravel 12 Ecommerce App Tutorial Series 🛒🚀
In this video, we’ll design the Product Page, Cart Page, and Checkout Page UI for our Ecommerce application using React JS frontend. These pages are essential for creating a complete online store where users can view products, add them to cart, and proceed to checkout. 🔥 What you’ll learn in this video: ✅ Design a Product Page UI with product details layout ✅ Create a Cart Page UI to show added products ✅ Build a Checkout Page UI for order summary & payment flow ✅ Structure pages for future backend API integration (Laravel 12) ✅ Build responsive and clean ecommerce pages using ReactWatch the video:
👉 Trash Icon:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-trash3" viewBox="0 0 16 16"><path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/></svg>
👉 Product Slider:
import { Swiper, SwiperSlide } from 'swiper/react'
import { Thumbs, FreeMode, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';
const [thumbsSwiper, setThumbsSwiper] = useState(null);
<Swiper
style={{
'--swiper-navigation-color': '#000',
'--swiper-pagination-color': '#000',
}}
onSwiper={setThumbsSwiper}
loop={true}
direction={`vertical`}
spaceBetween={10}
slidesPerView={6}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper mt-2"
>
<SwiperSlide>
<div className='content'>
<img
src={ProductImg}
alt=""
height={100}
className='w-100' />
</div>
</SwiperSlide>
</Swiper>
<Swiper
style={{
'--swiper-navigation-color': '#000',
'--swiper-pagination-color': '#000',
}}
loop={true}
spaceBetween={0}
navigation={true}
thumbs={thumbsSwiper ? { swiper: thumbsSwiper } : undefined}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
<SwiperSlide >
<div className='content'>
<img
src={ProductImg}
alt=""
className='w-100' />
</div>
</SwiperSlide>
</Swiper>
🔔 Stay Connected
👉 Subscribe to my YouTube Channel for more tutorials.
👉 Follow the full playlist here: React Laravel 12 Ecommerce App
👉 Leave a comment if you face any issue — I’ll help you out 🙂
Comments
Post a Comment