|
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. Here is some example code that sets some prop values.
@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