Pretty checkbox does not work with WooCommerce - javascript

I would use Pretty checkbox in the WooCommerce checkout page.
First imported the CSS file:
// Pretty Checkbox
// =============================================================================
function child_enqueue_styles() {
// enqueue pretty checkbox style
wp_enqueue_style('pretty-checkbox', get_stylesheet_directory_uri() .'/pretty-checkbox/dist/pretty-checkbox.css', array());
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles', 9999);
Then changed payment-mothod.php like this:
<li class="wc_payment_method payment_method_<?php echo esc_attr( $gateway->id ); ?>">
<div class="pretty p-default p-round">
<input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
</div>
<div class="state p-success-o">
<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
<?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
</label>
</div>
<?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?>
<div class="payment_box payment_method_<?php echo esc_attr( $gateway->id ); ?>" <?php if ( ! $gateway->chosen ) : /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>style="display:none;"<?php endif; /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>>
<?php $gateway->payment_fields(); ?>
</div>
<?php endif; ?>
</li>
But radio buttons disappeared!
I can't find any error in the browser console, am I dummy missing something obvious?

The issue was because of using main </div> before div tag for lable.
Correct one is:
<div class="pretty p-default p-round">
<input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
<div class="state p-success-o">
<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
<?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
</label>
</div>
</div>
Note: I ignored using pretty box because it has some conflicts with using font icons and instead I used this thread.

Related

How to validate multi step form jquery Php

I am working with multi step form with php, I have array $rec where i am getting all
questions ( from database/dynamic).
I want to validate those fields whose key is mandatory and value is 1 (coming from array($rec)).
I want "next" page/question shouldn't display until I fill first question.
Here is my html code
<form action="<?php echo site_url('Nps/FormAdd'); ?>" method="post">
<?php //echo "<pre>"; print_R($keyslug);?>
<input type="hidden" name="mobile_no" value="<?php echo $keyslug['mobileNo']; ?>">
<input type="hidden" name="contact_mapping_id" value="<?php echo $keyslug['id']; ?>">
<?php $i="1";
$lastElement = end($rec);
$i="1";
foreach($rec as $key => $records)
{
<div class="card" id="<?php echo $records['ques_id']; ?>" >
<?php if($records['type']=="range" )
{
?>
<div class="form-group" style="margin-top: 10px;">
<div class="chart-scale develop-rating">
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) {
?>
<button id="rating" attr-hide-div="<?php if($i <= $records['min_value']) { echo $records['max_show_ques_id']; } else { echo $records['show_ques_id']; }?>"
attr-show-div="<?php if($i <= $records['min_value']) { echo $records['show_ques_id']; } else { echo $records['max_show_ques_id']; }?>"attr-value="<?php echo $i; ?>" class="btn rating-button-click btn-scale btn-scale-asc-<?php echo $i; ?>">
<?php echo $i; ?>
</button>
<?php } ?>
<input type="hidden" id='ques_<?php echo $records['ques_id']; ?>' class="input-develop all-mandatory-check" attr-required="<?php echo $records['mandatory']; ?>" <?php if($records['IsRatingQuestion']=="1") { ?> name='rangeR_<?php echo $records['ques_id']; ?>' <?php } else { ?> name='ques_<?php echo $records['ques_id']; ?>' <?php } ?> value="">
</div>
</div>
<?php
}
elseif($records['type']=="check_box")
{
?>
<div class="form-group checkboxes">
<label class="form-control-label"><?php echo $records['question']; ?></label>
<div>
<?php
$opt = explode("::", $records['options']);
$result = count($opt);
$i="1";
foreach($opt as $s)
{
?>
<label class="form-container"><?php echo $s; ?>
<input class="all-mandatory-check" type="checkbox" attr-required="<?php echo $records['mandatory']; ?>" id="name" value='<?php echo $s; ?>' name='check_<?php echo $records['ques_id']; ?>[]'>
<span class="checkmark"></span>
</label>
<?php } ?>
</div>
</div>
<?php
}
$key;
if($key!="0"){
?>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<?php } ?>
<?php
$record_last_end = $rec;
$lastElement = array_key_last($record_last_end);
if($key == $lastElement)
{
?>
<input type="submit" name="submit" value="submit" class="next action-button" >
<?php } else { ?>
<input type="button" name="next" id="next1" class="next action-button" value="Next" />
<?php } ?>
</div>
</div>
<?php
//$i++;
} ?>
</form>

OpenCart Set language through URL

When I select my language from the dropdown flag the opencart translates to the new language and I get directed to the index page.
I want to stay on the current page.
I found an article for this issue but I couldn`t make it work.
Link
This is my current code from catalog/controller/module/language.php
<?php if (count($languages) > 1) { ?>
<!-- Language -->
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="language_form">
<div class="dropdown">
<?php foreach ($languages as $language) { ?>
<?php if ($language['code'] == $code) { ?>
<?php echo $language['name']; ?>
<?php } ?>
<?php } ?>
<ul class="dropdown-menu">
<?php foreach ($languages as $language) { ?>
<li><?php echo $language['name']; ?></li>
<?php } ?>
</ul>
</div>
<input type="hidden" name="code" value="" />
<input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
</form>
<?php } ?>

Adding a button that's unique in every post

I want to make a button that's in a "if" loop that will unroll / show more images from the Advanced Custom Fields plugin. The problem is that it doesn't work when there are more post on page than one, because the same button is in all of the posts and all the images have the same class. Is there a way to make a unique button that will work only in it's post?
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); if (get_field('project_detail')) {
the_field('project_detail');
} ?>
<img src="<?php echo the_field('visible_image_1'); ?>" />
<button type="button">Show more</button>
<script>
$("button").click(function(){ $(".more").slideToggle(500); });
</script>
<div class="more">
<img src="<?php echo the_field('hidden_image_1'); ?>" />
<img src="<?php echo the_field('hidden_image_2'); ?>" />
</div>
<?php endwhile;
else :
echo '<p>No content found</p>'; endif;
get_footer(); ?>
CSS
.more {
display: none;
}
Try something like this:
<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); if (get_field('project_detail')) {
the_field('project_detail');
} ?>
<img src="<?php echo the_field('visible_image_1'); ?>" />
<button type="button" id="button<?php echo get_the_ID()?>">Show more</button>
<script>
$("#button<?php echo get_the_ID()?>").click(function(){ $(".more<?php echo get_the_ID()?>").slideToggle(500); });
</script>
<div class="more<?php echo get_the_ID()?>">
<img src="<?php echo the_field('hidden_image_1'); ?>" />
<img src="<?php echo the_field('hidden_image_2'); ?>" />
</div>
<?php endwhile;
else :
echo '<p>No content found</p>'; endif;
get_footer(); ?>
We are using a variable which will be added to each button ID, so they will be button1, button2, etc. Let me know if this works :)

WooCommerce input field - increment/ decrement field button

I'm trying to add an 'increment/decrement button' to a quantity field in woocommerce on my site - http://tbdemo.tk/aquapark/tickets/
My code in /woocommerce/templates/global/quantity-input.php is :
echo "<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
</script>";
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="quantity">
<form>
<input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" 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" size="4" />
<input type="button" onclick="buttonClick()" value="Increment Value" />
</form>
</div>
But it doesn't work.
How can I increment value only on OnFocus field? Not at all input fields....
Thank You!
you forgot the '}' at the end of the function.
echo "<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
}
</script>";
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="quantity">
<form>
<input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" 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" size="4" />
<input type="button" onclick="buttonClick()" value="Increment Value" />
</form>
</div>

Javascript change push input to click link (OpenCart Filters)

In the Opencart filters I would like to change the Input Box Push to a click link;
Here is what I have at the minute;
<?php foreach($filter_groups as $filter_group){ ?>
<div>
<ul>
<li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span>
<ul>
<?php foreach($filter_group['filter'] as $filter){ ?>
<?php if(in_array($filter['filter_id'], $filter_category)){ ?>
<li>
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" class="item" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } else { ?>
<li>
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" class="item" id="filter<?php echo $filter['filter_id']; ?>" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } ?>
<?php } ?>
</ul>
</li>
</ul>
</div>
<?php } ?>
<script type="text/javascript">
$(document).ready(function() {
$('.item').live('change', function(){
filter = [];
$('input[type=\'checkbox\']:checked').each(function(element) {
filter.push(this.value);
});
location = '<?php echo $action; ?>&filter=' + filter.join(',');
});
});
//--></script>
I am guessing the HTML will change to something like this;
<?php foreach($filter_groups as $filter_group){ ?>
<div>
<ul>
<li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span>
<ul>
<?php foreach($filter_group['filter'] as $filter){ ?>
<?php if(in_array($filter['filter_id'], $filter_category)){ ?>
<li class="selected">
<?php echo $filter['name']; ?>
</li>
<?php } else { ?>
<li>
<?php echo $filter['name']; ?>
</li>
<?php } ?>
<?php } ?>
</ul>
</li>
</ul>
</div>
<?php } ?>
I just have no idea how to approaching changing to so it submits an onclick location change that preserves the existing filters. Are you able to assist me?
Yes, that is correct, the new HTML should work. To make it simpler (without need of JavaScript) You may fill in the href attribute to this dynamic value:
<?php echo $filter['name']; ?>
(no need of id attribute). Now on click the URL is directly triggered changing the filter to new filter_id.
Keep in mind that the default approach let's the user to check more than one filter value however with Your approach only one filter value could be selected at a time.
It might be also usefull to display the currently selected filter only as a text node so that it is not clickable, e.g. like this:
<?php if(in_array($filter['filter_id'], $filter_category)){ ?>
<li class="selected">
<span><?php echo $filter['name']; ?></span>
</li>
<?php } else { ?>
<li>
<?php echo $filter['name']; ?>
</li>
<?php } ?>

Categories