4f08db7541
✨ feat(templates): [FR] Améliore l'UI et ajoute des traductions pour plus de contenu dynamique.
```
176 lines
8.9 KiB
Twig
176 lines
8.9 KiB
Twig
{% extends 'base.twig' %}
|
|
|
|
{# --- METADATA & SEO --- #}
|
|
{% block title %}{{'shop.title'|trans}}{% endblock %}
|
|
{% block meta_description %}{{'shop.description'|trans}}{% endblock %}
|
|
{% block canonical_url %}<link rel="canonical" href="{{ url('app_shop') }}" />{% endblock %}
|
|
|
|
{% block breadcrumb_schema %}
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "{{ 'breadcrumb.home'|trans }}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "{{ 'breadcrumb.shop'|trans }}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
{% for product in featuredProducts %}
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org/",
|
|
"@type": "ImageObject",
|
|
"contentUrl": "{{ vich_uploader_asset(product,'image') | imagine_filter('webp') }}",
|
|
"license": "https://example.com/license",
|
|
"acquireLicensePage": "{{ app.request.schemeAndHttpHost}}{{ path('app_legal') }}",
|
|
"creditText": "E-Cosplay",
|
|
"creator": {
|
|
"@type": "Person",
|
|
"name": "E-Cosplay"
|
|
},
|
|
"copyrightNotice": "E-Cosplay"
|
|
}
|
|
</script>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org/",
|
|
"@type": "Product",
|
|
"name": "{{ product.name }}",
|
|
"image": "{{ vich_uploader_asset(product,'image') | imagine_filter('webp') }}",
|
|
"description": "{{ product.shortDescription }}",
|
|
"sku": "EC-{{ product.id }}",
|
|
"brand": {
|
|
"@type": "Brand",
|
|
"name": "E-COSPLAY"
|
|
},
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"url": "{{ app.request.schemeAndHttpHost }}{{ path('app_product_show',{'slug': (product.name|lower|replace({' ': '-'}))~"-"~product.id}) }}",
|
|
"priceCurrency": "EUR",
|
|
"price": "{{ product.price }}",
|
|
"itemCondition": "https://schema.org/{% if product.state == 'new' %}NewCondition{% else %}UsedCondition{% endif %}",
|
|
"availability": "https://schema.org/InStock"
|
|
}
|
|
}
|
|
</script>
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="bg-[#fbfbfb] min-h-screen py-12 px-4 italic">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
{# HEADER DE LA BOUTIQUE #}
|
|
<header class="mb-16 text-center">
|
|
<div class="inline-block bg-indigo-600 text-white px-6 py-2 border-4 border-gray-900 font-black uppercase tracking-tighter text-sm mb-4 skew-x-[-12deg] shadow-[4px_4px_0px_rgba(0,0,0,1)]">
|
|
E-Cosplay Market // Avail_
|
|
</div>
|
|
<h1 class="text-6xl md:text-8xl font-black uppercase tracking-tighter leading-none mb-6">
|
|
{{ 'shop.welcome_title'|trans }}
|
|
</h1>
|
|
<p class="max-w-2xl mx-auto text-xl font-bold uppercase text-gray-500 leading-tight">
|
|
{{ 'shop.description'|trans }}
|
|
</p>
|
|
</header>
|
|
|
|
{# --- GRILLE DE PRODUITS --- #}
|
|
<main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{% for product in featuredProducts %}
|
|
<div class="group relative bg-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex flex-col h-full">
|
|
|
|
{# ÉTIQUETTE PROMO / ETAT #}
|
|
<div class="absolute -top-4 -right-4 z-10 flex flex-col gap-2">
|
|
{% if product.promo %}
|
|
<div class="bg-pink-500 text-white text-[10px] font-black px-3 py-1 border-2 border-gray-900 uppercase rotate-12">
|
|
{{ 'shop.tag_promo'|trans }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="bg-yellow-400 text-gray-900 text-[10px] font-black px-2 py-1 border-2 border-gray-900 uppercase -rotate-6">
|
|
{{ ('shop.state_' ~ product.state)|trans }}
|
|
</div>
|
|
</div>
|
|
|
|
{# IMAGE PRODUIT #}
|
|
<div class="relative h-64 overflow-hidden border-b-4 border-gray-900 bg-gray-100">
|
|
<img src="{{ vich_uploader_asset(product,'image') | imagine_filter('webp')}}"
|
|
alt="{{ product.name }}"
|
|
class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-500">
|
|
|
|
{# TAGS FLOTTANTS #}
|
|
<div class="absolute bottom-2 left-2 flex gap-2">
|
|
{% if product.handmade %}
|
|
<span class="bg-green-400 text-black text-[9px] font-black border-2 border-black px-2 py-0.5 uppercase">
|
|
{{ 'shop.tag_handmade'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
{% if product.id == 1 %}
|
|
<span class="bg-blue-400 text-black text-[9px] font-black border-2 border-black px-2 py-0.5 uppercase">
|
|
{{ 'shop.tag_custom'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{# INFOS PRODUIT #}
|
|
<div class="p-6 flex-grow flex flex-col">
|
|
<h3 class="text-2xl font-black uppercase tracking-tighter leading-none mb-3 truncate">
|
|
{{ product.name }}
|
|
</h3>
|
|
|
|
<p class="text-xs font-bold text-gray-500 uppercase leading-snug mb-6 line-clamp-3 italic">
|
|
{{ product.shortDescription }}
|
|
</p>
|
|
|
|
<div class="mt-auto pt-6 border-t-4 border-dashed border-gray-100 flex justify-between items-center">
|
|
<div class="flex flex-col">
|
|
<span class="text-xs font-black text-gray-400 uppercase tracking-widest">Price_</span>
|
|
<span class="text-2xl font-black text-indigo-600">
|
|
{{ product.price | number_format(2, ',', ' ') }}€
|
|
</span>
|
|
</div>
|
|
|
|
<a href="{{ path('app_product_show', {'slug': (product.name|lower|replace({' ': '-'}))~"-"~product.id}) }}"
|
|
class="w-12 h-12 bg-gray-900 text-white flex items-center justify-center border-2 border-gray-900 shadow-[4px_4px_0px_#ec4899] group-hover:shadow-none group-hover:translate-x-1 group-hover:translate-y-1 transition-all">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</main>
|
|
|
|
{# --- NOTE DE VENTE TERMINAL STYLE --- #}
|
|
<div class="mt-20 p-8 bg-gray-900 border-8 border-indigo-600 shadow-[16px_16px_0px_rgba(79,70,229,0.2)]">
|
|
<div class="flex flex-col md:flex-row gap-8 items-center">
|
|
<div class="flex-shrink-0 w-20 h-20 bg-indigo-600 text-white flex items-center justify-center border-4 border-white rotate-3">
|
|
<i class="fas fa-heart-handshake text-3xl"></i>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h3 class="text-2xl font-black text-white uppercase tracking-tighter mb-4 italic">
|
|
<span class="text-indigo-400">#</span> {{ 'shop.sales_note_title'|trans }}
|
|
</h3>
|
|
<div class="text-gray-300 font-bold text-sm leading-relaxed uppercase opacity-90">
|
|
{{ 'shop.sales_note_main'|trans|raw }}
|
|
</div>
|
|
<p class="mt-4 text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em]">
|
|
>> {{ 'shop.sales_note_details'|trans }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|