@@NagireddygariBhanuprakash Hi, Are you asking for the pictures used in this video, if so you can access them here: github.com/codeharvestguide/files/tree/main/eLife%20Images/product%20page

Hi, Concerning the source code, we love to encourage our viewers to follow through the videos, as all code is revealed and explained. Though, if you have any issues with the code, send a message at our gmail account or through discord (info is in our "about" desc.) and we will assist you! We do have our GitHub account where we upload the image files for the eLife project. Visit here: github.com/codeharvestguide/files However, the source code for all our videos will be shared in our GitHub account github.com/codeharvestguide soon at 1K subscribers, so support us by sharing the video and knowledge to your friends, colleagues/class mates and loved ones and stay tuned! Happy coding! 🙌

Hi, Concerning the source code, we love to encourage our viewers to follow through the videos, as all code is revealed and explained. Though, as you are experiencing issues with the code, send a message at our gmail account or through discord (info is in our "about" desc.) and we will assist you! However, the source code for all our videos will be shared in our GitHub account github.com/codeharvestguide soon at 1K subscribers, so support us by sharing the video and knowledge to your friends, colleagues/class mates and loved ones and stay tuned! Happy coding! 🙌

Hi, after reviewing your code, there were two issues found in JavaScript: Issue 1: "let productCards = slideshowContainer.querySelector(".product-card");" Which should be changed to: "let productCards = slideshowContainer.querySelectorAll(".product-card");" To include All elements with ".product-card" class. Issue 2: Though the slideshow works well, the product cards do not say in one row, because in the Slideshow forEach loop, specifically in the for loop, this line is missing: productCards[i].style.marginRight = '0px' Used to remove the spacing of a product card that is now set to hidden, so here is the updated for loop, in the Slideshow forEach loop: for (let i = 0; i < productCards.length; i++) { if (i <= lastElement && i >= lastElement - (productCardsPerRow - 1)) { productCards[i].classList.add("active"); if (i === lastElement) { productCards[i].style.marginRight = "0px"; } else { productCards[i].style.marginRight = `${marginSpacing}px`; } } else { productCards[i].classList.remove("active"); productCards[i].style.marginRight = '0px' } } Hope this helps! Happy coding 🙌

Hi, Have you defined the cart link active in CSS without space? Such as: .cart-link.active There can be other reasons why it may not work for you, so send me an email with your source code so I can help you out! Email: [email protected] Happy coding! 🙌

Hi! Welcome to the community and thanks for watching! I recently acquired a new mic so I will be uploading new, good quality-sounding videos soon. Thanks for your support! Happy coding 🙌

@@theJohnCode Hi, Concerning the source code, we love to encourage our viewers to follow through the videos, as all code is revealed and explained. Though, if you have any issues with the code, send a message at our gmail account or through discord (info is in our "about" desc.) and we will assist you! We do have our GitHub account where we upload the image files for the eLife project. Visit here: github.com/codeharvestguide/files However, the source code for all our videos will be shared in our GitHub account github.com/codeharvestguide soon at 1K subscribers, so support us by sharing the video and knowledge to your friends, colleagues/class mates and loved ones and stay tuned! Happy coding! 🙌

@@velixhehamahua3845 Hi! Part 9 of our eLife WebSeries, where we design a simple footer and create a UI navigation bar scrolling effect (which will cause the box-shadow to appear and disappear) will be uploaded by tonight! Thanks for staying tuned, happy coding! 🙌

@@clintonkegham Hi, thanks for watching the video! Concerning the source code, we love to encourage our viewers to follow through the videos, as all code is revealed and explained. Though, if you have any issues with the code, send a message at our gmail account or through discord (info is in our "about" desc.) and we will assist you! We do have our GitHub account where we upload the image files for the eLife project. Visit here: github.com/codeharvestguide/files However, the source code for all our videos will be shared in our GitHub account github.com/codeharvestguide soon at 1K subscribers, so support us by sharing the video and knowledge to your friends, colleagues/class mates and loved ones and stay tuned! Happy coding! 🙌

Hi, thank you for your kind comment! I do plan to share more varieties of websites beyond this WebSeries, so stay tuned for different themes coming up! As for posting more frequently, I'll definitely do my best to increase the pace and aim for 2 videos a week if possible! I appreciate your support, happy coding 🙌

Hi, thank you for watching the video, we appreciate it! We do not post source code file as we like to encourage everyone to follow through the video step-by-step, in order to understand line of code we add. However, I am happy to help you directly! Another person commented the same problem and the issue they had was the width and height of the .product-card - which was supposed to be set to 0px - but wasn't, and no .active class was added to the product card, which would contain its actual width and height (260px width and 379px height). I recommend watching the full video of *Part 5* of the eLife WebSeries, where we display multiple lines of product cards and resolve the issue by hiding all cards except those with the .active class. If it still doesn't work or function as it should, contact me through gmail and send your JavaScript code and CSS code through our gmail at [email protected] so I can help you find the cause of the issue! Happy coding! 🙌

@@codeharvestguide why me make working all but click slide prev and next not workind can you help me please

@@cm-053chandu9 Hi! This tutorial specifically demonstrates a product page for desktop screens, thus it is not responsive to other screens. Though, you can check out our new WebSeries called eLife which provides full, complete tutorials (by parts) of a more modern, simple yet elegant e-commerce website. In the WebSeries we will also create a tutorial in which the mobile and tablet design will differ from this desktop design, so stay tuned! Thanks for watching, happy coding!

Hi! This tutorial specifically demonstrates a product page for desktop screens, thus it is not responsive to other screens, though we will create a tutorial in which the mobile and tablet design will differ from this desktop design, so stay tuned! Thanks for watching, happy coding!

@@imalisonnguyenangel3938 Hi, The image folder for the ComFi about page has been uploaded, along with the other images used in the homepage and product page. You can find it now under 'ComFi Images/about page' here: github.com/codeharvestguide/files Thanks for watching, happy coding! 🙌

Hi, thank you for watching the video, we appreciate it! Unfortunately, we do not post source code file as we like to encourage everyone to follow through the video step-by-step, in order to understand line of code we add. However, I am happy to help you directly! Send your JavaScript code and CSS code through our gmail at [email protected] so I can find the cause of the issue. Happy coding! 🙌

Hi, I have the same problem.

@@KoogaWolfra Hi, The problem is most likely because the width and height of the .product-card was not set to 0px and no .active class was added to the product card, which would contain its actual width and height. In earlier videos (Part 5), we hid all product cards using CSS by setting the .product-card element to 0px for both width and height. The product cards that needed to be displayed had the .active class added, which includes the actual width and height properties of the product card (260px width and 379px height). We then used JavaScript to determine which range of product cards should have the .active class added, or in other words, which ones needed to be displayed (as demonstrated in Part 7, starting at timestamp 9:31). Kindly refer to the screenshot image below for further clarity. I recommend watching the full video of Part 5 of the eLife WebSeries, where we display multiple lines of product cards and resolve the issue by hiding all cards except those with the .active class. Hope this helps, happy coding! 🙌

​@@KoogaWolfra Hi. my problem solved with 2 items. 1. this class in CSS .product-card.active{ width: 260px; height: 379px; } 2. this if in js if(button.classList.contains("prev-button")){ if(lastElement<=(productCardsPerRow-1)){ lastElement= productCards.length-1; }else{ lastElement--; } } else if(button.classList.contains("next-button")){ if(lastElement==(productCards.length-1)){ lastElement= productCardsPerRow-1; }else{ lastElement++; } }

Hi, thanks for watching the video! I believe you are asking for the source code file for this project, however, we encourage you to follow through the videos, as all code is revealed and explained. We do have our GitHub account where we upload the image files for the eLife project. Visit here: github.com/codeharvestguide/files Though, the source code for all our videos will be shared in our GitHub account github.com/codeharvestguide soon at 1K subscribers, so support us by sharing the video and knowledge to your friends, colleagues/class mates and loved ones and stay tuned! Happy coding! 🙌

Hi, Unfortunately this eCommerce is not for sale, we only provide beginner tutorials to guide you on how to create and design eCommerce websites, so this is only for demonstration. Though, perhaps you can find the products from the images we displayed and used in this video for sale in the Sharaf DG website. Thanks for watching, and happy coding! 🙌

@@shuvo7919 Hi, thanks for watching the video! I believe you are asking for the source code file for this project, however, we encourage you to follow through the videos, as all code is revealed. We do have our GitHub account where we upload the image files for the eLife project. Visit here: github.com/codeharvestguide/files The source code for all our videos will be shared in our GitHub account github.com/codeharvestguide soon at 1K subscribers, so support us by sharing the video and knowledge to your friends, colleagues/class mates and loved ones and stay tuned! Happy coding! 🙌

Hi, This tutorial specifically demonstrates product page for desktop screens, thus it is not responsive to other screens, though we will create a tutorial in which the mobile and tablet design will differ from this desktop design, so stay tuned! Thanks for watching, happy coding! 🙌

@@codeharvestguide Thanks! can't wait to see that

Hi @vivekbhat9803 This tutorial demonstrates how to create an E-Commerce homepage specifically for desktop screens. However, as part of our web series, eLife, we will also provide a tutorial on how to make the homepage, and other pages of the eLife website, responsive for all other screen sizes. Thanks for watching, happy coding! 🙌

@@Nguyen-The-Hung Hi! Thanks for following with the eLife WebSeries. If what you're asking is the function of the sliders, where a user clicks on either prev or next button to change the product cards displayed (like a slideshow), we do not demonstrate this in the video, however it will be shown in part 7. Happy coding! 🙌

@@codeharvestguide Thank you! wait part 7 from you.

Oh apologies, it seems the video has not included the CSS explanation, so here is what changed in CSS: So for your product card class '.product-card', you'll need to set the width and height to 0, then create a new selection called '.product-card.active' and add the width and height properties of the product card which are: 'width: 260px; height: 379px'. This ensures only the product cards that have the active class added (from JavaScript) are displayed. I hope this answer satisfies you! Happy coding! 🙌

Hi, for a video to see how you can fetch the specific product page of a product you clicked, you can view the tutorial here: kzbin.info/www/bejne/o3-riZd_jsmHY6Msi=OKvaOH6dCURZyi7C However, the video (of this link) does not fully explain each line of code added, and is not part of this eLife WebSeries, but a full tutorial for this series on creating and fetching a single product page will be posted soon, so stay tuned! Happy coding! 🙌

@codeharvestguide could you please send the whole code all the 10 parts so it would be helpful to verify once again?

@@newshortschannel1 Hi, how may I help you? 🙌

@@codeharvestguide yes

@@Nguyen-The-Hung Hi, the video for part 6 has been made, so it will be posted very soon, stay tuned! 🙌

Hi, We are very sorry for this inconvenience, the screen recorder we used here kept breaking, though now we changed to a proper screen recorder that does not freeze. Check out our eLife WebSeries, which offers a similar video demonstrating how to create a product page: kzbin.info/aero/PL0lX0bJqJuTGGrjBqypE8mHHdCIFY49mo Happy coding! 🙌

Coming today 🙌

@@hugocangi6214 Hi, thanks for staying in tune with the series! Due to outside factors the video will not be out today, but tomorrow. Thank you for your patience 🙏 Happy coding! 🙌