Inventory integrations
KuzQuality | Placeable items
Adding "Place" options to your inventory system
qb-inventory (new)
qb-inventory/html/index.html
qb-inventory/html/index.html
add the following line between lines 194 and 195
<li @click="placeItem(contextMenuItem)">Place</li>
Example:
<ul v-if="showContextMenu" class="context-menu" :style="{ top: contextMenuPosition.top, left: contextMenuPosition.left }">
<li v-if="contextMenuItem.useable" @click="useItem(contextMenuItem)">Use</li>
<li @click="placeItem(contextMenuItem)">Place</li>
<li @mouseover="showSubmenu = true" @mouseleave="showSubmenu = false">
qb-inventory/html/app.js
qb-inventory/html/app.js
add the following code between lines 623 and 624
async placeItem(item) {
if (!item) {
return;
}
const playerItemKey = Object.keys(this.playerInventory).find((key) => this.playerInventory[key] && this.playerInventory[key].slot === item.slot);
if (playerItemKey) {
try {
await axios.post("https://kq_placeable_items/HookPlaceItem", {
item: item.name,
size: 1,
});
if (item.shouldClose) {
this.closeInventory();
}
} catch (error) {
console.error("Error placing the item: ", error);
}
}
this.showContextMenu = false;
},
qb-inventory (old)
qb-inventory/html/ui.html
qb-inventory/html/ui.html
add the following line between lines 36 and 37
<div class="inv-option-item" id="item-kq-place"><p>PLACE</p></div>
Example:
<div class="inv-options">
<div class="inv-options-list">
<input type="number" id="item-amount" class="inv-option-item" min=1 max="10000" placeholder="Amount" pattern="[0-9]" onfocus="this.value=''" placeholder="" oninput="validity.valid||(value='');"></input>
<div class="inv-option-item" id="item-use"><p>USE</p></div>
<div class="inv-option-item" id="item-kq-place"><p>PLACE</p></div>
<div class="inv-option-item" id="item-give"><p>GIVE</p></div>
<div class="inv-option-item" id="inv-close"><p>CLOSE</p></div>
</div>
</div>
qb-inventory/html/js/app.js
qb-inventory/html/js/app.js
At the very of the file. Add the following
$("#item-kq-place").droppable({
hoverClass: "button-hover",
drop: function(event, ui) {
setTimeout(function() {
IsDragging = false;
}, 300);
formData = ui.draggable.data("item");
$.post(
"https://kq_placeable_items/HookPlaceItem",
JSON.stringify({
item: formData.name,
size: formData.amount || 1,
})
);
Inventory.Close();
},
});
ps-inventory
ps-inventory/html/ui.html
ps-inventory/html/ui.html
add the following line between lines 63 and 64
<div class="inv-option-item" id="item-place"><p>Place</p></div>
Example:
<div class="inv-option-item" id="item-give"><p>Give</p></div>
<div class="inv-option-item" id="item-place"><p>Place</p></div>
<div class="combine-option-container">
<div class="btn-combine CombineItem"><p>Combine</p></div>
<div class="btn-combine SwitchItem"><p>Switch</p></div> -->
</div>
ps-inventory/html/js/app.js
ps-inventory/html/js/app.js
At the very of the file. Add the following
$("#item-place").droppable({
hoverClass: "button-hover",
drop: function (event, ui) {
setTimeout(function () {
IsDragging = false;
}, 300);
console.log('on drop placement');
fromData = ui.draggable.data("item");
amount = $("#item-amount").val();
console.log(amount, fromData.name, JSON.stringify(fromData));
if (amount == 0) {
amount = fromData.amount;
}
$.post(
"https://kq_placeable_items/HookPlaceItem",
JSON.stringify({
item: fromData.name,
size: parseInt(amount),
})
);
},
});
qs-inventory (Quasar) (Only v2)
qs-inventory will work automatically. No changes needed. Simply start this script after qs-inventory (Make sure that your qs-inventory is up to date)
If you are using the v3 version. It is not possible for us to add an integration. You will need to contact Quasar
es_extended (default inventory)
This might be a bit different depending on the version of your es_extended. Make sure to look at the surrounding lines of code around the new lines provider in the example
es_extended/client/functions.lua
es_extended/client/functions.lua
Add the following line to the line 819
table.insert(elements, {label = _U('place'), action = 'kq-place', type = data.current.type, value = data.current.value})
Example:
if data.current.usable then
table.insert(elements, {label = _U('use'), action = 'use', type = data.current.type, value = data.current.value})
end
table.insert(elements, {label = _U('place'), action = 'kq-place', type = data.current.type, value = data.current.value})
if data.current.canRemove then
if player ~= -1 and distance <= 3.0 then
table.insert(elements, {label = _U('give'), action = 'give', type = data.current.type, value = data.current.value})
end
table.insert(elements, {label = _U('remove'), action = 'remove', type = data.current.type, value = data.current.value})
end
Add the following lines under the line 941 (originally 940)
elseif data1.current.action == 'kq-place' then
TriggerEvent('kq_materialize:client:hookPlaceItem', item, 1)
ESX.UI.Menu.CloseAll()
Example:
elseif data1.current.action == 'use' then
TriggerServerEvent('esx:useItem', item)
elseif data1.current.action == 'kq-place' then
TriggerEvent('kq_materialize:client:hookPlaceItem', item, 1)
ESX.UI.Menu.CloseAll()
elseif data1.current.action == 'return' then
ESX.UI.Menu.CloseAll()
ESX.ShowInventory()
es_extended/locales/en.lua
(or the locale you use)
es_extended/locales/en.lua
(or the locale you use)Add the following to line to your locale
['place'] = 'place',
lj-inventory
lj-inventory/html/js/app.js
lj-inventory/html/js/app.js
Add the following code at the bottom of the file
$("#item-place").droppable({
hoverClass: "button-hover",
drop: function(event, ui) {
setTimeout(function() {
IsDragging = false;
}, 300);
fromData = ui.draggable.data("item");
fromInventory = ui.draggable.parent().attr("data-inventory");
amount = $("#item-amount").val();
if (amount == 0) {
amount = fromData.amount;
}
$.post(
"https://kq_placeable_items/HookPlaceItem",
JSON.stringify({
item: fromData.name,
size: parseInt(amount),
})
);
},
});
lj-inventory/html/ui.html
lj-inventory/html/ui.html
Add the following line between lines 63 and 64 (Under the "item-give" element)
<div class="inv-option-item" id="item-place"><p>Place</p></div>
esx_inventoryhud
esx_inventoryhud/html/ui.html
esx_inventoryhud/html/ui.html
Add the following line between line 34 and 35
<div class="control" id="kq-place">Place</div>
Example:
<div class="controls-div">
<input type="number" class="control" id="count" value="1">
<div class="control" id="use"></div>
<div class="control" id="kq-place">Place</div>
<div class="control" id="give"></div>
<div class="control" id="drop"></div>
</div>
esx_inventoryhud/html/js/inventory.js
esx_inventoryhud/html/js/inventory.js
Add the following on the line 259
$('#kq-place').droppable({
hoverClass: 'hoverControl',
drop: function (event, ui) {
itemData = ui.draggable.data("item");
if (itemData == undefined) {
return;
}
itemInventory = ui.draggable.data("inventory");
if (itemInventory == undefined || itemInventory == "second") {
return;
}
closeInventory();
$.post("https://kq_placeable_items/HookPlaceItem", JSON.stringify({
item: itemData.name,
size: itemData.amount || 1,
}));
}
});
Last updated