🛒SLEEK SHOP SYSTEM

Here check the installation guide

INSTALLATION GUIDE

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

2. Add the resource to your server start config: ensure forge-shops,the name of the folder must not be changed or the resource will not function correctly.

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.

5. This script does not have any SQL to install.

6. Do not rename this script, this may cause it to fail when opening the interface.

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

Fill all the CONFIG very carefully.

Config, Lang, Noti = {}, {}, {}

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

-- Use "esx" or "qb"
Config.Framework = "esx"
-- If you are using one of the most recent versions of ESX, set the script name. Default = "es_extended"
Config.ESXExport = "es_extended"
-- Default ESX: "esx:getSharedObject" | Default QB: "qb-core"
Config.Core = "esx:getSharedObject"
-- Font for alerts. If you use Chinese language set to 0
Config.alertTextFont = 4
-- Account you use in esx/qb to cash at the bank
Config.bankaccount = "bank"
-- Account you use in esx/qb to collect cash
Config.cashaccount = "cash"
-- Choose if you want to use target (put the name of the one you have, it can be qb-target, ox-target...)
Config.UseTarget = {false,"ox-target","OPEN SHOP"}
-- The distance from the player at which the peds (if you decide to put shop NPCs) will spawn. By spawning based on proximity, it makes everything run smoother since there won't be many PEDs spawned at once
Config.PedSpawnRadius = 50

--  _   _ _____ _____ ___________ _____ _____   ___ _____ _____ _____ _   _  _____ 
-- | \ | |  _  |_   _|_   _|  ___|_   _/  __ \ / _ \_   _|_   _|  _  | \ | |/  ___|
-- |  \| | | | | | |   | | | |_    | | | /  \// /_\ \| |   | | | | | |  \| |\ `--. 
-- | . ` | | | | | |   | | |  _|   | | | |    |  _  || |   | | | | | | . ` | `--. \
-- | |\  \ \_/ / | |  _| |_| |    _| |_| \__/\| | | || |  _| |_\ \_/ / |\  |/\__/ /
-- \_| \_/\___/  \_/  \___/\_|    \___/ \____/\_| |_/\_/  \___/ \___/\_| \_/\____/

function notifications(notitype, message, time)
    --Change this trigger for your notification system keeping the variables
    exports['forge-notify']:ShowNotification(notitype, message, time)
end

--Notifications types:
Noti.info = 'info'
Noti.check = 'success'
Noti.error = 'error'

--Notification time:
Noti.time = 5000

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

Lang.pressE = "Press ~b~[~w~E~b~]~w~ to access shop"
Lang.noMoney = "You don't have enough money"
Lang.addedItems  = "Products have been added to your inventory"
Lang.cart = "CART"
Lang.totalPrice = "TOTAL PRICE"
Lang.PayByBank = "PAY BY BANK"
Lang.PayByCash = "PAY BY CASH"

--  _____ _   _ ___________  _____ 
-- /  ___| | | |  _  | ___ \/  ___|
-- \ `--.| |_| | | | | |_/ /\ `--. 
--  `--. \  _  | | | |  __/  `--. \
-- /\__/ / | | \ \_/ / |    /\__/ /
-- \____/\_| |_/\___/\_|    \____/

Config.animations = { -- Add as many animations as you want. Each NPC shopkeeper will do one of these animations.
    {
        name = "air_wave",
        dict = "anim@amb@waving@female"
    },
    {
        name = "ground_wave",
        dict = "anim@amb@waving@male"
    },
    {
        name = "base",
        dict = "amb@world_human_hang_out_street@female_arms_crossed@base"
    },
    {
        name = "rcmme_amanda1_stand_loop_cop",
        dict = "anim@amb@nightclub@peds@"
    },
    {
        name = "idle_reject_loop_a",
        dict = "mini@hookers_spvanilla"
    },
    {
        name = "friends@fra@ig_1",
        dict = "amb@world_human_hang_out_street@male_b@idle_a"
    },
    {
        name = "idle",
        dict = "mp_move@prostitute@m@french"
    },
    {
        name = "celebration_idle_f_a",
        dict = "anim@mp_celebration@idles@female"
    },
    {
        name = "idle_a",
        dict = "anim@mp_corona_idles@male_d@idle_a"
    },
    {
        name = "idle_a",
        dict = "amb@world_human_hang_out_street@female_hold_arm@idle_a"
    },
    {
        name = "drunk_driver_stand_loop_dd2",
        dict = "random@drunk_driver_1"
    },
    {
        name = "idle_a",
        dict = "amb@world_human_hang_out_street@Female_arm_side@idle_a"
    },
    {
        name = "idle",
        dict = "rcmjosh1"
    },
    {
        name = "ig_3_base_tracy",
        dict = "timetable@amanda@ig_3"
    },
    {
        name = "knuckle_crunch",
        dict = "anim@mp_player_intcelebrationfemale@knuckle_crunch"
    },
    {
        name = "fidget_sniff_fingers",
        dict = "move_p_m_two_idles@generic"
    },
    {
        name = "idle_ped06",
        dict = "anim@miss@low@fin@vagos@"
    },
    {
        name = "rehearsal_base_idle_director",
        dict = "misscarsteal4@aliens"
    },
  --{
      --name = "ground_wave",
      --dict = "anim@amb@waving@male"
  --}
}

Shops = {

    -- SUPER-MARKETS
    
    ["Supermarket 24/7 Hollywood"] = { --[1]
        label = "Shop", -- Add this to any shop where you need it to have a different label than the shop name.
        ped = { use = true, model = "CS_Josh", coords = vector4(24.5, -1346.19, 28.5, 266.78), useAnimations = true }, -- This will be the ped that will appear in the store, as shopkeeper. You can set false if you don't want there to be a ped.
        coord = vector3(4.5, -1346.19, 29.5),
        marker = {use = true, style = 23, r = 51, g = 175, b = 213},
        blip = {use = true, style = 52, color = 3, scale = 0.8, text = "Shop"},
        items = {
            ["Water"] = {
                itemName = "water_bottle",
                itemImage = "water.png",
                itemPrice = 10,
                special = false
            },
            ["Coffee"] = {
                itemName = "coffee",
                itemImage = "coffee.png",
                itemPrice = 10,
                special = false
            },
            ["Cola"] = {
                itemName = "kurkakola",
                itemImage = "cola.png",
                itemPrice = 10,
                special = false
            },
            ["Bandage"] = {
                itemName = "bandage",
                itemImage = "bandage.png",
                itemPrice = 10,
                special = false
            },
            ["Lighter"] = {
                itemName = "lighter",
                itemImage = "lighter.png",
                itemPrice = 10,
                special = false
            },
            ["Snickers"] = {
                itemName = "snickers",
                itemImage = "snickers.png",
                itemPrice = 10,
                special = false
            },
            ["Twix"] = {
                itemName = "twix",
                itemImage = "twix.png",
                itemPrice = 10,
                special = false
            },
            ["Vodka"] = {
                itemName = "vodka",
                itemImage = "vodka.png",
                itemPrice = 10,
                special = false
            },
            ["Whiskey"] = {
                itemName = "whiskey",
                itemImage = "whiskey.png",
                itemPrice = 10,
                special = false
            },
            ["Sandwich"] = {
                itemName = "sandwich",
                itemImage = "sandwich.png",
                itemPrice = 10,
                special = false
            },
            -- specials
            ["Advanced Kit"] = {
                itemName = "advancedkit",
                itemImage = "advancedkit.png",
                itemPrice = 10,
                special = true
            },
            ["Binoculars"] = {
                itemName = "binoculars",
                itemImage = "binoculars.png",
                itemPrice = 10,
                special = true
            },
            ["Cleaning Kit"] = {
                itemName = "cleaningkit",
                itemImage = "cleaningkit.png",
                itemPrice = 10,
                special = true
            },
            ["Diving Gear"] = {
                itemName = "divinggear",
                itemImage = "divinggear.png",
                itemPrice = 10,
                special = true
            },
            ["First Aid"] = {
                itemName = "firstaid",
                itemImage = "firstaid.png",
                itemPrice = 10,
                special = true
            },
        }
    },
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------

OPEN_FUNCTIONS

Here is everything related to open functions, such as target functions, in case you use a target script other than OX or QB.

Functions = Functions or {}

Functions.CreateTarget = function()
    if Config.UseTarget[1] then
        for shopName, shop in pairs(Shops) do
            local _options = {
                {
                    name = 'shop' ..shopName,
                    event = 'forge:1',
                    icon = 'fa-solid fa-shop',      
                    distance = 2.5,                
                    label = Config.UseTarget[3],                 
                }
            }
            if Config.UseTarget[2] == "qb-target" then
                options = {
                    {
                        name = 'shop' ..shopName,
                        event = 'forge:1',
                        icon = 'fa-solid fa-shop',        
                        label = Config.UseTarget[3],                 
                    }
                }
            end
            local data = {
                targetType = 'AddBoxZone',
                identifier = 'shop' ..shopName,
                coords =  vec3(shop.coord.x, shop.coord.y, shop.coord.z),
                heading = 10.0,
                width = 2.0,
                length = 1.0,                  
                minZ = 43.21-0.9,
                maxZ = 43.21+0.9,
                options = _options
            }  

            CreateTarget(data)
        end

        AddEventHandler('forge:1', function()
            visibleAlert = false
            items = ""
            specialitems = ""
            cartitems = ""
            totalamount = 0
            shopcartlist = {}
            for shopName, shop in pairs(Shops) do
                actualShop = shopName
                local pedcoords = GetEntityCoords(PlayerPedId())
                if #(pedcoords - shop.coord) < 15 then
                    for name, itemdata in pairs(shop.items) do
                        if itemdata.special then
                            specialitems = specialitems..'<div class="forge-shops-specialitem" data-value="'..name..'"><div class="forge-shops-box-background1"></div><div class="forge-shops-text-background"></div><span class="forge-shops-text16"><span>'..name..'</span></span><img src="public/items/'..itemdata.itemImage..'" alt="IMGSPECIALITEM1634" class="forge-shops-i-m-g-s-p-e-c-i-a-l-i-t-e-m"/></div>'
                        else
                            items = items..'<div class="forge-shops-item" data-value="'..name..'"><div class="forge-shops-box-background2"></div><div class="forge-shops-itemname"><div class="forge-shops-text-background1"></div><span class="forge-shops-text18"><span>'..name..'</span></span></div><img src="public/items/'..itemdata.itemImage..'" alt="IMGITEM325" class="forge-shops-i-m-g-i-t-e-m1"/><img src="public/playground_assets/addbackground1746-zw1-200h.png" alt="AddBackground1746" class="forge-shops-add-background"/><img src="public/playground_assets/addvector1119-bsxo.svg" alt="AddVector1119" class="forge-shops-add-vector"/></div>'
                        end
                    end
                    StartScreenEffect(blur, 1, true)
                    SetDisplay(not display, items, specialitems,shopName)    
                    break
                end            
            end                    
        end)

    else

        while true do
            for shopName, shop in pairs(Shops) do
                local pedcoords = GetEntityCoords(PlayerPedId())
                if #(pedcoords - shop.coord) < 15 then
                    while true do
                        local pedcoords = GetEntityCoords(PlayerPedId())
                        if shop.marker.use then
                            DrawMarker(shop.marker.style, shop.coord.x, shop.coord.y, shop.coord.z, 0.0, 0.0, 0.0, 0.0, 180.0, 0.0, 2.0, 2.0, 2.0, shop.marker.r, shop.marker.g, shop.marker.b, 50, false, true, 2, nil, nil, false)
                        end
                        if #(pedcoords - shop.coord) < 2 then
                            if visibleAlert then
                                drawTxt(Lang.pressE, Config.alertTextFont, 1, 0.5, 0.8, 0.6, 255, 255, 255, 255)
                            end
                            if IsControlJustPressed(0,38) then
                                actualShop = shopName
                                visibleAlert = false
                                items = ""
                                specialitems = ""
                                cartitems = ""
                                totalamount = 0
                                shopcartlist = {}
                                for name, itemdata in pairs(shop.items) do
                                    if itemdata.special then
                                        specialitems = specialitems..'<div class="forge-shops-specialitem" data-value="'..name..'"><div class="forge-shops-box-background1"></div><div class="forge-shops-text-background"></div><span class="forge-shops-text16"><span>'..name..'</span></span><img src="public/items/'..itemdata.itemImage..'" alt="IMGSPECIALITEM1634" class="forge-shops-i-m-g-s-p-e-c-i-a-l-i-t-e-m"/></div>'
                                    else
                                        items = items..'<div class="forge-shops-item" data-value="'..name..'"><div class="forge-shops-box-background2"></div><div class="forge-shops-itemname"><div class="forge-shops-text-background1"></div><span class="forge-shops-text18"><span>'..name..'</span></span></div><img src="public/items/'..itemdata.itemImage..'" alt="IMGITEM325" class="forge-shops-i-m-g-i-t-e-m1"/><img src="public/playground_assets/addbackground1746-zw1-200h.png" alt="AddBackground1746" class="forge-shops-add-background"/><img src="public/playground_assets/addvector1119-bsxo.svg" alt="AddVector1119" class="forge-shops-add-vector"/></div>'
                                    end
                                end
                                StartScreenEffect(blur, 1, true)
                                SetDisplay(not display, items, specialitems,shopName)
                                break
                            end
                        end
                        local pedcoords = GetEntityCoords(PlayerPedId())
                        if #(pedcoords - shop.coord) > 15 then
                            break
                        end
                        Citizen.Wait(0)
                    end
                end
            end
          Citizen.Wait(1000)
        end
    end

    
end

function CreateTarget(data)
    if Config.UseTarget[2] == "qb-target" then
        if data.targetType == 'AddBoxZone' then
            exports.qtarget:AddBoxZone(data.identifier, data.coords, data.length, data.width, {
                name=data.identifier,
                heading=data.heading,
                debugPoly=false,
                minZ=data.coords.z-0.7,
                maxZ=data.coords.z+1.5,
            }, {
                options = data.options,
                distance = 3.0,
            })
        elseif data.targetType == 'entity' then
            exports.qtarget:AddTargetEntity(data.entitys, {
                options = data.options,
                label = data.identifier,
                distance = 2.5
            })  
        end
    elseif Config.UseTarget[2] == "ox-target" then
        if data.targetType == 'AddBoxZone' then
            exports.ox_target:addBoxZone({ coords = data.coords, options = data.options})
        elseif data.targetType == 'entity' then
            exports.ox_target:addLocalEntity(data.entitys, data.options)  
        end
    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.