👕SLEEK CLOTHES STORE

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-clothestore.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure sleek-clothestore, 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-clothestore

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-clothestore.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure sleek-clothestore, 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-clothestore

1. You have to add the following thing if you use QB-Clothing:

This goes to qb-clothing > client > main.lua

RegisterNetEvent('qb-clothing:setSkinData', function(key, index, texture)
    skinData[key].item = index
    skinData[key].texture = texture
end)

RegisterNetEvent('qb-clothing:saveSkin', function()
    SaveSkin()
end)

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

In what format should I add the jobs that can access a shop?

Remember to set it to true to use it.

How do I create a shop just for Masks or something else?

In the whitelistItems part, write it like this, and you can put all the categories you want to appear. What you have to put here is the ‘Labels’ that is in Config.Items

whitelistItems = { 'Masks' } -- set this to false to disable or { } with all the whitelisted items

If you want everything to be displayed, set it to false like this:

 whitelistItems = false -- set this to false to disable or { } with all the whitelisted items

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

Config = { }

--  _____ _____ _   _ ______ _____ _____ _   _______  ___ _____ _____ _____ _   _ 
-- /  __ \  _  | \ | ||  ___|_   _|  __ \ | | | ___ \/ _ \_   _|_   _|  _  | \ | |
-- | /  \/ | | |  \| || |_    | | | |  \/ | | | |_/ / /_\ \| |   | | | | | |  \| |
-- | |   | | | | . ` ||  _|   | | | | __| | | |    /|  _  || |   | | | | | | . ` |
-- | \__/\ \_/ / |\  || |    _| |_| |_\ \ |_| | |\ \| | | || |  _| |_\ \_/ / |\  |
--  \____/\___/\_| \_/\_|    \___/ \____/\___/\_| \_\_| |_/\_/  \___/ \___/\_| \_/

-- Specify the framework to use: 'esx' or 'qbcore'
Config.Framework = 'qbcore' -- esx / qbcore
Config.SQLWrapper = 'oxmysql'  -- Choose the MySQL wrapper

-- TARGET SYSTEM SETTINGS
Config.UseTargetSystem = false -- true / false
Config.TargetSystem = 'ox_target' -- ox_target / qb-target

-- APPEARANCE MANAGEMENT
Config.SkinManager = "illenium-appearance" -- Options: "esx_skin" / "illenium-appearance" / "qb-clothing"
Config.AllowOutfitSaving = true -- Enable or disable the option to save outfits

-- HANDS UP UI SETTINGS
Config.EnableHandsUpUI = true -- Enable hands-up animation while changing clothes
Config.HandsUpKey = 'x' -- Key for hands-up animation (Refer to https://www.toptal.com/developers/keycode)
Config.HandsUpAnimation = { 'missminuteman_1ig_2', 'handsup_enter', 50 }

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

-- OUTFIT SHARING
Config.EnableOutfitSharing = true -- Allow players to share saved outfits
Config.OutfitSharingCommand = "shareoutfit" -- Command to initiate outfit sharing

-- INVENTORY SYSTEM
Config.UseQSInventory = false
Config.QSInventoryName = 'qs-inventory'

-- CAMERA SETTINGS
Config.CamFov = {
    ['face'] = { min = 15.0, max = 20.0 },
    ['chest'] = { min = 20.0, max = 25.0 },
    ['legs'] = { min = 30.0, max = 35.0 },
    ['full'] = { min = 60.0, max = 65.0 }
}
Config.CamHeight = {
    ['face'] = 0.65,
    ['chest'] = 0.2,
    ['legs'] = -0.6,
    ['full'] = -0.15
}

-- CLOTHING CATEGORIES
Config.Items = {
    -- ACCESORIES
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Masks',
        type = 'clothes', -- clothes / prop
        id = 1, -- Component ID from the list
        price = 150, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Accesories',
        type = 'clothes', -- clothes / prop
        id = 7, -- Component ID from the list
        price = 100, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Hats',
        type = 'prop', -- clothes / prop
        id = 0, -- Component ID from the list
        price = 250, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Glasses',
        type = 'prop', -- clothes / prop
        id = 1, -- Component ID from the list
        price = 200, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Ears',
        type = 'prop', -- clothes / prop
        id = 2, -- Component ID from the list
        price = 100, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Watches',
        type = 'prop', -- clothes / prop
        id = 6, -- Component ID from the list
        price = 300, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Bracelets',
        type = 'prop', -- clothes / prop
        id = 7, -- Component ID from the list
        price = 150, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'accessories', -- accessories / upper-body / lower-body
        label = 'Bags and Parachutes',
        type = 'clothes', -- clothes / prop
        id = 5, -- Component ID from the list
        price = 400, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    -- UPPER BODY
    {
        category = 'upper-body', -- accessories / upper-body / lower-body
        label = 'Torsos',
        type = 'clothes', -- clothes / prop
        id = 3, -- Component ID from the list
        price = 500, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'upper-body', -- accessories / upper-body / lower-body
        label = 'Tops',
        type = 'clothes', -- clothes / prop
        id = 11, -- Component ID from the list
        price = 300, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'upper-body', -- accessories / upper-body / lower-body
        label = 'Undershirts',
        type = 'clothes', -- clothes / prop
        id = 8, -- Component ID from the list
        price = 200, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'upper-body', -- accessories / upper-body / lower-body
        label = 'Decals',
        type = 'clothes', -- clothes / prop
        id = 10, -- Component ID from the list
        price = 100, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'upper-body', -- accessories / upper-body / lower-body
        label = 'Body Armors',
        type = 'clothes', -- clothes / prop
        id = 9, -- Component ID from the list
        price = 600, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    -- LOWER BODY
    {
        category = 'lower-body', -- accessories / upper-body / lower-body
        label = 'Legs',
        type = 'clothes', -- clothes / prop
        id = 4, -- Component ID from the list
        price = 400, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    },
    {
        category = 'lower-body', -- accessories / upper-body / lower-body
        label = 'Shoes',
        type = 'clothes', -- clothes / prop
        id = 6, -- Component ID from the list
        price = 400, -- Price of the item
        blackListed = {  -- Blacklisted values, leave it empty for the owners to set
            ['male'] = { },
            ['female'] = { }
        }
    }
}

-- UI SETTINGS
Config.UISettings = {
    colors = { -- UI color settings
        color1 = '#00e0ff',
        color2 = '#d8dbeb',
        color3 = '#00b3cc',
        color4 = 'radial-gradient(76% 76% at 50% 50%, rgba(0, 224, 255, 0.2) 0%, rgba(0, 224, 255, 0) 100%)',
        color5 = '#909090',
        color6 = 'linear-gradient(180deg, rgba(0, 0, 0, 0) 73.21%, #0f1425 100%), linear-gradient(270deg, #0f1425 0%, rgba(15, 20, 37, 0) 51.04%), linear-gradient(180deg, rgba(15, 20, 37, 0.93) 0%, rgba(15, 20, 37, 0) 37.5%), linear-gradient(90deg, #181e33 0%, rgba(15, 20, 37, 0) 72.4%)',
        color7 = 'rgba(114, 114, 114, 0.2)',
        color8 = 'rgba(15, 20, 37, 0.8)',
        color9 = 'rgba(0, 224, 255, 0.5)',
        color10 = 'radial-gradient(76% 76% at 50% 50%, rgba(0, 224, 255, 0.1) 0%, rgba(0, 224, 255, 0) 100%)',
        color11 = 'rgba(0, 224, 255, 0.25)',
        color12 = 'radial-gradient(76% 76% at 50% 50%, rgba(0, 224, 255, 0.8) 0%, rgba(0, 224, 255, 0) 100%)',
        color13 = '#fa08d3',
        color14 = 'radial-gradient(76% 76% at 50% 50%, rgba(250, 8, 211, 0.2) 0%, rgba(250, 8, 211, 0) 100%)',
        color15 = 'rgba(250, 8, 211, 0.25)',
        color16 = 'radial-gradient(76% 76% at 50% 50%, rgba(250, 8, 211, 0.8) 0%, rgba(250, 8, 211, 0) 100%)',
        color17 = 'rgba(0, 9, 38, 0.62)',
        color18 = 'rgb(49, 175, 212)',
        color19 = '#727272',
        color20 = '#969696',
        color21 = 'rgba(49, 175, 212, 0.3)',
        color22 = '#31afd4',
        color23 = 'rgba(195, 66, 66, 0.3)',
        color24 = '#c34242',
        color25 = 'rgba(0, 0, 0, 0.5)',
        color26 = '#0f1425',
        color27 = 'rgba(255, 255, 255, 0.2)',
        color28 = 'rgba(90, 90, 90, 0.45)',
        color29 = '#656565',
        color30 = '#9b9b9b',
        color31 = '#a5a5a5'
    },
    translations = { -- UI text translations
        title1 = 'Clothes Shop',
        title2 = 'What do you want to do?',
        viewandshop = 'VIEW CART & SHOP',
        cancelexit = 'CANCEL & EXIT',
        camerause = 'CAMERA USE:',
        rotatechar = 'Rotate character',
        zoomchar = 'Zoom in on character',
        areyousure = 'ARE YOU SURE?',
        confirmremove = 'Yes',
        cancelremove = 'No',
        areyousure2 = 'ARE YOU SURE?',
        confirmclose = 'Yes',
        cancelclose = 'No',
        howtopay = 'HOW DO YOU WANT TO PAY?',
        cash = 'Cash',
        bank = 'Bank',
        saveclothes = 'DO YOU WANT SAVE CLOTHES?',
        saveclothesdesc = 'If you save your clothes your clothes will appear in your housing',
        newoutfit = 'NEW OUTFIT',
        savebtn = 'Save',
        cancelbtn = 'Don\'t Save',
        storedclothes = 'YOUR STORED CLOTHES',
        storedclothesdesc = 'You can wear them or delete them',
        total = 'TOTAL',
        openstore = 'Open clothing store',
        openwardrobe = 'Open Wardrobe',
        notEnoughCash = 'You do not have enough cash.',
        notEnoughBank = 'You do not have enough money in the bank.'
    }
}

-- ADDITIONAL UI OPTIONS
Config.EnableUISounds = true -- Enable sound effects for UI interactions
Config.EnableBlurEffect = true -- Enable background blur
Config.EnableBackground = true -- Turning this off will remove the particles and the dark background

-- STORE CONFIGURATION
Config.Stores = {
    {
        -- Mask Shop
        coords = vector3(-1337.84, -1277.81, 4.0),
        blip = {
            use = true,
            sprite = 362,
            display = 4,
            scale = 0.95,
            color = 5,
            name = 'Mask Store'
        },
        marker = {
            use = true,
            id = 23,
            size = vector3(1.85, 1.85, 0.95),
            color = { 255, 205, 0, 125 },
            rotate = false,
            bobUpAndDown = false
        },
        distance = {
            marker = 3.0,
            text = 2.0
        },
        job = {
            use = false,
            jobs = {}
        },
        wardrobeInShop = {
            use = false,
            coords = vector3(-1337.53, -1274.13, 4.0)
        },
        whitelistItems = { 'Masks' } -- set this to false to disable or {} with all the whitelisted items
    },

SQL

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

OPEN

Here are all the open functions where you can configure it with your own scripts.

-- HUD DISPLAY FUNCTIONS

HudDisplay = { -- To hide the HUD when displaying the UI of the shops

    Hide = function()
        -- exports['neon-hud']:Display(true)
    end,

    Show = function()
        -- exports['neon-hud']:Display(false)
    end

}

-- GET CLOSEST PLAYERS FUNCTION

GetClosestPlayers = function()
    if Config.Framework == 'esx' then
        return ESX.Game.GetPlayersInArea(GetEntityCoords(PlayerPedId()), 10.0)
    elseif Config.Framework == 'qbcore' then
        return QBCore.Functions.GetPlayersFromCoords(GetEntityCoords(PlayerPedId()), 10.0)
    else
        -- custom
    end
end

-- NOTIFICATION FUNCTION

Notify = function(text) -- Notification system based on the framework
    if Config.Framework == 'esx' then
        ESX.ShowNotification(text)
    elseif Config.Framework == 'qbcore' then
        QBCore.Functions.Notify(text)
    end
end

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.