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

---

• Miva Docs
• Reference Guide
• Miva 10 Page Builder Enhanced Product List Component

PageBuilder Enhanced Product List Component

The Enhanced Product List component brings another powerful tool to Miva’s PageBuilder abilities, allowing you to add a Product List to any PageBuilder page of your website.

The new component is designed to replace the current Category (CTGY), Product List (PLST) and Search Results (SRCH) pages. This makes editing those pages in PageBuilder easier, and allows you the ability to customize the pages within PageBuilder. It also allows you to add product lists to any page of your site, with the ability to control sorting, paging and other custom options.

Updated CTGY, PLST and SRCH Pages

For stores that are using the Shadows framework, if it is running version 10.10 or later, the CTGY, PLST and SRCH pages will be built using the Enhanced Product List component.

Navigating to User Interface>Content Management and opening the Category Display (CTGY) page, for example, and when the PageBuilder window opens, you will see the Product List component on the left side in the Component Pane, and the preview of that component on the Preview Pane.

Stores that are not on Shadows 10.10 will need to make manually assign the Sequence and Flex item to the page, and add the Sequence item template code. Finally, the old list item will need to be removed from the template code.

For example, on the PLST page, you would assign the Sequence and Flex item to the page. Then, you replace the existing content on the page with <mvt:item name="sequence" />, and remove the <mvt:item name="all_products" /> from the template.

For additional information on adding PageBuilder to non-PageBuilder pages, visit the Upgrading to PageBuilder document, particularly the Adding PageBuilder To Your Storefront Page and Adding PageBuilder To Other Pages sections.

Adding the Enhanced Product List Component to a Page

In the Miva admin, navigate to the PageBuilder interface, User Interface>Content Management and then select the page you want to add the component to.

Click the Add Component icon in the Component Pane, and select Product List from the component list.

Rename the Component Name as desired.

Properties: Section Title

The Section Title section is where you set the alignment for your heading, as well as the text that will be displayed in your heading.

Properties: Product List

The Product List section is where you establish what your product list will be created with and how it will be displayed.

Products: The Products subsection is where you establish what products will be displayed. The options are:

• Determined by Page Items: This choice displays products that are determined by the items displayed on the page.
• All Products: This choice displays all products.
• Assigned to Category: This choice displays a category of products, either that are “Determined by Page Items” or a “Specific Category” of your choice.
• Related Products: This choice displays related products, either “Determined by Page Items” or by choosing a “Specific Product.”

Product Columns: This subsection allows you to set how many columns will display on Mobile devices, Tablets or in a Desktop browser window.

Facets: The Facets subsection allows you to title and set the width of the filters column along the side of the page.

Facet Styles: This subsection is where you stylize the text in the filter column along the side of the page.

Sort By: Enabling this allows your customers to sort the product list. In the Default Sort dropdown you set the default sort you want your customers to see. There are a number of options.

Sort Options: The Sort Options subsection allows you to provide one-click sort options for your customers. There are five listed by default. Additional sort options can be added by clicking Add Sort Option.

Existing sort options can be deleted by clicking the X to the right of the option. The options can be reordered as well, by clicking and holding the six dots on the left side of the option, and dragging it to the desired location.

View Per Page: This subsection allows your customers to decide on how many items they wish to see per page. There are three listed by default, and customers can use them as one-click options, just like the Sort Options above.

You can add an option by clicking Add Per Page Option. And as in the Sort Options subsection, the Per Page Options can be reordered as well.

Pagination: This subsection helps you stylize additional aspects of the Product List. This establishes how the links to additional pages display at the bottom of the list, and the navigation for next/previous.

Details: This subsection has three checkboxes the displays or omits the information for: Total Products, Current Page and Search Term.

Properties: Product Card

The Product Card section is where you set how the products in your product list will display.

Image: The Image subsection can be enabled or disabled depending on your choice for providing images in the product list. Clicking the header expands the subsection. In the expanded area you will choose the Image Type, set the dimensions and decide how the image will fit into the Product Card.

Details: In the Details subsection is where you choose what detailed information is provided in the Product Card. There are a few details established by default. Those can be edited, reordered or deleted.

More details can be added by clicking the Add Detail link. After the additional detail section is created, click to expand it. Give the detail a name if desired, then select the Type of detail you want to provide. There are multiple options here.

Depending on the detail chosen, there may be additional configuration options that appear. For example, if you select Price, you are given two dropdowns which allow you to change the price that is shown. Or, for example, you could choose the display the Weight detail. The card will display the weight you have associated with the product. You also have the option, in this example, to add a Prefix or Suffix to the display. In this case, you could set the Prefix as “Weight” to indicate what the number is representing, and then add the Suffix of lbs to denote that the weight is expressed in pounds.

In addition, several of the options allow you to manipulate the text styling by clicking the Text Styles header and expanding it to make your choices.

Advanced: Spacing

This section is where you set the spacing of the Enhanced Product List Component from the page elements above and below it. It is set in pixels.

The Spacing section is also where you decide how the Miva admin will handle an Empty Results list.

Clicking the box next to Display Empty Results will display a message when there are no results available. The test displayed is entered in the Empty Results Message field.

The Submit Method tells the admin what to do when results are empty. You can choose either Replace Products or Reload Page.

The Params Prefix field is mainly used when there is a page using multiple product lists flex components. The Params Prefix field is used to give the additional product list(s) a custom parameter namespace such as BestSeller_Offset or Related_Per_Page.

The first instance of the product list component will have the default params of Offset, Per_Page, Sort_By, etc. So adding a custom prefix parameter for the default list as well as the second list, provides a more descriptive URL when a user selects a new page, chooses a sort order or filters the any of the lists.

For example without using custom parameters, the URL for two lists on one page could look like this: www.domain.com/product-list.html?Per_Page=24&ProductList1_Price=500-1000; while using custom parameters, the URL looks like this: www.domain.com/product-list.html?Related_Per_Page=24&BestSeller_Price=500-1000.