Vendor Product Add and Edit page Multiple Image
This commit is contained in:
Jun Barroga
parent
89d0535af8
commit
8bd8211b3d
|
|
@ -111,6 +111,7 @@ $array = json_decode($result, true);
|
|||
<!-- Sidebar Category Block -->
|
||||
<div class="ec-sidebar-block">
|
||||
<div class="ec-vendor-block">
|
||||
<!-- 2024-02-12 Stacy deleted div with class "ec-vendor-block-items", and inserted vendor-profile-tabs.php -->
|
||||
<div class="ec-vendor-block-items">
|
||||
<ul>
|
||||
<li><a href="vendor-dashboard.php">Dashboard</a></li>
|
||||
|
|
@ -118,10 +119,13 @@ $array = json_decode($result, true);
|
|||
<li><a href="vendor-settings.php">Settings (Edit)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 2024-02-12 Stacy deleted div with class "ec-vendor-block-items", and inserted vendor-profile-tabs.php -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 02-15-2024 Jun Jihad Vendor Product Add and Edit page Multiple Image -->
|
||||
<div class="ec-shop-rightside col-lg-9 col-md-12">
|
||||
<div class="ec-vendor-dashboard-card">
|
||||
<div class="ec-vendor-card-body">
|
||||
|
|
@ -131,93 +135,109 @@ $array = json_decode($result, true);
|
|||
<div class="ec-vendor-main-img">
|
||||
<div class="avatar-upload">
|
||||
<div class="avatar-edit">
|
||||
<input type='file' id="imageUpload" class="ec-image-upload" accept=".png, .jpg, .jpeg" onchange="uploadProductImage()" />
|
||||
<input type='file' id="imageUpload" class="ec-image-upload" accept=".png, .jpg, .jpeg" multiple onchange="uploadProductImage()" />
|
||||
<label for="imageUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="avatar-preview ec-preview">
|
||||
<div class="imagePreview ec-div-preview">
|
||||
<?php
|
||||
if (isset($array['product_image'])) {
|
||||
if (isset($array['images'])) {
|
||||
$image_urls = explode(',', $array['images']);
|
||||
if (!empty($image_urls)) {
|
||||
$first_image_url = trim($image_urls[0]);
|
||||
?>
|
||||
<img class="ec-image-preview" src="<?php echo $array['product_image']; ?>" alt="edit" />
|
||||
<?php
|
||||
<img class="ec-image-preview" src="<?php echo $first_image_url; ?>" alt="edit" />
|
||||
<?php
|
||||
}
|
||||
} else {
|
||||
?>
|
||||
?>
|
||||
<img class="ec-image-preview" src="assets/images/product-image/vender-upload-preview.jpg" alt="edit" />
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="thumb-upload-set colo-md-12">
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload01" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="imageUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="assets/images/product-image/vender-upload-thumb-preview.jpg" alt="edit" />
|
||||
<?php
|
||||
if (isset($array['images'])) {
|
||||
$image_urls = explode(',', $array['images']);
|
||||
foreach ($image_urls as $index => $image_url) {
|
||||
$image_url = trim($image_url);
|
||||
?>
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload<?php echo $index + 1; ?>" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="thumbUpload<?php echo $index + 1; ?>"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="<?php echo $image_url; ?>" alt="edit" />
|
||||
<button class="delete-image-button" onclick="deleteImage('<?php echo $array['_id']; ?>', <?php echo $index; ?>)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
} else {
|
||||
?>
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="thumbUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="assets/images/product-image/vender-upload-thumb-preview.jpg" alt="edit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload02" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="imageUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="assets/images/product-image/vender-upload-thumb-preview.jpg" alt="edit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload03" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="imageUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="assets/images/product-image/vender-upload-thumb-preview.jpg" alt="edit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload04" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="imageUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="assets/images/product-image/vender-upload-thumb-preview.jpg" alt="edit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload05" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="imageUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="assets/images/product-image/vender-upload-thumb-preview.jpg" alt="edit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumb-upload">
|
||||
<div class="thumb-edit">
|
||||
<input type='file' id="thumbUpload06" class="ec-image-upload" accept=".png, .jpg, .jpeg" />
|
||||
<label for="imageUpload"><i class="fi-rr-edit"></i></label>
|
||||
</div>
|
||||
<div class="thumb-preview ec-preview">
|
||||
<div class="image-thumb-preview">
|
||||
<img class="image-thumb-preview ec-image-preview" src="assets/images/product-image/vender-upload-thumb-preview.jpg" alt="edit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<script>
|
||||
function deleteImage(productId, indexToDelete) {
|
||||
fetch('https://api.obanana.shop/api/v1/products/' + productId)
|
||||
.then(response => response.json())
|
||||
.then(product => {
|
||||
let imagesArray = product.images.split(',');
|
||||
if (indexToDelete >= 0 && indexToDelete < imagesArray.length) {
|
||||
imagesArray.splice(indexToDelete, 1);
|
||||
}
|
||||
const updatedImages = imagesArray.join(',');
|
||||
const payload = {
|
||||
images: updatedImages,
|
||||
};
|
||||
const token = '<?php echo $_SESSION["token"] ?>';
|
||||
return fetch('https://api.obanana.shop/api/v1/products/' + productId, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + token,
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('Image deleted successfully');
|
||||
location.reload();
|
||||
} else {
|
||||
console.error('Image deletion failed');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during image deletion:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -248,7 +268,6 @@ $array = json_decode($result, true);
|
|||
<div class="col-md-6">
|
||||
<label class="form-label">Parent Id</label>
|
||||
<select class="form-select" name="parent_id" id="variation-type-select">
|
||||
<!-- Your variation options go here -->
|
||||
<option value="" disabled selected>Select Product</option>
|
||||
<?php
|
||||
$products = productListVendor($vendorId);
|
||||
|
|
@ -346,31 +365,31 @@ $array = json_decode($result, true);
|
|||
<textarea class="form-control" rows="4" name="specifications"><?php echo $array['specifications'] ?></textarea>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Product Category</label>
|
||||
<select class="form-select" name="product_category" id="product_category">
|
||||
<option value="">Select Category</option>
|
||||
<option value="Electronics" <?php echo ($array['product_category'] === 'Electronics') ? 'selected' : ''; ?>>Electronics</option>
|
||||
<option value="Solar" <?php echo ($array['product_category'] === 'Solar') ? 'selected' : ''; ?>>Solar</option>
|
||||
<option value="E-bike" <?php echo ($array['product_category'] === 'E-bike') ? 'selected' : ''; ?>>E-bike</option>
|
||||
<option value="E-vehicle" <?php echo ($array['product_category'] === 'E-vehicle') ? 'selected' : ''; ?>>E-Vehicle</option>
|
||||
<option value="Appliance" <?php echo ($array['product_category'] === 'Appliance') ? 'selected' : ''; ?>>Appliance</option>
|
||||
<option value="Smart Home" <?php echo ($array['product_category'] === 'Smart Home') ? 'selected' : ''; ?>>Smart Home</option>
|
||||
<option value="Home" <?php echo ($array['product_category'] === 'Home') ? 'selected' : ''; ?>>Home</option>
|
||||
<option value="Heavy Equipment" <?php echo ($array['product_category'] === 'Heavy Equipment') ? 'selected' : ''; ?>>Heavy Equipment</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Shipping Fee</label>
|
||||
<input type="number" class="form-control" id="sfee" name="shipping_fee" value="<?php echo $array['shipping_fee'] ?>">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Product Status</label>
|
||||
<select class="form-select" name="status" id="status">
|
||||
<option value="">Select Product Status</option>
|
||||
<option value="Active" <?php echo ($array['status'] === 'Active') ? 'selected' : ''; ?>>Active</option>
|
||||
<option value="Inactive" <?php echo ($array['status'] === 'Inactive') ? 'selected' : ''; ?>>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="form-label">Product Category</label>
|
||||
<select class="form-select" name="product_category" id="product_category">
|
||||
<option value="">Select Category</option>
|
||||
<option value="Electronics" <?php echo ($array['product_category'] === 'Electronics') ? 'selected' : ''; ?>>Electronics</option>
|
||||
<option value="Solar" <?php echo ($array['product_category'] === 'Solar') ? 'selected' : ''; ?>>Solar</option>
|
||||
<option value="E-bike" <?php echo ($array['product_category'] === 'E-bike') ? 'selected' : ''; ?>>E-bike</option>
|
||||
<option value="E-vehicle" <?php echo ($array['product_category'] === 'E-vehicle') ? 'selected' : ''; ?>>E-Vehicle</option>
|
||||
<option value="Appliance" <?php echo ($array['product_category'] === 'Appliance') ? 'selected' : ''; ?>>Appliance</option>
|
||||
<option value="Smart Home" <?php echo ($array['product_category'] === 'Smart Home') ? 'selected' : ''; ?>>Smart Home</option>
|
||||
<option value="Home" <?php echo ($array['product_category'] === 'Home') ? 'selected' : ''; ?>>Home</option>
|
||||
<option value="Heavy Equipment" <?php echo ($array['product_category'] === 'Heavy Equipment') ? 'selected' : ''; ?>>Heavy Equipment</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Shipping Fee</label>
|
||||
<input type="number" class="form-control" id="sfee" name="shipping_fee" value="<?php echo $array['shipping_fee'] ?>">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Product Status</label>
|
||||
<select class="form-select" name="status" id="status">
|
||||
<option value="">Select Product Status</option>
|
||||
<option value="Active" <?php echo ($array['status'] === 'Active') ? 'selected' : ''; ?>>Active</option>
|
||||
<option value="Inactive" <?php echo ($array['status'] === 'Inactive') ? 'selected' : ''; ?>>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Product Tags <span>( Type and
|
||||
make comma to separate tags )</span></label>
|
||||
|
|
@ -409,104 +428,135 @@ $array = json_decode($result, true);
|
|||
function uploadProductImage() {
|
||||
var productId = '<?php echo $_SESSION['newProductId'] ?>';
|
||||
var fileInput = document.getElementById('imageUpload');
|
||||
var file = fileInput.files[0];
|
||||
var files = fileInput.files;
|
||||
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const img = new Image();
|
||||
img.onload = function() {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (files.length > 0) {
|
||||
var promises = [];
|
||||
var existingImages = [];
|
||||
|
||||
// Resize the image
|
||||
const maxWidth = 1200; // Set your desired maximum width
|
||||
const maxHeight = 1000; // Set your desired maximum height
|
||||
const aspectRatio = img.width / img.height;
|
||||
fetch('https://api.obanana.shop/api/v1/products/' + productId)
|
||||
.then(response => response.json())
|
||||
.then(product => {
|
||||
existingImages = product.images || [];
|
||||
existingImages = Array.isArray(existingImages) ? existingImages : [existingImages];
|
||||
existingImages = existingImages.filter(image => image);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching existing images:', error);
|
||||
});
|
||||
|
||||
let newWidth = img.width;
|
||||
let newHeight = img.height;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const reader = new FileReader();
|
||||
|
||||
if (img.width > maxWidth) {
|
||||
newWidth = maxWidth;
|
||||
newHeight = newWidth / aspectRatio;
|
||||
}
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
reader.onload = function(e) {
|
||||
const img = new Image();
|
||||
img.onload = function() {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const maxWidth = 1200;
|
||||
const maxHeight = 1000;
|
||||
const aspectRatio = img.width / img.height;
|
||||
let newWidth = img.width;
|
||||
let newHeight = img.height;
|
||||
|
||||
if (newHeight > maxHeight) {
|
||||
newHeight = maxHeight;
|
||||
newWidth = newHeight * aspectRatio;
|
||||
}
|
||||
if (img.width > maxWidth) {
|
||||
newWidth = maxWidth;
|
||||
newHeight = newWidth / aspectRatio;
|
||||
}
|
||||
|
||||
canvas.width = newWidth;
|
||||
canvas.height = newHeight;
|
||||
if (newHeight > maxHeight) {
|
||||
newHeight = maxHeight;
|
||||
newWidth = newHeight * aspectRatio;
|
||||
}
|
||||
|
||||
// Draw the image on the canvas
|
||||
ctx.drawImage(img, 0, 0, newWidth, newHeight);
|
||||
canvas.width = newWidth;
|
||||
canvas.height = newHeight;
|
||||
ctx.drawImage(img, 0, 0, newWidth, newHeight);
|
||||
|
||||
// Convert the canvas content to a new image file
|
||||
canvas.toBlob((blob) => {
|
||||
const resizedFile = new File([blob], file.name, {
|
||||
type: 'image/jpeg'
|
||||
});
|
||||
|
||||
// Continue with the rest of your upload logic using the resized file
|
||||
var formData = new FormData();
|
||||
formData.append('image_id', productId);
|
||||
formData.append('category', 'product');
|
||||
formData.append('image', resizedFile);
|
||||
|
||||
fetch('https://api.obanana.shop/api/v1/upload_image', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
console.error('File upload failed');
|
||||
throw new Error('File upload failed');
|
||||
}
|
||||
})
|
||||
.then(result => {
|
||||
const filename = result.filename;
|
||||
|
||||
const payload = {
|
||||
product_image: `https://api.obanana.shop/images/storage/product_uploads/${filename}`,
|
||||
};
|
||||
|
||||
console.log('Payload:', payload);
|
||||
const token = '<?php echo $_SESSION["token"] ?>';
|
||||
return fetch('https://api.obanana.shop/api/v1/products/' + productId, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + token,
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
canvas.toBlob((blob) => {
|
||||
const resizedFile = new File([blob], file.name, {
|
||||
type: 'image/jpeg'
|
||||
});
|
||||
})
|
||||
.then(secondResponse => {
|
||||
if (secondResponse.ok) {
|
||||
console.log('Second request successful');
|
||||
location.reload();
|
||||
} else {
|
||||
console.error('Second request failed');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during fetch:', error);
|
||||
});
|
||||
}, 'image/jpeg');
|
||||
};
|
||||
|
||||
img.src = e.target.result;
|
||||
};
|
||||
var formData = new FormData();
|
||||
formData.append('image_id', productId);
|
||||
formData.append('category', 'product');
|
||||
formData.append('image', resizedFile);
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
fetch('https://api.obanana.shop/api/v1/upload_image', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
console.error('File upload failed');
|
||||
reject(new Error('File upload failed'));
|
||||
}
|
||||
})
|
||||
.then(result => {
|
||||
const filename = result.filename;
|
||||
resolve(filename);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during fetch:', error);
|
||||
reject(error);
|
||||
});
|
||||
}, 'image/jpeg');
|
||||
};
|
||||
|
||||
img.src = e.target.result;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
promises.push(promise);
|
||||
}
|
||||
|
||||
Promise.all(promises)
|
||||
.then(filenames => {
|
||||
const updatedImages = existingImages.concat(filenames.map(filename => `https://api.obanana.shop/images/storage/product_uploads/${filename}`));
|
||||
|
||||
if (!Array.isArray(updatedImages)) {
|
||||
console.error('Updated images is not an array:', updatedImages);
|
||||
throw new Error('Updated images is not an array');
|
||||
}
|
||||
const imagesString = updatedImages.join(',');
|
||||
const payload = {
|
||||
images: imagesString,
|
||||
};
|
||||
|
||||
const token = '<?php echo $_SESSION["token"] ?>';
|
||||
return fetch('https://api.obanana.shop/api/v1/products/' + productId, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + token,
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('Images uploaded successfully');
|
||||
location.reload();
|
||||
} else {
|
||||
console.error('Image upload failed');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during image upload:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 02-15-2024 Jun Jihad Vendor Product Add and Edit page Multiple Image -->
|
||||
</section>
|
||||
|
||||
<!-- End Vendor upload section -->
|
||||
|
||||
<!-- Footer Start -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue