Skip to content

Instantly share code, notes, and snippets.

@amitastreait

amitastreait/CartDetail.css

Created November 21, 2018 18:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amitastreait/6c2b5beb894cc32fd3405e17622adbf6 to your computer and use it in GitHub Desktop.
Save amitastreait/6c2b5beb894cc32fd3405e17622adbf6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CartDetail.css
.THIS{
background: cadetblue;
}
.THIS.c-container {
border: 1px solid #d8dde6;
margin: 10px 0 20px 0;
}
.THIS .page-section {
border: solid 1px #ccc;
padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
height: 50px;
}
.THIS .page-main {
background: #f8f8f8;
}
.THIS .page-left,
.THIS .page-right {
background: #f0efef;
}
Raw
CartDetail.html
<aura:component implements="lightning:isUrlAddressable"
controller="CartDetailsAuraServices">
<aura:attribute name="cartItemList" type="Object" />
<aura:attribute name="subTotal" type="Integer" />
<aura:attribute name="isCouponAplied" type="Boolean" />
<aura:attribute name="CartId" type="String" />
<lightning:navigation aura:id="navigation" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="c-container">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
<div class="page-header">
<img src="{!$Resource.Beer_Explorer}"
style="margin-top: -22px;height: 100px;" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="12">
<lightning:layout>
<lightning:layoutItem padding="around-small" size="9">
<div class="page-section page-main">
<h2 class="slds-text-title_caps" style="height: 55px;
background: darkseagreen;
line-height: 3;
padding-left: 10px;
font-size: 19px;
font-weight: bold;">
SHOPPING CART({!v.cartItemList.length} &nbsp; items)
</h2>
<aura:if isTrue="{!v.cartItemList.length > 0}">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-4"></div>
<div class="slds-col slds-size_1-of-4"><b>Price</b></div>
<div class="slds-col slds-size_1-of-4"><b>Quantity</b></div>
<div class="slds-col slds-size_1-of-4"></div>
</div>
<aura:iteration items="{!v.cartItemList}" var="item" indexVar="index" >
<c:CartItem cartItem="{!item}" index="{!index}"/>
</aura:iteration>
<lightning:buttonGroup>
<lightning:button label="Continue Shopping"
onclick="{!c.homePage}"/>
<lightning:button label="Proceed Checkout"
variant="brand"/>
</lightning:buttonGroup>
<aura:set attribute="else">
<img src="{!$Resource.empty_cart}"
class="slds-align_absolute-center" /><br/>
<a href="JavaScript:void(0);"
class="slds-align_absolute-center" onclick='{!c.homePage}'>
Click Here to add Items
</a>
</aura:set>
</aura:if>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<aura:if isTrue="{!v.cartItemList.length > 0}">
<div class="page-section page-right">
<b>Subtotal ({!v.cartItemList.length} item):</b> &nbsp;
<lightning:formattedNumber label="Price" value="{!v.subTotal}"
style="currency" currencyCode="USD"/>
<br/>
Have a Coupon?
<a href="JavaScript:void(0);" onclick="{!c.applyCoupon}">
Apply Here
</a>
<aura:if isTrue="{!v.isCouponAplied}">
<p>
<lightning:input name="input3" aura:id="CouponNo"
label="15 Digit Valid Coupon No"
placeholder="type here..."/>
<lightning:button label="Apply" variant="brand"
onclick="{!c.doApplyCoupon}"/>
</p>
</aura:if>
<br/>
<br/>
<lightning:buttonGroup>
<lightning:button label="Continue"
onclick="{!c.homePage}"/>
<lightning:button label="Proceed Checkout"
variant="brand"/>
</lightning:buttonGroup>
</div>
</aura:if>
<div class="page-section page-right">
<h2>Frequently Purchased..</h2>
<p>
</p>
</div>
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" size="12">
<div class="page-footer page-section">
<h2>Beer Explorer</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
Raw
CartDetailController.js
({
doInit : function(component, event, helper) {
var pageReference = component.get('v.pageReference');
if(pageReference){
var state = pageReference.state;
if(state.cartId){
console.log(' CartId ' ,state.cartId);
component.set('v.CartId',state.cartId );
var action = component.get('c.getCartItems');
action.setParams({
'CartId' : state.cartId
});
action.setCallback(this, function(response){
var stateResponse = response.getState();
if(stateResponse === 'SUCCESS' || stateResponse === 'DRAFT'){
var resultData = response.getReturnValue();
console.log(' resultData ' , resultData.length);
var items = [];
var subTotal;
for(var key in resultData){
items.push(resultData[key]);
if(subTotal)
subTotal = subTotal + resultData[key].Total_Amount__c
else
subTotal = resultData[key].Total_Amount__c
}
component.set('v.subTotal', subTotal);
/*
* for(String item : resultData.keySet())
* CartItem__C = resultData.get(item);
*
*/
component.set('v.cartItemList', items);
}else if(stateResponse === 'INCOMPLETE'){
console.log('User is offline System does not support offline');
}else if(stateResponse ==='ERROR'){
var errors = response.getError();
if(errors || errors[0].pageMessage){
console.log(' page Error ', errors[0].pageMessage);
}
if(errors || errors[0].duplicateResults){
console.log(' duplicate Error ', errors[0].duplicateResults);
}
}else{
}
});
$A.enqueueAction(action);
}
}
},
homePage : function(component, event, helper){
var pageReference = component.find("navigation");
var pageReferenceNav = {
"type": "standard__navItemPage",
"attributes": {
"apiName": "Beer_Explorer"
}
};
pageReference.navigate(pageReferenceNav, true);
},
applyCoupon : function(component, event, helper){
component.set('v.isCouponAplied', true);
},
doApplyCoupon : function(component, event, helper){
var CouponNo = component.find('CouponNo').get('v.value');
var cartId = component.get('v.CartId');
if(CouponNo){
var action = component.get('c.checkCoupon');
action.setParams({
Name : CouponNo,
CartId : cartId
});
action.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS' || state ==='DRAFT'){
var resultData = response.getReturnValue();
if(resultData){
}else{
}
}
});
$A.enqueueAction(action);
}
}
})
Raw
CartDetailsAuraServices.cls
public class CartDetailsAuraServices {
private static List<Coupon__c> getCoupon(String Name){
List<Coupon__c> coupon = [Select Id, Price__c From Coupon__c Where Name =: Name];
return coupon;
}
@AuraEnabled
public static Decimal checkCoupon(String Name, String CartId){
List<Coupon__c> couponList = getCoupon(Name);
if(couponList !=null && couponList.size() > 0){
Cart__c cart = new Cart__c(Id = cartId, Coupon__c =couponList[0].Id );
update cart;
return couponList[0].Price__c;
}else{
return null;
}
}
@AuraEnabled
public static String createCartItems(List<String> beerList, String cartId){
System.debug('#### beerList '+ beerList);
List<Cart_Item__c> cartItemList = new List<Cart_Item__c>();
List<Cart_Item__c> cartItemToUpdate = new List<Cart_Item__c>();
Map<Id, Cart_Item__c> beerQntyMap = getCartItems(cartId);
For(String beer : beerList){
if(beerQntyMap != null && beerQntyMap.containsKey(beer)){
Cart_Item__c it = beerQntyMap.get(beer);
Cart_Item__c item = new Cart_Item__c(
Item_Quantity__c = it.Item_Quantity__c+1,
Id = it.Id
);
cartItemToUpdate.add(item);
}else{
Integer Qty = 1;
Cart_Item__c item = new Cart_Item__c(
Cart__c = cartId,
Beer__c = beer,
Item_Quantity__c = Qty
);
cartItemList.add(item);
}
}
insert cartItemList;
if(cartItemToUpdate != null && cartItemToUpdate.size() > 0)
update cartItemToUpdate;
return cartId;
}
@AuraEnabled
public static String getCartId(List<String> beerList){
List<Cart__c> cartList = getCart();
if(cartList != null && cartList.size() > 0){
createCartItems(beerList, cartList[0].Id);
return cartList[0].Id;
}else{
Cart__c cart = new Cart__c(Coupon__c = getCoupon('Default')[0].Id,Cart_Id__c=String.valueOf(Math.random()),
Cart_Status__c='Open', Is_Active__c=true, User__c = UserInfo.getUserId());
insert cart;
createCartItems(beerList, cart.Id);
return cart.Id;
}
}
private static List<Cart__c> getCart(){
List<Cart__c> cartList = [Select Id, Name From Cart__c Where User__c=: UserInfo.getUserId() AND Is_Active__c = true];
return cartList;
}
@AuraEnabled
public static Map<Id, Cart_Item__c> getCartItems(String CartId){
List<Cart_Item__c> existingItemList = [Select Id, Name, Item_Quantity__c,Total_Amount__c, Beer__c, Beer__r.Name From Cart_Item__c
Where Cart__c =: cartId];
Map<Id, Cart_Item__c> beerQntyMap = new Map<Id, Cart_Item__c>();
For(Cart_Item__c item : existingItemList){
if(!beerQntyMap.containsKey(item.Beer__c)){
beerQntyMap.put(item.Beer__c, item);
}
}
return beerQntyMap;
}
@AuraEnabled
public static void deleteItem(String CartItemId){
Database.delete(CartItemId);
}
}
Raw
CartInfo.css
.THIS .slds-icon-text-default {
fill: rgb(241, 16, 52);
}
Raw
CartInfo.html
<aura:component controller="CartDetailsAuraServices">
<aura:attribute name="recordList" type="Object" />
<aura:attribute name="beerNameList" type="String[]" />
<aura:attribute name="cartId" type="String" />
<aura:handler name="change" value="{!v.recordList}" action="{!c.createCartItems}"/>
<lightning:navigation aura:id="navigation" />
<lightning:layOut>
<lightning:layOutitem>
<a href="JavaScript:void(0);" onclick="{!c.goToCart}" >
<lightning:icon iconName="utility:cart" size="large"/>
</a>
<span style="font-size: 1.1rem;">{!v.recordList.length}</span>
</lightning:layOutitem>
</lightning:layOut>
</aura:component>
Raw
CartInfoController.js
({
goToCart : function(component, event, helper) {
var action = component.get('c.getCartId');
action.setParams({
'beerList' : component.get('v.beerNameList')
});
action.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS' || state === 'DRAFT'){
var pageReference = component.find("navigation");
var pageReferenceNav = {
"type": "standard__component",
"attributes": {
"componentName": "c__CartDetail"
},
"state": {
"cartId": response.getReturnValue()
}
};
pageReference.navigate(pageReferenceNav, true);
}else if(state === 'INCOMPLETE'){
console.log('User is offline System does not support offline');
}else if(state ==='ERROR'){
var errors = response.getError();
if(errors || errors[0].pageMessage){
console.log(' page Error ', errors[0].pageMessage);
}
if(errors || errors[0].duplicateResults){
console.log(' duplicate Error ', errors[0].duplicateResults);
}
}else{
}
});
$A.enqueueAction(action);
},
createCartItems : function(component, event, helper){
//console.log(' Selected Beer ', component.get('v.recordList'));
var names = [];
for(var i=0; i<component.get('v.recordList').length; i++){
names.push(component.get('v.recordList')[i].Id);
}
//console.log(names);
component.set('v.beerNameList', names);
},
})
Raw
CartItem.css
.THIS .slds-icon-text-default {
fill: rgb(241, 16, 52);
}
Raw
CartItem.htm
<aura:component controller="CartDetailsAuraServices">
<aura:attribute name="cartItem" type="Object" />
<aura:attribute name="index" type="Integer"/>
<div>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-4">
<a href="JavaScript:void(0);" >
{!v.cartItem.Beer__r.Name}
</a>
</div>
<div class="slds-col slds-size_1-of-4">
<lightning:formattedNumber label="Price" value="{!v.cartItem.Total_Amount__c}"
style="currency" currencyCode="USD"/>
</div>
<div class="slds-col slds-size_1-of-4">
<ui:inputNumber label="" value="{!v.cartItem.Item_Quantity__c}"
updateOn="keyup"/>
</div>
<div class="slds-col slds-size_1-of-4 slds-p-left_x-large">
<a href="JavaScript:void(0);" id="{!v.cartItem.Id}" onclick="{!c.deleteCartItem}" >
<lightning:icon title="{!v.cartItem.Id}"
iconName="utility:delete"
alternativeText="delete"
size="small" />
</a>
</div>
</div>
</div>
</aura:component>
Raw
CartItemController.js
({
deleteCartItem : function(component, event, helper) {
var cartItemId = event.currentTarget.id;
//var itemId = alert(cartItemId);
var action = component.get('c.deleteItem');
action.setParams({
"CartItemId" : cartItemId
});
action.setCallback(this, function(response){
var state = response.getState();
//alert(state);
if(state === 'SUCCESS'){
$A.get('e.force:refreshView').fire();
}else{
}
});
$A.enqueueAction(action);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment