Product Catalog page

[SaranacLake]

Hi.  This question is building off of things you all helped me with earlier in my other two threads.  (I go no sleep last night, so sorry if my thinking is a bit off!)

Now that I know how to create a gallery page - as far as HTML goes - to display a listing of free add-on items you get when you subscribe, I need to extend those concepts to my next project.

I need to create a product catalog page for my e-commerce site.  (Not sure if there is a better name?)

This is the page you would see if you went to an e-commerce site and started shopping.

At the top of the page would be my company mast.  And beneath that, on the left side of the screen would be a menu listing different areas of my online store.  And to the right, would be the area where you see the actual products.  (And I would be using the same techniques to display items on the right hand side as I did in my earlier gallery.

So here is where I could use some hep with the logic of this page...

Let's say my website is located at www.mystore.com

And in the left menu bar, I have these categories:  Music, TV Shows, Movies, Gear

And in the right pane I want to display items for the chosen section.

So if you chose "Music", I am thinking the hyperlink behind it might read; www.mystore.com/music/   with a mod_rewrite to www.mystore.com?category=music

And then I would have PHP code that would fire when the page is reloaded to www.mystore.com?category=music and it would query MySL and display all music related products in the right pane.

(Note: It is understood I am only using HTML and PHP with no Javascript.)

How does the above approach sound?

 

[Barand]

Other than filtering by category, how is this different from your last topic?

[SaranacLake]

3 hours ago, Barand said:

Other than filtering by category, how is this different from your last topic?

As I said, it builds off the earlier example.

Before I was creating a gallery of thumbnails for a set number of products that I am giving away free with a subscription.

Here I am trying to build the actual product catalog for my e-commerce site, i.e. *all* products.

So I'm not entirely certain how an e-commerce product catalog should work.

 

[Barand]

16 minutes ago, SaranacLake said:

Before I was creating a gallery of thumbnails for a set number of products that I am giving away free with a subscription.

Isn't that just another category (I.E. Free)?

[SaranacLake]

8 minutes ago, Barand said:

Isn't that just another category (I.E. Free)?

Well, with my free gallery I am just hardcoding the query, so not really.

Now I need to set up a normal product catalog where you can choose between different categories or I suppose even just see the entire product selection.

Something like this...  https://www.amazon.com/s?i=popular&k=&ref=nb_sb_noss&url=search-alias%3Dpopular

[Zane]

Are you talking about filters?  Drilling down the list of products depending on things like Color, Brand, whatever..

[SaranacLake]

11 minutes ago, Zane said:

Are you talking about filters?  Drilling down the list of products depending on things like Color, Brand, whatever..

Never having rolled my e-commerce site before, and having been away from PHP for several years, sometimes I'm not sure what I'm talking about?!  😐

Right now, I am trying to lay out (and ultimately code) a web page that looks like the link I pasted above - well not that fancy!

To your question...

Because this is a startup business and thus small, I just need a way to be able to sell a handful of items in a handful of categories.  Like maybe 4-5 categories each containing a dozen or so products.

Down the road, my website will need to grow and provide shopper a more sophisticated way to search for items, but for now I just need something simple like this...

Category1:

- Product1

- Product2

:

-Product12

 

Category2:

more products

 

Category3:

more products

 

Category4:

and so on...

 

So I was thinking if I added a left column to my earlier gallery, and added say 4-5 hyperlinks wit category names, and when you click on a category link, it would reload the page and the url would change like this...

originally:  www.mystore.com

user clicks on "Music" category in left margin:  www.mystore.com/music/

then the user decides to check out movies and clicks on "Movies" and the page reloads with the updated url:  www.mystore.com/movies/

How does that part sound?

 

Then assuming that is okay, I guess in the right pane, I would have my PHP code query products based on what in in the url, so in the last example above it would go to my database and retrieve products that have a category of "Movie".

 

How does that sound?

 

And to your question, for now, I do *NOT* need any fancy filtering beyond category, so no: Music + Vinyl Records + Classic Rock + 1970s + Live Albums

 

 

[Zane]

2 hours ago, SaranacLake said:

Right now, I am trying to lay out (and ultimately code) a web page that looks like the link I pasted above

Sounds like you need to layout your design first and come back with code that you've tried already.  You did mention that you have a history with PHP, so gives us a PHP problem to solve.  

2 hours ago, SaranacLake said:

How does that sound?

I'm not sure what you're asking.  Are you asking if your thoughts sound good?  Or, are you asking us what kind of effort it sounds like it would take to do such a task?  Or, are you just asking how to do it all?  So far, all I understand is that you want to show a list of products and filter it by category.  You're also not using JavaScript, so you want these links to refresh the page when clicked and load a page with a pretty url like mysite.com/movies using mod_rewrite.  It all sounds ... like the fundamentals of an ecommerce website really.  List of products, add to cart, checkout, purchase, etc...  Yet, you're only focused on the product listing part at this point and are simply asking how a list of products sounds.

[SaranacLake]

2 minutes ago, Zane said:

Sounds like you need to layout your design first and come back with code that you've tried already.  You did mention that you have a history with PHP, so gives us a PHP problem to solve.  

I'm not sure what you're asking.  Are you asking if your thoughts sound good?  Or, are you asking us what kind of effort it sounds like it would take to do such a task?

I have been asking if the way I am going about this - from a use-case/process-flow standpoint makes sense.

Never have I asked about the effort involved.

 

2 minutes ago, Zane said:

Or, are you just asking how to do it all?

Never have i asked how to do it all.

I simply asked if the way I am going about this makes sense.  (Maybe there is a different way you would load up different products based on some discriminating factor like "Category"?

 

2 minutes ago, Zane said:

So far, all I understand is that you want to show a list of products and filter it by category.

When you go to any e-commerce site and start shopping, what do you call that area of the website?  I have been using the term "product catalog".  Agree?

I know how to query the database for every product i have and display them all on a single page.

What I have been asking about is how to make it so a user can click on different "categories" in a side menu and see the related products in that category/group/whatever.

I suppose you could call that "filtering".

 

2 minutes ago, Zane said:

You're also not using JavaScript, so you want these links to refresh the page when clicked and load a page with a pretty url like mysite.com/movies using mod_rewrite.

Right.  So I'm trying to put pieces of knowledge together, and seeing if I am doing this in a logical way.

So am I?  🙂

 

Step 1: Use lands on www.mystore.com

Step 2. User navigates to the e-commerce store

Step 3: User clicks on a "category" link in the left margin (e.g. <a href="www.mystore.com/music/">Music</a>)

Step 4: Apache mod_rewrite translates that request to: www.mystore.com?category=music and reloads the web page - still showing the pretty: www.mystore.com/music/

Step 5: My script grabs the (syntax?) _GET['category'] = music or whatever

Step 6: My script queries the database for all records where category = "music"

Step 7: My script displays those products in the right pane

Step 8: The user navigates that result set and hopefully clicks on some music to buy

Step 9: A product details page loads with more details for the chosen item.

 

Does that sound like a logical approach???

 

2 minutes ago, Zane said:

It all sounds ... like the fundamentals of an ecommerce website really.  List of products, add to cart, checkout, purchase, etc...  Yet, you're only focused on the product listing part at this point and are simply asking how a list of products sounds.

Like ten times so far...  😉

 

[Zane]

17 hours ago, SaranacLake said:

what do you call that area of the website?

There are a handful of those kinds of pages.

Category Listing Page (CLP)

Typically, this is more or less what you'd call a homepage for a particular category where you explain what it is, provide pictures of different products in that category, etc...  Typically, the CLP might have a few featured products, but doesn't show them all.  Then again, it's up to you.  A lot of times you'll find videos on this page, or some kind of introduction to the category.  

Example:  https://www.burpee.com/organics/

Product Listing Page (PLP)

This is a page listing your products.  It's named as a Listing Page because the products are displayed in a list.

Example: https://www.burpee.com/herbs/container-herbs/#sz=24&start=0&type=list

Product Grid Page (PGP)

Whereas, on a product grid page, they are displayed in what you'd described as a matrix.  For instance, 5 columns of products, each row containing 5 product squares.

Example: https://www.burpee.com/herbs/container-herbs/#sz=24&start=0&type=grid

 

From then on out, you just have your Product Detail Page (PDP) for products that were clicked on the PLP/PGP/CLP

[SaranacLake]

28 minutes ago, Zane said:

 

Not gonna answer my questions, huh?

 

[Zane]

17 minutes ago, SaranacLake said:

Not gonna answer my questions, huh?

What?  A bit impatient, aren't ya.

18 hours ago, SaranacLake said:

What I have been asking about is how to make it so a user can click on different "categories" in a side menu and see the related products in that category/group/whatever.

First, you make a PHP script that grabs all products from a database where the category equals whatever is in the GET parameter in the URL

http://mysite.com/products?cat=movies

Then, you loop through the results and display them however you want.

It's also possible that a product is part of multiple categories.  In that case, you'd have a table just for categories, and then another table linking the columns to products, and then the products table.

There's really no cut-and-dry answer here.  You simply grab the category id or name or whatever identifier you want to use and grab the products from your database based on that category id.

[SaranacLake]

@Zane,

So it sounds like you think the use-case I described above is okay...

[SaranacLake]

30 minutes ago, Zane said:

There's really no cut-and-dry answer here.  You simply grab the category id or name or whatever identifier you want to use and grab the products from your database based on that category id.

What I was uncomfortable with was how I went from loading up the product catalog page, then having the user click on different links, changing the URL, but basically staying on the same page, and then loading different items based on what was selected.

In explaining (and re-explaining) to all of you what I was doing I think I answered my own questions.

[Zane]

1 hour ago, SaranacLake said:

So it sounds like you think the use-case I described above is okay.

Yes! Especially since you're not wanting to use JavaScript, it's as simple as putting links to the same php file but with a query parameter for the category.  If you'd use JavaScript, you could do some AJAX magic and just change a portion of the page to reflect the category clicked.  That's a bit more involved, though.

[SaranacLake]

3 minutes ago, Zane said:

Yes! Especially since you're not wanting to use JavaScript, it's as simple as putting links to the same php file but with a query parameter for the category.  If you'd use JavaScript, you could do some AJAX magic and just change a portion of the page to reflect the category clicked.  That's a bit more involved, though.

Okay, glad my thinking was correct!

Thanks for the feedback!