JavaScript Shopping Cart Tutorial - Part 4/5

Поділитися
Вставка
  • Опубліковано 5 жов 2024

КОМЕНТАРІ • 95

  • @sithumlahiruu
    @sithumlahiruu 4 роки тому +21

    For those who having the cartCost adding error (eg: 50 + 50 = 5050) try this :
    {
    name: 'junior-tiempo',
    tag: 'shoe1',
    price: 50,

    • @kryptonwest9059
      @kryptonwest9059 4 роки тому +3

      @ 5:49 When I click on 'add cart' for the first time the console displays:
      My cartCost is null
      Object (instead of string)
      ...how can i fix it

    • @alexisalcoriza6980
      @alexisalcoriza6980 3 роки тому

      savior

    • @MrDilshadca
      @MrDilshadca 2 роки тому

      @Sithum Lahiru thank you,it's help

    • @TechWithWonuola
      @TechWithWonuola 2 роки тому

      it worked!!!

    • @tylerwestphal
      @tylerwestphal 2 роки тому

      THANK YOU SO MUCH

  • @nataliadziedzic9278
    @nataliadziedzic9278 4 роки тому +7

    Thank you for this tutorial, it helped me a lot with creating my cart by the use of methods that you showed ;) It took me more hours because I didn't want to copy and paste but create my own logic, so I'm glad you explained everything clearly.

  • @nicholasdiogo5513
    @nicholasdiogo5513 4 роки тому +7

    cartCost = parseInt(cartCost); isnt converting the string to a number and rather shows nan and the a number and when you add a item it just adds the number on instead of adding the 2 numbers together

    • @henry_sparks
      @henry_sparks 4 роки тому

      Hi did you manage to get past that problem?

    • @henry_sparks
      @henry_sparks 4 роки тому

      no the code in the video works. I just hadn't cLeared my local storage and refreshed my page. After doing that it worked just like it worked for Telmo. The only thing is that my cart isn't displaying as his, even though I copied all his naming conventions and layouts.
      My items and prices and qnty in the cart, there all display vertically and not horizontally.

    • @nicholasdiogo5513
      @nicholasdiogo5513 4 роки тому

      @@henry_sparks Yes I managed to come right, I spoke to my mentor and he says we shouldnt use a map to display items in the cart which makes no sense because the map works in this case

    • @henry_sparks
      @henry_sparks 4 роки тому

      @@nicholasdiogo5513 Hi thanks. If you're not supposed to use map to display the cart items the what approach should one use?

    • @djames154
      @djames154 4 роки тому

      @@nicholasdiogo5513 Same!!, but what is the solution???

  • @santoshmohan4424
    @santoshmohan4424 4 роки тому +1

    Loving this class ....makes me refresh ..love the way you explain....sure I am gona follow you

  • @zaramccann4168
    @zaramccann4168 3 роки тому +3

    the first time I click on the add to cart 'My cartCost is NaN' but will work after the first products been added to the cart, any solutions?

    • @shahadopalkar
      @shahadopalkar 7 місяців тому

      Did you find any solutions for this?

  • @keithgriffin1674
    @keithgriffin1674 2 роки тому +1

    For anyone who's had trouble adding the cost in the local storage (I'm not sure if this will help), make sure you check your spelling. It took me a while to find out that I misspelled "cartCost", where I accidentally used "cartcost" instead. Same with "inCart", I accidentally used "incart" a couple of times.

  • @philippedavid7238
    @philippedavid7238 3 роки тому +1

    Hi ! I love the video series too ! Question : Hello,
    I would like to know how to do so that when you click on the button, you display a message that says "Your item has been added to the cart", "Continue your purchases or go to th cart"?

  • @elisasantana1839
    @elisasantana1839 2 роки тому +4

    Obrigada professor, conteudo incrivel!!

    • @Telmosampaio
      @Telmosampaio  2 роки тому +1

      De nada Elisa, espero que tenhas gostado :)

  • @dheerajkoranga5012
    @dheerajkoranga5012 2 роки тому +1

    fir those who are getting error in total cost just write.
    console.log("my cartcost is ":product.price)

  • @kryptonwest9059
    @kryptonwest9059 4 роки тому +5

    @ 5:49 When I click on 'add cart' for the first time the console displays:
    My cartCosst is null
    Object (instead of string)

  • @jithindavid2476
    @jithindavid2476 4 роки тому +1

    I am totally loving this. You are awesome.

  • @antrikshgupta418
    @antrikshgupta418 4 роки тому +1

    Links to ABOUT page and CART page are not clickable
    help ASAP please

  • @bdtech2498
    @bdtech2498 Рік тому

    Nice tutorial and helpful for us

  • @yongkevin2557
    @yongkevin2557 3 роки тому

    5:06 cartCos, it didn't show me the price instead it shows a NULL value. After I clicked on the button couple of times, it keep giving the price value that does not according to the product price in the javascript

  • @10pranjalsapkale69
    @10pranjalsapkale69 Рік тому

    for me it shows the type of - my cart cost is --> object
    it should be string as per the video
    please help me...🔍

  • @anmarm.9487
    @anmarm.9487 2 роки тому

    Your video made me subscribe. your teaching is very honest and clear. Thank you for this wonderful series. i really learned alot. May i suggest a tutorial. product variance options selector. with some complicated features. Such as choice of color changes the status of product sizes and quantity...etc.. nevertheless this series was great for me. thanks again

  • @bdinfo3960
    @bdinfo3960 Рік тому

    Nice tutorial

  • @_tomzyofficial1
    @_tomzyofficial1 2 роки тому

    I want to be able to remove a product from my cart page please I need a link that explains that

  • @pinkym6934
    @pinkym6934 4 роки тому

    Jus Awesome....I learnt loads and loads of things......How can I ever thank you....:D

    • @Telmosampaio
      @Telmosampaio  4 роки тому +1

      Hi Pinky, You're very welcome! You can always buy the full course with discount

  • @matijamilosevic8889
    @matijamilosevic8889 4 роки тому +1

    Hey Telmo, is it just me or there is gap between part 2 and part 3? You have a lot more code in third video then in second... Anyways great stuff and keep up the good work!

    • @Telmosampaio
      @Telmosampaio  4 роки тому +1

      Hi Matija, there shouldn't be any extra code, if you pay close attention you will see that the code should be the same from the previous video, I'm glad you are enjoying the series 😊

    • @ok8002
      @ok8002 4 роки тому

      @@Telmosampaio look at the end of part 2 and the beginning of part 3. There is alot of new code, looks like you missed an episode :(

    • @Telmosampaio
      @Telmosampaio  4 роки тому +1

      Hey guys you are right!! I forgot to add the 2nd video, sorry about that, I just uploaded it, and added it tot he playlist!!! Really sorry and thank for letting me know :)

  • @TechnoArt_by_HiraSultani
    @TechnoArt_by_HiraSultani 3 роки тому

    Thank you Telmo Sampaio...

    • @shrishti779
      @shrishti779 3 роки тому

      Hey... I'm having an error in third part of the video.
      Uncaught TypeError: Cannot read properties of undefined (reading 'inCart')
      Could you please help me out what could have gone wrong in my code?

  • @past6767
    @past6767 2 роки тому

    ( 8:12 ) total cost is showing 1515 it's not adding the cost

  • @krystianwojtowicz9305
    @krystianwojtowicz9305 4 роки тому

    could you make or maybe you have how to integrate google calendar with website?

  • @maximeredayug2996
    @maximeredayug2996 2 роки тому

    HEY ! How do you do for difference products in your "let products = [" ?
    Because I use items on differents pages and when I inspect, it only recognized the first item,
    can you help me please ?
    Thank a lot to you

  • @jeffersconcorreia6690
    @jeffersconcorreia6690 Рік тому

    MUITOOOOOOOOOOO OBRIGADO, VOCÊ É 10!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @Magistrado1914
    @Magistrado1914 4 роки тому

    Excellent course
    10/08/2020

  • @kriszmc.
    @kriszmc. 4 роки тому

    omygosh ily I really needed this tutorial!

  • @hayleymogolloncoppel4460
    @hayleymogolloncoppel4460 3 роки тому

    Does this code work for prices with decimals?

  • @Emmanuel-pg7vo
    @Emmanuel-pg7vo 2 роки тому

    Please my images aren't showing any solution?

  • @carlosreis7556
    @carlosreis7556 4 роки тому

    hey guys im struggling with this part i cant get my incart items to add up
    function setItems(product){
    let cartItems=localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);
    if(cartItems != null) {
    if(cartItems[product.tag] == undefined){
    cartItems = {
    ...cartItems,
    [product.tag]: product
    }
    }
    cartItems[product.tag].inCart += 1;
    } else{
    product.inCart= 1;
    cartItems = {
    [product.tag]: product

  • @spot8961
    @spot8961 4 роки тому +2

    Do not do as he does. Do this:
    const Products = document.querySelectorAll(".products")
    for (var i=0; i < Products.length; i++) {
    console.log(Products);
    }

    • @IAmWrk_
      @IAmWrk_ 4 роки тому

      For which part of code in the video ?

    • @kryptonwest9059
      @kryptonwest9059 4 роки тому

      @ 5:49 When I click on 'add cart' for the first time the console displays:
      My cartCost is null
      Object (instead of string)
      ...how can i fix it

    • @10pranjalsapkale69
      @10pranjalsapkale69 Рік тому

      @@kryptonwest9059 yeah i also need the solution for this

  • @mabreado2334
    @mabreado2334 3 роки тому +2

    So hey guys.
    Maybe some of you guys are having this problem like I did, that the console shows you null value in the log.
    Which is fine, because what you need is the key and the value to be registered in the local storage.
    But if you had the problem like the first clicked showed null value or 0 value in both log and the localstorage, it is simple.
    Just do this:
    let cartCost = 0;

    if(cartCost != null){
    cartCost = localStorage.getItem('totalCost');
    if(cartCost != null){
    cartCost = parseInt(cartCost);
    localStorage.setItem("totalCost",cartCost + products.price);
    }else{
    localStorage.setItem("totalCost", products.price);
    }
    }
    It still shows me null in log, but the value in local is not.
    Have a nice day!

    • @ragumathnisha816
      @ragumathnisha816 3 роки тому

      It worked for me..Thanks a lot :)

    • @shrishti779
      @shrishti779 3 роки тому

      @@ragumathnisha816
      Hey... I'm having an error in third part of the video.
      Uncaught TypeError: Cannot read properties of undefined (reading 'inCart')
      Could you please help me out what could have gone wrong in my code?

  • @Geomaverick124
    @Geomaverick124 4 роки тому +1

    Good Stuff!

  • @marijunelejsund9674
    @marijunelejsund9674 4 роки тому

    How do you get all the pictures the same size? I am using pictures from unsplash and if I use rem's to change the sizes in css, the details and buttons disappear.

    • @Telmosampaio
      @Telmosampaio  4 роки тому

      Hi Marijune, you need to make sure all your images are the same size and aspect ratio, then if they are too big just control their size with Css, using the width property

  • @abhishekvashishth557
    @abhishekvashishth557 4 роки тому

    Im getting this error
    cartfun.js:60 Uncaught TypeError: Cannot set property 'textContent' of null
    on cart console

    • @abhishekvashishth557
      @abhishekvashishth557 4 роки тому

      @@theonewhowill4903 What to do know 😂
      I tried everything it's still not working the problem is with onload function

    • @abhishekvashishth557
      @abhishekvashishth557 4 роки тому

      @@theonewhowill4903 the the problem is with that onload function expect this all other things are correct even I commented that part now image's and other information are showing in Cart page but when we refresh the page the value show on Cart button turn out to be 0

  • @lutfunnesalutfa4333
    @lutfunnesalutfa4333 3 роки тому

    Please provide github link

  • @andrewrussell_
    @andrewrussell_ 4 роки тому

    my totalCost is not showing up in the local storage

    • @siddheshb.kukade4685
      @siddheshb.kukade4685 4 роки тому +3

      let cartCost = localStorage.getItem('totalCost');
      if ( cartCost === null){
      localStorage.setItem('totalCost', product.price);
      } else {
      cartCost = parseInt(cartCost);
      localStorage.setItem('totalCost', cartCost + product.price);
      }

  • @samiasalim4163
    @samiasalim4163 4 роки тому

    It’s not adding the price for me what could be the problem?

    • @siddheshb.kukade4685
      @siddheshb.kukade4685 4 роки тому

      same here answer me if you found any solutions

    • @siddheshb.kukade4685
      @siddheshb.kukade4685 4 роки тому +2

      let cartCost = localStorage.getItem('totalCost');
      if ( cartCost === null){
      localStorage.setItem('totalCost', product.price);
      } else {
      cartCost = parseInt(cartCost);
      localStorage.setItem('totalCost', cartCost + product.price);
      }

    • @samiasalim4163
      @samiasalim4163 4 роки тому

      Siddhesh.B. Kukade still not working instead of adding it its concatenating the numbers

  • @djames154
    @djames154 4 роки тому

    Problem with cartCost. why?

    • @Telmosampaio
      @Telmosampaio  4 роки тому +1

      It works for me!! WHy??

    • @djames154
      @djames154 4 роки тому

      @@Telmosampaio It's a random problem?!
      Actually i have a question to ask : are there any random problems in the programming word ?

  • @SvetaSveta-ms4hi
    @SvetaSveta-ms4hi 4 роки тому

    👍👍👍👍

  • @lutfunnesalutfa4333
    @lutfunnesalutfa4333 3 роки тому +1

    You are Bad UA-cam You dont't provide source code

  • @betoabuhanea2894
    @betoabuhanea2894 3 роки тому

    my cart button still zero else i refresh the page ! can you help me to know way?