Chapters

44 Chapters | 4:19:56 |

01

Project Setup

4:22
02

Page 2: Product Show Page

6:59
03

Current Product Id

4:56
04

The Dynamic Component

7:24
05

AJAX & Delayed Rendering

7:18
06

Making the Title Component Less Smart

3:59
07

Product Template & Color Selector

5:06
08

Cart API & Data

5:58
09

Add To Cart

4:28
10

Loading Animations & Quantity Input

5:01
11

External DOM Updates

6:35
12

New Page, New Webpack Entry

6:51
13

Sharing Vue-ish Logic: Mixin Basics

5:56
14

More Mixin Magic

8:11
15

The Cart Page

5:02
16

Loading the "Complete" Cart

6:35
17

No Data Duplication! Fancy Computed Prop

5:12
18

Parallel AJAX with Promises

7:29
19

Cart Structure

5:24
20

Inventing a Proper v-for :key

5:56
21

Accidentally Modifying Prop Objects

8:18
22

Emitting up the Component Tree

5:13
23

Quantity: Updating Data & Saving to the Server

4:35
24

More Mixin Logic: Updating Quantity in Header

5:02
25

Remove From Cart

4:08
26

"Add to Cart Controls" Component

8:09
27

Finishing the Cart Controls Component

5:39
28

Featured Sidebar

5:05
29

Add to Cart Controls on the Sidebar

7:08
30

Deep and Smart Watchers

8:15
31

Advancing Between Cart & Checkout

7:03
32

Intro to CSS Transitions

3:36
33

Vue Transitions

8:51
34

Transition Name & Mode

6:16
35

Transitioning a Prop Change

3:24
36

Checkout Form

5:52
37

Reusable "Form Input" Component

5:52
38

v-model on a Custom Component

4:10
39

v-bind Many Props

6:10
40

Checkout Submit

7:26
41

Unexpected Server Errors

3:38
42

Form Validation

4:28
43

Client-Side Validation

5:29
44

Losing Reactivity

7:27

> JavaScript Frameworks & Tools > The Delightful World of Vue Part 2

Buy Access to Course

09.

Add To Cart

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

4 Comments

Sort By

Login or Register to join the conversation

atournayre 2 years ago edited

Hi,
Currently adding item to cart cause an issue.

Request URL: http://localhost:8000/api/carts
Request Method: POST
Status Code: 400 Bad Request
Payload : {"items":[{"product":{"@context":"/api/contexts/Product","@id":"/api/products/1","@type":"Product","id":1,"name":"Floppy disk","description":"With 1.44 mb of storage space enjoy your favorite thumbnail photo on the go!","brand":"Low End Luxury","price":1700,"stockQuantity":15,"category":"/api/categories/1","colors":[],"image":"/uploads/products/floppy-disc.png"},"color":null,"quantity":1}]}
Log : Uncaught PHP Exception Symfony\Component\Serializer\Exception\NotNormalizableValueException: "Update is not allowed for this operation." at ../code-vue/start/vendor/api-platform/core/src/Serializer/ItemNormalizer.php line 56

I don't understand why, Cart seems well configured in ApiPlatform.

|

weaverryan SFCASTS atournayre 2 years ago

Hey @atournayre!

Hmmm. Are you getting this directly from the downloaded course code? Or trying things on a fresh project with newer dependencies? That line - 56 - from ItemNormalizer might be getting triggered via the individual product being denormalized. I see that we're sending id: 1 in the JSON. If you remove that before making the AJAX call, does that make things all better?

On a high level, that IS the part that looks odd. We're sending a product set to an object with @id AND individual fields. Usually, you do one or the other: set product to an IRI string to tell AI Platform to use that existing product or set it to an object of data without an @id, which indicates that a new product should be created. Iirc, in the tutorial, we set product to its @id string - you can see that in this code block - https://symfonycasts.com/screencast/vue2/add-to-cart#codeblock-a668af6a6e - notice we're passing this.product['@id'].

Let me know if that helps :).

Cheers!

|

Robin 5 years ago

my phpstorm keeps doing stuff like this for auto importing. how do i fix it so that it will use the @ for home directory and add space around curly braces?

import {addItemToCart} from "../services/cart-service";

|

Victor SFCASTS Robin 5 years ago

Hey Robin,

Probably take a look at Preferences in your PhpStorm, I don't know if that may be configured, but if it may be - it should be in preferences then. On mac, you can press "Commad" + "," shortcut, or go to PhpStorm menu -> Preferences.

I hope this helps.

Cheers!

|

This course is also built to work with Vue 3!

Vue 2

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1", // 5.15.1
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.3
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.2.0
        "eslint-plugin-import": "^2.19.1", // 2.22.1
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.12
        "vue-loader": "^15.9.1", // 15.9.4
        "vue-template-compiler": "^2.6.11", // 2.6.12
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Previous Chapter

Next Challenge