Headless Prestashop with Nuxt JS

Focused View

Aloui Mohamed Habib

7:38:38

10 View

1. Development Setup and Configuration

1. Installing Prestashop REST Module with Nuxt.mp4

02:57

2. Exploring the REST API with Nuxt.mp4

02:37

3. Creating a Nuxt Project for Headless Prestashop.mp4

00:57

4. Setting Up Pinia with Nuxt.mp4

04:40

5. Understanding Directories Structure in Nuxt.mp4

01:57

2. User Interface main elements

1. Setup Routing.mp4

03:42

2. Leveraging Layouts in Nuxt.mp4

03:07

3. Bootstrap Setup for Nuxt.mp4

04:07

4. Dynamic Header with Pinia in Nuxt.mp4

05:08

5. Styling the Menu Component in Nuxt.mp4

03:12

6. Footer component.mp4

04:27

3. API and Data Management

1. Querying Diagram Implementation with Nuxt.mp4

01:43

2. Prepare the API calling workflow.mp4

03:33

3. API Handler Class Implementation.mp4

09:27

4. User Interface and Design

1. Banner Component.mp4

05:19

2. Internationalization Setup in Nuxt.mp4

03:16

3. New Arrival Component.mp4

04:07

4. Product Thumbnail.mp4

11:34

5. Add Google Font to Nuxt 3.mp4

02:11

5. Translation

1. Translation Component.mp4

03:53

2. Dynamic Dropdown Refactoring with Translation Persistence.mp4

09:01

3. Store Refactoring for Translation Persistence.mp4

05:31

4. Multi-language support for API calls.mp4

09:09

5. Fix language ID during fetch.mp4

07:33

6. Persist Pinia State.mp4

07:26

7. Language selector default option.mp4

04:56

6. Search Integration and Enhancement

1. Search UI Integration.mp4

03:52

2. Search API Integration.mp4

04:47

3. Search Suggestions.mp4

13:04

4. Improve Search Suggestions.mp4

06:28

5. Search Result Page Setup.mp4

03:45

6. Search Result TypeScript Integration.mp4

01:48

7. Search Result Product List.mp4

05:54

8. Search Result Add Filter.mp4

05:00

9. Persist listing filters.mp4

03:43

7. Product details page

1. Setting Up PDP.mp4

04:13

2. Product image carousel.mp4

06:53

3. Adding Quantity Control.mp4

11:29

4. Emitting Quantity Selection to Buy Box.mp4

02:05

5. Stock status.mp4

00:46

6. Product options.mp4

03:41

7. Handling Size Selection.mp4

04:33

8. Managing Color Selection.mp4

02:43

9. Handling Price Display.mp4

03:57

10. HANDBRAKE Implementing Computed Options.mp4

07:35

11. Setup cookies for API calls.mp4

03:39

12. Understand product attributes.mp4

03:02

13. Creating an Add-to-Cart Component.mp4

10:03

14. Add to cart API.mp4

09:56

15. Implementing an Add-to-Cart Modal.mp4

10:30

16. Display cart product count.mp4

06:31

17. HANDBRAKE essentials data.mp4

09:07

8. Checkout and beyond

1. Customer account ( API exploring ).mp4

02:30

2. My account page UI.mp4

08:44

3. Form input validation.mp4

05:24

4. Authentication.mp4

08:18

5. Handling Error Invalid Credentials.mp4

06:36

6. My account page.mp4

06:15

7. Persist user session.mp4

10:13

8. Implement logout functionality.mp4

07:16

9. Forms Switcher.mp4

05:10

10. Sign-up Process.mp4

05:57

11. View Orders History.mp4

04:37

12. View order details.mp4

07:37

13. Edit Account Information.mp4

07:28

14. HANDBRAKE Update account information.mp4

07:10

15. Route Middleware.mp4

09:29

16. Fix definePageMeta within a component.mp4

04:28

17. Introduction to Checkout.mp4

03:59

18. Optimizing Cart Page.mp4

08:40

19. Displaying Subtotal on Cart Page.mp4

06:59

20. Get shipping addresses.mp4

10:11

21. List shipping addresses.mp4

03:57

22. Selecting Shipping Addresses.mp4

05:04

23. Display shipping address info.mp4

03:52

24. Persist selected shipping address.mp4

04:05

25. Choosing Carrier.mp4

01:40

26. Exploring Payment Options.mp4

05:16

27. Rendering Payment Options.mp4

07:29

28. Payment postman demo.mp4

02:17

29. Submitting Payment.mp4

05:08

30. Confirmation Message for Payment.mp4

05:27

31. The wrap up.mp4

02:48

Description

Building Headless E-commerce Solutions: Integrating Prestashop API with Nuxt.js

What You'll Learn?

Understand the fundamentals of Nuxt 3
Master integration with the Prestashop API
Implement client-side rendering and server-side rendering
Develop a functional web app integrating Nuxt 3 and the Prestashop API

Who is this for?

Web developers and programmers with some experience in JavaScript

Those interested in building web applications using Nuxt 3 and integrating them with external APIs, specifically the Prestashop API

Developers looking to expand their knowledge in client-side and server-side rendering techniques

Individuals aiming to learn how to fetch and manipulate data from external sources within their web applications

What You Need to Know?

A basic knowledge of Vue & Nuxt eco-system is required

More details

Description
Welcome to "Headless Prestashop with Nuxt JS" â€“ your gateway to crafting dynamic e-commerce solutions!

In this course, we'll dive into the fusion of Nuxt 3 and Prestashop API, empowering you to build modern web apps that seamlessly integrate with external services.
Get ready to master Nuxt 3 essentials, unleash the power of Prestashop API, and revolutionize your approach to e-commerce development.

What this course will teach YOU:
1. Understand the fundamentals of Nuxt 3:
Â Â - Learn how to set up a new project using Nuxt 3.
Â Â - Explore the core concepts of Nuxt 3 such as pages, components, and layouts.
Â Â - Gain proficiency in using Nuxt CLI commands for development and deployment.

2. Master integration with the Prestashop API:
Â Â - Familiarize yourself with the Prestashop API documentation.
Â Â - Learn how to authenticate and make requests to the Prestashop API from a Nuxt 3 application.
Â Â - Understand how to retrieve and manipulate data from Prestashop using API endpoints.

3. Implement client-side rendering and server-side rendering:
Â Â - Differentiate between client-side rendering (CSR) and server-side rendering (SSR) and understand their advantages and limitations.
Â Â - Configure Nuxt 3 to utilize both CSR and SSR based on application requirements.
Â Â - Optimize performance by choosing the appropriate rendering mode for different parts of the application.

4. Develop a functional web app integrating Nuxt 3 and the Prestashop API:
Â Â - Plan and design the architecture of the web app.
Â Â - Implement user interfaces using Nuxt 3 components and layouts.
Â Â - Integrate Prestashop API endpoints to fetch and display relevant data such as product listings, categories, and customer information.
Â Â - Add functionality for user interactions such as searching, filtering, and adding items to the cart.
Â Â - Apply styling and responsiveness to enhance the user experience across various devices.

By achieving these learning objectives, you will gain the necessary knowledge and skills to create a web app using Nuxt 3 and integrate it with the Prestashop API effectively.

Let's embark on this exciting journey together!
Who this course is for:
Web developers and programmers with some experience in JavaScript
Those interested in building web applications using Nuxt 3 and integrating them with external APIs, specifically the Prestashop API
Developers looking to expand their knowledge in client-side and server-side rendering techniques
Individuals aiming to learn how to fetch and manipulate data from external sources within their web applications

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Aloui Mohamed Habib

Instructor's Courses

Hi,My Name is Mohamed Habib(@7tein) and I'm a passionate software engineer with good years of experience.I like to share my knowledge with people and give them the. best of what i collected through these years.Mainly i teach JavaScript (Angular, React) and PHP through an Ecommerce System called Prestashop also WordPress and Symfony.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.