|
4 | 4 | * |
5 | 5 | * Expects $product ( array|null ). |
6 | 6 | */ |
7 | | -$product = $product ?? null; |
8 | | -$price = $product !== null ? number_format( ( (int) ( $product['price_cents'] ?? 0 ) ) / 100, 2, '.', '' ) : ''; |
9 | | -$active = $product === null ? true : ( (int) ( $product['active'] ?? 0 ) === 1 ); |
| 7 | +$product = $product ?? null; |
| 8 | +$price = $product !== null ? number_format( ( (int) ( $product['price_cents'] ?? 0 ) ) / 100, 2, '.', '' ) : ''; |
| 9 | +$active = $product === null ? true : ( (int) ( $product['active'] ?? 0 ) === 1 ); |
| 10 | +$imageUrl = (string) ( $product['image_url'] ?? '' ); |
10 | 11 | ?> |
11 | 12 | <div class="mb-3"> |
12 | 13 | <label for="name" class="form-label">Name <span class="text-danger">*</span></label> |
|
34 | 35 | </div> |
35 | 36 |
|
36 | 37 | <div class="mb-3"> |
37 | | - <label for="image_url" class="form-label">Image URL</label> |
38 | | - <input type="text" class="form-control" id="image_url" name="image_url" value="<?= htmlspecialchars( (string) ( $product['image_url'] ?? '' ) ) ?>" placeholder="https://..."> |
39 | | - <div class="form-text">Paste a media URL or external image link.</div> |
| 38 | + <label for="image_url" class="form-label">Image</label> |
| 39 | + <div class="input-group"> |
| 40 | + <input type="text" class="form-control" id="image_url" name="image_url" value="<?= htmlspecialchars( $imageUrl ) ?>" placeholder="Enter URL or browse from media library"> |
| 41 | + <button type="button" class="btn btn-outline-secondary" onclick="openMediaPicker('image_url')"> |
| 42 | + <i class="bi bi-images"></i> Browse |
| 43 | + </button> |
| 44 | + </div> |
| 45 | + <div class="mt-2"> |
| 46 | + <img id="image_url_preview" class="img-thumbnail <?= $imageUrl === '' ? 'd-none' : '' ?>" style="max-width: 300px;" src="<?= htmlspecialchars( $imageUrl ) ?>" alt="Product image preview"> |
| 47 | + </div> |
| 48 | + <div class="form-text">Pick from the media library, upload a new image, or paste a URL.</div> |
40 | 49 | </div> |
| 50 | +<script> |
| 51 | +document.getElementById('image_url').addEventListener('change', function() { |
| 52 | + const preview = document.getElementById('image_url_preview'); |
| 53 | + const url = this.value.trim(); |
| 54 | + if( url ) { preview.src = url; preview.classList.remove('d-none'); } |
| 55 | + else { preview.classList.add('d-none'); } |
| 56 | +}); |
| 57 | +</script> |
41 | 58 |
|
42 | 59 | <div class="mb-3"> |
43 | 60 | <label for="description" class="form-label">Description</label> |
|
0 commit comments