24/7 Support: 800.608.6482

Videos

Try our new AI assistant by clicking the chat icon in the lower right corner.

Developer Videos

Videos | Product List Layout

ver. 9.0 and later

Video Transcript

Today we’re going to talk about Miva’s product list items. A product list item is a very powerful part of Miva Merchant. It controls the layout of any product list. An example of the product list would be a page that has multiple products listed on it together. For example, the Category page, the Search page, the Related Products List Layout and there’s a page in Miva called All Products, or PLST, which lists all products in the store. Each one of those pages has its own item which controls the layout of that listing. Let’s take a look at CTGY. This is the category page. Now if you look at the items that are assigned to the category page, one of them is going to be the Category List Layout, which we see here. The name of the item is called category_listing and the module reference is CSSUI Product List. All the product list items reference this same module. The big difference is that the array that gets populated with each of the product lists is different. On the category page it will be all products assigned to a particular category and related products would be all related products to a particular product. So let’s jump back to the page template and take a look at how this category list item is used. In the main page template here if I scroll down past the pagination, past the sorting, the item tag is here, item name category listing. This is what calls in and controls the layout of the entire category list. Now if I scroll down a little bit here, is a template that controls this category list layout. So you see the first thing contained here is a foreach loop. It’s an array that contains all the products assigned to this particular category. Within that array I can control the look and feel and customize the entire layout of the category listing.

Now the category listing has a few settings. I can choose to include or not include the category code within the url. I can assign custom fields, which we’ll talk a lot more in depth within the custom fields video. I can assign what image types get used in this list layout. I can control the sorting, whether it’s on or off, the default setting method, pagination, page numbers, and items per page. So that product list layout has a ton of functionality. Now this one’s for the category page. But if I go and I search for a search results page, it too has a product list layout called search results layout and you’ll see it’s almost identical to the category list layout, but it’s for the search results and the array that’s used to populate the foreach loop is different. It’s returning the search results versus the product assigned to a particular category. However, all this other stuff down here is exactly the same. Because it’s all part of that module. It’s all part of that cssui product list module.

An important thing to note with a product list item is that anywhere you see a listing of products it will always be controlled by this item. So there will always be a section on the page, a template that will control the layout and then some settings about that particular layout. The product list item is a core part of Miva Merchant and gives you a lot of flexibility as a developer to control the look and feel of the layout of any product list page.






Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.