Merge pull request #313 from damonsson/2.0

performance optimization

Author: damonsson

config/packages/sylius_twig_hooks.yaml

@@ -49,3 +49,24 @@ sylius_twig_hooks:
             homepage_metatags:
                 template: "shop_metatags.html.twig"
                 priority: 150
+
+        'sylius_shop.homepage.index':
+            banner:
+                template: '@SyliusShop/homepage/banner.html.twig'
+                priority: 300
+            latest_deals:
+                component: 'sylius_shop:product:list'
+                props:
+                    limit: 4
+                    template: '@SyliusShop/product/common/list.html.twig'
+                configuration:
+                    title: 'sylius.homepage.latest_deals'
+                    test_attribute: 'latest-deals'
+                priority: 200
+            latest_products:
+                component: 'sylius_shop:product:list'
+                props:
+                    limit: 8
+                    template: '@SyliusShop/homepage/latest_products.html.twig'
+                priority: 0
+

templates/bundles/SyliusShopBundle/homepage/latest_products.html.twig

@@ -0,0 +1,11 @@
+<div class="container mb-6">
+    <h2 class="mb-5">{{ hookable_metadata.configuration.title|default('sylius.ui.latest_products')|trans }}</h2>
+
+    <div {{ sylius_test_html_attribute(hookable_metadata.configuration.test_attribute|default('latest-products')) }}>
+        <div class="products-grid">
+            {% for product in latest_products %}
+                <div>{{ component('sylius_shop:product:card', { product: product, template: '@SyliusShop/homepage/product_card.html.twig' }) }}</div>
+            {% endfor %}
+        </div>
+    </div>
+</div>

templates/bundles/SyliusShopBundle/homepage/new_collection.html.twig

@@ -0,0 +1,16 @@
+<div class="container mb-6">
+    <div class="mb-5">
+        <h2>{{ 'sylius.homepage.new_collection'|trans }}</h2>
+    </div>
+
+    <div class="photo-grid">
+        {% for i in [1, 2, 3] %}
+            <div class="photo-grid-item-{{ i }}">
+                <img
+                    src="{{ asset('build/shop/images/homepage-new-collection-photo-' ~ i ~ '.webp', 'shop') }}"
+                    class="object-fit-cover w-100 h-100 rounded-3" loading="lazy"
+                    alt="{{ 'sylius.homepage.new_collection'|trans }}">
+            </div>
+        {% endfor %}
+    </div>
+</div>

templates/bundles/SyliusShopBundle/homepage/product_card.html.twig

@@ -0,0 +1,23 @@
+<div {{ sylius_test_html_attribute('product', '%s'|format(product.code)) }} >
+    <a class="link-reset" href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}" {{ sylius_test_html_attribute('product-content') }}>
+        <div class="mb-4">
+            <div class="overflow-auto bg-light rounded-3" style="aspect-ratio: 3/4; ">
+                {{ component('sylius_shop:main_image', {
+                    product: product,
+                    class: "w-100 h-100 object-fit-cover",
+                    loading: 'lazy',
+                    filter: 'sylius_shop_product_small_thumbnail'
+                }) }}
+            </div>
+        </div>
+        <div class="h6 text-break" {{ sylius_test_html_attribute('product-name', product.name) }}>
+            {{ product.name }}
+        </div>
+    </a>
+    <div>
+        {% if not product.enabledVariants.empty() %}
+            {{ component('sylius_shop:catalog_promotions', { variant: variant, appliedPromotions: applied_promotions, withDescription: false }) }}
+            {{ component('sylius_shop:product:card:price', { variant: variant, template: '@SyliusShop/product/common/price.html.twig' }) }}
+        {% endif %}
+    </div>
+</div>