KuzQuality - FiveM Documentation
Webstore
  • KuzQuality - FiveM Scripts
  • Useful links
    • KuzQuality.com | Shop now
    • Our Discord
  • General
    • Common issues
    • Frequently asked questions
    • Updating server artifacts
    • Installation basics
  • RESOURCES
    • Premium Resources
      • Shell Creator
        • Config
        • Installation Guide
        • Video guide
        • API
          • Server
          • Client
      • Cocaine Production
        • Config
        • Installation Guide
      • Roof boxes & bike racks
        • Config
        • Installation Guide
        • API
      • Meth Cooking
        • Config
        • Installation Guide
      • Private islands
        • Config
        • Installation Guide
      • Real offroad physics
        • Config
        • Installation Guide
        • API
      • Placeable items
        • Config
        • Inventory integrations
        • Installation Guide
      • Car Dyno
        • Config
        • Installation Guide
      • Outfit Bag 2.0
        • Config
        • Installation Guide
      • Realistic wheel damage
        • Config
      • Smash 'n Grab 2.0
        • Config
        • Installation Guide
      • Animation Suggestions
        • Config
        • Installation Guide
      • Smugglers Heist
        • Config
        • Installation Guide
      • Car Heist
        • Config
      • Towing & Winching
        • Config
        • Installation Guide
      • Security Systems
        • Config
        • Developer Docs
      • Drift Tires
        • Config
        • Installation Guide
      • Engine Swaps [ESX]
        • Config
      • Engine Swaps [QBCore]
        • Config
      • Islands Generator
        • Config
        • Installation Guide
      • Brake Overheating
        • Config
        • Installation Guide
      • Drift Smoke
        • Config
      • Advanced Ped Looting
        • Config
        • Installation Guide
      • Bike Jump Ability
        • Config
        • Installation Guide
      • Hideouts 2.0
        • Config
      • Detective Tools
        • Config
      • Classic Outfit Bag
        • Config
      • Traction Control Toggle
        • Config
      • Car Lift
        • Config
      • Vehicle Towing
        • Config
      • RGB Controller (Full)
        • Config
      • Diving [ESX]
        • Config
      • Diving [QBCore]
        • Config
    • Free Resources
      • Prop Placer
        • Config
      • Nightclub Heist
        • Config
      • Basic Security Lasers
        • Config
        • Developer Docs
      • Advanced Airdrop
        • Config
      • Smooth Throttle Control
        • Config
      • Better rollbacks & handbrake turns
        • Config
      • Wild Cannabis (Loot Areas Example)
        • Config
      • RGB Controller (Basic)
        • Config
      • Dragy
        • Config
      • Easter Egg Hunt
        • Config
      • Loot Areas
        • Config
        • Developer docs
  • KQ Link
    • KQ Link | Installation guide
    • Using Git
    • Developer reference
      • Exports
        • Server
        • Client
Powered by GitBook
On this page
  • KuzQuality | Placeable items
  • Adding "Place" options to your inventory system
  • qb-inventory (new)
  • qb-inventory (old)
  • ps-inventory
  • qs-inventory (Quasar) (Only v2)
  • es_extended (default inventory)
  • lj-inventory
  • esx_inventoryhud
  1. RESOURCES
  2. Premium Resources
  3. Placeable items

Inventory integrations

KuzQuality | Placeable items

Adding "Place" options to your inventory system


qb-inventory (new)

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

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

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

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

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

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

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)

Add the following to line to your locale

['place'] = 'place',

lj-inventory

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

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

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

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,
	    }));
        }
    });
PreviousConfigNextInstallation Guide

Last updated 5 months ago