# How do I use the product picker?

The Product Picker provides a modal that lets users select a single or many products/variants with quantities.

Parts of the admin use this, e.g. the MOTO Order screen (create order page).

You can use the `<product-picker></product-picker>` Vue component from any admin view inside of your module that extends the official admin layout (`admin::layouts.main`).

When using the Product Picker you need to provide a url for the `get-products-url` prop (this value is usually always the `admin.catalog.products.picker` route) and you need to provide a slot for the button that will be used to open the picker.

For example:

```html
@extends('admin::layouts.main')

@section('content')
   <h2>
       <a href="{{ route('admin.modules') }}" class="btn">@include('admin::icons.back') Back</a>
       <span class="ml-4">My Module</span>
   </h2>

   <div class="card">
       <product-picker v-slot="picker"
                       get-products-url="{{ route('admin.catalog.products.picker') }}">
           <a href="#" @click.prevent="picker.open" class="btn">Add Product</a>
       </product-picker>
   </div>
@endsection
```

---

## Props

<table border="1" id="bkmrk-prop-type-default-re" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 25%;"></col><col style="width: 25%;"></col><col style="width: 25%;"></col><col style="width: 25%;"></col></colgroup><tbody><tr><td>**Prop**  
</td><td>**Type**  
</td><td>**Default**  
</td><td>**Required**  
</td></tr><tr><td>`resource-name`  
</td><td>`string`  
</td><td>products</td><td>No</td></tr><tr><td>`singular-resource-name`  
</td><td>`string`  
</td><td>product</td><td>No</td></tr><tr><td>`get-products-url`  
</td><td>`string`  
</td><td>-</td><td>Yes</td></tr><tr><td>`initial-parameters`  
</td><td>`object`  
</td><td>`{}`</td><td>No</td></tr><tr><td>`initial-selection`  
</td><td>`object`  
</td><td>`{}`</td><td>No</td></tr><tr><td>`image-url-prefix`  
</td><td>`string`  
</td><td>`window.ImageFactory['60']`  
</td><td>No</td></tr><tr><td>`no-image-url`  
</td><td>`string`  
</td><td>`window.ImageFactory['no-image']`  
</td><td>No</td></tr><tr><td>`action-name`  
</td><td>`string`  
</td><td>Add Products</td><td>No</td></tr><tr><td>`clear-selected-after-emit`  
</td><td>`bool`  
</td><td>`true`  
</td><td>No</td></tr><tr><td>`params`  
</td><td>`object`  
</td><td>`{}`</td><td>No</td></tr><tr><td>`pick-product`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`product-only`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`pick-only`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`needs-quantity`  
</td><td>`bool`  
</td><td>`true`  
</td><td>No</td></tr><tr><td>`results-accessor`  
</td><td>`string`</td><td>results</td><td>No</td></tr><tr><td>`emit-image`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`emit-sku`  
</td><td>`bool`</td><td>`false`  
</td><td>No</td></tr><tr><td>`emit-model`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`emit-name`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`emit-price`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`emit-raw-price`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`emit-currency`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`emit-all`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`max-selection`  
</td><td>`?int`  
</td><td>`null`  
</td><td>No</td></tr><tr><td>`show-top-slot`  
</td><td>`bool`  
</td><td>`true`  
</td><td>No</td></tr><tr><td>`default-search-term`  
</td><td>`?string`  
</td><td>`null`  
</td><td>No</td></tr><tr><td>`show-customer-price`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr><tr><td>`show-cost-price`  
</td><td>`bool`  
</td><td>`false`  
</td><td>No</td></tr></tbody></table>

### `resource-name`

This is used in various places in the product picker UI, e.g.: `Loading <span v-text="resourceName"></span>`. This is set by default to "products".

### `singular-resource-name`

This is used in various places in the product picker UI, e.g.: `:title="picker.isSelected('p:' + product.id + '-v:') ? ('Remove ' + singularResourceName.toLowerCase()) : ('Add ' + singularResourceName.toLowerCase())"`. This is set by default to "product".

### `get-products-url`

This is the only strictly required parameter, it is the URL that the products data will be fetched from. It’s common to set this value to `{{ route('admin.catalog.products.picker') }}`.

### `initial-parameters`

The initial parameters, e.g. `{ active_status: 1 }` will apply the active filter by default. Defaults to `{}`.

### `initial-selection`  


The initial selection of products. Defaults to `{}`.

### `image-url-prefix`

This is the image factory prefix to use for the product image URLs. This is set by default to use `{{ image_factory(60, 60)->contain() }}`.

### `no-image-url`

This is the image URL to use when a product doesn’t have an image. This is set by default to use `{{ asset('modules/aerocommerce/admin/no-image.svg') }}`.

### `action-name`

This is the button text shown on the confirm button of the product picker modal (bottom right). This is set by default to “Add Products”.

### `clear-selected-after-emit`

This clears selected products after the data has been emitted (happens after the selection has been confirmed). This is set to `true` by default.

### `params`

This is sent alongside the fetch request for products as `params`, e.g.:

```
{{ json_encode([<br></br>    'country_code' => $countryCode,<br></br>    'zone_id' => $zoneId,<br></br>    'postcode' => $postcode,<br></br>]) }}
```

### `pick-product`

When `true` products will be allowed to be selected as well as variants. This is set to `false` by default.

### `product-only`

When `true` variants will not be listed and not selectable.This is set to `false` by default.

### `pick-only`

When `true` variants will not need to be in stock to be selectable. This is set to `false` by default.

### `needs-quantity`

When `false` a quantity will not be able to be set for the selected variants/products. This is set to `true` by default.

### `results-accessor`

The property that the data resides (returned from the `get-products-url`). Defaults to "results".

### `emit-image`

When `true` the products/variants image will be emitted when selected. This is set to `false` by default.

### `emit-sku`

When `true` the variants sku will be emitted when selected. This is set to `false` by default.

### `emit-modal`

When `true` the products/variants model will be emitted when selected. This is set to `false` by default.

### `emit-name`

When `true` the products/variants name will be emitted when selected. This is set to `false` by default.

### `emit-price`

When `true` the products/variants price will be emitted when selected. This is set to `false` by default.

### `emit-raw-price`

When `true` the products/variants raw price will be emitted when selected. This is set to `false` by default.

### `emit-currency`

When `true` the currency of the products/variants price will be emitted when selected. This is set to `false` by default.

### `emit-all`

When `true` all products/variants data will be emitted when selected. This is set to `false` by default.

### `max-selection`

The maximum number of products that can be selected. This is set to `null` by default, meaning there is no limit.

### `show-top-slot`

When `false` the header of the products picker modal is hidden. This is set to `true` by default.

### `default-search-term`

The default search term applied. This is set to `null` by default, meaning none.

### `show-customer-price`

When `true` shows the prices as the customer (resolved from the current cart instance) would see them. This is set to `false` by default.

### `show-cost-price`

When `true` shows a "Cost Price" column next to the "Stock" column. This is set to `false` by default.

---

## Events

<table border="1" id="bkmrk-event-description-pr" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td>**Event**  
</td><td>**Description**  
</td></tr><tr><td>`products-selected`  
</td><td>This event emits when the action button is clicked (bottom right of the modal) and provides an array of all of the selected products/variants.</td></tr><tr><td>`selected`  
</td><td>This event emits when the action button is clicked (bottom right of the modal) and is emitted for each product/variant that has been selected - only a single product/variant is provided.</td></tr></tbody></table>