Implemented Grid layout for Latest Products Widget

[Nulumia]

Hi DBTech,

I noticed that for the Latest Products widget, there is only a layout option for Simple or Full, which is list based. I thought it'd be cool to have the grid layout available for the widget as well, so just showing off some of my customizations if you're interested.



First I used the standard Latest Products widget, and set it to Full. As there's no option in the widget for Simple, Full, or Grid, I edited the 'Full' portion of the dbtech_ecommerce_widget_new_products template. Instead of just loading the product list macro, I added a conditional using the same exact code found in the dbtech_ecommerce_overview which will now show either the grid or list, depending on whether that option is selected for the whole shop:

Found:

<xf:if is="$style == 'full'">
                <h3 class="block-header">
                    <a href="{$link}" rel="nofollow">{{ $title ?: phrase('dbtech_ecommerce_latest_products') }}</a>
                </h3>
                <div class="block-body">
                    <div class="structItemContainer">
                        <xf:foreach loop="$products" value="$product">
                            <xf:macro template="dbtech_ecommerce_product_list_macros" name="product"
                                arg-allowInlineMod="{{ false }}"
                                arg-product="{$product}" />
                        </xf:foreach>
                    </div>
                </div>
                <xf:if is="$hasMore">
                    <div class="block-footer">
                        <span class="block-footer-controls">
                            <xf:button href="{$link}" rel="nofollow">{{ phrase('view_more...') }}</xf:button>
                        </span>
                    </div>
                </xf:if>
            <xf:else />
                <h3 class="block-minorHeader">
                    <a href="{$link}" rel="nofollow">{{ $title ?: phrase('dbtech_ecommerce_latest_products') }}</a>
                </h3>
                <ul class="block-body">
                    <xf:foreach loop="$products" value="$product">
                        <li class="block-row">
                            <xf:macro template="dbtech_ecommerce_product_list_macros" name="product_simple"
                                arg-product="{$product}" />
                        </li>
                    </xf:foreach>
                </ul>
            </xf:if>

Replaced with:

<xf:if is="$style == 'full'">
                <h3 class="block-header">
                    <a href="{$link}" rel="nofollow">{{ $title ?: phrase('dbtech_ecommerce_latest_products') }}</a>
                </h3>
                <div class="block-body">
                   
                <xf:if is="property('dbtechEcommerceProductListStyle') == 'grid'">
                    <xf:css src="dbtech_ecommerce_product_grid.less" />

                    <div class="productList grid-{$limit}">
                        <xf:foreach loop="$products" value="$product">
                            <xf:macro template="dbtech_ecommerce_product_list_macros" name="product_grid"
                                      arg-filters="{$filters}"
                                      arg-baseLinkPath="dbtech-ecommerce"
                                      arg-product="{$product}"
                                      arg-showOwner="{{ property('dbtechEcommerceShowOwnerOverview') ? true : false }}"
                                      arg-allowInlineMod="{$canInlineMod}"
                            />
                        </xf:foreach>
                    </div>
                <xf:else />
                    <div class="structItemContainer">
                        <xf:foreach loop="$products" value="$product">
                            <xf:macro template="dbtech_ecommerce_product_list_macros" name="product"
                                arg-allowInlineMod="{{ false }}"
                                arg-product="{$product}" />
                        </xf:foreach>
                    </div>
                </xf:if>
                </div>
                <xf:if is="$hasMore">
                    <div class="block-footer">
                        <span class="block-footer-controls">
                            <xf:button href="{$link}" rel="nofollow">{{ phrase('view_more...') }}</xf:button>
                        </span>
                    </div>
                </xf:if>
            <xf:else />
                <h3 class="block-minorHeader">
                    <a href="{$link}" rel="nofollow">{{ $title ?: phrase('dbtech_ecommerce_latest_products') }}</a>
                </h3>
                <ul class="block-body">
                    <xf:foreach loop="$products" value="$product">
                        <li class="block-row">
                            <xf:macro template="dbtech_ecommerce_product_list_macros" name="product_simple"
                                arg-product="{$product}" />
                        </li>
                    </xf:foreach>
                </ul>
            </xf:if>

This works perfectly to show the grid format for the widget in my screenshot with no extra steps . Obviously having such an option in the widget parameters would probably be a better idea, but I made this work for now.

Also, something I find in other ecommerce software (Shopify etc) is setting items per row. So I tweaked this by adding a dynamic class to the product list element:
<div class="productList grid-{$limit}">
This way, I can set flex grid CSS rules depending on the number class, such as for .grid-5 a block would have flex: 1 0 20%.
(I am using custom flex CSS for the product grid on mine so these changes won't probably look as nice by default).

One last change I made, I noticed that $limit wasn't being called or available in templates from widget params.
I had to insert it in /addons/DBTech/eCommerce/Widget/NewProducts.php:

        $viewParams = [
            'title' => $this->getTitle(),
            'link' => $link,
            'products' => $products,
            'style' => $options['style'],
            'limit' => $options['limit'],
            'hasMore' => $total > $products->count()
        ];

Not that this is an adequate live solution as would require custom core files . Anyway thought I'd share how it looks if you should like my idea!

Edit: Some shops will let you pick max items, and items per row. In this case I felt it'd be simple just to have the block widths match the max item count. A refined method would probably use multiples, like 25% width for 4, 8, and 16 max items etc.

 

[DragonByte Technologies]

Hello @Nulumia,

Thank you for your suggestion for DragonByte eCommerce. Your request will be reviewed by a member of our team shortly.

Unless there are any problems preventing these features from being added to the product, this thread will not receive another reply until it is time to review logged feature requests for implementation.

We appreciate you taking the time to help us improve our products!


- DragonByte Tech Staff

 

[Fillip H.]

One last change I made, I noticed that $limit wasn't being called or available in templates from widget params.
I had to insert it in /addons/DBTech/eCommerce/Widget/NewProducts.php:

Just as a quick note for this, you can access widget options in the widget template via the $options array

That being said, it's entirely intended that the "Full" style should follow the style preference of grid vs list. Since some may prefer the list view, I've added these options to both the New and Top product widgets:



This will be implemented in Beta 3

 

[Nulumia]

That is awesome! This simple change alone allows so much more diversity to layouts, thanks for your consideration!

Just as a quick note for this, you can access widget options in the widget template via the $options array

Ah thanks for clarification, I was attempting to use $limit directly as I only found $style otherwise in a conditional.