Product Row Basics

Product Rows are pre-built modules that can be included in the product results table listing via:
<jsp:include page="/foundations/modules/product-listing/part-type-row-results-page-xxx.jsp"/>.

Product Rows consist of the following major sections:

  1. Product Listing section with the .part-type-wrap class

    1. Product Image section with the .part-type-img class

    2. Product Details section with the .part-type-text class

  2. Availability section with the .availability-wrap class

    1. Availability Icon with the .qoh-xxx class (xxx represents availability class)

    2. Availability Links with the .availability-links class

  3. Quantity section

  4. List Price section

  5. Cost Price section

...
<tr>
    
    <!--  Product Listing Section  -->
    <td>
        <div class="part-type-wrap">
            <div class="part-type-img">
                <img src="/foundations/img/drl-gold-alternator.jpg" >
            </div>
            <div class="part-type-text">
                <p class="part-name"><a href="#">Product Name</a></p>
                <p><strong>Part Number:</strong> XXXXXXX-XX-X</p>
                <p><strong>Warranty:</strong> <a href="#">Limited Lifetime Warranty</a></p>
                <p class="part-type-notes"><strong>Notes:</strong> Product notes and useful...</p>
                
                <a type="button" class="tiny button" href="#"><i class="azp azp_tags"></i> Shop Deal</a>
            </div>
        </div>
    </td><!--  End Product Listing Section  -->
    
    <!--  Availability Section  -->
    <td>
        <div class="availability-wrap">
            <i class="azp azp_availability qoh-available"></i>
            <div class="availability-links">
                <p><strong>4 in Store</strong></p>
                <p><a href="#">12 Total Available</a></p>
            </div>
        </div>
    </td><!--  End Availability Section  -->
    
    <!--  Quantity Section  -->
    <td class="text-center">
        <div class="medium-8 medium-offset-2 columns end">
            <input type="number" value="3">
        </div>
    </td><!--  End Quantity Section  -->
    
    <!--  List Price Section  -->
    <td class="text-center list-price">
        <p>$1,169.94</p>
    </td><!--  End List Price Section  -->
    
    <!--  Cost Price Section  -->
    <td class="text-center cost-price showHide-cost--target">
        <p>$584.97</p>
    </td><!--  End Cost Price Section  -->
</tr>
...

Product

Availability

Qty

List

Cost

Product Name

Part Number: XXXXXXX-XX-X

Warranty: Limited Lifetime Warranty

Notes: Product notes and useful information goes here.

Shop Deal

4 in Store

12 Total Available

$1,169.94

$584.97

Availability Classes (QOH)

Availability Status: Icon: Icon & QOH Class:
Available .azp_availability
.qoh-available, .qoh-in-stock
In Network .azp_availability
.qoh-network, .qoh-partial, .qoh-low-stock
In Hub .azp_availability
.qoh-network, .qoh-partial, .qoh-low-stock
In Warehouse .azp_availability-dashed
.qoh-extended, .qoh-extended-stock
Call for Delivery Estimate .azp_availability
.qoh-estimate, .qoh-unavailable