Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ashcroft08/provesa-web/llms.txt
Use this file to discover all available pages before exploring further.
The Slides Service manages carousel slides displayed on the homepage, providing CRUD operations with automatic sort order management.
Overview
This service handles all slide operations, automatically managing the display order when adding new slides.
Dependencies
slidesRepository - Database operations for slides
Methods
getAllSlides()
Retrieves all slides from the database.
import { slidesService } from '$lib/server/services/slides.service.js';
const slides = await slidesService.getAllSlides();
Array of slide objects, each containing:
id: Slide identifierimageUrl: Slide background image URLtitle: Main slide titlehighlight: Highlighted text portiondescription: Slide descriptionbadge: Badge text (e.g., “Nuevo”, “Oferta”)align: Content alignment (left/right/center)highlightColor: Color for highlighted textsortOrder: Display order
Implementation Details
Source: src/lib/server/services/slides.service.js:5-7
addSlide()
Creates a new slide with automatic sort order assignment.
import { slidesService } from '$lib/server/services/slides.service.js';
await slidesService.addSlide({
imageUrl: 'https://example.com/slide-bg.jpg',
title: 'Productos de',
highlight: 'Calidad Superior',
description: 'Encuentra todo lo que necesitas para tu construcción',
badge: 'Nuevo',
align: 'left',
highlightColor: '#e4002b'
});
URL of the slide background image
Portion of text to highlight (typically part of the title)
Slide description or subtitle
Badge text (e.g., “Nuevo”, “Oferta”, “Destacado”)
Content alignment: left, right, or center
Color for highlighted text in hex format (e.g., #e4002b)
Automatic Sort Order
The service automatically calculates sortOrder for new slides:
const existing = await slidesRepository.getAll();
const nextOrder = existing.length > 0
? existing[existing.length - 1].sortOrder + 1
: 0;
Implementation Details
Source: src/lib/server/services/slides.service.js:10-18
updateSlide()
Updates an existing slide.
import { slidesService } from '$lib/server/services/slides.service.js';
await slidesService.updateSlide(1, {
title: 'Updated Title',
highlight: 'New Highlight',
description: 'Updated description',
badge: 'Actualizado'
});
Updated background image URL
Only provided fields are updated. Omitted fields remain unchanged.
Implementation Details
Source: src/lib/server/services/slides.service.js:21-25
deleteSlide()
Deletes a slide by ID.
import { slidesService } from '$lib/server/services/slides.service.js';
await slidesService.deleteSlide(1);
Implementation Details
Source: src/lib/server/services/slides.service.js:28-30
Usage Examples
Complete Slide Management in SvelteKit
// src/routes/admin/slides/+page.server.js
import { slidesService } from '$lib/server/services/slides.service.js';
import { fail } from '@sveltejs/kit';
export async function load() {
const slides = await slidesService.getAllSlides();
return { slides };
}
export const actions = {
add: async ({ request }) => {
const formData = await request.formData();
try {
await slidesService.addSlide({
imageUrl: formData.get('imageUrl'),
title: formData.get('title'),
highlight: formData.get('highlight'),
description: formData.get('description'),
badge: formData.get('badge'),
align: formData.get('align'),
highlightColor: formData.get('highlightColor')
});
return { success: true };
} catch (error) {
return fail(500, { error: error.message });
}
},
update: async ({ request }) => {
const formData = await request.formData();
const id = parseInt(formData.get('id'));
try {
await slidesService.updateSlide(id, {
imageUrl: formData.get('imageUrl'),
title: formData.get('title'),
highlight: formData.get('highlight'),
description: formData.get('description'),
badge: formData.get('badge'),
align: formData.get('align'),
highlightColor: formData.get('highlightColor')
});
return { success: true };
} catch (error) {
return fail(500, { error: error.message });
}
},
delete: async ({ request }) => {
const formData = await request.formData();
const id = parseInt(formData.get('id'));
try {
await slidesService.deleteSlide(id);
return { success: true };
} catch (error) {
return fail(500, { error: error.message });
}
}
};
Display Slides on Frontend
// src/routes/+page.server.js
import { slidesService } from '$lib/server/services/slides.service.js';
export async function load() {
const slides = await slidesService.getAllSlides();
return { slides };
}
<!-- src/routes/+page.svelte -->
<script>
export let data;
</script>
<div class="carousel">
{#each data.slides as slide (slide.id)}
<div
class="slide"
style="background-image: url({slide.imageUrl})"
data-align="{slide.align}"
>
{#if slide.badge}
<span class="badge">{slide.badge}</span>
{/if}
<h2>
{slide.title}
{#if slide.highlight}
<span style="color: {slide.highlightColor}">
{slide.highlight}
</span>
{/if}
</h2>
{#if slide.description}
<p>{slide.description}</p>
{/if}
</div>
{/each}
</div>
Data Structure
Slide Object
interface Slide {
id: number;
imageUrl: string;
title: string;
highlight?: string;
description?: string;
badge?: string;
align: 'left' | 'right' | 'center';
highlightColor?: string;
sortOrder: number;
}
Design Patterns
Slide Content Structure
Typical slide content patterns:
Promotional Slide:
{
title: 'Ofertas de',
highlight: 'Temporada',
badge: 'Oferta',
highlightColor: '#ffd100',
description: 'Hasta 50% de descuento'
}
{
title: 'Nuevos Productos',
highlight: '2024',
badge: 'Nuevo',
highlightColor: '#e4002b',
description: 'Descubre nuestra nueva línea'
}
{
title: 'Calidad y Confianza',
highlight: 'desde 1950',
badge: null,
highlightColor: '#455dd9',
description: 'Tu proveedor de confianza'
}
Best Practices
Upload slide images separately using the upload service before creating slides.
Use high-resolution images optimized for web (recommended: 1920x1080, max 500KB).
Limit carousel to 3-5 slides for optimal user experience.
Slide order is managed automatically. To reorder slides, update sortOrder values directly through the repository.
Alignment Options
| Value | Description | Use Case |
|---|
left | Content aligned to left | Most common, good for text readability |
right | Content aligned to right | Balances left-heavy images |
center | Content centered | Symmetric designs, minimal text |
Image Upload Integration
// Complete flow: Upload image, then create slide
import { uploadRepository } from '$lib/server/repositories/upload.repository.js';
import { slidesService } from '$lib/server/services/slides.service.js';
async function createSlideWithImage(slideData, imageFile) {
// 1. Upload image
const uploadResult = await uploadRepository.uploadImage(imageFile, {
folder: 'provesa-web/slides'
});
// 2. Create slide with uploaded image URL
await slidesService.addSlide({
...slideData,
imageUrl: uploadResult.secure_url
});
}
