345 lines
15 KiB
HTML
345 lines
15 KiB
HTML
<div class="intro-y flex items-center mt-8">
|
|
<h2 class="text-lg font-medium mr-auto">
|
|
{{ 'seller.product.update.title'|_ }}
|
|
</h2>
|
|
<div class="flex items-center ml-auto alert alert-success-soft show flex items-center mb-2" role="alert"
|
|
style="padding: 5px;font-size: 12px;padding-top: 2px;padding-bottom: 2px;">USD: {{ order.kurs }}
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-6 mt-5">
|
|
|
|
<div class="intro-y col-span-12 lg:col-span-8">
|
|
<!-- BEGIN: Form Layout -->
|
|
<div class="intro-y box p-5">
|
|
<form data-file-types="image/jpeg|image/png|image/jpg" id="imageUploadForm" method="POST"
|
|
enctype="multipart/form-data">
|
|
<div>
|
|
<label for="crud-form-1" class="form-label">SKU #No</label>
|
|
<input id="crud-form-1" type="text" value="SKU" name="sku" class="form-control w-full"
|
|
placeholder="" disabled>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-2">
|
|
<div class="mt-3 col-span-4">
|
|
<label for="crud-form-22" class="form-label">{{ 'product.status.title'|_ }} </label>
|
|
<select class="form-control w-full" name="stat" id="product_status">
|
|
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="mt-3 col-span-4 product_featured">
|
|
<label for="crud-form-2" class="form-label">{{ 'product.featured.title'|_ }} </label>
|
|
<select class="form-control w-full" name="featured" id="product_featured">
|
|
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mt-3 col-span-4">
|
|
<label for="crud-form-2" class="form-label">{{ 'product.category.title'|_ }} </label>
|
|
<select class="form-control w-full" name="categories" id="product_categories">
|
|
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-2">
|
|
<div class="mt-3 col-span-6">
|
|
<label for="crud-form-1" class="form-label">{{ 'product.name'|_ }}</label>
|
|
<input type="text" class="form-control w-full" placeholder="{{'product.name'|_}}" name="name">
|
|
</div>
|
|
<div class="mt-3 col-span-6">
|
|
<label for="crud-form-1" class="form-label">{{ 'product.number'|_ }}</label>
|
|
<input type="text" class="form-control w-full" placeholder="{{'product.number'|_}}"
|
|
name="product_number">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 mb-3">
|
|
<label>{{ 'product.file.upload'|_ }}</label>
|
|
<div action="#" class="dropzone" id="upload-widget">
|
|
<div class="fallback">
|
|
<input type="file" multiple id="prodImgs" onchange="getFile(this)"/>
|
|
</div>
|
|
<div class="dz-message" data-dz-message>
|
|
<div class="text-lg font-medium">Drop files here or click to upload.</div>
|
|
<div class="text-slate-500"> This is just a demo dropzone. Selected files are <span
|
|
class="font-medium">not</span> actually uploaded.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<label>{{ 'product.short_description'|_ }}</label>
|
|
<div class="mt-2">
|
|
<textarea class="form-control" name="short_description" id="short_description"
|
|
style="height: 150px;">{{'product.short_description'|_}}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<label>{{ 'product.description'|_ }}</label>
|
|
<div class="mt-2">
|
|
<textarea class="form-control" name="description" id="description"
|
|
style="height: 150px;">{{'product.description'|_}}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<input style="display:none" name="images[files][]" type="file" multiple class="form-control"
|
|
id="prodImgs2"/>
|
|
|
|
<input name="product_id" value="{{id}}" type="hidden">
|
|
<input name="user" value="romanah_" type="hidden">
|
|
<input name="password" value="bt110226$$" type="hidden">
|
|
<div class="grid grid-cols-12 gap-2">
|
|
<div class="mt-3 col-span-6">
|
|
<label for="crud-form-3" class="form-label">{{ 'product.price'|_ }}</label>
|
|
<div class="input-group">
|
|
<input id="crud-form-3" type="number" class="form-control"
|
|
placeholder="{{'product.price'|_}}" aria-describedby="input-group-1" name="price">
|
|
<div id="input-group-1" class="input-group-text">TMT</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-3 col-span-6">
|
|
<label for="crud-form-3" class="form-label">{{ 'product.special_price'|_ }}</label>
|
|
<div class="input-group">
|
|
<input id="crud-form-3" type="number" class="form-control"
|
|
placeholder="{{'product.special_price'|_}}" aria-describedby="input-group-2"
|
|
name="special_price">
|
|
<div id="input-group-1" class="input-group-text">TMT</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<label for="crud-form-1" class="form-label">{{ 'product.qty'|_ }}</label>
|
|
<input id="crud-form-1" type="number" name="qty" class="form-control w-full"
|
|
placeholder="{{'product.qty'|_}}">
|
|
</div>
|
|
|
|
<div class="text-right mt-5">
|
|
<a href="{{'detail-order'|page({orderId: order.id})}}" type="button"
|
|
class="btn btn-outline-secondary mr-1">{{ 'order.form.cancel.btn'|_ }}</a>
|
|
<button data-attach-loading type="submit"
|
|
class="btn btn-primary">{{ 'order.form.update.btn'|_ }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END: Form Layout -->
|
|
</div>
|
|
</div>
|
|
|
|
{% put scripts %}
|
|
|
|
<script src="{{'assets/seller/js/ckeditor-classic.js'|theme}}"></script>
|
|
<script>
|
|
|
|
getProduct();
|
|
|
|
function vendorCats() {
|
|
|
|
$(document).ready(function () {
|
|
$.ajax({
|
|
url: `http://216.250.11.229/derman/app/api/vendor/{{user.seller_id}}?locale=tm`,
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
success: async function (data, textStatus, xhr) {
|
|
// $('#loader').hide();
|
|
// $('#deatil_screen').show();
|
|
|
|
let vendorCats = data.data.categories;
|
|
|
|
for (let cat of vendorCats) {
|
|
if (cat.id != $('#product_categories').find(":selected").val()) {
|
|
$('#product_categories').append(`
|
|
<option value="` + cat.id + `">` + cat.name + `</option>
|
|
`);
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
error: function (xhr, textStatus, errorThrown) {
|
|
console.log('Error in Operation');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function getProduct() {
|
|
|
|
$(document).ready(function () {
|
|
$.ajax({
|
|
url: `http://216.250.11.229/derman/app/api/seller/products/{{user.seller_id}}/{{id}}?locale=tm`,
|
|
// url: `http://216.250.11.229/derman/app/api/products/{{id}}`,
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
beforeSend: function () {
|
|
// $('#deatil_screen').hide();
|
|
// $('#loader').show();
|
|
},
|
|
success: async function (data, textStatus, xhr) {
|
|
// $('#loader').hide();
|
|
// $('#deatil_screen').show();
|
|
|
|
let product = data.data[0];
|
|
|
|
console.log(product);
|
|
|
|
// $("input[name='images[files][]']").val(product.images[0].original_image_url);
|
|
// $("select[name='status']").val(product.status);
|
|
if (product) {
|
|
$("#product_status").html(`
|
|
<option value="1" ` + (product.status == 1 ? `selected` : ``) + `>{{'product.enable'|_}}</option>
|
|
<option value="0" ` + (product.status == 0 ? `selected` : ``) + `>{{'product.disable'|_}}</option>
|
|
`);
|
|
$("#product_featured").html(`
|
|
<option value="1" ` + (product.featured == 1 ? `selected` : ``) + `>{{'product.enable'|_}}</option>
|
|
<option value="0" ` + (product.featured == 0 ? `selected` : ``) + `>{{'product.disable'|_}}</option>
|
|
`);
|
|
$("div.product_featured select").val(product.featured);
|
|
|
|
// $("#product_featured select").val(product.featured).change();
|
|
// $('#product_featured option[value='+product.featured+']').attr('selected','selected');
|
|
$("input[name='name']").val(product.name);
|
|
$("input[name='sku']").val(product.sku);
|
|
$("textarea[name='short_description']").val(product.short_description);
|
|
$("textarea[name='description']").val(product.description);
|
|
$("input[name='name']").val(product.name);
|
|
$("input[name='product_number']").val(product.product_number);
|
|
$("input[name='price']").val(product.price);
|
|
$("input[name='special_price']").val(Number(product.special_price));
|
|
$("input[name='qty']").val(product.qty);
|
|
|
|
let category = product.categories[0];
|
|
if (category) {
|
|
$('#product_categories').append(`
|
|
<option selected value="` + category.id + `">` + category.name + `</option>
|
|
`);
|
|
}
|
|
|
|
product.images.forEach(image => {
|
|
let mockFile = {name: image.original_image_url, size: 12345};
|
|
myDropzone.options.addedfile.call(myDropzone, mockFile);
|
|
myDropzone.options.thumbnail.call(myDropzone, mockFile, image.original_image_url);
|
|
myDropzone.emit("complete", mockFile);
|
|
|
|
let blob = null
|
|
let xhrr = new XMLHttpRequest()
|
|
xhrr.open("GET", image.original_image_url)
|
|
xhrr.responseType = "blob"
|
|
xhrr.onload = function () {
|
|
blob = xhrr.response
|
|
let file = new File([blob], image.original_image_url);
|
|
container.items.add(file);
|
|
document.querySelector('#prodImgs2').files = container.files;
|
|
|
|
}
|
|
xhrr.send()
|
|
})
|
|
}
|
|
vendorCats();
|
|
|
|
|
|
},
|
|
error: function (xhr, textStatus, errorThrown) {
|
|
console.log('Error in Operation');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async function getFileFromUrl(url, name, defaultType = 'image/jpeg') {
|
|
const response = await fetch(url);
|
|
const data = await response.blob();
|
|
return new File([data], name, {
|
|
type: data.type || defaultType,
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
function convertToSlug(Text) {
|
|
return Text.toLowerCase()
|
|
.replace(/ /g, "-")
|
|
.replace(/[^\w-]+/g, "");
|
|
}
|
|
|
|
Dropzone.autoDiscover = false; // Disabling autoDiscover, otherwise Dropzone will try to attach twice.
|
|
|
|
let container = new DataTransfer();
|
|
let myDropzone = new Dropzone(".dropzone", {
|
|
addRemoveLinks: true,
|
|
});
|
|
myDropzone.on("addedfile", function (file) {
|
|
container.items.add(file);
|
|
document.querySelector('#prodImgs2').files = container.files;
|
|
|
|
});
|
|
myDropzone.on("removedfile", function (file) {
|
|
container.items.remove(file);
|
|
document.querySelector('#prodImgs2').files = container.files;
|
|
});
|
|
|
|
$(document).ready(function (e) {
|
|
$('#imageUploadForm').on('submit', (function (e) {
|
|
e.preventDefault();
|
|
|
|
let productName = $("input[name='name']").val();
|
|
let urlKey = convertToSlug(productName);
|
|
let fd = new FormData(this);
|
|
|
|
fd.append('product_id', $("input[name='product_id']").val());
|
|
fd.append('user', $("input[name='user']").val());
|
|
fd.append('password', $("input[name='password']").val());
|
|
fd.append('images[files][]', $("input[name='images[files][]']").val());
|
|
fd.append('sku', $("input[name='sku']").val());
|
|
fd.append('channels', "Nurgul");
|
|
fd.append('short_description', $("textarea[name='short_description']").val());
|
|
fd.append('description', $("textarea[name='description']").val());
|
|
fd.append('name', $("input[name='name']").val());
|
|
fd.append('url_key', urlKey);
|
|
fd.append('new', 1);
|
|
fd.append('visible_individually', 1);
|
|
fd.append('status', $("select[name='stat']").val());
|
|
fd.append('product_number', $("input[name='product_number']").val());
|
|
fd.append('price', $("input[name='price']").val());
|
|
fd.append('special_price', $("input[name='special_price']").val());
|
|
fd.append('weight', 0);
|
|
fd.append('qty', $("input[name='qty']").val());
|
|
fd.append('categories', $("select[name='categories']").val());
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: "http://216.250.11.229/derman/app/api/seller/update/product",
|
|
data: fd,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (data) {
|
|
console.log(fd);
|
|
console.log("success");
|
|
console.log(data);
|
|
location.reload()
|
|
},
|
|
error: function (data) {
|
|
console.log("error");
|
|
console.log(data);
|
|
}
|
|
});
|
|
}));
|
|
|
|
$("#ImageBrowse").on("change", function () {
|
|
$("#imageUploadForm").submit();
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
{% endput %}
|