Chapters

Add to Cart Functionality with AngularJS: Implementation Guide and Tutorial

Rumman Ansari Software Engineer 2024-08-05 06:07:31 391 Share
Subject Syllabus Details Subject Details

☰ TContent

☰Fullscreen

Table of Content:

Assignment: Perform Add to Cart with AngularJS
Solution
Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.

Assignment: Perform Add to Cart with AngularJS

1. Perform Add to Cart with AngularJS

Add more features to the shopping application Pick2get:

• Add a field to capture the quantity to be ordered.

• Create an Add to cart button with a click function AddToCart (product), and return the success string with the alert Product added to Cart successfully.

• Enable Add to cart(change the image color over the button to orange) when the quantity field is > 0. Disable (change the image color over the button to grey) when the field is 0 or null.

Solution

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">

</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"style.css"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"index.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">

</span><span class="tag">&lt;body</span><span class="pln"> </span><span class="atn">ng-app</span><span class="pun">=</span><span class="atv">"myApp"</span><span class="pln"> </span><span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"myCtrl"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"topnav"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln">right</span><span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">20px</span><span class="atv">"</span><span class="tag">&gt;&lt;i&gt;</span><span class="pln">Check out</span><span class="tag">&lt;/i&gt;&lt;/a&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln">right</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">20px</span><span class="atv">"</span><span class="tag">&gt;&lt;i&gt;</span><span class="pln">Sign In</span><span class="tag">&lt;/i&gt;&lt;/a&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#/Home"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">150px</span><span class="pun">;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;b&gt;&lt;i&gt;</span><span class="pln">Pick2get</span><span class="tag">&lt;/i&gt;&lt;/b&gt;&lt;/a&gt;</span><span class="pln">

    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search_drop_down"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"month"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"select select-styled"</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"hide"</span><span class="tag">&gt;</span><span class="pln">-- Brand --</span><span class="tag">&lt;/option&gt;</span><span class="pln">
            </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"pdt in products"</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">{{pdt.brand}}</span><span class="tag">&lt;/option&gt;</span><span class="pln">
        </span><span class="tag">&lt;/select&gt;</span><span class="pln">

        </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"year"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"select select-styled"</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"hide"</span><span class="tag">&gt;</span><span class="pln">-- Price --</span><span class="tag">&lt;/option&gt;</span><span class="pln">
            </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"low_price_to_high"</span><span class="tag">&gt;</span><span class="pln">Low Price to High</span><span class="tag">&lt;/option&gt;</span><span class="pln">
	    </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"hign_price_to_low"</span><span class="tag">&gt;</span><span class="pln">High Price to Low</span><span class="tag">&lt;/option&gt;</span><span class="pln">
        </span><span class="tag">&lt;/select&gt;</span><span class="pln">

        </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Search"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"40"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"product_box"</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"pdt in products"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_1"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">&gt;</span><span class="pln">
		</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"discount"</span><span class="tag">&gt;</span><span class="pln">
			</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"discount_badge"</span><span class="tag">&gt;</span><span class="pln">{{pdt.discount}}</span><span class="tag">&lt;/div&gt;</span><span class="pln">
			</span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"discount_text"</span><span class="tag">&gt;</span><span class="pln">Discount</span><span class="tag">&lt;/span&gt;</span><span class="pln">
		</span><span class="tag">&lt;/div&gt;</span><span class="pln">
                </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/dummy_product.jpg"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">

        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_2"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"prod_desc"</span><span class="tag">&gt;</span><span class="pln">
                </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pdt_name"</span><span class="tag">&gt;</span><span class="pln">{{pdt.name}}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pdt_details_2_col"</span><span class="tag">&gt;</span><span class="pln">
                    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand"</span><span class="tag">&gt;</span><span class="pln">Brand</span><span class="tag">&lt;/span&gt;</span><span class="pln">
                    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand_name"</span><span class="tag">&gt;</span><span class="pln">{{pdt.brand}}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
                </span><span class="tag">&lt;/div&gt;</span><span class="pln">
                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pdt_details_2_col"</span><span class="tag">&gt;</span><span class="pln">
                    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand"</span><span class="tag">&gt;</span><span class="pln">Price</span><span class="tag">&lt;/span&gt;</span><span class="pln">
                    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand_name"</span><span class="tag">&gt;</span><span class="pln">{{pdt.price}}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
                </span><span class="tag">&lt;/div&gt;</span><span class="pln">
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">


        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_3"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"quantity_sec"</span><span class="tag">&gt;</span><span class="pln">
                </span><span class="tag">&lt;label&gt;</span><span class="pln">Quantity</span><span class="tag">&lt;/label&gt;</span><span class="pln">
                </span><span class="tag">&lt;br&gt;</span><span class="pln">
               </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Quantity"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"number"</span><span class="pln"> </span><span class="atn">ng-model</span><span class="pun">=</span><span class="atv">"pdt.quantity"</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_4"</span><span class="tag">&gt;</span><span class="pln">
	    &lt;input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48" ng-show="pdt.quantity&lt;1?true:false" /&gt;
	    &lt;input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48"  ng-hide="pdt.quantity&lt;1?true:false" ng-click="addToCart(pdt);"/&gt;
            
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
 


</span><span class="tag">&lt;/body&gt;</span><span class="pln">

</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

<span class="pln">
</span><span class="kwd">var</span><span class="pln"> app </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'myApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[]);</span><span class="pln">
app</span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">'myCtrl'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> imgPath </span><span class="pun">=</span><span class="pln"> </span><span class="str">"img/"</span><span class="pun">;</span><span class="pln">
    $scope</span><span class="pun">.</span><span class="pln">quantity</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    $scope</span><span class="pun">.</span><span class="pln">products </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> 
		</span><span class="pun">{</span><span class="pln">
			name </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Happy Cycle"</span><span class="pun">,</span><span class="pln">
			discount</span><span class="pun">:</span><span class="str">"20%"</span><span class="pun">,</span><span class="pln">
			price</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2500"</span><span class="pun">,</span><span class="pln">
			brand </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Wheels"</span><span class="pun">,</span><span class="pln">
			addedToCart</span><span class="pun">:</span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
			image </span><span class="pun">:</span><span class="pln"> imgPath </span><span class="pun">+</span><span class="pln"> </span><span class="str">"cycle.jpg"</span><span class="pun">,</span><span class="pln">
			quantity</span><span class="pun">:</span><span class="lit">0</span><span class="pln">
		</span><span class="pun">},</span><span class="pln">
		</span><span class="pun">{</span><span class="pln">
			name </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Kids Shoes"</span><span class="pun">,</span><span class="pln">
			discount</span><span class="pun">:</span><span class="str">"10%"</span><span class="pun">,</span><span class="pln">
			price</span><span class="pun">:</span><span class="pln"> </span><span class="str">"1460"</span><span class="pun">,</span><span class="pln">
			brand </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feel Good"</span><span class="pun">,</span><span class="pln">
			addedToCart</span><span class="pun">:</span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
			image </span><span class="pun">:</span><span class="pln"> imgPath </span><span class="pun">+</span><span class="pln"> </span><span class="str">"shoes.jpg"</span><span class="pun">,</span><span class="pln">
			quantity</span><span class="pun">:</span><span class="lit">0</span><span class="pln">
		</span><span class="pun">},</span><span class="pln">
		</span><span class="pun">{</span><span class="pln">
			name </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Polo Baby Care Dress"</span><span class="pun">,</span><span class="pln">
			discount</span><span class="pun">:</span><span class="str">"20%"</span><span class="pun">,</span><span class="pln">
			price</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2500"</span><span class="pun">,</span><span class="pln">
			brand </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Super Hero"</span><span class="pun">,</span><span class="pln">
			addedToCart</span><span class="pun">:</span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
			image </span><span class="pun">:</span><span class="pln"> imgPath </span><span class="pun">+</span><span class="pln"> </span><span class="str">"shirt.jpg"</span><span class="pun">,</span><span class="pln">
			quantity</span><span class="pun">:</span><span class="lit">0</span><span class="pln">
		</span><span class="pun">},</span><span class="pln">
	</span><span class="pun">]</span><span class="pln">
    </span><span class="com">//Add your code here for addToCart function which returns success message</span><span class="pln">
    $scope</span><span class="pun">.</span><span class="pln">addToCart </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">product</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">product</span><span class="pun">.</span><span class="pln">quantity </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          product</span><span class="pun">.</span><span class="pln">addedToCart </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln">
          alert</span><span class="pun">(</span><span class="pln">product</span><span class="pun">.</span><span class="pln">name </span><span class="pun">+</span><span class="pln"> </span><span class="str">" added to cart successfully!"</span><span class="pun">);</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">};</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span>

If you will run above code, you will get below output.

No Questions Data Available.

No Program Data.

Add to Cart Functionality with AngularJS: Implementation Guide and Tutorial

Assignment: Perform Add to Cart with AngularJS

Solution

Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.