Skip to main content

What are the available props for the product picker?

Prop Type Description
get-products-url String This is the only required prop. This is the URL for the API to get the products from. It’s common to set this value to {{ route('admin.catalog.products.picker') }}.
image-url-prefix String 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 String 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 String 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 Boolean
pick-product Boolean This is a boolean that defaults to false. When true, products will be allowed to be selected as well as variants.
product-only Boolean This is a boolean that defaults to false. When true, variants will not be listed and not selectable.
pick-only Boolean This is a boolean that defaults to false. When true, variants will not need to be in stock to be selectable.
needs-quantity Boolean This is a boolean that defaults to true. When false, a quantity will not be able to be set for the selected variants/products.
emit-image Boolean This is a boolean that defaults to false. When true, the products/variants image will be emitted when selected.
emit-sku Boolean This is a boolean that defaults to false. When true, the products/variants sku will be emitted when selected.
emit-model Boolean This is a boolean that defaults to false. When true, the products/variants model will be emitted when selected.
emit-name Boolean This is a boolean that defaults to false. When true, the products/variants name will be emitted when selected.
emit-price Boolean This is a boolean that defaults to false. When true, the products/variants price will be emitted when selected.

Example

You can make use of the props like you usually would with a Vue component

@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') }}"
                       :max-selection="5"
                       :pick-product="true"
                       :emit-name="true"
                       :emit-model="true"
                       :emit-sku="true">
           <a href="#" @click.prevent="picker.open" class="btn">Add Product</a>
       </product-picker>
   </div>
@endsection
Back to top