# Shop System

## Overview

View Video Below at 0:38s for Shop Promo.

{% embed url="<https://streamable.com/ehlgbr>" %}

The Shop System is a Simple Buy/Sell shop functionality that gives the developer freedom to add multiple unique shops, each with their own items, stock levels and prices.

## Setup

To setup a shop is super easy:<br>

1. Drag in the ShopCanvas prefab to your scene.
2. Follow these Shop Specific Instructions here: [#shop-specific-instructions](https://malbersanimations.gitbook.io/animal-controller/updating-from-v1.1.1-to-v1.2-instructions#shop-specific-instructions "mention")
3. Add one of the Shop Prefabs into your scene.&#x20;
4. Setup the shop with items, stock amounts and prices:

<figure><img src="https://963537199-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lzhr1XSMzMqNXjRnNlb%2Fuploads%2Fj6AJIUlb2ZsVssve0Ae4%2Fimage.png?alt=media&#x26;token=aa5cf995-507d-4d51-917c-de57296fa24e" alt=""><figcaption></figcaption></figure>

That's it! You should now be able to use your shop as long as you've followed all the previous tutorials about setting up interactions -> [interactable](https://malbersanimations.gitbook.io/animal-controller/global-components/interactable "mention") -> [interactor](https://malbersanimations.gitbook.io/animal-controller/global-components/interactor "mention")

## Using/Not Using Dialogue

By default the Shop will use some dialogue to open the menu to show the buttons where you can choose to buy, or to sell:

<figure><img src="https://963537199-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lzhr1XSMzMqNXjRnNlb%2Fuploads%2FjiIt4jYwmrU79cElUAMI%2Fimage.png?alt=media&#x26;token=7d52904c-839c-4be9-ae8a-fc24f4e8c1c4" alt=""><figcaption></figcaption></figure>

If you do not wish to use this dialogue and want to use your own, this is how it works and how to amend it:\
\
When opening the shop by interacting with the zone, it calls: Shop.OpenShopUI via the OnZoneActive event:<br>

<figure><img src="https://963537199-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lzhr1XSMzMqNXjRnNlb%2Fuploads%2FnxSmexOGyd8lJqA49fDj%2Fimage.png?alt=media&#x26;token=dc393a2f-4455-410d-a5ed-7436b43bc283" alt=""><figcaption></figcaption></figure>

This in turn will Invoke the OpenShop event on the shop itself:<br>

<figure><img src="https://963537199-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lzhr1XSMzMqNXjRnNlb%2Fuploads%2FfnWCLzw2XwLQATptGJrA%2Fimage.png?alt=media&#x26;token=89154801-b239-4bbb-a934-c21e3eca9f32" alt=""><figcaption></figcaption></figure>

Now at this stage, IF you want to continue using the dialogue, you can as this links directly to an event listener on the Dialogue Canvas:<br>

<figure><img src="https://963537199-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lzhr1XSMzMqNXjRnNlb%2Fuploads%2FMPppESBQnBKNerKRF5zz%2Fimage.png?alt=media&#x26;token=9bb5659b-21a6-45ac-b51b-bf064d76d1ab" alt=""><figcaption></figcaption></figure>

This then directly links to code within the UIManager and calls the ChangeUIState method which then opens the Dialogue etc.\
\
If you want to skip this, then what you need to do is the following:\
From Invoking the OpenShop Event previously, have an event listener that listens to this (similar to the above with the dialogue) and then call either:\
\
ShopBuyUIOpen - For opening the Shop UI

ShopBuyUIClosed - For Closing the Shop UI

InventorySellingUIOpen - For Opening the Inventory with selling mode turned on

InventorySellingUIClosed - For Closing the Inventory with selling mode turned on\
\
An example of this would be:<br>

<figure><img src="https://963537199-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lzhr1XSMzMqNXjRnNlb%2Fuploads%2Ft7tqTWBcmalYuiBwRDvC%2Fimage.png?alt=media&#x26;token=6abbe31f-b7e1-435a-8567-a97bf166bbcb" alt=""><figcaption></figcaption></figure>