So you want to make cool backpacks but you dont want to pay

gistfile1.txt

This is just the frame of how to get a whole bag shop or whatever you can imaging set up, all of this is contained within the inventory itself

first off we need an item, notice how we are setting ped components, i used this website to help me find the bag 
```
https://wiki.rage.mp/index.php?title=Bags_and_Parachutes
```


Now we have the components and all the info we need, the base of making the bag appear is done with the below native
```
https://docs.fivem.net/natives/?_0xD4F7B05C
``` 

So for our use case of getting a black bag, 
```
SetPedComponentVariation(
	ped: Ped, 
	componentId: number, 
	drawableId: number, 
	textureId: number, 
	paletteId: number
);
```
We will be using ```cache.ped``` as our ped because we use ox_lib in this household
Comnponent is 5 for the bags
Drawable is 82
Texture id is 0

we are not using the paletteid in this, this is our final native
```
SetPedComponentVariation(cache.ped, 5, 82, 0, 0);
```

Now that you understand how the item was created to show an item, I will show you the opposite to take it off
```
SetPedComponentVariation(cache.ped, 5, 0, 0, 0);
```
Notice instead of 82 there is a 0, since 0 on the webpage is nothing, this is how we take off the bag


This is the item for your ox_inventory items.lua, notice the natives from above and how they are used

```
['largebag'] = {
		label = 'Large Duffle Bag',
		weight = 220,
		stack = false,
		consume = 0,
		client = {
			add = function(total)
				if total > 0 then
					SetPedComponentVariation(cache.ped, 5, 82, 0, 0);
				end
			end,
	
			remove = function(total)
				if total < 1 then
					SetPedComponentVariation(cache.ped, 5, 0, 0, 0);
				end
			end
		}
	},
  ```
  This item will check if you have more then 1, if you do the bag will be displayed
  
  
  So how to make it a usable inventory, easy when using ox_inventory
  
  Head to modules/items/server.lua
  
  Right up top here is the list of containers
  ```
  Items.containers = {
	['paperbag'] = {
		size = {5, 1000},
		blacklist = {
			['testburger'] = true -- No burgers!
		}
	},
	['pizzabox'] = {
		size = {1, 1000},
		whitelist = {
			['pizza'] = true -- Pizza box for pizza only
		}
	},
}
```
 Lets add our bag to it
 
 ```
 Items.containers = {
	['paperbag'] = {
		size = {5, 1000},
		blacklist = {
			['testburger'] = true -- No burgers!
		}
	},
	['pizzabox'] = {
		size = {1, 1000},
		whitelist = {
			['pizza'] = true -- Pizza box for pizza only
		}
	},
	['largebag'] = {
		size = {10, 100000},
	}
}
```
The size is 10 slots, 100000 weight

Now the bag is usable as an inventory, last but not least how to get the bag.
```
{ name = 'largebag', price = 300 },
```
Add this to any store you have set up in data/shops.lua

Hopefully you can expand on this and make awesome and inspiring projects of your own!

AddEventHandler('esx:onPlayerSpawn', function()
    local count = exports.ox_inventory:Search('count', 'largebag')
    if count >= 1 then
        SetPedComponentVariation(cache.ped, 5, 82, 0, 0);
    end
end)

THIS IS FOR PLAYERSPAWN TO CHECK ON LOAD SO THE BAG APPEARS, YOUR CORE MIGHT DO IT DIFF, THIS IS HOW ESX DOES IT