I'm trying to develop a shopping cart where I have list of products , when user clicks on each product details will be displayed ,I want to add each product to global map or something when user clicks the add to cart button ,how can I achieve this?
for better understanding here is my link to plunker: https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview
This is my details page where I want to provide user with add to cart option:
<!DOCTYPE html>
<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice|currency}}</p>
<p>ItemRating:{{itemRating}}</p>
<img src="{{itemImage}}">
<p><input type = "submit" value = "Add to Cart" ng-click = "addProduct()"></p>
In your case a simple place to store the cart in the main controller, as it is accessible from the child controllers of the nested views. So here is how the addProduct() function could be implemented:
app.controller('mobileController', function($scope) {
$scope.items = ...
$scope.cart = [];
$scope.addProduct = function(item) {
$scope.cart.push(item);
}
});
and so the function could be called from the product details controller, provided you allow access to the viewed item in it:
<input type= "submit" value="Add to Cart" ng-click="addProduct(item)">
Since then you can display your updated cart in your main controller view (or in a child view of it, as it remains accessible):
<div ng-repeat="item in cart track by item.name">
<li>{{item.name}}</li>
</div>
Should you want to add the same item multiple times, you'll have to display orders (or product serial numbers) instead of products.
Find the forked plunker here.
P.S.: Another option would be to store the cart in an Angular service, which would be injected in any controller that needs it.
P.P.S.: I kept on using the $scope as you did, but you should update your code to the latest Angular usages, such as using the controllerAs syntax and using controllers classes that can refer this (and a controller's name prefix in the templates) instead.
Try this version.
There is acartService defined here and injected in your ItemCtrl. All items are stored in a cart array inside the cartService.
Be aware that this works until you refresh the page. If you want to persist this cart variable so that it doesn't get erased during page refresh, you should look into localStorage or $cookies.
Related
I was following the tutorial Tour of Heroes. While adding a new hero they say
You can use an element paired with an add button.
Insert the following into the HeroesComponent template, after the heading:
<div>
<label for="new-hero">Hero name: </label>
<input id="new-hero" #heroName />
<!-- (click) passes input value to add() and then clears the input -->
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
Add hero
</button>
</div>
Here I don't understand what is #heroName inside in input element (what is it called) and how does it help in pairing that input element with the button element.
Basically, what is that #<keyword> syntax within that input element. I know that it is not the id as that is already declared.
To answer the question, it's a reference to the input. You can find more details here:
https://angular.io/guide/template-reference-variables
Template variables help you use data from one part of a template in
another part of the template. Use template variables to perform tasks
such as respond to user input or finely tune your application's forms.
In the tutorial context, it's a reference to the input element. It helps to pair it with a button to be able to access it's value, without having to actually define a variable in the component.ts and trying to update the template directly. This help you "skip" a step, and actually have direct access to that value.
Template reference variables can become very handy in certain cases and are commonly used for example in angular material ( to call a function for a component )
<mat-menu #menuComponent ...></mat-menu>
<button (click)="menuComponent.close()"></button>
In the above example, you bind the menuComponent variable to "mat-menu" component, in which case you can access all the variables, public methods of such. In that case we can call "close" method from the mat-menu component.
Let me know if this is still unclear and I can try to give you more examples and explanation
I have this JSON in my home.ts
public json_html = {
"button1":"<p><b>first section<b></p>",
"button2":"<p>second section</p>",
"button3":"<p><b>third section<b></p>",
}
On my home.html I want to see three links - button1 , button2 , button3 . If button 1 is clicked, then need to show its data using code like this:
document.getElementById("c1").innerHTML+= "clicked content";
How can I achieve this ?
I'm going to assume you might have more buttons, so let's build a loop. But first, Angular2's ngFor directive doesn't let you iterate over objects, they must be arrays. So we can grab get a array of keys first in your constructor:
this.buttons = Object.keys(this.json_html);
Then we can utilize the ngFor directive in our home.html
<button ion-button *ngFor="let button of buttons" (click)="selectedButton = button">
{{ button }}
</button>
And then we can add to home.html a div to show the html data:
<div *ngIf="selectedButton" [innerHtml]="json_html[selectedButton]">
</div>
Now this is really simple, because your coding your HTML into the JSON object. I'd suggest looking at a tabs example project on Ionic when the data gets more complex.
To achieve that, you should follow this steps:
Create an array of object keys using this.keysArr = Object.keys(this.json_html), because we can't iterate through objects in view
Iterate through this keys using <div *ngFor="let button of keysArr"></div>
Inside the div from step 2, declare another one: <div [innerHTML]="json_html[button]"></div>
I'm using [innerHTML] instead of the regular document.getElementById("c1").innerHTML+= "clicked content", because it looks like "the Angular way". Here is the working example (in app folder):
https://stackblitz.com/edit/angular-9pyhg3?file=app/button-overview-example.html
UPDATE
"It is showing me data of all 3 together, i want to see button1, button2, button3 and on clicking it to show data of the clicked element. Whereas currently it is directly showing data, can you update stackblitz"
Sure, here it is:
https://stackblitz.com/edit/angular-9pyhg3-e49qys?file=app/button-overview-example.html
I am getting a problem to reflect the value in the view, I don't want to load the complete page because its very costly to load the page,
I have two controllers(controller1 and controller2), one service(service1) and two views(modalwindow.html and product.html).
The scenario is:
1.User is on product.html(contains multiple accordions) and user explicitly close all the accordions.
2.User clicked on icon which opened modal window, since it's opened the modal window it's not going to change the URL on the address bar.
3.Modal window(Modalwindow.html ) has the link of show product, since the product page is the active page(show product is the accordion which closed by user explicitly) on the browser.
on the click of link, appropriate accordion should be open on the product.html
I am communicating between modal window controller (controller2.js) and product page(controller1.js) through service (service.js), I am calling controller2
how to fix this issue without loading a complete page
Assuming the modal closes when a product is selected, it can return the value to the calling controller. Then it opens the specified accordion.
I fiddled around in your fiddle. You are mixing two ways of showing your categories in the fiddle: an accordion value, and two boolean values (categoryAccordion, productAccordion). I moved to using one way and it seems to work with the eventCallback. Also, you checked wrongly for your 'args' in the eventCallback. You're passing it back as an array, so get the value out of the array first.
Also, you checked wrongly for your 'args' in the eventCallback.`
if (args[0] == 'Product') {
$scope.productAccordion = true;
$scope.categoryAccordion = false;
} else {
$scope.productAccordion = false;
$scope.categoryAccordion = true;
}
See fiddle.
Should it not be working in your real code, it might have something to do with the following SO question.
I want to redirect the shopper to the main shopping page after they've added an item to the cart. I am using Business Catalyst to build the cart, and I'm seeing a lot of outdated solutions to this problem but not many new.
Here is what the button looks like right now:
<input class="productSubmitInput" name="AddToCart_Submit" type="submit" value="Purchase Now" onclick="AddToCart(150613,5623468,'',4,'','',true);return false;" />
What do I do??
From BC's old knowledgebase
Refreshing the page after adding a product to a cart
Add this code in the Site-Wide Template that your shopping cart is
using (or link to this JavaScript in an external .js file).
<script type="text/javascript">
function AddProductExtras(){
document.location.reload(true);
}
</script>
Tested just now,
function AddProductExtras() { $('input[name="AddToCart_Submit"]').on('click',document.location.replace('/products'));
}
When you use the {tag_addtocart} and a person adds a product to the cart, it will show an alert saying: item(s) added to your cart. So if you want to direct a user to the shopping page after they add an item, you can use the following code (this solution uses jQuery):
$(function() {
window.alert = function(text) {
if (text.indexOf("item(s) added to your cart") > -1) {
window.location.href = "http://example.com/url-of-shopping-page";
}
};
});
Note: Add the above script into the Large Product layout.
In the file main.php at views/layouts/main.php, I want to add few classes to the body tag and add css class 'active' to the navigation bar items according to the view being displayed. Is there any way I can get action id in main.php?
I hope that html is not req
Or you can use:
Yii::$app->controller->id // get controller name
to access the controller, and:
Yii::$app->controller->action->id // get action name
for getting the current action id. But put this directive at the top of file:
use Yii;
In a layout you can access the current controller via $this->context, and so the current action id by $this->context->action->id