Niara theme - short description

[colorful-ant]

I have adapted the Niara Theme with the product lists. The short description is / was only visible in the list view. (image 1 & 2)

 

After the change, the short description is also visible in the grid view. (image 3 & 4)

niara / product-list-item.tpl

old

            {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if}
            {hook h="displayProductPriceBlock" product=$product type="weight"}

            <p class="product-desc hide-if-product-grid" itemprop="description">
                {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
            </p>
        </div>

delete this

            <p class="product-desc hide-if-product-grid" itemprop="description">
                {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
            </p>

 

find 

                            {hook h="displayProductPriceBlock" product=$product type="price"}
                            {hook h="displayProductPriceBlock" product=$product type="unit_price"}
                            {hook h="displayProductPriceBlock" product=$product type='after_price'}
                        {/if}
                    </div>

add 

            <p class="product-desc" itemprop="description">
                {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
            </p>

it looks now old

            {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if}
            {hook h="displayProductPriceBlock" product=$product type="weight"}
        </div>

        <div class="product-actions-container">

it lokks now new

                            {hook h="displayProductPriceBlock" product=$product type="price"}
                            {hook h="displayProductPriceBlock" product=$product type="unit_price"}
                            {hook h="displayProductPriceBlock" product=$product type='after_price'}
                        {/if}
                    </div>
            <p class="product-desc" itemprop="description">
                {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
            </p>
                {/if}

 

and you can change the truncate from 360 to 180 or 240 ..... - your text limit

Edited August 22, 2019 by colorful-ant

[piet]

Thanks, looks great. I will use this. Maybe @tommat adds this option in the Niara theme 🙂

[Enev]

How can you display the description right after the title and not after the delivery conditions? I tried moving it up into the code but nothing happens.

[Enev]

Let me answer to my own question:

            <p class="product-desc hide-if-product-grid" itemprop="description">
                {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
            </p>

"product-desc hide-if-product-grid" should be changed to some other type which is displayed, such as "h4", "h5", etc.