performance, accessibility, best practices and seo improvements (#17496)

| Q               | A
|-----------------|-----
| Branch?         | 2.0 
| Bug fix?        | no
| New feature?    | no
| BC breaks?      | no
| Deprecations?   | no
| Related tickets | -
| License         | MIT
This commit is contained in:
Damian Murawski 2024-11-23 01:06:06 +01:00 committed by GitHub
commit 74db67ee04
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 17 additions and 15 deletions

View file

@ -60,3 +60,4 @@ sylius:
order_history: 'Order history'
personal_information: 'Personal information'
top_bar: 'Sign up to our newsletter and grab -20% off'
meta_description: 'Explore the Sylius a flexible e-commerce platform built on Symfony. Discover features to customize your online store and test its capabilities!'

View file

@ -1,7 +1,7 @@
<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') }}" class="img-fluid" alt="Home">
<img src="{{ asset('build/shop/images/homepage-banner.webp', 'shop') }}" width="1920" height="100%" 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>

View file

@ -5,11 +5,11 @@
<div class="col-auto position-relative" {{ attributes }}>
<div data-loading>
<div class="sylius-shop-loader">
<img src="{{ asset('build/shop/images/loader.gif', 'shop') }}" alt="{{ 'sylius.ui.loading'|trans }}"/>
<img src="{{ asset('build/shop/images/loader.gif', 'shop') }}" alt="{{ 'sylius.ui.loading'|trans }}" loading="lazy"/>
</div>
</div>
<div {{ sylius_test_html_attribute('cart-button') }}>
<button class="btn btn-icon btn-transparent px-0 position-relative" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart">
<button class="btn btn-icon btn-transparent px-0 position-relative" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart" aria-label="cart button">
{{ ux_icon('tabler:shopping-bag') }}
<span class="d-none d-lg-block ps-1" {{ sylius_test_html_attribute('cart-total') }}>
{{- money.convertAndFormat(cart.itemsTotal) -}}

View file

@ -6,4 +6,4 @@
{% set path = asset('build/shop/images/200x200.png', 'shop') %}
{% endif %}
<img {{ attributes.defaults({ class: 'img-fluid' }) }} src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" />
<img {{ attributes.defaults({ class: 'img-fluid' }) }} src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ 'sylius.ui.product'|trans }} {{ product.name }} {{ 'sylius.ui.image'|trans }}" />

View file

@ -10,9 +10,10 @@
<title>{% block title %}{{ sylius.channel.name }}{% endblock %}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes" name="viewport">
{% block metatags %}
<meta name="description" content="{{ 'sylius.meta_description'|trans }}"/>
{% hook '#metatags' with { _prefixes: prefixes } %}
{% endblock %}

View file

@ -1,5 +1,5 @@
<div class="col-12 text-center col-md-6 order-md-3 text-md-start col-lg-3 order-lg-1">
<a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block mb-4">
<a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block mb-4" aria-label="sylius logo">
<div style="width: 10rem">
{% include '@SyliusShop/shared/logo.html.twig'%}
</div>
@ -7,6 +7,6 @@
<div class="mb-3">
&copy; {{ 'sylius.ui.your_store'|trans }}, {{ 'sylius.ui.powered_by'|trans }}
<a href="https://sylius.com" target="_blank" style="color: #1abb9c;">Sylius</a>.
<a href="https://sylius.com" target="_blank" style="color: #18816c;">Sylius</a>
</div>
</div>

View file

@ -4,24 +4,24 @@
<div class="row g-2 mb-4">
<div class="col-4">
<a href="https://sylius.com/partner/paypal/" target="_blank" class="d-block border rounded p-2">
<img class="img-fluid" src="{{ asset('build/shop/images/paypal-logo.svg', 'shop') }}" alt="PayPal" />
<img class="img-fluid" src="{{ asset('build/shop/images/paypal-logo.svg', 'shop') }}" width="100%" height="100%" alt="PayPal" />
</a>
</div>
<div class="col-4">
<a href="https://sylius.com/partner/adyen/" target="_blank" class="d-block border rounded p-2">
<img class="img-fluid" src="{{ asset('build/shop/images/adyen-logo.svg', 'shop') }}" alt="Adyen" />
<img class="img-fluid" src="{{ asset('build/shop/images/adyen-logo.svg', 'shop') }}" width="100%" height="100%" alt="Adyen" />
</a>
</div>
<div class="col-4">
<a href="https://sylius.com/partner/mollie/" target="_blank" class="d-block border rounded p-2">
<img class="img-fluid" src="{{ asset('build/shop/images/mollie-logo.svg', 'shop') }}" alt="Mollie" />
<img class="img-fluid" src="{{ asset('build/shop/images/mollie-logo.svg', 'shop') }}" width="100%" height="100%" alt="Mollie" />
</a>
</div>
</div>
<div class="d-flex justify-content-center justify-content-md-start justify-content-lg-center gap-3 mb-5">
<a class="link-reset" href="#">{{ ux_icon('tabler:brand-instagram', { class: 'icon icon-md' }) }}</a>
<a class="link-reset" href="#">{{ ux_icon('tabler:brand-facebook', { class: 'icon icon-md' }) }}</a>
<a class="link-reset" href="#">{{ ux_icon('tabler:brand-x', { class: 'icon icon-md' }) }}</a>
<a class="link-reset" href="https://www.instagram.com/sylius.team/" target="_blank" aria-label="instagram logo">{{ ux_icon('tabler:brand-instagram', { class: 'icon icon-md' }) }}</a>
<a class="link-reset" href="https://www.facebook.com/SyliusEcommerce/" target="_blank" aria-label="facebook logo">{{ ux_icon('tabler:brand-facebook', { class: 'icon icon-md' }) }}</a>
<a class="link-reset" href="https://x.com/Sylius" target="_blank" aria-label="x logo">{{ ux_icon('tabler:brand-x', { class: 'icon icon-md' }) }}</a>
</div>
</div>

View file

@ -1,5 +1,5 @@
<div class="col">
<a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block py-lg-2" style="width: 10rem">
<a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block py-lg-2" style="width: 10rem" aria-label="sylius logo">
{% hook 'logo' %}
</a>
</div>

View file

@ -1,5 +1,5 @@
<div class="d-lg-none">
<a href="{{ path('sylius_shop_login') }}" class="btn btn-icon btn-transparent px-0">
<a href="{{ path('sylius_shop_login') }}" class="btn btn-icon btn-transparent px-0" aria-label="account button">
{{ ux_icon('tabler:user') }}
</a>
</div>