It was a busy day today – I started the morning off meeting with my group for the e-commerce site we’re working on. I was to finish adding the products so they would show on the site for the users. I was able to add the products correctly using my addProducts.html page I built out and the ProductsController I built out last week…Well, one of my team members told me they built out the adminProducts page, which meant I had to use that to add the products since only admins are able to add products to the site. I finish this and showed the team member whom will have a relative use this site in the future, he approved of the products page but wanted me to add a feature to enlarge and show additional images of the products…I didn’t know how to do that so I spent my afternoon (upwards of 4 hours) trying to figure it out. It seems so simple right? I thought.
First, I tried to implementing using Fancybox Lightbox alternative – it was pretty cool but it required many more links that I desired – our page already had enough links to bootstrap and our various factories and controllers. It was working fine when I tested it underneath my original images that were output via the ng-repeat…but I couldn’t get it to work properly.
Before I left for the day, I managed to add the button to add a product to the cart, problem is we don’t have a cart created yet so we agreed to just add the items to the checkout partial.
Another solution I tried was to use Bootstrap modal – seems like a good idea right? It actually is but I am still having trouble displaying all the information for each picture. For example, I use the ng-repeat and ng-src for my image tag – Bootstrap doesn’t like that because a picture never
shows up. After coming home, I am still sitting here trying to figure out to implement this feature…I’ve found a few things to help get me started tomorrow – A w3schools tutorial but this is only to display one picture…So, I figured, why not just implement a carousal – I found Bootply code to implement this – I would of course I have tweak it to make it work for this project. I also found a stack overflow issue of someone who was having trouble using ng-repeat (like me) – The only option is to push the items into an array which I’ve seen twice already…I’m thinking this may be the only option.