I have a simple list defined in angular:
defaultPointer.list=[
{name:'Scott',age:29,img:'http://localhost/learn/angular/img/1.jpg'},
{name:'Steve',age:19,img:'http://localhost/learn/angular/img/2.jpg'},
{name:'Ben',age:39,img:'http://localhost/learn/angular/img/3.jpg'},
{name:'Penny',age:12,img:'http://localhost/learn/angular/img/4.jpg'}
];
Following is the HTML:
<li ng-repeat="x in defaultPointer.list | filter:defaultPointer.search">
<img ng-src="{{ x.img }}"/> <span>{{x.name | uppercase}} is {{ x.age }}</span>
</li>
For some reason, it's showing empty space and no errors in console. What could be the problem?
Please use my code and check it:
defaultPointer.list=[
{name:'Scott',age:29,img:'img/1.jpg'},
{name:'Steve',age:19,img:'img/2.jpg'},
{name:'Ben',age:39,img:'img/3.jpg'},
{name:'Penny',age:12,img:'img/4.jpg'}
];
Following is the HTML:
<li ng-repeat="x in defaultPointer.list | filter:defaultPointer.search">
<img ng-src="{{ x.img }}"/> <span>{{x.name | uppercase}} is {{ x.age }}</span>
</li>
You have to place this html file in angular folder.
Related
I am working on a Shopify website, what I have done is, show all the variants of a product as the individual product on the collection page, but what I want help with is, when someone click on the variant image on the collection page, it should open the same variant in the product page
<div class="col-6 col-md-4 custom-variant" data-tag="{{test}}">
<div class="hover-grid-wrapper">
<a href="{{product.url}}">
{%if variant.image.src != blank %}
<img src="{{ variant.image.src | img_url: 'master' }}" alt="" class="img-responsive" />
{% else %}
<div class="product-image pr oh lazyload" data-include="{{pr_url}}/?view=img{{sett_equal}}"><div class="nt_bg_lz nt_fk_lz"{% unless sett_equal %} style="padding-top:{{ 1 | divided_by: images_0.aspect_ratio | times: 100}}%;"{% endunless %}></div></div>
<img src="{{ product.featured_image.src | crop:center | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
{% endif %}
{% assign vTitle = variant.title | split: ' / ' %}
{% assign title = words[0] | capitalize %}
<span class="color-text color-{{color | handle }} {{variant.id}}">{{title}}</span>
</a>
{%- if variant.inventory_quantity <= 0 and variant.inventory_management == 'shopify' -%}{%- assign txt = 'products.product.pre_orders' | t -%}{%- else -%}{%- assign txt = 'products.product.add_to_cart' | t -%}{%- endif -%}
<span>+ Quick Add</span>
</div>
</div>
This is my code
Easy :)
You should use variant deep link
On the link of the product, you should add ?variant=[variant-id]
On your code replace:
<a href="{{product.url}}">
by
<a href="{{ product.url }}?variant={{ variant.id }}">
I am using shopify buy button js to create and add items to the cart on my website, and it redirects the user to my shopify site on checkout.
Now, on the checkout page, I want to retrieve information about the cart and its lineitems inside checkout.liquid but the cart is always empty when I tried by calling /cart.js and also Shopify.getCart() with their jquery wrapper.
Below are what I have tried:
Inside checkout.liquid
Attempt 1:
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript">
$(function() {
console.log(Shopify.getCart());
});
</script>
Attempt 2:
<script type = "text/javascript" >
$(function() {
$.getJSON('/cart.js', function(cart) {
console.log(cart);
});
});
</script>
Any ideas on how to get those information? Thanks
It appears that there is no direct way to retrieve these values on the client side. I ended up rendering the data on server side and parse them using jQuery instead.
<div class="data" style="display:none;">
<span class="taxAmount">{{ checkout.tax_price | money_without_currency | remove: ',' }}</span>
<span class="grandTotal">{{ checkout.total_price | money_without_currency | remove: ',' }}</span>
<span class="currency">{{ shop.currency }}</span>
{% for line_item in checkout.line_items %}
<div class="lineItem">
<span class="name">{{ line_item.product.title }}</span>
<span class="sku">{{ line_item.sku }}</span>
<span class="quantity">{{ line_item.quantity }}</span>
<span class="unitPrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
<span class="salePrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
<span class="totalPrice">{{ line_item.price | times: line_item.quantity | money_without_currency | remove: ',' }}</span>
<span class="imageUrl">{{ line_item.image | image_url }}</span>
</div>
{% endfor %}
</div>
<script type="text/javascript">
$(function() {
$('.data .lineItem').each(function() {
"sku": $(this).find('.sku').text(),
"name": $(this).find('.name').text()
// do my stuff
});
});
I read a lot of articles and posts and question in StackOverflow and the others but did not get my answer. I'm implementing a simple comment and reply component for my Laravel project.
* I have a table like below: *
id | name | body | reply_id | status
---------------------------------------------------------
1 | bran | good | null | accepted
2 | sansa | awe full article | 1 | accepted
3 | jan | soo Cool | 1 | accepted
4 | nightK | dont post it again| Null | accepted
5 | kalici | wow nice | Null | accepted
6 | worm | why ?? | 4 | accepted
If reply_id filed be Null i get it as main comment not as reply of comment
in my vuejs mounted() i will get all comments that are Null reply_id and accepted by admin from method named by getComments() and call it in mounted() .
also i'm using laravel pagination
my getComments as below vue code :
getComments(page = 1) {
var self = this;
axios.get('/comment/pagination/+post_id+ '?page=' + page)
.then(function(response) {
self.comments = response.data;
});
and show it with blow html and vuejs tags :
<div v-for="comment in comments.data" :key="comment.id" class="comments">
<div class="media comment" v-if="comment.reply==null">
<img src="/images/avar.png" width="50px" height="50px" alt="image">
<div class="media-body">
<h6 v-if="comment.user"> {{ comment.user['f_name'] }} {{ comment.user['l_name'] }} </h6>
<h6 v-if="!comment.user">{{ comment.name }}</h6>
<ul class="list-inline">
<li class="list-inline-item"><span class="fa fa-calendar"></span>{{ comment.created_at }}</li>
<li class="list-inline-item">Reply</li>
</ul>
<p>
{{ comment.body }}
</p>
</div>
</div>
<hr>
</div>
until here my component works well. shows just the main comments.
now its time to load the replies of main comments .
i use a method with name getReplies :
getReplies(MainCommentId) {
console.log(MainCommentId);
var self = this;
axios.get('/comment/replies/' + MainCommentId)
.then(function(response) {
console.log(response.data.data);
self.replies = response.data.data;
});
},
and then i changed my main comment view to below :
<div v-for="comment in comments.data" :key="comment.id" class="comments">
<div class="media comment">
<img src="/images/avar.png" width="50px" height="50px" alt="image">
<div class="media-body">
<h6 v-if="comment.user"> {{ comment.user['f_name'] }} {{ comment.user['l_name'] }} </h6>
<h6 v-if="!comment.user">{{ comment.name }}</h6>
<ul class="list-inline">
<li class="list-inline-item"><span class="fa fa-calendar"></span>{{ comment.created_at }}</li>
<li class="list-inline-item">Reply</li>
</ul>
<p>
{{ comment.body }}
</p>
<!-- Nested Comment -->
{{ getReplies(comment.id) }}
<div v-for="reply in replies" :key="reply.id" class="media comment">
<img src="/images/avar.png" width="50px" height="50px" alt="image">
<div class="media-body">
<h6 v-if="reply.user"> {{ reply.user['f_name'] }} {{ reply.user['l_name'] }} </h6>
<h6 v-if="!reply.user">{{ reply.name }}</h6>
<ul class="list-inline">
<li class="list-inline-item"><span class="fa fa-calendar"></span>{{ reply.created_at }}</li>
<li class="list-inline-item">Reply</li>
</ul>
<p>
{{ reply.body }}
</p>
</div>
</div>
</div>
</div>
<hr>
</div>
but when it wants to get replies by the method by each step of v-for main comments it will continuously send the request and the change data in HTML reply part. it acts like crazy like the below image.
any help will be appreciated.
This line {{getReplies(comment.id)}} create that issue, getReplies() called repeatedly and resetting replies
You must preload the replies and store it like this
this.replies = {
'1': [{
'message': "test"
},
{
'message': "test"
},
],
'2': [{
'message': "test"
},
{
'message': "test"
},
]
};
The keys( Now 1 and 2) of your replies array will be main comment id
And add this function in methods
methods : {
getReply (commentID) {
return this.replies[commentID];
}
}
Change the code like this
<div v-for="reply in getReply(comment.id)" :key="reply.id" class="media comment">
<img src="/images/avar.png" width="50px" height="50px" alt="image">
<div class="media-body">
<h6 v-if="reply.user"> {{ reply.user['f_name'] }} {{ reply.user['l_name'] }} </h6>
<h6 v-if="!reply.user">{{ reply.name }}</h6>
<ul class="list-inline">
<li class="list-inline-item"><span class="fa fa-calendar"></span>{{ reply.created_at }}</li>
<li class="list-inline-item">Reply</li>
</ul>
<p>
{{ reply.body }}
</p>
</div>
</div>
Right now, I have a bunch of filters that use ng-click to filter some JSON data pulled in from a factory:
<ul class="brands">
<li><a href="#" ng-click="brandFilter = null">All</li>
<li>Apple</li>
<li>Samsung</li>
<li>HTC</li>
</ul>
<div ng-controller="phonesController">
<div class="phonesContent">
<article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
<img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
<p>{{ phones.name }}</p>
<p>Price: ${{ phones.price }}</p>
<p>No term: ${{ phones.no-term }}</p>
</article>
</div>
</div>
It works well, but I'm wondering how I can programmatically generate the links and use ng-click to filter. My best attempt so far:
<div ng-controller="phonesController">
<ul class="brands">
<li><a href="#" ng-click="brandFilter = null">All</li>
<li ng-repeat="phones in phoneData | unique: 'manufacturer'">{{ phones.manufacturer }}</li>
</ul>
<div class="phonesContent">
<article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
<img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
<p>{{ phones.name }}</p>
<p>Price: ${{ phones.price }}</p>
<p>No term: ${{ phones.no-term }}</p>
</article>
</div>
</div>
The links are generating properly and the data is showing up in the phonesContent div, but the filtering is not working. I keep getting a $parse:syntax error so something is wrong with my expression where brandFilter = { 'manufacturer' = phones.manufacturer } (I think).
Rob has pointed out why your code is not working, but I would say it's best to avoid having assignment statements in your directives. That way the interface to your controler is clearly defined.
I'd suggest adding a scope function setFilter() to your controller that sets the filter value:
$scope.setFilter = function (value) {
$scope.brandFilter = value ? { manufacturer: value } : null;
};
Then you can do this:
<li><a href="#" ng-click="setFilter(null)">All</li>
<li ng-repeat="phones in phoneData | unique: 'manufacturer'">
{{ phones.manufacturer }}
</li>
I have figured out static (hard-coded) multi-column filtering; Here.
<p><input type="text" ng-model="s1"></p>
<p><input type="text" ng-model="s2"></p>
<ul>
<li ng-repeat="x in names | filter:{name:s1} | filter:{country:s2} | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
However, I want to be able to create the text box filters dynamically based on the model (ie. for any # of columns).
It seems like it should be something like this, but the text boxes do nothing.
<div ng-repeat="n in names">
<input type="text" ng-model="n.column" >
</div>
<ul>
<li ng-repeat="x in names | filter:{name:name} | filter:{country:country} | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
I've searched all around, and I find it hard to believe something like this hasn't been done [often enough to be found by my searching].
Any help is appreciated.
DEMO
<div ng-repeat="n in headers">
<input type="text" ng-model="filters[n.column]" >
</div>
<ul>
<li ng-repeat="x in names | filter:{name:filters.name} | filter:{country:filters.country} | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
Controller
function namesController($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
$scope.filters = {};
$scope.headers = [
{column: "name"},
{column: "country"}
];
}