In my e-commerce environment, I need a jQuery validation between 2 product attributes. Simplified it needs to check if the cart has a product which is present on the same page:
<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." ></a>
</li>
</ul>
<! –– Product ––>
<article class="post-6735 product" data-id="6735">
<div class="product_wrapper">
<a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
</div>
</article>
I would like to be able to check if the attribute and its value from data-product_id within the cart is the exact same as in article a.button element. My approach:
jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id').each( function() {
if( jQuery('article a.button')/*check if it is the same*/){
// do something here
}
});
As you can see the ID number 6735 is in more attributes. So perhaps a different way is also possible?
To get current_ProductId, You just need to get from $('article').data('id')
To loop through all mini cart items, You just need mini_cart_item
As you can see, we can get data attribute value by using data
var current_ProductId = $('article').data('id');
$('.mini_cart_item').each(function() {
var productId_MiniCartItem = $(this).find('a').data('product_id');
if(productId_MiniCartItem == current_ProductId){
// do something here
console.log("ProductId: " + productId_MiniCartItem + " has been ordered");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." >6735</a>
</li>
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6736" data-cart_item_key="..." >6736</a>
</li>
</ul>
<! –– Product ––>
<article class="post-6735 product" data-id="6735">
<div class="product_wrapper">
<a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
</div>
</article>
If you only need help to clarify your solution it would be
$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
if( $('article a.button').data('product_id') == $(this).data('product_id'){
// do something here
}
});
each iterate through collection of jquery elements.
This
jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id')
is the single value, it would take the first element that finds and then executes attr on it.
UPDATE
To update all products button on site based on all products that are inside the card
var product_id = "";
var article = ".post-"; // class of article
$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
product_id = $(this).data('product_id')
article = article + product_id; // we add strings here, example .post-6225
$(article + " .product_wrapper a").attr('disabled', 'disabled');
});
Related
I'm trying to build a page that contains multiple inner pages - a front page that displays by default, and child pages which display when relevant links on the front page are clicked.
What I am trying to achieve is that when a page-link element is clicked, the class active-page is added to the inner page with the same id, and the intro section has a class off-canvas added, & the active page is set in localStorage - so that if for any reason the page is refreshed, the last page that was being viewed is displayed.
Alternatively, when a lnk-rtn-home element is clicked, the current inner-page should lose the active page class while front-page loses its off-canvas class. Likewise, this should update the localStorage.
The HTML structure is as follows:
<body>
<div class="container">
<section id="intro" class="front-page row">
{{ content }}
<a data-id='about-me' class='page-link'>About Me</a>
{{ more content }}
<a data-id='contact' class='page-link'>Contact</a>
</section>
<section id="about-me" class="inner-page row">
{{ content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
<section id="contact" class="inner-page row">
{{ content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
</div>
</body>
The current JS stands at
$(document).ready(function(){
var activePageSet = localStorage.getItem('current-page');
// Check if an active page has been set
if (activePageSet) {
$('#' + activePageSet).addClass('active-page');
$('#intro').addClass('off-canvas');
}
// Links to inner pages
$('.page-link').click(function() {
var currentPage = $(this).data("id");
$('#' + currentPage).addClass("active-page");
$('#intro').addClass('off-canvas');
localStorage.setItem('current-page', JSON.stringify(currentPage));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
if ($('.inner-page').hasClass('active-page')) {
$(this).removeClass('active-page');
localStorage.removeItem('current-page');
}
$('#intro').removeClass('off-canvas');
});
});
No amount of playing around with this has got it working, and at this stage I'm lost as to how to achieve it.
This problem can be solved with using only 1 class. You have made your code more complex by using 2 classes. I replaced .active-page and .off-canvas with the class .hidden. This gives a simpler code to follow.
var activePageSet = null; //localStorage.getItem('current-page');
//not able to do localStorage in snippet
// Check if an active page has been set
if (activePageSet) {
$('#' + activePageSet).removeClass('hidden');
$('#intro').addClass('hidden');
}
// Links to inner pages
$('.page-link').click(function() {
var activePageId = $(this).data("id");
$('#' + activePageId).removeClass("hidden");
$('#intro').addClass('hidden');
//localStorage.setItem('current-page', JSON.stringify(activePageId));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
var activePage = $(this).parent();
activePage.addClass('hidden');
$('#intro').removeClass('hidden');
//localStorage.removeItem('current-page');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section id="intro" class="front-page row ">
{{ intro content }}
<a data-id='about-me' class='page-link'>About Me</a>
{{ more content }}
<a data-id='contact' class='page-link'>Contact</a>
</section>
<section id="about-me" class="inner-page row hidden">
{{ about content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
<section id="contact" class="inner-page row hidden">
{{ contact content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
</div>
you just need to select right element for hasClass condition.
You can use a parent, like this:
$(document).ready(function(){
// Links to inner pages
$('.page-link').click(function() {
var currentPage = $(this).data("id");
$('#' + currentPage).addClass("active-page");
$('#intro').addClass('off-canvas');
//localStorage.setItem('current-page', JSON.stringify(currentPage));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
var jqSection = $(this).parent();
if (jqSection.hasClass('active-page')) {
jqSection.removeClass('active-page');
localStorage.removeItem('current-page');
}
$('#intro').removeClass('off-canvas');
});
});
Here is an example: https://plnkr.co/edit/xfgHpWdDpnDTyjLYYrGd?p=preview
I have a product catalog and I want to save on localstorage the products selected by the user.
The jquery script only gets the first product on each page on each click... it simply ignores the rest of the products, and the console prints the same object.
Here is my HTML+TWIG code
{% for products in pagination %}
<div class="product col-sm-6 col-lg-6 col-md-6 hero-feature">
<div id="{{attribute(products ,'id')}}" class="product thumbnail">
<img id="prodImage" class="img-responsive img-rounded" src="{{attribute(products ,'image')}}" style="width:150px;height:150px" >
<div class="product caption">
<h4 id="prodPrice" class="product pull-right"><b>{{ attribute (products, 'price') }}Lei</b></h4>
<h4 id="prodName" style="height:100px;width:200px;">
<a id="prodLink"
href="{{ attribute (products, 'affiliatelink') }}"
target="_blank">{{attribute ( products, 'name') }}</br></a>
</h4>
</div>
<div class="add-to-cart" class="product" >
<button id="buttonProd" class="oneButton btn btn-danger " value="Save" type="button">Adauga</button>
</div>
</div>
</div>
{% endfor %}
Here is the jquery script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript' defer="defer">
$(document).ready(function() {
var prodId = $('.thumbnail').attr("id");
$("#buttonProd").on("click", 'button', function(event){
event.preventDefault();
var products =
{
prodID :$('.thumbnail').attr("id"),
prodName :$('#prodName').text(),
prodPrice :$('#prodPrice').text(),
prodImage :$('#prodImage').attr('src'),
prodLink :$('#prodLink').attr('href')
};
localStorage.setItem('products-' + prodId, JSON.stringify(products));
var retrievedObject = JSON.parse(localStorage.getItem('products-' + prodId));
console.log('retrievedObject: ', retrievedObject);
});
});
</script>
How can I make the script take each product proprieties on click. Thank you in advance.
In JQuery, the assumption is made that all ID's will be unique. Since you're repeating "#buttonProd", JQuery will only select the first one to bind the action to. If you want to bind to multiple elements, you'll either have to give each button a unique ID or use some other selector to attach your jQuery functionality.
From the documentation for the ID Selector:
Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.
As the other answers have eluded to you should be using a different selector. I recommend simply adding a descriptive class to each element you wish to grab data from.
<div class="products">
<div class="product">
<div class="productName">First Product</div>
<div class="productPrice">5.00</div>
</div>
<div class="product">
<div class="productName">Second Product</div>
<div class="productPrice">4.00</div>
</div>
<button id="buttonProduct">Log Product Info</button>
</div>
If you notice in the above HTML each div that contains a product's name or a product's price shares the same class productName and productPrice respectively. In addition each container class for each product has the same class as well: product.
This will allow us to utilize the JQuery class selector $(".") to iterate over each product container. We do this using the .each() function. We use the .find() function to locate productName and productPrice in each iteration of the loop.
$(document).ready(function() {
$("#buttonProduct").click(function(){
var products = [];
// Notice the dot in $(".product") that is the class selector
// the .each iterates over every element that matches the preceding selector
$(".product").each(function(){
products.push({
// The .find() selects an element inside $(this)
// that matches the parameter (either .productName or .productPrice
productName : $(this) .find('.productName').html(),
productPrice : $(this).find('.productPrice').html()
});
});
console.log(products);
});
});
For a working example of this check out this jsfiddle. (I noticed you had console.log() in your code so that's where I output the result.)
You want to save the product in localStorage on clicking of corresponding button right?
for that instead of binding click event via jquery, put it in html and move the click code to a function saveProduct()
HTML:
<button id="buttonProd" class="oneButton btn btn-danger " value="Save" type="button" onclick="saveProduct({{attribute(products ,'id')}})">Adauga</button>
JS:
function saveProduct(event, prod_id){
event.preventDefault();
var products =
{
prodID :prod_id,
prodName :$('#'+prod_id+' #prodName').text(),
prodPrice :$('#'+prod_id+' #prodPrice').text(),
prodImage :$('#'+prod_id+' #prodImage').attr('src'),
prodLink :$('#'+prod_id+' #prodLink').attr('href')
};
localStorage.setItem('products-' + prod_id, JSON.stringify(products));
var retrievedObject = JSON.parse(localStorage.getItem('products-' + prod_id));
console.log('retrievedObject: ', retrievedObject);
});
}
You need to change #buttonProd from an id to a class. An id is only supposed to appear once on a page, so jQuery will only apply it to one. Change it to a class in your markup and your script and it should work fine. Same for prodName, prodPrice, prodImage, and prodLink. Anything that will be going inside the loop needs to be a class, and any id should be unique, like you have {{attribute(products ,'id')}}
Here I need to click on a thumbnail, so that it will show the details on other page, it should show the details of that particular thumb only. I used xml file here to fetch the data and display thumbnail. I am unable to pass the values to other page and open it at the same time onclick event. pls help
<div class="container-page">
<div class="row" id="portfolio">
<div class="col-md-2">
<nav>
<ul class="nav nav-pills nav-stacked" id="test">
<li role="presentation" class="active">Services</li>
<li role="presentation">Desktop</li>
<li role="presentation">Web</li>
<li role="presentation">Mobile</li>
<li role="presentation">Design</li>
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row" id="thumb">
</div>
</div>
</div>
</div>
<!-- js -->
$.ajax({
type:"GET",
url:"portfolio.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('thumbnail').each(function()
{
var $thumbnail=$(this);
var type=$thumbnail.find('type').text();
var descr=$thumbnail.find('description').text();
var title=$thumbnail.attr('title');
var imageurl=$thumbnail.attr('imageurl');
var thum='<div class="col-xs-6 col-md-3"> </div>';
thum=$(thum).appendTo("#thumb");
thum = $('').appendTo(thum);
var thumName = $('<div class="thumTitle"></div>').appendTo(thum);
$('<h2>'+title+'</h2>').appendTo(thumName);
$('<p>'+type+'</p>').appendTo(thumName)
thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum);
$(".forHove").mouseup(function()
{
//here is the redirection code, and want to pass $thumbnail to testxml.html page
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
});
}
});
Well, one of the alternative is using Web Storage API.
Just store img html and use it.
// use 'click' instead of 'mouseup'
$(".forHove").click(function()
{
// store image html to sessionStorage
window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html();
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
// in http://www.bookmane.in/skillworks/testxml.html
// You have data sotred and insert it somewhere
$(document.body).append(window.sessionStorage.image_data);
You can achieve this thing using the following steps:
Add a form tag like
<form action="YOUR_PATH" method="GET">
<a class="thubnailClick" href="#" >
<html_of_your_thumbnail>
<input type="text" name="NAME_OF_PARAMETER" />
</a>
</form>
Now override the click event of <a> tag with
$(document).ready(function() {
$(".thubnailClick").on('click', function(event) {
// to override the default behavior of <a> tag.
preventDefault();
// Find the form element using closest() of jQuery.
// Call submit event of that form using $(form_element).submit();
});
})
Now on the other page you can get parameter from URL using location.search or follow:
Getting Query params using JavaScript
Now use these Params according to your needs.
I have a listing of articles here, and I can't figure out how to execute the ng-click function calls on every new article inside the ng-repeat. Right now it works for existing articles, but when new articles are added dynamically (via AJAX), I need those to have the same functionality too.
For example: the ng-click function calls on the "+" sign to reveal social buttons seem to not work once new articles are inserted via AJAX (ie: delete articles, and let list be populated again with new elements)
Does AngularJS provide any tools to do that?
<div>
<div>
<input type="text" ng-model="search">
<span>{{filtered.length}} article(s)</span>
</div>
<div article-listing ng-repeat="article in filtered = (wikiArticles | filter:search)">
<!--Individual article begin-->
<span>
{{article.title}}
</span>
<div>
<a ng-click="articles.removeArticle($index)" title="Delete">
<span>✖</span>
</a>
<a ng-click="articles.toggleShare(article)">
<span class="plus-sign" title="Share">✖</span>
<div social-share ng-show="article.socialShare">
<div ng-click="socialShare = !socialShare" class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:title="{{article.title}}" addthis:description="{{article.extract}}" addthis:url="{{article.url}}">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_reddit"></a>
<a class="addthis_button_hackernews"></a>
</div>
</div>
</a>
</div>
<div>{{article.extract}}</div>
<!--Individual article end-->
</div>
</div>
Code for ng-click calls that don't seem to work for new article insertions
$scope.articles = (function() {
return {
shuffleArticles : function() {
$scope.wikiArticles.reverse();
},
removeArticle : function(index) {
$scope.wikiArticles.splice(index, 1);
$scope.fireAPICalls();
},
toggleShare : function(currArticle) {
var previousState = currArticle.socialShare;
angular.forEach($scope.wikiArticles, function(article) {
article.socialShare = false;
});
currArticle.socialShare = previousState ? false : true;
}
}
})();
Your ng-click calls are actually working- you can watch the ng-show toggle in the debugger.
The problem is that there is nothing to display on the new items you add.
The articles you initially add all have their icons populated with the .addthis classes, for instance here's your Facebook icon element:
<a class="addthis_button_facebook at300b" title="Facebook" href="#">
<span class=" at300bs at15nc at15t_facebook">
<span class="at_a11y">Share on facebook</span>
</span>
</a>
at300bs includes the following css which displays the image:
background: url(widget058_32x32.gif) no-repeat left!important;
However as you add new items, you aren't including the needed .addthis classes to them. Their elements look like this:
<a class="addthis_button_facebook"></a>
So ng-show has nothing to display (it shows a 0x0 div).
Add the .addthis classes to your new elements as you add them and you'll be all set.
I am designing a simple jquery live search function within a widget on a site i'm developing. I have borrowed some code I found and it is working great. The problem is though that instead of using a list like this:
<ul>
<li>Searchable Item 1</li>
<li>Searchable Item 2</li>
etc
I am using a list like this:
<ul>
<li>
<a href="#">
<div class="something>
<img src="something.jpg">
<p>Searchable Item 1</p>
</div>
</a>
</li>
etc.
As you can see the text I want to search is in the p tag. The functions I have used are searching all the other stuff (a href, div, img) and matching text found in those tags as well as the item within the p tag. Sorry if my explanation is a bit confusing but I will show you an example of the code here:
//includes im using
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
<script type="text/javascript" src="js/quicksilver.js"></script>
<script type="text/javascript" src="js/jquery.livesearch.js"></script>
//document ready function
$(document).ready(function() {
$('#q').liveUpdate('#share_list').fo…
});
//actual search text input field
<input class="textInput" name="q" id="q" type="text" />
//part of the <ul> that is being searched
<ul id="share_list">
<li>
<a href="#">
<div class="element"><img src="images/social/propellercom_icon.jpg… />
<p>propeller</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/diggcom_icon.jpg" />
<p>Digg</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/delicios_icon.jpg" />
<p>delicious</p>
</div>
</a>
</li>
</ul>
also here is the jquery.livesearch.js file I am using
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
I believe the problem lies here:
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
it is just using whatever it finds between the li tags as the search term to compare against the string entered into the text input field. The search function actually does work but seems to find too many matches and is not specific as I am also using a quicksilver.js search function that matches terms that are similar according to a score. When I delete all the other stuff from the li list (a href, img, div, etc) the search function works perfectly. If anyone has any solution to this I would be really greatful, I have tried things like:
return this.children('p').innerHTML but it doesn't work, I'm ok with PHP, C++, C# etc but totally useless with javascript and Jquery, they're like foreign languages to me!
In the jquery.livesearch.js file I believe you can replace this line:
var rows = list.children('li'),
with:
var rows = list.children('li').find('p'),
This should make it so the livesearch plugin will only search the paragraph tags in your list.
You will need to change the .show()/.hide() lines to reflect that you are trying to show the parent <li> elements since you are now selecting the child <p> elements:
Change:
rows.show();//1
rows.hide();//2
jQuery(rows[ this[1] ]).show();//3
To:
rows.parents('li:first').show();//1
rows.parents('li:first').hide();//2
jQuery(rows[ this[1] ]).parents('li').show();//3