Short Description

This extension is used on the product page and is added by default. The extension truncates the short description product custom field and appends a 'Read More' link that will scroll down to the main product description tab.

Example Usage and MVT/HTML Structure

The following MVT/HTML structure is expected for the short description functionality to work with the default options. It can of course be extended to suit your needs. It can be found near the top of the prod-product_display.mvt template.

<mvt:if expr="l.settings:product:customfield_values:customfields:short_description">
    <mvt:assign name="l.settings:product:short_desc:descrip"        value="l.settings:product:customfield_values:customfields:short_description" />
    <mvt:assign name="l.settings:product:short_desc:stripped"       value="miva_html_strip( l.settings:product:short_desc:descrip, '' )" />
    <mvt:assign name="l.settings:product:short_desc:max_word_count" value="20" />

    <mvt:capture variable="l.settings:product:short_desc:template">
        <div class="g-short-desc" data-max-word-count="&mvte:product:short_desc:max_word_count;">
            <p class="g-short-desc__content">
                <span class="g-short-desc__text">&mvte:product:short_desc:stripped;</span>
                <a class="g-short-desc__link u-hidden" href="&mvte:product:link;#tab-descrip" rel="nofollow">Read More</a>
            </p>
        </div>
    </mvt:capture>

    <mvt:assign name="l.settings:product:original_descrip"  value="l.settings:product:descrip" />
    <mvt:assign name="l.settings:product:descrip"           value="l.settings:product:short_desc:descrip $ l.settings:product:descrip" />
</mvt:if>

Configuration Options

The following table defines the available configuration options:

Name	Type	Description	Default Value
linkElement	Element	Element containing short description "Read More" link.	.g-short-desc__link
maxWordCount	Integer	Max word count for short description.	20
scrollIntoView	Object	Scroll into view behavior - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView.	{behavior: 'smooth'}
scrollToElement	Element | Boolean	Element to target for scroll to functionality. Pass in a boolean value of false to disable the scroll to functionality.	'.g-product-description'
shortDescElement	Element	Root container element to target for short description functionality.	.g-short-desc
textElement	Element	Element containing short description text.	.g-short-desc__text