Product list page

[79wjd]

I'm trying to design a product page for a website but I don't know how to go about generating the product list as there are over a hundred thousand items from hundreds of different manufacturers. Right now, the only way I can think to make a product page is to divide everything into categories and then link the user to the manufacturer's page, but I would really like to have something a bit more elegant....something like how bestbuy/amazon does it where all the individual products themselves are actually listed. 

 

Is there some way to go about doing this? How does Amazon/best buy do it -- do they get some sort of API from the various manufacturers to access the manufacturer's databases? Or do they generate the website based on their (amazon/bestbuy/etc...) databases (and in that case how do they generate their databases)?

 

Obviously this is a fairly difficult thing to do, and realistically I don't think it's a viable option, but I don't really know how else to list the products because I also really don't like the idea of just dividing the products into categories (cpu, gpu, mobo, etc...) and then linking to the manufacturers who produce each item. 

[Nineshadow]

Use an SQL database, store the products in some table, then do queries client-side ( something like SELECT ? FROM ? WHERE ? LIKE <product> )  and display the results of those queries in some manner.

 

Don't forget to protect against SQL injection.

[madknight3]

I could be wrong, but I assume someone, like the seller, enters the information for the website to store in its database. So you'd design a process for adding products to the site. You would have a set of required information that needs to be added for that product, and probably some optional stuff as well. You may or may not need to register and verify sellers if you don't want to allow anyone to add products to your site. You could also design a method for bulk uploads (spreadsheets, csv files, etc) where you just import that file instead of typing everything out manually. That way a seller could run a script on their inventory, output the required file in the required format, and add all their products at once.

 

Some companies may offer API's although I don't know of any so you'll have to look for that yourself. You can also do some web scraping to get products off of websites that don't offer an API although I don't know if there are any legal issues surrounding this depending on what you're doing with this information.

[79wjd]

@Nineshadow @madknight3 

 

Creating a SQL database is outside of what I can currently do, I can try to work on that for the future as a future upgrade though. For now I think I'll need to come up with something simpler to implement....back to the drawing board I guess

[Nineshadow]

1 minute ago, djdwosk97 said:

@Nineshadow @madknight3 

 

Creating a SQL database is outside of what I can currently do, I can try to work on that for the future as a future upgrade though. For now I think I'll need to come up with something simpler to implement....back to the drawing board I guess

An SQL database would be the simplest solution I can think of tbh.

[79wjd]

33 minutes ago, Nineshadow said:

An SQL database would be the simplest solution I can think of tbh.

I meant something simpler than listing all the stocked items because I don't realistically think I know enough to be able to implement that right now. So I could maybe have something like my original idea except split it in half horizontally -- where the top half could be the ten most popular products in that category and the bottom half could just be a list of manufacturers. 

 

[Nineshadow]

7 minutes ago, djdwosk97 said:

I meant something simpler than listing all the stocked items because I don't realistically think I know enough to be able to implement that right now. So I could maybe have something like my original idea except split it in half horizontally -- where the top half could be the ten most popular products and the bottom half could just be a list of manufacturers. 

 

That could work. But how do you search for a specific item? Other than going through lots of web pages.

Also, think about manually updating each page. Ah, that would be a pain.

[79wjd]

3 minutes ago, Nineshadow said:

That could work. But how do you search for a specific item? Other than going through lots of web pages.

My plan was to use Zoom Search and just include the various manufacturers in the indexing so when you search for something it would also be searching their sites too.

 

To be honest, it probably doesn't even matter if the site works well as 99.9% of the clientele won't even use it or know it's there. It's more that right now it looks awful and that doesn't seem right considering its 2016.

[Nineshadow]

6 minutes ago, djdwosk97 said:

My plan was to use Zoom Search and just include the various manufacturers in the indexing so when you search for something it would also be searching their sites too.

 

To be honest, it probably doesn't even matter if the site works well as 99.9% of the clientele won't even use it or know it's there. It's more that right now it looks awful and that doesn't seem right considering its 2016.

Is that what the actual site looks like? In the image above?

[79wjd]

12 minutes ago, Nineshadow said:

Is that what the actual site looks like? In the image above?

No, here's the actual site:  (a disaster on so many levels)

 

That was my previous idea for the product page layout.

[Nineshadow]

2 minutes ago, djdwosk97 said:

No, here's the actual site: http://wayneelectricalsupply.com/

 

That was my previous idea for the product page layout.

Oh, so you don't have a product list with like prices, stock, or smth like that. It's just links to the manufacturer's page.

[79wjd]

1 minute ago, Nineshadow said:

Oh, so you don't have a product list with like prices, stock, or smth like that. It's just links to the manufacturer's page.

yeah, and you cant really list prices since its order dependent anyway. 

[Nineshadow]

1 minute ago, djdwosk97 said:

yeah

Well, I guess that would work just fine then. Just needs some visual polish.

[79wjd]

2 minutes ago, Nineshadow said:

Well, I guess that would work just fine then. Just needs some visual polish.

The image I posted above is a rough mockup of my planned layout. The colors/content still need to be decided.

[79wjd]

@Nineshadow I'm using Jquery (which I don't really know) to hide and show the appropriate product blocks, but I was wondering what I would need to do so it would toggle the class "active" on the <li> element that was just clicked on. 

 

Would I add something like this to my current jquery script?: 

$(".productNavigationBar.ul li").removeClass("active");

$(this).addClass("active");

 

 

The current Jquery script and the navigation list: 

<script>
            // Wait for the document to load
            $(document).ready(function() {
                // When one of our nav links is clicked on,
                $('.productNavigationBar li a').click(function(e) {
                        div_to_activate = $(this).attr('href'); // Store its target
                        $('.productView:visible').hide(); // Hide any visible div with the class "productView"
                        $(div_to_activate).show(); // Show the target div
                });
            });
        </script>

 

<div class="productNavigationBar">
                <p>Products</p>
                <ul>
                    <li><a href="#lightbulbs">Light Bulbs</a></li>
                    <li><a href="#lightbulbstest">Light Bulbs TEST</a></li>
                    <li><a href="#fixtures">Fixtures</a></li>
                </ul>
            </div>

[Nineshadow]

29 minutes ago, djdwosk97 said:

@Nineshadow I'm using Jquery (which I don't really know) to hide and show the appropriate product blocks, but I was wondering what I would need to do so it would toggle the class "active" on the <li> element that was just clicked on. 

 

Would I add something like this to my current jquery script?: 

$(".productNavigationBar.ul li").removeClass("active");

$(this).addClass("active");

 

 

The current Jquery script and the navigation list: 

<script>
            // Wait for the document to load
            $(document).ready(function() {
                // When one of our nav links is clicked on,
                $('.productNavigationBar li a').click(function(e) {
                        div_to_activate = $(this).attr('href'); // Store its target
                        $('.productView:visible').hide(); // Hide any visible div with the class "productView"
                        $(div_to_activate).show(); // Show the target div
                });
            });
        </script>

 

<div class="productNavigationBar">
                <p>Products</p>
                <ul>
                    <li><a href="#lightbulbs">Light Bulbs</a></li>
                    <li><a href="#lightbulbstest">Light Bulbs TEST</a></li>
                    <li><a href="#fixtures">Fixtures</a></li>
                </ul>
            </div>

Like this?

https://jsfiddle.net/8auooazd/7/

[79wjd]

8 minutes ago, Nineshadow said:

Like this?

https://jsfiddle.net/8auooazd/7/

Yeah, why wouldn't it work addressing the class as ".productNavigationBar ul li"? Shouldn't that point to the same thing as navlink?