Skip to content

Product List Items#

Product list items are foundational to Miva Merchant’s ability to display product information dynamically across various contexts. From category pages and search results to related products and the “All Products” page (PLST), product list items provide the tools to manage the layout, presentation, and functionality of product listings.

With the introduction of the Page Builder feature, Miva now offers a modern approach to displaying product lists through the Product List Flex Component, providing greater flexibility and enhanced customization options.

Traditional Product List Items#

What Are Product List Items?#

Product list items are modules that manage how product data is retrieved and displayed on Miva Merchant pages. Each product list item references the CSSUI Product List module, which provides the logic for rendering product data arrays in templates.

Key Characteristics#

Product list items are versatile components designed to manage product data presentation across various contexts in Miva Merchant, including category pages, search results, related product sections, and the “All Products” page (PLST).

Each product list item references the CSSUI Product List module, which processes product data and populates arrays for dynamic rendering. This integration allows developers to iterate through product arrays using loops to customize how product details, such as names, prices, and images, are displayed.

Additionally, product list items offer extensive customization options, such as defining URL structures with category codes, configuring sorting and pagination, assigning custom fields, and specifying image types and dimensions.

Example: Rendering Product Listings#

<mvt:item name="category_listing" />
<mvt:foreach iterator="product" array="category_listing:products">
    <p>Product Name: &mvt:product:name;</p>
    <p>Price: &mvt:product:price;</p>
</mvt:foreach>

In this example: - The category_listing item retrieves product data. - A <mvt:foreach> loop iterates through the array to display product names and prices.

Modern Approach#

Product List Flex Component#

With the release of Miva 10, the Page Builder feature introduced the Product List Flex Component, a modern and intuitive way to manage and display product lists. This component allows developers and administrators to create and customize product listings with ease, without delving into template code.

  1. Drag-and-Drop Interface:

    • Simplifies the creation and customization of product lists directly within the Page Builder.

  2. Enhanced Flexibility:

    • Supports advanced layouts and configurations that previously required significant coding.

  3. Built-In Pagination and Sorting:

    • Easily configure pagination, sorting, and other display settings.

  4. Custom Styling:

    • Apply unique styles and branding to product lists.

Benefits Over Traditional Methods:#

  • Faster setup and customization.
  • Reduced reliance on template editing.
  • More accessible for non-developers.

To explore the full capabilities of the Product List Flex Component, visit the Page Builder Enhanced Product List Component Documentation.

Best Practices#

  1. Use the Product List Flex Component:

    • For new pages or layouts, leverage the modern approach offered by the Page Builder feature.

  2. Optimize Data Display:

    • Use sorting and pagination to improve user experience and reduce page load times.

  3. Leverage Custom Fields:

    • Enhance product listings by displaying additional, relevant information tailored to your audience.

  4. Test Customizations in Branches:

    • Utilize Miva’s branching feature to test changes without affecting your live site.

Summary#

Product list items remain a cornerstone of Miva Merchant’s functionality, providing the flexibility to manage and display product information dynamically. With the addition of the Product List Flex Component, developers and administrators can now take advantage of a modern, user-friendly approach to creating product lists.

Key Takeaways

  • Traditional product list items use the CSSUI Product List module and require template editing.
  • The Product List Flex Component in Miva 10 offers a streamlined, code-free alternative.
  • Consistent customization options ensure a uniform experience across all product listing pages.

For detailed instructions and examples, explore the Page Builder Enhanced Product List Component Documentation.