Hey All,
So I am building a shopping cart package. I have two templates:
Shopping Cart:
//import Cart from 'meteor/bearly:cart'
import {Random} from'meteor/random'
Template.ShoppingCart.onCreated(function(){
if(!Meteor.userId() && !Session.get('user'))
Session.set('user', Random.id())
this.user = Meteor.userId() ? Meteor.userId() : Session.get('user');
this.products = new ReactiveVar(false)
this.subscribe('cart', this.user)
Tracker.autorun(()=>{
if(this.subscriptionsReady()){
this.products.set(Cart.findOne({active:true}).products)
$('#cart-product-list').empty()
Blaze.renderWithData(Template.cartList, {products:this.products.get()}, document.getElementById('cart-product-list'), this.view)
}
})
})
Template.ShoppingCart.helpers({
'products': ()=>{
return Template.instance().products.get()
},
})
Template.ShoppingCart.events({
'click .remove-product': (e,t)=>{
let usr = Meteor.userId() ? Meteor.userId() : Session.get('user')
Meteor.call('removeProductFromCart', e.currentTarget.id, usr)
},
'click .close-sidebar':()=>{
$('.shopping-sidebar').animate({right:'-100%'}, 'slow')
},
'click .shopping-cart-logo':()=>{
$('.shopping-sidebar').animate({right:0}, 'slow')
}
})
and cartProduct:
Template.cartProduct.onCreated(function(){
this.id = this.data.id;
this.product = new ReactiveVar(false)
Tracker.autorun(()=>{
if(this.id != this.product.get()._id){
Meteor.call('getProduct', this.id, (err,res)=>{
console.log(res)
!err ? this.product.set(res) : console.log(err)
})
}
})
})
Template.cartProduct.helpers({
'product': ()=>{
return Template.instance().product.get()
},
'total' : ()=>{
return Template.instance().data.qty * Template.instance().product.get().price
},
})
HTML::
<template name="ShoppingCart">
<div class="shopping-cart-logo"><i class="fa fa-shopping-cart"></i><div class="products-qty badge badge-primary">{{products.length}}</div></div>
<div class="shopping-sidebar">
<div class="container">
<div class="row">
<div class="col-sm-12 d-flex header">
<h1 clas="mx-auto">Shopping Cart</h1><i class="fa fa-times ml-auto close-sidebar"></i>
</div>
</div>
<div class="row">
<div class="col-sm-12 products-list" id="cart-product-list">
{{>cartList products=products}}
</div>
</div>
</div>
</div>
</template>
<template name="cartList">
<ul>
{{#each products}}
{{> cartProduct}}
{{/each}}
<li>
</li>
<li class="d-flex w-100">
<button class="btn btn-success ml-auto">Checkout!</button>
</li>
</ul>
</template>
<template name="cartProduct">
<li>
<div class="w-100 d-flex cart-product">
<div class="qty">{{qty}} </div>
<div class="product">{{product.title}}<br>{{product.content.description}}</div>
<div class="trash ml-auto"><i class="fa fa-trash remove-product" id="{{id}}"></i></div>
<div class="total">{{total}}</div>
</div>
</li>
</template>
I am loading the shopping cart from a Cart collection that only contains the productID and QTY, then I was hopping to just grab each products info from a meteor call as they load in to the template. Which seemed to work fine, but when I delete the templates do not update properly. For instance if three products load and I delete the first product, the correct ID is removed but the product info remains on screen for the deleted product and the last item in the array is removed. If the template refreshes it will display the correct data, as in with a hot code reload.
Any ideas on how to fix this?