nobswebdev/nullcart
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slave/improve sf images loading #1

Merged
nobswebdev merged 3 commits from slave/improve-sf-images-loading into master 2026-08-28 16:57:14 +00:00
Conversation 0 Commits 3 Files Changed 11
+87 -17
9 changed files with 87 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f92ecb5514 - Show all commits
backend/src/modules/storefrontCore/public/css/storefront.css
+7 -1
View File
@@ -172,7 +172,6 @@ body.sf-body {
img {
max-width: 100%;
height: auto;
}
a {
@@ -866,10 +865,14 @@ a:hover {
.sf-product-card__media-link {
display: block;
aspect-ratio: 1;
background: var(--sf-surface-muted);
border-radius: var(--sf-radius-sm);
}
.sf-product-card__image {
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--sf-radius-sm);
@@ -961,6 +964,7 @@ a:hover {
width: 100%;
height: auto;
aspect-ratio: 1;
background: var(--sf-surface-muted);
}
.sf-variant-link--sm {
@@ -1054,6 +1058,7 @@ a:hover {
object-fit: cover;
border-radius: var(--sf-radius);
border: 1px solid var(--sf-border);
background: var(--sf-surface-muted);
}
.sf-product-gallery__thumbs {
@@ -1069,6 +1074,7 @@ a:hover {
}
.sf-prose img {
height: auto;
border-radius: var(--sf-radius-sm);
}
backend/src/modules/storefrontCore/views/partials/cart-line-item.hbs
+7 -1
View File
@@ -3,7 +3,13 @@
<div class='sf-thumb'>
<a href='/shop/products/{{productId}}/variants/{{id}}'>
{{#if thumbnailUrl}}
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{title}}' />
{{> storefront-image
src=thumbnailUrl
alt=''
width='1'
height='1'
loading='lazy'
}}
{{else}}
<span class='sf-thumb__placeholder'>no image</span>
{{/if}}
backend/src/modules/storefrontCore/views/partials/checkout-line-item.hbs
+14 -2
View File
@@ -4,14 +4,26 @@
{{#if linkHref}}
<a href='{{linkHref}}'>
{{#if thumbnailUrl}}
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
{{> storefront-image
src=thumbnailUrl
alt=''
width='1'
height='1'
loading='lazy'
}}
{{else}}
<span class='sf-thumb__placeholder'>no image</span>
{{/if}}
</a>
{{else}}
{{#if thumbnailUrl}}
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
{{> storefront-image
src=thumbnailUrl
alt=''
width='1'
height='1'
loading='lazy'
}}
{{else}}
<span class='sf-thumb__placeholder'>no image</span>
{{/if}}
backend/src/modules/storefrontCore/views/partials/order-line-item.hbs
+14 -2
View File
@@ -4,14 +4,26 @@
{{#if linkHref}}
<a href='{{linkHref}}'>
{{#if thumbnailUrl}}
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
{{> storefront-image
src=thumbnailUrl
alt=''
width='1'
height='1'
loading='lazy'
}}
{{else}}
<span class='sf-thumb__placeholder'>no image</span>
{{/if}}
</a>
{{else}}
{{#if thumbnailUrl}}
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
{{> storefront-image
src=thumbnailUrl
alt=''
width='1'
height='1'
loading='lazy'
}}
{{else}}
<span class='sf-thumb__placeholder'>no image</span>
{{/if}}
backend/src/modules/storefrontCore/views/partials/product-card.hbs
+7 -4
View File
@@ -2,11 +2,14 @@
{{#with selectedVariant}}
{{#if thumbnailUrl}}
<a class='sf-product-card__media-link' href='{{detailHref}}'>
<img
{{> storefront-image
class='sf-product-card__image'
src='{{thumbnailUrl}}'
alt='{{productTitle}} - {{title}}'
/>
src=thumbnailUrl
alt=''
width='1'
height='1'
loading='lazy'
}}
</a>
{{/if}}
{{/with}}
backend/src/modules/storefrontCore/views/partials/shop-nav.hbs
+7 -1
View File
@@ -3,7 +3,13 @@
<div class='sf-header__brand-group'>
{{#if logoUrl}}
<a class='sf-logo-link' href='/'>
<img class='sf-logo' src='{{logoUrl}}' alt='{{shopName}}' />
{{> storefront-image
class='sf-logo'
src=logoUrl
alt=shopName
width='200'
height='50'
}}
</a>
{{else}}
<a class='sf-logo-link' href='/'>{{shopName}}</a>
backend/src/modules/storefrontCore/views/partials/storefront-image.hbs
+10
View File
@@ -0,0 +1,10 @@
<img
class='{{class}}'
src='{{src}}'
alt='{{alt}}'
width='{{width}}'
height='{{height}}'
decoding='async'
{{#if loading}}loading='{{loading}}'{{/if}}
{{#if fetchPriority}}fetchpriority='{{fetchPriority}}'{{/if}}
/>
backend/src/modules/storefrontCore/views/partials/variant-image-gallery.hbs
+14 -5
View File
@@ -1,10 +1,13 @@
{{#if selectedImageUrl}}
<div class='sf-product-gallery'>
<img
{{> storefront-image
class='sf-product-gallery__main'
src='{{selectedImageUrl}}'
alt='{{productTitle}}'
/>
src=selectedImageUrl
alt=productTitle
width='1'
height='1'
fetchPriority='high'
}}
{{#if galleryImages}}
{{#if (gt galleryImages.length 1)}}
@@ -15,7 +18,13 @@
class='sf-variant-link sf-variant-link--sm{{#if isSelected}} sf-variant-link--selected{{/if}}'
{{#if isSelected}}aria-current='page'{{/if}}
>
<img src='{{url}}' alt='' />
{{> storefront-image
src=url
alt=''
width='1'
height='1'
loading='lazy'
}}
</a>
{{/each}}
</div>
backend/src/modules/storefrontCore/views/partials/variant-picker-link.hbs
+7 -1
View File
@@ -6,7 +6,13 @@
{{#if size}}style='width:{{size}}px;height:{{size}}px;aspect-ratio:auto;'{{/if}}
>
{{#if thumbnailUrl}}
<img src='{{thumbnailUrl}}' alt='{{#if title}}{{title}}{{else}}Variant{{/if}}' />
{{> storefront-image
src=thumbnailUrl
alt=''
width='1'
height='1'
loading='lazy'
}}
{{else}}
<span class='sf-thumb__placeholder'>no image</span>
{{/if}}