Product Card¶

Overview¶

The product card concept allows us to use a single product card template that can easily be re-used and updated on product listings and carousel sections across the whole site.

The product card template can be found in the Miva admin under User Interface > Theme Components > Content Sections > product_card_iterator. This template is loaded in on the html_profile, and all page should have the readythemes item assigned to the page to use this feature.

By default, the product card template has been added to the User Interface > Theme Components > Content Sections > product_listing and the Related Products section on the product page template. To use the template in a custom listing, use the following code inside your foreach loop. Make sure that the iterator matches what we're using for the product card.

<mvt:comment>
|
|   Load Product Card
|
</mvt:comment>
<mvt:do file="g.Module_Feature_TUI_DB" name="l.loaded" value="ManagedTemplate_Load_ID( g.readytheme_templates:product_card_iterator:templ_id, l.loaded_paged )" />
<mvt:do file="g.Store_Template_Path $ l.loaded_paged:filename" name="l.success" value="Template_Render( l.empty, l.settings )" />

Full Example

<mvt:do file="g.Module_Feature_TUI_DB" name="l.loaded" value="ManagedTemplate_Load_ID( g.readytheme_templates:product_card_iterator:templ_id, l.loaded_paged )" />
<mvt:foreach iterator="product" array="product_listing:products">
    <mvt:comment>
    |
    |   Load Product Card
    |
    </mvt:comment>
    <mvt:do file="g.Store_Template_Path $ l.loaded_paged:filename" name="l.success" value="Template_Render( l.empty, l.settings )" />
</mvt:foreach>

Modifiers¶

The following classes can be used to modify several elements of the product card template.

Brand¶

If you wish to use brand in the product cards, create a new custom field called brand, and make sure to assign it to the product listings you want (load_components_display. mvt, CTGY, SRCH, PLST, PROD > Related Products, etc.)

<Module code="customfields" feature="util">
    <ProductField_Add>
        <Code>brand</Code>
        <Name>Brand</Name>
        <FieldType>text</FieldType>
    </ProductField_Add>
</Module>

Container¶

You can apply the following optional classes on the main container g-product-card

Class	Description
g-product-card__hoverable	Adds a hover effect (drop-shadow) on the product card
g-product-card__shadow-on	Adds a shadow effect (drop-shadow) on the product card

You can apply the following optional classes on g-product-card__header

Class	Description
g-product-card__header-bottom-has-message	Adds an offset if the product card is using the message element

Flags¶

If you wish to use flag in the product cards, create a new custom field called flag, and make sure to assign it to the product listings you want (load_components_display.mvt, CTGY, SRCH, PLST, PROD > Related Products, etc.)

<Module code="customfields" feature="util">
    <ProductField_Add>
        <Code>flag</Code>
        <Name>Product Flag</Name>
        <FieldType>dropdown</FieldType>
    </ProductField_Add>

    <ProductFieldTypeOption_Add code="flag" value="Sale" />
    <ProductFieldTypeOption_Add code="flag" value="New" />
    <ProductFieldTypeOption_Add code="flag" value="Featured" />
</Module>

Out of the box, Genesis comes with the following flags:

Flag	Class	Description
Sale	g-flag-sale	Default: Color: red, Background: `$white`
New	g-flag-new	Default: Color: blue, Background: `$white`
Featured	g-flag-featured	Default: Color: blue, Background: `$white`

Messages¶

By default the messages element is set to display none. Adding any of the following classes will set the display to block.

Class	Description
g-card-message__error	Applies the error color to the background color of the product flag
g-card-message__info	Applies the info color to the background color of the product flag
g-card-message__neutral	Applies the neutral color to the background color of the product flag
g-card-message__success	Applies the success color to the background color of the product flag
g-card-message__warning	Applies the warning color to the background color of the product flag

Review Stars¶

The following classes can be used to change the placement of the rating container

Class	Description
rating-footer-bottom-right	Places the ratings container on the bottom right of the product card's footer
rating-footer-top-right	Places the ratings container on the top right of the product card's footer
rating-header-top-right	Places the ratings container on the top right of the product card's header

Known Issues & Workarounds¶

Depending on the rules of the parent container, the box shadow modifiers on the product card container may be cut-off. You will need to update the overflow of the parent container accordingly.