I want to show product variations which come through the woo-commerce gravity form add-ons
on the cart page in the table after product name column.
Mean I want to show the product options which can change or update after adding to the cart.
How can I do ?
Please help me out to sholve the problem.
Thanks
This would require some heavy customizations to the templates. Not quite that easy considering you'd also have to use AJAX. If you're looking for a place to start, take a look at editing the templates in /wp-content/plugins/woocommerce/cart/ and using template overrides. Not quite an answer here but also not something that can be answered easily.
I my case was a template problem, I fixed this converting my theme in child of twentyxxx theme and adding this code in head section of header.
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/prettyPhoto/jquery.prettyPhoto.js?ver=3.1.5'></script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/prettyPhoto/jquery.prettyPhoto.init.js?ver=2.2.10'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wc_single_product_params = {"i18n_required_rating_text":"Please select a rating","review_rating_required":"yes"};
var wc_single_product_params = {"i18n_required_rating_text":"Please select a rating","review_rating_required":"yes"};
/* ]]> */
</script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/frontend/single-product.js?ver=2.2.10'></script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/jquery-blockui/jquery.blockUI.js?ver=2.60'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","ajax_loader_url":"\/\/ahrf-preview.nettheory.com\/wp-content\/plugins\/woocommerce\/assets\/images\/ajax-loader#2x.gif"};
var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","ajax_loader_url":"\/\/ahrf-preview.nettheory.com\/wp-content\/plugins\/woocommerce\/assets\/images\/ajax-loader#2x.gif"};
/* ]]> */
</script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/frontend/woocommerce.js?ver=2.2.10'></script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/jquery-cookie/jquery.cookie.js?ver=1.3.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","fragment_name":"wc_fragments"};
var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","fragment_name":"wc_fragments"};
/* ]]> */
</script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/frontend/cart-fragments.js?ver=2.2.10'></script>
<script type='text/javascript' src='http://ahrf-preview.nettheory.com/wp-content/themes/twentyfifteen/js/skip-link-focus-fix.js?ver=20141010'></script>
<script type='text/javascript' src='http://ahrf-preview.nettheory.com/wp-includes/js/comment-reply.js?ver=4.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var screenReaderText = {"expand":"<span class=\"screen-reader-text\">expand child menu<\/span>","collapse":"<span class=\"screen-reader-text\">collapse child menu<\/span>"};
/* ]]> */
</script>
<script type='text/javascript' src='http://ahrf-preview.nettheory.com/wp-content/themes/twentyfifteen/js/functions.js?ver=20141212'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wc_add_to_cart_variation_params = {"i18n_no_matching_variations_text":"Sorry, no products matched your selection. Please choose a different combination.","i18n_unavailable_text":"Sorry, this product is unavailable. Please choose a different combination."};
/* ]]> */
</script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri()?>/js/frontend/add-to-cart-variation.js?ver=2.2.10'></script>
Related
I am facing issue that, contact form 7 load the page after submit.I have made separate header without WP_head include.
I am using like in separate template file:
<?php echo do_shortcode('[contact-form-7 id="6039" title="Hire us pop up form"]'); ?>
Please help.
I solved this by adding these scripts in my custom header file
<script>
jvcf7_loading_url= "#/wp-
content/plugins/contact-form-7/images/ajax-loader.gif";
jvcf7_invalid_field_design = "theme_1";
jvcf7_show_label_error = "errorMsgshow";
</script>
<script type='text/javascript' src='https:#/wp-
content/plugins/jquery-validation-for-contact-form-
7/js/jquery.validate.min.js'></script>
<script>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":
{"root":"http:\/\/#\/wp-
json\/","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":
{"empty":"Please verify that you are not a robot."}}};
/* ]]> */
</script>
<script type='text/javascript' src='#/wp-
content/plugins/jquery-validation-for-contact-form-
7/js/jquery.jvcf7_validation.js'></script>
i have a code that is just basically showing stars i want that to be added to my wordpress website i have successful uploaded and linked the css and js files in header.php and when i run any page it is infact loading the files i know due to security concerns wordpress wont let you add script in its editor what is the solution? here's my html and js code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RateYo - Scratchpad</title>
<meta charset="utf-8"></meta>
<link rel="stylesheet" href="jquery.rateyo.min.css"/>
</head>
<body>
<div>
<div id="rateYo1" style="margin: 10px"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.rateyo.min.js"></script>
<script>
$(function () {
$("#rateYo1").rateYo({
rating: 3.5,
readOnly: true
});
});
</script>
</body>
</html>
You can easily add anything you like via hooks.
add_action( 'wp_footer', 'my_custom_scripts', 500 );
function my_custom_scripts() { ?>
<script type="text/javascript">
(function ($, document, undefined) {
// Your custom code goes here.
}(jQuery, document))
</script><?php
}
Alternatively you could add it to the head as well using:
add_action( 'wp_footer', 'my_custom_scripts', 500 );
One ad unit just stopped to work and after trying to generate new code it is still not working. When I use google console it is just showing warning Ad unit failed to fetch. Other 3 ads are working normally. They are inserted before I started to work on this project.
New ad code is generated like
header
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/6000854/R300x250_L', [300, 250], 'div-gpt-ad-1367703773182-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
body
<!-- R300x250_L -->
<div id='div-gpt-ad-1367703773182-0' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1367703773182-0'); });
</script>
</div>
Old code is generated like
header
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-2838961657718357");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-2838961657718357", "Top728x90");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250Bottom");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
body
<!-- Right300x250Bottom -->
<script type='text/javascript'>
GA_googleFillSlot("Right300x250Bottom");
</script>
Is there maybe conflict because of diferent tags or code
NOTE: I am just wordpress front end developer, I don't have access to google DFP services and I am not generating tags or code
EDIT: Based on this discussion it looks like using the old GAM tags with GPT tags may now be an issue (just recently) http://productforums.google.com/forum/#!topic/dfp/snK7znwUMBE
I think you should convert the GAM tags to to GPT tags and use just the DFP GPT tags if possible to stop this happening... its most probably a conflict between the two scripts and depending on the order they get loaded the GPT tags may not work...
ORIGINAL:
I just tried your code and two ads showed as expected. So there does not appear to be any conflicts using both scripts at the same time.
Potentially you have been refreshing the page so many times that there are no ads that will be displaying for you through DFP anymore because of rate limits? That is just a wild guess though. If I refresh the page a lot I do get the failed to fetch message every now and then in the console so I think it is probably just a rate limit and something that a normal user will not have a problem with.
This is the code that I am using, two 300x250 ads show on the page so everything is working correctly.
<html>
<head>
<title>DFP TEST</title>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/6000854/R300x250_L', [300, 250], 'div-gpt-ad-1367703773182-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-2838961657718357");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-2838961657718357", "Top728x90");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250Bottom");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
</head>
<body>
<!-- R300x250_L -->
<div id='div-gpt-ad-1367703773182-0' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1367703773182-0'); });
</script>
</div>
<!-- Right300x250Bottom -->
<script type='text/javascript'>
GA_googleFillSlot("Right300x250Bottom");
</script>
</body>
</html>
Does anyone have some css styles and images to apply to jqTree to show the outline of the tree? Something like YUI treeview that shows a dotted border
http://developer.yahoo.com/yui/examples/treeview/default_tree.html
Turns out YUI treeview allows you to use existing html to render.
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/tree.jquery.js" type="text/javascript"></script>
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css">
<!-- Dependency source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
<script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" ></script>
<!-- TreeView source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js" ></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("committeeTree");
// if required, add nodes here
tree.render();
}
$(function () {
$("#myTree").tree({
data: source
});
treeInit();
});
</script>
I am trying to use Lightbox plugin but with jquery there is a conflict and gone through some articles and find out to get work around this but I have no luck in implementing it.
Here is my code:
References:
<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder"> </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
Script:
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
$("a[rel=lightbox[group1]]").live("click", function () {
$("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
})(jQuery);
</script>
Any help will be greatly appreciated!
I am using jquery 1.5.2 version
To prevent $ conflicts between jQuery and prototype, you have to put jQuery.noConflict(); right after you include jQuery and before any other code that expects $ to belong to another library. Then, once you've done that, $ will not map to jQuery, it will be used by the other libraries.
You don't show how you include jQuery. Here's an example right from the jQuery doc page for .noConflcit():
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
In your case, I think your code would go like this:
<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder"> </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
$("a[rel=lightbox[group1]]").live("click", function () {
$("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
// other jQuery code that uses $ can go here
})(jQuery);
// other jQuery code that uses jQuery (but not $) can go here or in other script tags
</script>
The order of including js files in relation to the call to jQuery.noConflict() is critically important.
You could try using jQuery object instead of $:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a[rel=lightbox[group1]]").live("click", function () {
jQuery("a[rel^='lightbox[group1]']").lightbox();
return false;
});
});
</script>
Everything looks right, so I'm thinking jQuery isn't loaded?
If using jQuery instead of $ doesn't work, then that's probably the case.
If you have the jQuery script in your site header, you'll want check FireBug's net console to see if it loaded - Google Chrome also has a nice network monitor you can use.
You could also use a jQuery lightbox instead of introducing the prototype library just to use a single plugin.