Slides Service - PROVESA Web

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();

slides

array

Array of slide objects, each containing:

id: Slide identifier
imageUrl: Slide background image URL
title: Main slide title
highlight: Highlighted text portion
description: Slide description
badge: Badge text (e.g., “Nuevo”, “Oferta”)
align: Content alignment (left/right/center)
highlightColor: Color for highlighted text
sortOrder: 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'
});

imageUrl

string

required

URL of the slide background image

title

string

required

Main slide title text

highlight

string

Portion of text to highlight (typically part of the title)

description

string

Slide description or subtitle

badge

string

Badge text (e.g., “Nuevo”, “Oferta”, “Destacado”)

align

string

Content alignment: left, right, or center

highlightColor

string

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;

New slides are appended to the end of the carousel.

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'
});

number

required

Slide ID to update

imageUrl

string

Updated background image URL

title

string

Updated title text

highlight

string

Updated highlighted text

description

string

Updated description

badge

string

Updated badge text

align

string

Updated alignment

highlightColor

string

Updated highlight color

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);

number

required

Slide ID to delete

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'
}

Product Launch:

{
  title: 'Nuevos Productos',
  highlight: '2024',
  badge: 'Nuevo',
  highlightColor: '#e4002b',
  description: 'Descubre nuestra nueva línea'
}

General Branding:

{
  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
  });
}

​Overview

​Dependencies

​Methods

​getAllSlides()

​Implementation Details

​addSlide()

​Automatic Sort Order

​Implementation Details

​updateSlide()

​Implementation Details

​deleteSlide()

​Implementation Details

​Usage Examples

​Complete Slide Management in SvelteKit

​Display Slides on Frontend

​Data Structure

​Slide Object

​Design Patterns

​Slide Content Structure

​Best Practices

​Alignment Options

​Image Upload Integration

Overview

Dependencies

Methods

getAllSlides()

Implementation Details

addSlide()

Automatic Sort Order

Implementation Details

updateSlide()

Implementation Details

deleteSlide()

Implementation Details

Usage Examples

Complete Slide Management in SvelteKit

Display Slides on Frontend

Data Structure

Slide Object

Design Patterns

Slide Content Structure

Best Practices

Alignment Options

Image Upload Integration