Product Picker

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:

@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

Prop
 Type
 Default
 Required
resource-name
 string
 products No
singular-resource-name
 string
 product No
get-products-url
 string
 - Yes
initial-parameters
 object
 {} No
initial-selection
 object
 {} No
image-url-prefix
 string
 window.ImageFactory['60']
 No
no-image-url
 string
 window.ImageFactory['no-image']
 No
action-name
 string
 Add Products No
clear-selected-after-emit
 bool
 true
 No
params
 object
 {} No
pick-product
 bool
 false
 No
product-only
 bool
 false
 No
pick-only
 bool
 false
 No
needs-quantity
 bool
 true
 No
results-accessor
 string results No
emit-image
 bool
 false
 No
emit-sku
 bool false
 No
emit-model
 bool
 false
 No
emit-name
 bool
 false
 No
emit-price
 bool
 false
 No
emit-raw-price
 bool
 false
 No
emit-currency
 bool
 false
 No
emit-all
 bool
 false
 No
max-selection
 ?int
 null
 No
show-top-slot
 bool
 true
 No
default-search-term
 ?string
 null
 No
show-customer-price
 bool
 false
 No
show-cost-price
 bool
 false
 No

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([
    'country_code' => $countryCode,
    'zone_id' => $zoneId,
    'postcode' => $postcode,
]) }}

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

Event
 Description
products-selected
 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.
selected
 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.