💈SLEEK BARBER SHOPS

Here check the installation guide

This script is compatible with ESX and QB.

This script is compatible with Illenium Appareance, esx_skin, and qb_clothing.

This script is compatible with the clothing-as-item system of Quasar Inventory.

INSTALLATION GUIDE

ESX

1. Download from KEYMASTER and Unzip the sleek-barber.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure sleek-barber, the name of the folder must not be changed or the resource will not function correctly. Ensure the script is the latest one.

ensure es_extended 
ensure esx_skin -- or Illenium Appareance
-- All the other resources
ensure sleek-barber

1. Open the config.lua and configure it correctly, paying attention to all the variables, especially the open functions that you need to fill in according to your systems, like the Notifications one.

2. Install file INSTALL_SQL.sql in your database.

3. Clear the cache of your server and also of your own FiveM.

4. Reboot the entire server with the forge script well ensured in your server.cfg.

QB

1. Download from KEYMASTER and Unzip the sleek-barber.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure sleek-barber, the name of the folder must not be changed or the resource will not function correctly. Ensure the script is the latest one.

ensure qb-core
ensure qb-clothing -- or Illenium Appareance
-- All the other resources
ensure sleek-barber

1. Open the config.lua and configure it correctly, paying attention to all the variables, especially the open functions that you need to fill in according to your systems, like the Notifications one.

2. Install file INSTALL SQL.sql in your database.

3. Clear the cache of your server and also of your own FiveM.

4. Reboot the entire server with the forge script well ensured in your server.cfg.

FREQUENTLY ASKED QUESTIONS

I use GABZ barbershop maps, what should I do?

If you’re using GABZ interiors, in your script folder, you’ll find a file called GABZ_LOCATIONS. Simply take its content and replace the one in the config.lua.

Some things don’t change color, or I can’t translate them from the config.

Navigate through the CSS and JS files, look for any color codes, and replace them with the ones you want. Similarly, for translations, if something is missing in the config, search for that text in the HTML or JS files and replace it.

CONFIG

The following will explain all the settings, one of the most important things that I recommend you spend a few minutes to understand in order to offer your users the best possible experience.

CONFIG

-- GENERAL CONFIGURATION
Config = {}

-- FRAMEWORK DETECTION
Config.Framework = (GetResourceState('es_extended') == 'started' and 'ESX') or (GetResourceState('qb-core') == 'started' and 'QB') -- DONT TOUCH THIS LINE
Config.DBWrapper = 'oxmysql' -- mysql-async, oxmysql...

-- TARGET SYSTEM
Config.EnableTargetSystem = false  -- Enable or disable the target system
Config.TargetSystemName = 'ox_target'  -- qb-target or ox_target

-- APPEARANCE MANAGEMENT
Config.AppearanceManager = 'illenium-appearance' -- Options = 'esx_skin' / 'illenium-appearance' / 'qb-clothing'

-- INVENTORY SYSTEM 
Config.UseQSInventory = false -- Enable if you are using QS Inventory
Config.QSInventoryName = 'qs-inventory'

-- CURRENCY
Config.Currencies = {
    cash = 'cash', -- cash or money
    bank = 'bank' -- bank or other
}

-- FREE HAIR ITEM CONFIGURATION
Config.EnableFreeHairItem = false -- Enable or disable free hair with item
Config.FreeHairItemName = 'free_hair_coupon' -- Name of the item that allows free hair

-- COMPLETION ANIMATION
Config.EnableFinishAnimation = true
Config.FinishAnimation = { 'clothingtie', 'try_tie_positive_a' } -- Animation to play after purchasing new clothes

-- CAMERA SETTINGS
Config.CameraFov = { min = 40.0, max = 50.0 }
Config.CameraHeight = 0.75

-- MARKER SETTINGS
Config.MarkerSettings = {
    ['AvailableSeat'] = {
        id = 21,
        size = vec(0.25, 0.25, 0.25),
        color = vec(0, 255, 0, 255),
        bobUpAndDown = false,
        rotate = true
    },
    ['OccupiedSeat'] = {
        id = 21,
        size = vec(0.25, 0.25, 0.25),
        color = vec(255, 0, 0, 255),
        bobUpAndDown = false,
        rotate = true
    }
}

-- SERVICE PRICES
Config.ServicePrices = {
    ['hair'] = 5500,
    ['beard'] = 3500,
    ['eye'] = 1500,
    ['eyebrows'] = 1500,
    ['makeup'] = 1500,
    ['lipstick'] = 1500,
    ['blush'] = 500
}

-- HAT REMOVAL SETTINGS
Config.RemoveClothesInMenu = true -- Set to true to remove hat when in menu, false to keep it on
Config.NoClothingComponents = { 1 } -- Specify the clothing number for 'no hat' when using addon clothing
Config.NoClothingProps = { 0 }

Config.UISettings = {
    colors = { -- UI color settings
        primary = '0, 224, 255',
        yellow = '#ffd400'
    },
    enableUISounds = true, -- Enable sound effects for UI interactions
    enableBlurEffect = true, -- Enable background blur
    enableBackground = true -- Turning this off will remove the particles and the dark background
}

Config.Functions = {
    Notification = function(text)
        Bridge.Notification(text)
    end,
    SetupTargets = function()
        for key, shop in pairs(Config.BarberShops) do
            for id, seat in pairs(shop.seats) do
                if Config.TargetSystemName == 'qb-target' then
                    exports['qb-target']:AddBoxZone('barber-'..key..'-'..id, seat.seatPos, 1, 1, {
                        name = 'barber-'..key..'-'..id,
                        debugPoly = false
                    }, {
                        options = {
                            {
                                icon = 'fa-solid fa-right-to-bracket',
                                label = 'Open Barber',
                                action = function(entity)
                                    TriggerEvent('sleek-barber:openTarget', key, id, shop, seat)
                                end
                            }
                        },
                        distance = 1.5
                    })
                elseif Config.TargetSystemName == 'ox_target' then
                    exports['ox_target']:addBoxZone({
                        coords = seat.seatPos,
                        size = vector3(1, 1, 1),
                        debug = false,
                        options = {
                            {
                                icon = 'fa-solid fa-right-to-bracket',
                                label = 'Open Barber',
                                onSelect = function(data)
                                    TriggerEvent('sleek-barber:openTarget', key, id, shop, seat)
                                end
                            }
                        }
                    })
                end
            end
        end
    end
}

Config.Locale = 'en'

-- TRANSLATIONS
Config.Translations = { -- Edit it easily here for your language, in case yours is not pre-made
    ['en'] = { 
        translation = {
            wheelButton1 = 'Hair',
            wheelButton2 = 'Beard',
            wheelButton3 = 'Face',
            wheelButton4 = 'Make-up',
            wheelButton5 = 'Favorites',
            firstGridTitle = 'Hair Selection',
            secondGridTitle = 'Beard Selection',
            thirdGridTitle = 'Facial Things',
            fourthGridTitle = 'Make up',
            fifthGridTitle = 'Favorites',
            cameraText = 'Camera Text',
            rotateText = 'Rotate Character',
            zoomText = 'Zoom in Character',
            actionButtonsTitle = 'Barber Shop',
            actionButtonsSubtitle = 'What do you want to do?',
            viewCartButtonText = 'VIEW CART & SHOP',
            exitButtonText = 'CANCEL & EXIT',
            payPopupTitle = 'How do you want to pay?',
            cashButtonText = 'Cash',
            bankButtonText = 'Bank',
            favoritesPopupTitle = 'Want to save in favorites',
            favoritesPopupDesc = 'You can save makeup sets, hairstyles, and anything else as favorites',
            saveButtonText = 'Save',
            cancelButtonText = 'No Save',
            closePopupTitle = 'Are you sure?',
            confirmCloseText = 'Yes',
            cancelCloseText = 'No',
            carthair = 'Hair Change',
            cartbeard = 'Beard Change',
            carteye = 'Eye Change',
            carteyebrows = 'Eyebrows Change',
            cartmakeup = 'Makeup Change',
            cartlipstick = 'Lipstick Change',
            cartblush = 'Blush Change',
            notification_no_money = 'You don\'t have enough cash.',
            notification_no_bank = 'You don\'t have enough money in the bank.',
            notification_bought = 'You have successfully undergone some aesthetic changes',
            notification_usefree = 'You have used a free appearance change coupon',
            notification_cancel = 'You canceled the appearance change. What a shame!',
            notification_seat_taken = 'The seat is taken. Wait until the other client is finished.'
        }
    },
    ['es'] = {
        translation = {
            wheelButton1 = 'Pelo',
            wheelButton2 = 'Barba',
            wheelButton3 = 'Cara',
            wheelButton4 = 'Maquillaje',
            wheelButton5 = 'Favoritos',
            firstGridTitle = 'Selección de Pelo',
            secondGridTitle = 'Selección de Barba',
            thirdGridTitle = 'Características Faciales',
            fourthGridTitle = 'Maquillaje',
            fifthGridTitle = 'Favoritos',
            cameraText = 'Texto de Cámara',
            rotateText = 'Girar Personaje',
            zoomText = 'Acercar Personaje',
            actionButtonsTitle = 'Barbería',
            actionButtonsSubtitle = '¿Qué quieres hacer?',
            viewCartButtonText = 'VER CARRITO Y COMPRAR',
            exitButtonText = 'CANCELAR Y SALIR',
            payPopupTitle = '¿Cómo quieres pagar?',
            cashButtonText = 'Efectivo',
            bankButtonText = 'Banco',
            favoritesPopupTitle = '¿Quieres guardar en favoritos?',
            favoritesPopupDesc = 'Puedes guardar conjuntos de maquillaje, peinados y más en favoritos',
            saveButtonText = 'Guardar',
            cancelButtonText = 'No guardar',
            closePopupTitle = '¿Estás seguro?',
            confirmCloseText = 'Sí',
            cancelCloseText = 'No',
            carthair = 'Cambio de Pelo',
            cartbeard = 'Cambio de Barba',
            carteye = 'Cambio de Ojos',
            carteyebrows = 'Cambio de Cejas',
            cartmakeup = 'Cambio de Maquillaje',
            cartlipstick = 'Cambio de Labial',
            cartblush = 'Cambio de Colorete',
            notification_no_money = 'No tienes suficiente dinero en efectivo.',
            notification_no_bank = 'No tienes suficiente dinero en el banco.',
            notification_bought = 'Has realizado cambios estéticos exitosamente',
            notification_usefree = 'Has utilizado un cupón de cambio de apariencia gratuito',
            notification_cancel = 'Cancelaste el cambio de apariencia. ¡Qué lástima!',
            notification_seat_taken = 'El asiento está ocupado. Espera a que el otro cliente termine.'
        }
    },    
    ['fr'] = {
        translation = {
            wheelButton1 = 'Cheveux',
            wheelButton2 = 'Barbe',
            wheelButton3 = 'Affronter',
            wheelButton4 = 'Se maquiller',
            wheelButton5 = 'Favoris',
            firstGridTitle = 'Sélection de cheveux',
            secondGridTitle = 'Sélection de barbe',
            thirdGridTitle = 'Choses du visage',
            fourthGridTitle = 'Se maquiller',
            fifthGridTitle = 'Favoris',
            cameraText = 'Texte de la caméra',
            rotateText = 'Faire pivoter le personnage',
            zoomText = 'Zoom sur le personnage',
            actionButtonsTitle = 'Salon de coiffure',
            actionButtonsSubtitle = 'Qu\'est-ce que vous voulez faire?',
            viewCartButtonText = 'VOIR LE PANIER ET ACHETER',
            exitButtonText = 'ANNULER et QUITTER',
            payPopupTitle = 'Comment voulez-vous payer?',
            cashButtonText = 'Espèces',
            bankButtonText = 'Banque',
            favoritesPopupTitle = 'Voulez-vous enregistrer dans les favoris?',
            favoritesPopupDesc = 'Vous pouvez enregistrer des kits de maquillage, des coiffures et tout autre élément comme favoris',
            saveButtonText = 'Sauvegarder',
            cancelButtonText = 'Annuler',
            closePopupTitle = 'Es-tu sûr?',
            confirmCloseText = 'Oui',
            cancelCloseText = 'Non',
            carthair = 'Hair Change',
            cartbeard = 'Beard Change',
            carteye = 'Eye Change',
            carteyebrows = 'Eyebrows Change',
            cartmakeup = 'Makeup Change',
            cartlipstick = 'Lipstick Change',
            cartblush = 'Blush Change',
            notification_no_money = 'You don\'t have enough cash.',
            notification_no_bank = 'You don\'t have enough money in the bank.',
            notification_bought = 'You have successfully undergone some aesthetic changes',
            notification_usefree = 'You have used a free appearance change coupon',
            notification_cancel = 'You canceled the appearance change. What a shame!',
            notification_seat_taken = 'The seat is taken. Wait until the other client is finished.'
        }
    }
    -- Add more languages here as needed
}

Config.BarberShops = {
    {
        ped = 's_f_m_fembarber',
        blip = {
            active = true,
            name = 'Barber Shop',
            number = 71, 
            display = 4,
            color = 4,
            scale = 1.0
        },
        location = vector3(136.66, -1708.4, 28.29),
        seats = {
            {
                seatPos = vector3(136.8, -1709.88, 29.8),
                pedPos = vector4(137.68, -1709.84, 28.3, 224.61),
                sitCoords = vector4(137.81, -1710.77, 28.64, 229.93)
            },
            {
                seatPos = vector3(137.79, -1708.71, 29.8),
                pedPos = vector4(138.59, -1708.64, 28.3, 230.57),
                sitCoords = vector4(138.72, -1709.58, 28.64, 232.26)
            },
            {
                seatPos = vector3(138.7, -1707.5, 29.8),
                pedPos = vector4(139.35, -1707.5, 28.3, 223.69),
                sitCoords = vector4(139.66, -1708.47, 28.64, 222.14)
            }
        }
    },
-- MORE...

SQL

CREATE TABLE `barber_favorites` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `identifier` LONGTEXT NULL DEFAULT NULL COLLATE 'utf8mb3_general_ci',
    `name` LONGTEXT NOT NULL COLLATE 'utf8mb3_general_ci',
    `data` LONGTEXT NOT NULL COLLATE 'utf8mb3_general_ci',
    PRIMARY KEY (`id`) USING BTREE
)
COLLATE='utf8mb3_general_ci'
ENGINE=InnoDB
;

If you want to edit the aesthetics or design. You have the HTML open so you can modify the style and everything as you want.

The script is RESPONSIVE for all resolutions as well.