سلام
سمپل یا نمونه مناسبی از صورتحساب فروشگاهی برای vuejs سراغ دارید؟
من از php سبد خرید رو که شامل نوع محصول قیمت و تعداد هرکدوم هست دریافت می کنم و در یک کامپوننت جمع قیمت هر محصول (ضرب تعداد در قیمت واحد) محاسبه می کنم و نمایش میدم
ولی نمیتونم جمع کل رو محاسبه کنم چون نمی دونم چطوری میتونم به کل ردیف ها دسترسی داشته باشم. در حال حاضر با this فقط به مقادیر یک ردیف دسترسی دارم و نمی تونم کل رو محاسبه کنم
میخوام وقتی تعداد یکی از سفارشها کم و زیاد میشه جمع کل هم تغییر بکنه
کل خریدهای کاربر رو در یک آرایه اضافه کنید .. در انتهای کار کلید های Price رو در آرایه به هم جمع کنید
وضعیت فعلی کار رو توی تصویر مشاهده کنید:
الان مقدار input تعداد وقتی تغییر میکنه جمع هر ردیف متناسب با اون تغییر میکنه
گیر کار اینجاست که من می خوام جمع کل صورتحساب رو محاسبه کنم و وقتی تعداد هرکدوم از طرف کاربر کم و زیاد میشه جمع کل صورتحساب هم متناسب با اون تغییر کنه.
این آرایه باید در بخش data مشخص شده باشه.. وقتی هم که آیتمی بهش اضافه میکنید و یا حذف میکنید باید تغییرات درش لحاظ بشند و بعدش جمع کل محاسبه بشه
@juza66
مشکل جمع کردن اینپوت های یک ستون با همدیگه است
@ali.bayat
متشکرم همین روش رو تست میکنم ولی فکر میکردم لابد خود vue قابلیتی داره که بتونیم به دیتای هر ردیف دسترسی داشته باشیم و مقادیرش رو جمع کنیم
خواهش میکنم.
راهی که من گفتم میشه گفت ساده ترین راه هست
اما مقالات زیر رو هم بررسی کنید.
https://frontstuff.io/build-a-shopping-cart-with-vue-and-dinerojs
https://travishorn.com/vue-online-store-with-shopping-cart-c072433f8d9e
https://medium.com/employbl/build-a-shopping-cart-with-vue-js-and-element-ui-no-vuex-54682e9df5cd
کم و بیش به یه صورت کار کردند اما تغییرات جزئی در هر کدوم هست.. ببینید سایرین به چه صورت این کار رو انجام دادند
سلام مهدی عزیز
دوتا چیزو باید در نظر بگیری یکی اینکه میتونی کل محصولاتی که کاربر میخواد بخره رو با vuex ذخیره کنی که بتونی همه جای سایتت بهش دسترسی داشته باشی یا اینکه یک کامپوننت برای سبد خریدت بسازی و با استفاده از prop محصولاتو پاس بدی بهش دوم اینکه یک تابع داخل computed بسازی و از تابع reduce() استفاده کنی و به ازای اضافه شدن هر محصول محاسباتشو انجام بدی و بریزی داخل متغیر total.
computed: {
total() {
return this.items.reduce((acc, item) => acc + Number(item.price), 0);
}
}
@miladk313 بدون استفاده از vuex طبق کد های من چطوری میشه جمع کل گرفت؟ الان در حال حاضر من چون نمی تونستم با vue انجام بدم. با یه کد جی کوئری اینکار رو انجام دادم.
<script>
window.Event = new Vue();
var cart = {
props: ['pr'],
data: function() {
return {
email: 'info@mycompany.com',
removeUrl: '/mybasket/remove/',
ProductUrl: '/product/',
info : [],
numbers : 0,
price: 0,
totalPrice: 0,
paymentPrice: 0,
bill : [],
test : 2,
min : 1,
stock : 100,
major: 0,
majorPrice: 0,
majarStock: 0,
currentPrice:0,
checked : false,
firstRun : true,
dataLenght: 0,
};
},created() {
this.connectign();
this.getFirstSum();
}
,mounted() {
// this.getSum();
},beforeUpdate() {
},
updated() {
// this.getSum();
this.ConvertNumberToPersion();
},
methods: {
connectign(){
axios
.get('/mycart')
.then(response => this.info = response.data)
.catch(error => console.log(error));
},
getSum(num){
this.paymentPrice = 0;
var inputs = $(".tprice");
for(var i = 0; i < inputs.length; i++){
this.paymentPrice += parseInt($(inputs[i]).val());
}
},checkMinMax: function (event){
// if(this.numbers > this.stock){
event.preventDefault();
// }
}
,
getFirstSum(){
this.paymentPrice = {{$sum}};
},inputStyle(){
$("input[type='number']").inputSpinner();
}
,setNum(number){
this.numbers = number;
} ,
setFirstPrice(num){
this.currentPrice = parseInt(num);
},
changeMajor(price,majorPrice){
if(this.checked == false){
this.currentPrice = majorPrice;
this.checked = true;
console.log(majorPrice+'if')
this.$set('2222');
}else{
this.currentPrice = price;
this.checked = false;
console.log(price+'else')
}
}
,
ConvertNumberToPersion(){
let persian = { 0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9' };
function traverse(el) {
if (el.nodeType == 3) {
var list = el.data.match(/[0-9]/g);
if (list != null && list.length != 0) {
for (var i = 0; i < list.length; i++)
el.data = el.data.replace(list[i], persian[list[i]]);
}
}
for (var i = 0; i < el.childNodes.length; i++) {
traverse(el.childNodes[i]);
}
}
traverse(document.body);
}
},
template: `
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="cart-heading">پیش فاکتور</h1>
<form action="/shipping" method="post" >
{{ csrf_field() }}
<div class="table-content table-responsive">
<table>
<thead>
<tr>
<th>حذف</th>
<th>تصویر</th>
<th>عنوان</th>
<th>قیمت</th>
<th>عمده فروشی</th>
<th>تعداد</th>
<th>جمع</th>
</tr>
</thead>
<tbody>
<tr v-for="(pr, index) in info" v-bind:key="pr.id" >
<td class="product-remove"><a :href="removeUrl+pr.id"><i class="pe-7s-close"></i></a></td>
<td class="product-thumbnail">
<a :href="ProductUrl+pr.price.product.slug"><img :src="pr.price.product.images['images']['100']" alt="#"></a>
</td>
<td class="product-name"><a :href="ProductUrl+pr.price.product.slug" v-text="pr.price.product.title+ ' (' + pr.price.color.title +' '+ pr.price.size.title + ')'">title </a></td>
<td class="product-price-cart">
<input v-model.number="min=pr.price.minimum" type="hidden" autocomplete="off">
<input v-model.number="stock=pr.price.stock" type="hidden" autocomplete="off">
<input v-model.number="major=pr.price.major" type="hidden" autocomplete="off">
<input v-model.number="majarStock=pr.price.major_stock" type="hidden" autocomplete="off">
<input v-model.number="price = pr.price.price" type="hidden" autocomplete="off">
<input v-model.number="majorPrice = pr.price.discount" type="hidden" autocomplete="off">
<span class="amount" v-text="currentPrice = price" ></span>
</td>
<td class="product-name">
<input v-if="majarStock == 0" type="checkbox" id="checkbox" disabled title="فقط تک فروشی " >
<input v-else type="checkbox" id="checkbox" disabled checked title=" فقط عمده فروشی" >
</td>
<td class="product-quantity">
<input :name="'id'+index" :value="pr.id" type="hidden" autocomplete="off">
<input :name="'number'+index" @change="getSum(numbers)" @keypress="checkMinMax($event)" :min="min" :max="stock" :step="min" v-model.number="numbers = pr.number" type="number" autocomplete="off">
</td>
<td class="product-subtotal" v-text="totalPrice = numbers * price" >
</td>
<input class="tprice" v-model.number="totalPrice" type="hidden" autocomplete="off">
<input name="lenght" v-model.number="dataLenght = info.length" type="hidden" autocomplete="off">
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-5 ml-auto">
<div class="cart-page-total">
<h2> صورتحساب</h2>
<ul>
{{--<li>بدون تخفیف<span>100.00</span></li>--}}
<li>جمع کل <span v-text="paymentPrice">
</span></li>
</ul>
<button type="submit">مرحله بعد</button>
</div>
</div>
</div>
</form>
</div>
`
};
var vm = new Vue({
el: '#app',
components:{
'myCart': cart
},
data() {
return {
gh: 22,
info: null,
}
},created() {
// this.getData();
}, methods: {
getData () {
axios
.get('/mycart')
.then(response => (this.info = response.data))
.catch(error => console.log(error)) ;
},
}
});
</script>
تو این لینک کامل توضیح داده اگه بخوای از vuex هم استفاده کنی .. خیلی سخت نیست
https://travishorn.com/vue-online-store-with-shopping-cart-c072433f8d9e
تویی بک اند جمع رو انجام بده بهمراه دیتاهای json که میخوای به ویو بفرس و اونجا ایتم جمع رو بگیر و نمایش بده ، سختش نکن دیگه !
@juza66
توی بک اند که محاسبات انجام میشه. ولی توی صفحه فاکتور کاربر می تونه تعداد رو زیاد و کم کنه و بدون رفرش میخوام قیمت کل محاسبه بشه
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟