# Installation

{% hint style="danger" %}
Please go through each step carefully and allow enough time. Support tickets opened due to simple errors will be forwarded to the documentation.
{% endhint %}

### 1. Download

Download the latest version of the script from your [keymaster account](https://keymaster.fivem.net/).

### 2. Framework adjustments

{% tabs %}
{% tab title="QB" %}
***a)*** Open ***qb-clothing/client/main.lua*** and insert this code snipped.

```lua
-- Exports for gp_Clothingshop
exports('SaveSkin', SaveSkin)
exports('ChangeVariation', ChangeVariation)
-- end of exports for gp_Clothingshop
```

***b)*** Navigate to  ***qb-clothing/config.lua***\
     Remove  every shop you do not need in Config.Shops.\
     Remove every wardrobe you dont need in Config.OutfitChangers.\
     Remove every clothingroom you dont need in Config.ClothingRooms. 

***c)*** Restart your Server to apply the changes!\
     Some Scripts have qb-clothing as dependency. So do not just restart the Script!
{% endtab %}

{% tab title="ESX" %}
{% hint style="success" %}
No Framework adjustments needed!
{% endhint %}
{% endtab %}
{% endtabs %}

### 3. Insert SQL

{% tabs %}
{% tab title="QB" %}

```sql
# Insert SQL to your database

ALTER TABLE player_outfits
ADD outfitCode BIGINT,
ADD outfitCodePrice INT;
```

{% endtab %}

{% tab title="ESX" %}
{% hint style="warning" %}
First of all, please check whether you have a user\_clothes table. If this is NOT the case, please execute this SQL, which adds the corresponding table to your database.
{% endhint %}

```sql
# Only need if you DO NOT have a user_clothes table!

CREATE TABLE IF NOT EXISTS `user_clothes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `identifier` varchar(46) DEFAULT NULL,
  `name` varchar(60) DEFAULT NULL,
  `clothesData` longtext DEFAULT NULL,
  `outfitCode` bigint(20) DEFAULT NULL,
  `outfitCodePrice` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
```

{% hint style="warning" %}
If you have a user\_clothes table then use the following SQL
{% endhint %}

```sql
# SQL if you already have a user_clothes table

ALTER TABLE user_clothes
ADD outfitCode BIGINT,
ADD outfitCodePrice INT;
```

{% endtab %}
{% endtabs %}

Restart your server in order to apply database changes.

### 4. Set configuration file

Go through the ***gp\_Clothingshop/configs/config.lua*** file step by step and adjust it to suit your needs. \
All points are described in the file and should be clear so far. 

### 5. Translate the Script

{% hint style="info" %}
The script must be translated at several points.
{% endhint %}

a) Translation of ***gp\_Clothingshop/locales/de.lua*** or ***gp\_Clothingshop/locales/en.lua*** or create a new\
     one like the other ones.

b) Translation of ***gp\_Clothingshop/locales/ui\_translations.js***\
     This file contains one of two halves for the translation of the UI.\
     Simply translate this file to your liking.

c) The second half of the UI translation must be translated in ***gp\_Clothingshop/web/index.html***.\
     This file contains the basic structure of the UI. Translate the remaining parts.

{% hint style="warning" %}
It is quite possible that I have overlooked translations myself and they are still in the encrypted files. If this is the case, please open a ticket on my [Support Discord](https://discord.gg/zRg8HdSH5W) and I will take care of it. Thanks!
{% endhint %}

### 6. Explanation of Config.js

You can create clothing stores in the in-game creator. There are 3 drop-down menus for the *clothing categories, blacklist and clothing categories that can be hidden.*

{% tabs %}
{% tab title="ClothingCategories" %}
Here is a small excerpt of ***ClothingCategories***.

```lua
ClothingCategories: {
    basic: {
        1: {
            name: 'helmet_1',
            label: 'Helmet',
            price: 100,
            defaultPerspective: 'head',
        },
        2: {
            name: 'glasses_1',
            label: 'Glasses',
            price: 100,
            defaultPerspective: 'head',
        }
    }
},
```

a) “basic” is the name of the setting.

b) The added categories must be numbered consecutively.

c) Each category must contain a name, label, price and defaultPerspective.

<table><thead><tr><th width="94"></th><th width="151">name</th><th>label</th><th>price</th><th>defaultPerspective</th></tr></thead><tbody><tr><td>data typ</td><td>string</td><td>string</td><td>number</td><td>string or nil</td></tr><tr><td>info</td><td>The componentID of the clothing component.</td><td>Label what is displayed in the clothing store. </td><td>The price that is charged.</td><td>The camera setting that is set when the category is selected.</td></tr></tbody></table>

***Example of a new Setting named "mask":***

<pre class="language-lua" data-full-width="true"><code class="lang-lua">ClothingCategories: {
    basic: {
        1: {
            name: 'helmet_1',
            label: 'Helmet',
            price: 100,
            defaultPerspective: 'head',
        },
        2: {
            name: 'glasses_1',
            label: 'Glasses',
            price: 100,
            defaultPerspective: 'head',
        }
    },
    mask: {
        1: {
            name: 'mask_1',
            label: 'Masks',
            price: 250,
            defaultPerspective: 'head',
        }
<strong>    }
</strong>}
</code></pre>

{% endtab %}

{% tab title="ClothingBlacklist" %}
Here is a small excerpt of ***ClothingBlacklist***.

<pre class="language-lua"><code class="lang-lua"><strong>ClothingBlacklist: {
</strong>    basic: {
        male: {
            tshirt_1: [10, 17, 21],
        },
        female: {
            tshirt_1: [18],
        },
    }
},
</code></pre>

a) “basic” is the name of the setting.

b) Each setting **must** contain both “male” and “female”, even if it is empty.

c) The individual componentIDs can now be added. The numbers that are listed in black can simply be separated by a comma.

***Example of a new Setting named "noCopClothing":***

```lua
ClothingBlacklist: {
    basic: {
        male: {
            tshirt_1: [10, 17, 21],
        },
        female: {
            tshirt_1: [18],
        },
    },
    noCopClothing: {
        male: {
            tshirt_1: [71, 30, 90, 102],
            torso_1: [24, 68, 83]
        },
        female: {
            tshirt_1: [72, 29, 89, 103],
            torso_1: [19, 66, 53]
        },
    }
},
```

{% hint style="danger" %}
The setting for noCopClothing is just an example! The numbers and categories are randomly selected and are for demonstration purposes only!
{% endhint %}
{% endtab %}

{% tab title="CategoriesToHide" %}
Here is a small excerpt of ***CategoriesToHide.***

<pre class="language-lua"><code class="lang-lua"><strong>CategoriesToHide: {
</strong>    basic: {
        1: {
            name: 'helmet_1',
        },
        2: {
            name: 'mask_1',
        },
    },
},
</code></pre>

a) “basic” is the name of the setting.

b) The added categories must be numbered consecutively.

c) "name" is the componentID that should be able to be hidden.

***Example of a new Setting named "noHelemt":***

```lua
CategoriesToHide: {
    basic: {
        1: {
            name: 'helmet_1',
        },
        2: {
            name: 'mask_1',
        },
    },
    noHelemt: {
        1: {
            name: 'helmet_1',
        },
    }
},
```

{% endtab %}
{% endtabs %}

### 7. Change Logo for clothingshops

The logo that is displayed in the clothing stores is located in gp\_Clothingshop/configs as logo.png.

You can change the logo as you wish.

{% hint style="danger" %}
Just make sure that the name is exactly "logo.png"
{% endhint %}