I'm looking for someone to format my catalog page. You can see an example of what it currently looks like here: [login to view URL] I've included a screenshot below of what it currently looks like (with a few markups) called Current [login to view URL] and an image of what I'd like it to look like called Proposed-Changes.jpg. Below are several bullets with the functionality I need as well as all the changes I'm looking for. I've tried to be as thorough as possible. I'm looking to have this done as soon as possible. I also request a list of all the files that were altered at the end of the project for backup purposes.
- Product images should be 200px wide by 180px tall.
-"Add to Cart" button should be 94px wide by 24 pix tall and have 3px rounded corners. It should be made of white text and the boxx should be #f36c30.
- To the left of the "Add to Cart" button, I would like a heart that, when clicked, will add the item to the to their Wishlist if they're logged in. If they're not logged in, it should re-direct them to the Login/Account Creation page. I would like the heart to be gray (I will supply all artwork), and when an item is added to their Wishlist the heart will turn red. Whenever they are logged in, the products that are in their Wishlist should be red so that they can see at a glance which products are in their Wishlist. The red heart should also appear in the header between the shopping cart and the search bar if the logged in user has items in their WIshlist. If they don't have items in their Wishlist, or they are not logged in, no heart should appear in the header and the Search bar should be moved back over by the shopping cart. The behavior of the heart in the header should be persistent throughout the site.
-There should be "Previous" and "Next" buttons at the bottom of the screen to navigate through multiple pages. The "Previous" button should be at the bottom of the page, aligned to the left, and the "Next" button should be aligned to the right. The buttons should have white text on a #878787 box that is the same size as the "Add to Cart" buttons (94px wide by 24px tall and be rounded by 3 px).
-An 1px orange bar will separate each row and stretch the width of the column.
-The "Add to Cart", "Previous" and "Next" buttons should all be made via CSS.
-Below the art will be two line of text. The top line will be black text and will be the name of the product. The line below that will be #f36c30 and be the "Artist Name". There is already a field called Artist in the products and using the call getArtist references it, so that's already setup. It just needs to be formatted. Clicking on the product image or the name product name, should take you to the detailed product description page. The Artist Name should not be clickable at this point. That will be dealt with on another project. The price should not be clickable either.
- The "Add to Cart" button should be right aligned with the edge of the product image, the price should be left aligned with the product image and the Wishlist heart should be centered between the two. If, for some reason, there is no Artist specified, thus no text on that line, the 3 elements (price, heart, and Add to Cart button) should move up to take up the space.
-On the same line as the breadcrumb, but aligned to the right, I would like to place the sort options. Currently it's a drop down box, but I'd like to convert it to small text links, as shown in the image.
-I would like to remove the current elements that show the number of items per page and the drop down that allows you to choose how many products show per page.
EDIT: I just removed my "Artist" attribute and re-added it. It used to be a plain text field in the product creation page, but I changed it to a dropdown box so that I wouldn't have to type in the name of each artist each time. Since I did that, the artist line is just showing up as a number for some reason. I'll need this fixed, but I'm pretty sure it's not a big deal.