Merge pull request #315 from damonsson/2.0

performance optimizations, split templates, lazyload some images
Sylius · Nov 29, 2024 · deac68d · deac68d
2 parents 6be3fc2 + 90d3be6
commit deac68d
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 4 deletions.
diff --git a/config/packages/sylius_twig_hooks.yaml b/config/packages/sylius_twig_hooks.yaml
@@ -58,7 +58,7 @@ sylius_twig_hooks:
                 component: 'sylius_shop:product:list'
                 props:
                     limit: 4
-                    template: '@SyliusShop/product/common/list.html.twig'
+                    template: '@SyliusShop/homepage/list_deals.html.twig'
                 configuration:
                     title: 'sylius.homepage.latest_deals'
                     test_attribute: 'latest-deals'
@@ -67,6 +67,5 @@ sylius_twig_hooks:
                 component: 'sylius_shop:product:list'
                 props:
                     limit: 8
-                    template: '@SyliusShop/homepage/latest_products.html.twig'
+                    template: '@SyliusShop/homepage/list_products.html.twig'
                 priority: 0
-
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/templates/bundles/SyliusShopBundle/homepage/banner.html.twig b/templates/bundles/SyliusShopBundle/homepage/banner.html.twig
@@ -0,0 +1,8 @@
+<div class="mb-6">
+    <div class="overflow-hidden">
+        <div class="d-flex justify-content-center align-items-center position-relative">
+            <img src="{{ asset('build/shop/images/homepage-banner.webp', 'shop') }}" width="1920" height="793" class="img-fluid" alt="Home">
+            <img src="{{ asset('build/shop/images/homepage-banner-logo.webp', 'shop') }}" class="position-absolute" style="max-width: 40vw" alt="New collection">
+        </div>
+    </div>
+</div>
diff --git a/templates/bundles/SyliusShopBundle/homepage/card_deals.html.twig b/templates/bundles/SyliusShopBundle/homepage/card_deals.html.twig
@@ -0,0 +1,31 @@
+<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; ">
+                {% if key == 1 %}
+                    {{ component('sylius_shop:main_image', {
+                        product: product,
+                        class: "w-100 h-100 object-fit-cover",
+                        filter: 'sylius_shop_product_small_thumbnail'
+                    }) }}
+                {% else %}
+                    {{ component('sylius_shop:main_image', {
+                        product: product,
+                        class: "w-100 h-100 object-fit-cover",
+                        loading: 'lazy',
+                        filter: 'sylius_shop_product_small_thumbnail'
+                    }) }}
+                {% endif %}
+            </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>
diff --git a/...hopBundle/homepage/product_card.html.twig → ...opBundle/homepage/card_products.html.twig b/...hopBundle/homepage/product_card.html.twig → ...opBundle/homepage/card_products.html.twig
diff --git a/templates/bundles/SyliusShopBundle/homepage/list_deals.html.twig b/templates/bundles/SyliusShopBundle/homepage/list_deals.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 key,product in latest_products %}
+                <div>{{ component('sylius_shop:product:card', { key: loop.index, product: product, template: '@SyliusShop/homepage/card_deals.html.twig' }) }}</div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
diff --git a/...Bundle/homepage/latest_products.html.twig → ...opBundle/homepage/list_products.html.twig b/...Bundle/homepage/latest_products.html.twig → ...opBundle/homepage/list_products.html.twig
@@ -4,7 +4,7 @@
     <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>
+                <div>{{ component('sylius_shop:product:card', { key: loop.index, product: product, template: '@SyliusShop/homepage/card_products.html.twig' }) }}</div>
             {% endfor %}
         </div>
     </div>