Chapters
48 Chapters
|
5:05:52
|
Login to bookmark this video
-
Course Code
Subscribe to download the code!
Subscribe to download the code!
-
This Video
Subscribe to download the video!
Subscribe to download the video!
-
Subtitles
Subscribe to download the subtitles!
Subscribe to download the subtitles!
-
Course Script
Subscribe to download the script!
Subscribe to download the script!
27.
Product Details & Smart vs Dumb Components
Scroll down to the script below, click on any sentence (including terminal blocks) to jump to that spot in the video!
Subscribe to jump to this part in the video!
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.
This course is also built to work with Vue 3!
What JavaScript libraries does this tutorial use?
// package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.30.0", // 0.30.2
"axios": "^0.19.2", // 0.19.2
"bootstrap": "^4.4.1", // 4.5.0
"core-js": "^3.0.0", // 3.6.5
"eslint": "^6.7.2", // 6.8.0
"eslint-config-airbnb-base": "^14.0.0", // 14.1.0
"eslint-plugin-import": "^2.19.1", // 2.20.2
"eslint-plugin-vue": "^6.0.1", // 6.2.2
"regenerator-runtime": "^0.13.2", // 0.13.5
"sass": "^1.29.0", // 1.29.0
"sass-loader": "^8.0.0", // 8.0.2
"vue": "^2.6.11", // 2.6.11
"vue-loader": "^15.9.1", // 15.9.2
"vue-template-compiler": "^2.6.11", // 2.6.11
"webpack-notifier": "^1.6.0" // 1.8.0
}
}
20 Comments
Somebody at SymfonyCasts is a comedic genius! These products are hilarious. I want to buy the Velvis!
Haha, I'm glad you enjoy our silly (but well thought) jokes :)
Hey, I have gotten this far into the tutorial but must have done something that created a show-stopping problem that I don't know how to fix. When I start the server and try to load the index page, I get a fatal
PHP Fatal error: Uncaught ReflectionException: Class "Doctrine\Common\Cache\ArrayCache" does not exist in /opt/www/symfony/vue-symfony/vendor/symfony/dependency-injection/ContainerBuilder.php:1089<br />and similar whenever I try to do something like
composer updateorsymfony console cache::clearMy research has come up with things like <a href="https://stackoverflow.com/questions/68652105/composer-install-update-trigger-class-doctrine-common-cache-arraycache-does-not ">https://stackoverflow.com/questions/68652105/composer-install-update-trigger-class-doctrine-common-cache-arraycache-does-not </a> but before I try their advice I thought I'd try asking here.
Any ideas? Thanks.
Hey David,
Hm, not sure, just a fast wild idea - could you try to clear the cache by removing the folder? i.e. execute "rm -rf var/cache" in your console. Does the problem still exist?
Cheers!
Yeah, I thought of that and tried it, but it didn't work -- same result. (Odd, because you might think if its complaint is that it can't clear the cache so you do it yourself, it might stop complaining, at least temporarily. But no.) So I went ahead and tried
composer require doctrine/cache "^1.12"and that <i>seems</i> to work -- don't know if bad side effects will show up somewhere later on.If I understand it correctly, this
ArrayCacheclass is intended as nothing more than a sort of no-op, a placeholder for the dev environment, and doesn't actually cache anything in the sense of persisting from one request to the next. Kind of ironic to get stuck there. I know you guys have more than enough to do, but maybe if there's a future version of this tutorial, this would be something to take a look at.Hey davidmintz
The
doctrine/cachelibrary was deprecated some time ago. I'm not sure how you ran into this problem but I'm guessing you upgraded the DoctrineBundle library. Try upgrading all doctrine libraries by runningand clear the cache manually just in case
rm -rf var/cacheYes, I think I did mess around with composer and got myself into this. I will try this suggestion once I work up the nerve -- it will probably work, but I don't have a deep understanding of dependency management and hesitate to play around now that I have it working :-) Thanks!
Hi there
Thanks a lot for the awesome tutorials!!
One question, I have the same entity fields like you in the tutorial. In my database I see the column "image_filename" with "pen.png" etc.. But in the Vue inspector the product object has all fields like "name", but the "image_filename" is missing. Have you an idea whats going on?
Beste regards
Michael
Hey Michael! My first guess would be a problem with API platform itself! If clearing the symfony cache doesn't fix it, then may be you have made some changes to the Entities yourself and API platform is not exposing that particular field? Let me know if any of this makes sense!
Hey Matias
I've copied 1:1 the entity code of the tutorial and cleared the cache. Also when I create a new field in the entities the API platform doesn't show this field. But it's only my testing app. Now I build my first app with the API platform and I hope there it works fine. ;-)
Hey Michael K.!
Let's see if we can get this figured out :).
> I've copied 1:1 the entity code of the tutorial and cleared the cache
That *is* strange.
> Also when I create a new field in the entities the API platform doesn't show this field
So the logic for whether or not a field shows up in API Platform is "fairly" simple (with quotes around it, because nothing in programming is always *that* simple). There are 2 big things to look for:
A) Does your field have a "getter" method? The naming is important here. If your property is called imageFilename, then you need a getImageFilename() method. If you actually called your *property* image_filename, then I think it needs to be getImage_filename(), but I don't recommend naming things like this.
B) Your property needs to have the @Group annotation above it with a group that matches the "groups" option of the normalizationContext on your entity (if you have one, which we do in our project).
Let me know if this helps! And, of course, check out our API Platform tutorials to learn a ton more ;).
Cheers!
Sometimes it's that easy. In your course code is the @Group annotation missing and i didn't saw it.
`/**
*/
private $imageFilename;`
And I found another little diffrent between tutorial and your course code:
:src="product.image"but in the entity the field has the name $imageFilename.Thank you so much for your help!
Best regards!
Hey Michael K.!
Ah, I understand better! There's not an inconsistency with the course download and the video - they use the exact same code. But I forgot that I exposed the "image" field in a special way. Instead of exposing imageFilename, I used a custom ProductNormalizer class (you can see this if you download the course code), which added a custom "image" field, with the full URL to the image. I bet you're just missing this ProductNormalizer in your code, which is why you weren't seeing the field!
On an API Platform-level, both using Groups or a custom normalizer are valid way to expose a field (the Groups way is the more official way). I used a custom normalizer so that I could use a service to help generate the "image" value.
Cheers!
Hi Ryan
I got it! Thanks a lot for your really good explanations and help!
Cheers Michael
At 57 seconds into this video you show all the different properties in the Dev Tools for a product. One of them that isn't talked about is colors. How would you go about accessing colors? Do you have to make another AJAX call or is it available?
Hi Brandon!
In the first episodes of Part 2 of this tutorial (To be released), we will be talking about the Product Page, which takes care of the colors!
If you want to jump ahead and play around with it, we basically fetch all colors in the database with a colors service (you can fiddle with API Platform to see which API call is needed for that) and then display the color choices with a simple color swatches selector.
Stay tuned!
FYI: The "Velvis" product image 404s on case-sensitive filesystems. This is caused by a "V" in AppFixtures.php on line 130 for the image name instead a "v" as it is in the filename.
Hey Justin!
Silly Mac! Letting me make mistakes like this! Thanks for letting me know - I totally see it! We can't have anyone missing the velvis photo ;)
I've just pushed up a fix to the course code (lowercase "v" in AppFixtures). Thanks for the report - I really appreciate it!
Cheers!
"In fact,
$stylewill be undefined until you have a style tag and that tag has the module attribute."It is still undefined even if you have the style tag and the module attribute but within style you don't have any styles.
That is correct, Todor! Thanks for pointing that out!
If the Style tag is empty, there will not be a $style object for us to use. As soon as we enter anything in our modular style block, $style will become available!
"Houston: no signs of life"
Start the conversation!