Modify WooCommerce quantity inputs (jQuery) - javascript

I'm editing quantity-input.php to have buttons like that:
I found this and I'm trying to add that to my site but it has issues.
In single product page it works fine, in variable product the number doesn't change and when I tryed this in cart page, the last product works fine too, but when I use the plus button in the first product quantity input it adds 1 unit to all products.
Here is exactly the code i'm using
jQuery('.btn-number').click(function(e){
e.preventDefault();
fieldName = jQuery(this).attr('data-field');
type = jQuery(this).attr('data-type');
var input = jQuery("input[name='<?php echo esc_attr( $input_name ); ?>']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if(type == 'minus') {
if(currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if(parseInt(input.val()) == input.attr('min')) {
jQuery(this).attr('disabled', true);
}
} else if(type == 'plus') {
if(currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if(parseInt(input.val()) == input.attr('max')) {
jQuery(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
jQuery('.input-number').focusin(function(){
jQuery(this).data('oldValue', jQuery(this).val());
});
jQuery('.input-number').change(function() {
minValue = parseInt(jQuery(this).attr('min'));
maxValue = parseInt(jQuery(this).attr('max'));
valueCurrent = parseInt(jQuery(this).val());
name = jQuery(this).attr('name');
if(valueCurrent >= minValue) {
jQuery(".btn-number[data-type='minus'][data-field='<?php echo esc_attr( $input_name ); ?>']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
jQuery(this).val(jQuery(this).data('oldValue'));
}
if(valueCurrent <= maxValue) {
jQuery(".btn-number[data-type='plus'][data-field='<?php echo esc_attr( $input_name ); ?>']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
jQuery(this).val(jQuery(this).data('oldValue'));
}
});
<div class="quantity input-number__wrap">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="<?php echo esc_attr( $input_name ); ?>">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text form-control input-number">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="<?php echo esc_attr( $input_name ); ?>">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
EDIT Finally I used the plugin WilsonWilson sugested in the comment
below and work fine.

Related

Custom plus and minus quantity buttons in Woocommerce 3

I’m building custom WordPress and WooCommerce theme and adding custom plus and minus buttons to Product page quantity field. The buttons do update quantity input's value and I also receive "Item has been added to your cart" notification (on Product page) when I submit Add to Cart. But the cart page doesn’t show any items, neither says the cart is empty.
I can not work out which WooCommerce JS function I’m suppose to hook into, neither how to hook into it. Could I ask for help please?!
Thanks in advance!
My HTML layout:
<div class="quantity">
<label class="quantity__label" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity:', 'woocommerce' ); ?></label>
<div class="quantity__wrapper">
<input type="button" value="-" class="quantity__button quantity__remove js-qty-remove" />
<input
type="text"
id="<?php echo esc_attr( $input_id ); ?>"
class="input-text qty text quantity__input"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
size="4"
pattern="<?php echo esc_attr( $pattern ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>"
aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
<input type="button" value="+" class="quantity__button quantity__add js-qty-add" />
</div>
</div>
My custom jQuery function:
function quantityButtons() {
var $qtyAdd = $('.js-qty-add'),
$qtyRemove = $('.js-qty-remove'),
$qtyInput = $('.quantity__input');
$qtyAdd.on('click', addQty);
$qtyRemove.on('click', removeQty);
function addQty() {
var $qtyInput = $('.quantity__input'),
$qtyRemove = $('.js-qty-remove'),
$i = $qtyInput.val();
$i++;
$qtyRemove.attr("disabled", !$i);
$qtyInput.val($i);
}
function removeQty() {
var $qtyInput = $('.quantity__input'),
$qtyRemove = $('.js-qty-remove'),
$i = $qtyInput.val();
if ($i >= 1) {
$i--;
$qtyInput.val($i);
} else {
$qtyRemove.attr("disabled", true);
}
}
$qtyRemove.attr("disabled", !$qtyInput.val());
}
quantityButtons();
Your First code part is made from a customization of global/quantity-input.php Woocommerce template code…
So for testing, I have changed partially that global/quantity-input.php template code with the following (very near to your code):
?>
<div class="quantity">
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
<input type="button" value="-" class="qty_button minus" />
<input
type="number"
id="<?php echo esc_attr( $input_id ); ?>"
class="input-text qty text"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
size="4"
pattern="<?php echo esc_attr( $pattern ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>"
aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
<input type="button" value="+" class="qty_button plus" />
</div>
<?php
Now the necessary CSS and revisited jQuery code functions:
// Minimum CSS to remove +/- default buttons on input field type number
add_action( 'wp_head' , 'custom_quantity_fields_css' );
function custom_quantity_fields_css(){
?>
<style>
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
display: none;
margin: 0;
}
.quantity input.qty {
appearance: textfield;
-webkit-appearance: none;
-moz-appearance: textfield;
}
</style>
<?php
}
add_action( 'wp_footer' , 'custom_quantity_fields_script' );
function custom_quantity_fields_script(){
?>
<script type='text/javascript'>
jQuery( function( $ ) {
if ( ! String.prototype.getDecimals ) {
String.prototype.getDecimals = function() {
var num = this,
match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
if ( ! match ) {
return 0;
}
return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
}
}
// Quantity "plus" and "minus" buttons
$( document.body ).on( 'click', '.plus, .minus', function() {
var $qty = $( this ).closest( '.quantity' ).find( '.qty'),
currentVal = parseFloat( $qty.val() ),
max = parseFloat( $qty.attr( 'max' ) ),
min = parseFloat( $qty.attr( 'min' ) ),
step = $qty.attr( 'step' );
// Format values
if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
if ( max === '' || max === 'NaN' ) max = '';
if ( min === '' || min === 'NaN' ) min = 0;
if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;
// Change the value
if ( $( this ).is( '.plus' ) ) {
if ( max && ( currentVal >= max ) ) {
$qty.val( max );
} else {
$qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
}
} else {
if ( min && ( currentVal <= min ) ) {
$qty.val( min );
} else if ( currentVal > 0 ) {
$qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
}
}
// Trigger change event
$qty.trigger( 'change' );
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
The quantity buttons "plus" and "minus" work perfectly and are displayed this way:
Products are added to cart with the correct quantity:
if you change the quantity field value with plus and minus buttons, the "Update cart" button is activated when any quantity field change.
When you click on "Update cart", the quantities as correctly updated.
/* Show Buttons */
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_plus' );
function display_quantity_plus() {
echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_minus' );
function display_quantity_minus() {
echo '<button type="button" class="minus" >-</button>';
}
//Note: to place minus # left and plus # right replace above add_actions with:
//add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_minus' );
//add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_plus' );
add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
function add_cart_quantity_plus_minus() {
// Only run this on the single product page
if ( ! is_product() ) return;
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('form.cart').on( 'click', 'button.plus, button.minus', function() {
// Get current quantity values
var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
// Change the value if plus or minus
if ( $( this ).is( '.plus' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max );
} else {
qty.val( val + step );
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min );
} else if ( val > 1 ) {
qty.val( val - step );
}
}
});
});
</script>
//add css
.single-product div.product form.cart .quantity {
float: none;
margin: 0;
display: inline-block;
}

How can I show or hide specific element in Javascript?

i have wp theme that im modifying to add children age to it each room would have adults , kids & kid age
screenshot
this code below is the table fetch how many room there is & show each input type for each room
<tbody>
<?php foreach ( $room_ids as $room_id => $available_rooms ) :
$max_adults = get_post_meta( $room_id, '_room_max_adults', true );
$max_kids = get_post_meta( $room_id, '_room_max_kids', true );
if ( empty( $max_adults ) || ! is_numeric( $max_adults ) ) $max_adults = 0;
if ( empty( $max_kids ) || ! is_numeric( $max_kids ) ) $max_kids = 0;
?>
<tr>
<td>
<div class="thumb_cart">
<?php echo get_the_post_thumbnail( $room_id, 'thumbnail' ); ?>
</div>
<span class="item_cart"><?php echo esc_html( get_the_title( $room_id ) ); ?></span>
<input type="hidden" name="room_type_id[]" value="<?php echo esc_attr( $room_id ) ?>">
</td>
<td>
<div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms ) ?>">
<input type="text" class="qty2 form-control room-quantity" name="rooms[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'rooms' ) ) ?>">
</div>
</td>
<td>
<div class="numbers-row" data-min="0" <?php if ( ! empty( $max_adults ) ) echo 'data-max="' . esc_attr( $max_adults * $available_rooms ) . '" data-per-room="' . esc_attr( $max_adults ) . '"'; ?>>
<input type="text" class="qty2 form-control room-adults" name="adults[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'adults' ) ) ?>">
</div>
</td>
<td>
<?php if ( ! empty( $max_kids ) ) : ?>
<div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms * $max_kids ) ?>" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-kids" name="kids[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'kids' ) ) ?>">
</div>
<td>
<div class="numbers-row" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" id="kid1" class="qty2 form-control room-child_ages1" name="child_ages1[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages1' ) ) ?>">
</div>
<div class="numbers-row" id="kid2" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages2" name="child_ages2[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages2' ) ) ?>">
</div>
<div class="numbers-row" id="kid3" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages3" name="child_ages3[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages3' ) ) ?>">
</div>
<div class="numbers-row" id="kid4" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages4" name="child_ages4[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages4' ) ) ?>">
</div>
<?php endif; ?>
</td>
<td><strong><?php $total = $cart->get_room_field( $uid, $room_id, 'total' ); if ( ! empty( $total ) ) echo ct_price( $cart->get_room_field( $uid, $room_id, 'total' ) ) ?></strong></td>
</tr>
<?php endforeach; ?>
</tbody>
what im trying to add is an way on how to show/hide children age depending on how many kids there is i made this javascript
$('.room-kids').change(function(){
var $quantity = $(this).closest('tr').find('.room-quantity');
var kids = parseInt($(this).val(),10);
var max_kids = 0;
if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
if (kids >= 1) {
$("#kid1").show("fast");
}else{
$("#kid1").hide("fast");
}
if (kids >= 2) {
$("#kid2").show("fast");
}else{
$("#kid2").hide("fast");
}
if (kids >= 3) {
$("#kid3").show("fast");
}else{
$("#kid3").hide("fast");
}
if (kids >= 4) {
$("#kid4").show("fast");
}else{
$("#kid4").hide("fast");
}
max_kids = $(this).parent('.numbers-row').data('per-room');
if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );
}
});
my problem is when i change kids on any other row it affect children age of the first row instead of it's own row
$('.room-kids').change(function(){
var $quantity = $(this).closest('tr').find('.room-quantity');
var kids = parseInt($(this).val(),10);
var max_kids = 0;
if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
if (kids == 1) {
$("#kid1").show("fast");
}else{
$("#kid1").hide("fast");
}
if (kids == 2) {
$("#kid2").show("fast");
}else{
$("#kid2").hide("fast");
}
if (kids == 3) {
$("#kid3").show("fast");
}else{
$("#kid3").hide("fast");
}
if (kids == 4) {
$("#kid4").show("fast");
}else{
$("#kid4").hide("fast");
}
max_kids = $(this).parent('.numbers-row').data('per-room');
if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );
}
});

Adding increment to form input getting TypeError: qty_el is null

I´m trying to add increments in Magento grouped items, the code should be as follows but the javascript is returning TypeError: qty_el is null.
I think the problem should be when i pass the element id variable, but can´t solve this.
What am I missing? Is there another way to do this?
Hope someone could help me.
<div class="add-to-cart">
<div class="qty-button form-group">
<input type="text" name="super_group_<?php echo $_item->getId() ?>" id="super_group_<?php echo $_item->getId() ?>" maxlength="12" value="<?php echo $_item->getQty() * 1 ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Qty')) ?>" class="input-text qty group-qty form-control" />
<div class="box-container">
<div class="box-icon button-plus">
<input type="button" onclick="incre(2,'super_group_<?php echo $_item->getId() ?>')" class="qty-increase" />
</div>
<div class="box-icon button-minus">
<input type="button" onclick="decre(<?php echo json_encode ($i);?>,'super_group_<?php echo $_item->getId() ?>')" class="qty-decrease" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
function incre(qty_inc,idname)
{
var qty_el = document.getElementById(idname);
var qty = qty_el.value;
if( !isNaN( qty )){
if(qty_inc>0){
qty_el.value = Number(qty) + qty_inc ;
} else {
qty_el.value++;
}
}
}
function decre(qty_inc,idname)
{
var qty_el = document.getElementById(idname);
var qty = qty_el.value;
if(!isNaN( qty ) && qty > '0') {
if(qty_inc>0){
qty_el.value = Number(qty) - qty_inc;
} else {
qty_el.value--;
}
}
}
You can try another way to increment decrement quantity on grouped products
<label for="qty"><?php echo $this->__('Quantity:') ?></label>
<a href="javascript:void(0);" onclick="var qty_el = document.getElementById('super_group_<?php echo $_item->getId(); ?>'); var qty = qty_el.value; if( !isNaN( qty ) && qty > 1 ) qty_el.value--;return false;" class="qty-decrease" > - </a>
<input type="text" pattern="\d*" name="super_group[<?php echo $_item->getId() ?>]" id="super_group_<?php echo $_item->getId(); ?>" maxlength="12" value="<?php echo max($this->getProductDefaultQty() * 1, 1) ?>" title="<?php echo $this->__('Quantity') ?>" class="input-text qty" />
<a href="javascript:void(0);" onclick="var qty_el = document.getElementById('super_group_<?php echo $_item->getId(); ?>'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" class="qty-increase" /> + </a>

Check if radio button value is, then echo some HTML

I want to check if the value of the select field is some value and if it is, it needs to echo some text.
I use this code for input box in the form:
<li>
<div class="input-box">
<strong><?php echo $this->__('Would you recommend this product to a friend?') ?></strong>
<?php foreach ( $this->getOptions() as $option ): ?>
<label class="recommend">
<input type="radio" name="recommend" id="recommend_field
<?php echo $option['value'] ?>" class="radio-gender" value="
<?php echo $option['value'] ?>"
<?php if ($option['value'] == $value)
echo ' checked="checked"' ?> >
<?php echo $this->__($option['label']) ?></input>
</label>
<?php endforeach ?>
</div>
</li>
And I currently echo the entire value of the input box with this line:
<div id="reviewwriter">
<span class="recommendation">
<?php echo $this->getAnswer() ?>
</span>
</div>
Code is loaded by this php:
public function confRecommendItemsArray()
{
$resArray = array();
if (Mage::getStoreConfig('advancedreviews/recommend_options/recommend_field1')) {
$resArray[] = array(
'value' => 1,
'label' => Mage::getStoreConfig('advancedreviews/recommend_options/recommend_field1')
);
}
if (Mage::getStoreConfig('advancedreviews/recommend_options/recommend_field2')) {
$resArray[] = array(
'value' => 2,
'label' => Mage::getStoreConfig('advancedreviews/recommend_options/recommend_field2')
);
}
And
class AW_AdvancedReviews_Block_Recommend_Field extends Mage_Core_Block_Template
{
public function canShow()
{
return (Mage::helper('advancedreviews')->confShowRecommend()
&& count(Mage::helper('advancedreviews')->confRecommendItemsArray()));
}
public function getOptions()
{
return Mage::helper('advancedreviews')->confRecommendItemsArray();
}
}
The values of the select field are
1. Yes
2. No
I want to check if value is Yes and if so echo 'Value is Yes'.
And if value is No than echo ''.
See also this JSFiddle: http://jsfiddle.net/wL3xu9d7/1/
But I do not know why it is not working.
How can I achieve that?
i hope this solution you want...
<li>
<div class="input-box">
<strong><?php echo $this->__('Would you recommend this product to a friend?') ?></strong>
<?php foreach ( $this->getOptions() as $option ): ?>
<label class="recommend">
<input type="radio" name="recommend" id="recommend_field<?php echo $option['value'] ?>" class="radio-gender" value="<?php echo $option['value'] ?>"<?php if ($option['value'] == $value) echo ' checked="checked"' ?>><?php echo $this->__($option['label']) ?></input>
</label>
<?php endforeach ?>
</div>
</li>
add hidden field on answer
<div id="reviewwriter">
<span class="recommendation" id="reviewwriteranswer">
<?php echo $this->getAnswer() ?>
</span>
</div>
<script>
$$(".radio-gender").each(function(el) {
el.observe("click", function(event) {
if(el.checked)
{
sub = $('reviewwriteranswer').value;
sub ==sub =.trim();
if(el.value==sub)
{
$('reviewwriteranswer').update('value is yes');
}else {
$('reviewwriteranswer').update('value is No');
}
}
});
});
</script>
<scrip>
var allElements = document.body.getElementsByTagName("*");
for(var i = 0; i < allElements.length; i++) {
var text = allElements[i].innerHTML;
text=text.trim();
if (text == 'Yes') {
allElements[i].innerHTML = "Value is Yes";
}
if (text == 'No') {
allElements[i].innerHTML = "Value is No";
}
}
</scrip>

Call Jquery function in a separated file from custom wordpress widget

i make a custom wordpress widget, in the frontend i have a button that call a function into a script file (js/gecofidelitycustom.js). This function is under a separated file and it use Jquery. My problem is how i call from button this function. It seems that don't see function, but my script at load is correct execute. Thanks in advance
This is my code:
`<?php
add_action('widgets_init', 'gecofidelity_register_widget');
function gecofidelity_register_widget() {
register_widget('GecoFidelity_Widget');
}
add_action('init', 'register_script');
function register_script() {
//wp_register_script('jquery', "//code.jquery.com/jquery-1.11.0.min.js");
wp_register_script('custom_jquery', plugins_url('js/gecofidelitycustom.js', __FILE__), array('jquery'));
//wp_register_style('new_style', plugins_url('css/bootstrap.min.css', __FILE__), false, '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', 'gecofidwidget_required_scripts');
function gecofidwidget_required_scripts() {
// wp_enqueue_script('jsCustom', GECOFIDWIDGET_FOLDER_URL . 'js/jquery.js');
//wp_enqueue_script('jquery');
//wp_enqueue_script('jsCustom', GECOFIDWIDGET_FOLDER_URL . 'js/bootstrap.min.js');
//wp_enqueue_script('jqueryJS', GECOFIDWIDGET_FOLDER_URL . 'js/gecofidelitycustom.js', array('jquery'),'2.1.1');
//wp_enqueue_script('jquery');
wp_enqueue_script('custom_jquery');
//wp_enqueue_style('bootstrapStyle', GECOFIDWIDGET_FOLDER_URL . 'css/bootstrap.min.css');
}
class GecoFidelity_Widget extends WP_Widget {
public function __construct() {
parent::WP_Widget('GecoFidelity_Widget', 'GecoFidelity Widget', array('description' => 'Grazie a questo widget é possibile visualizzare una lista degli ultimi post e dei più commentati'));
}
public function form($instance) {
$defaults = array(
'title' => 'GecoFidelity',
'operative_mode_ID' => NULL,
'operative_mode_type' => NULL
);
$instance = wp_parse_args((array) $instance, $defaults);
$opmodetype = isset($instance['operative_mode_type']) ? $instance['operative_mode_type'] : 'company';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">
<strong>Titolo:</strong>
</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('operative_mode_ID'); ?>">
<strong>Operative Mode ID:</strong>
</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id('operative_mode_ID'); ?>" name="<?php echo $this->get_field_name('operative_mode_ID'); ?>" value="<?php echo $instance['operative_mode_ID']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('operative_mode_type'); ?>">
<strong>Operative Mode Type:</strong>
</label>
<!--input class="widefat" type="text" id="<?php //echo $this->get_field_id('operative_mode_type'); ?>" name="<?php //echo $this->get_field_name('operative_mode_type'); ?>" value="<?php //echo $instance['operative_mode_type']; ?>" /-->
<select id="<?php echo $this->get_field_id('operative_mode_type'); ?>" name="<?php echo $this->get_field_name('operative_mode_type'); ?>" value="<?php echo $instance['operative_mode_type']; ?>">
<option value="company" <?php echo $opmodetype == 'company' ? 'selected="selected"' : ''; ?>>company</option>
<option value="user" <?php echo $opmodetype == 'user' ? 'selected="selected"' : ''; ?>>user</option>
</select>
</p>
<?php
}
public function widget($args, $instance) {
extract($args);
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
echo $before_title . $title . $after_title;
?>
<?php wp_enqueue_script('custom_jquery'); ?>
<div>
<p>
<label for="<?php echo $this->get_field_id('operative_mode_ID'); ?>">
<strong>N. Scheda:</strong>
</label>
<input class="" type="text" id="nscheda" />
<p id="msgPunti" class="hidden">Il tuo punteggio è di: </p>
</p>
<button id="btnControllaPunti" class="btn btn-default">Controlla</button>
</div>
<?php
echo $after_widget;
}
public function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['operative_mode_ID'] = strip_tags($new_instance['operative_mode_ID']);
//$instance['operative_mode_type'] = strip_tags($new_instance['operative_mode_type']);
$instance['operative_mode_type'] = strip_tags($new_instance['operative_mode_type']);
return $instance;
}
}
?>
js/gecofidelitycustom.js:
jQuery( document ).ready( function( $ ) {
// do_stuff();
console.log( "Eseguito Jquery 2!" ); //this is execute correctly at load of widget on frontend
jQuery("#btnControllaPunti").click(function(){
alert("ciao");
});
});

Categories