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 :)
Related
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.
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 } ?>
I am trying to implement this codepen.io into my PHP form where all fields come from a database.
Php Code:
<?php if ($type == 'recaptcha') { ?>
<label class="control-label col-md-2"></label>
<?php } else { ?>
<label class="control-label col-md-2 <?php if (!empty($error)) { ?>has-error<?php } ?>" for="<?php echo $element_id ?>"><?php echo $title ?></label>
<?php } ?>
<div class="input-group col-md-9 <?php if (!empty($error)) { ?>has-error<?php } ?>">
<?php echo $item_html ?>
</div>
<span class="help-block">
<div class="element_description"><?php echo $description ?></div>
<?php if ($error) { ?>
<div class="element_error has-error"><?php echo $error ?></div>
<?php } ?>
</span>
Now it shows like this:
I have tried a few things but everything comes from
<?php echo $item_html ?>
So I can't really seperate the dynamic labels.
Can anyone guide me how to achieve this?
I have made 2 contact forms in WP, contactform and contactform_fr.
If the language is changed to French, i would like to show contactform_fr.
I found this is the footer.php
<div class="col-xs-12 col-sm-8">
<h2><?php the_field("title", 34); ?></h2>
<?php echo do_shortcode("[contact-form-7 id='89' title='Contact']"); ?>
</div>
<div class="col-xs-12 col-sm-3 col-sm-offset-1">
<?php dynamic_sidebar("footer-widget-1"); ?>
</div>
Can i change it here?
Yes you can change it there, in case you use WPML plugin to translate your website:
<?php if(ICL_LANGUAGE_CODE=='en'); ?>
<?php echo do_shortcode("[contact-form-7 id='89' title='Contact']"); ?>
<?php elseif(ICL_LANGUAGE_CODE=='fr'); ?>
<?php echo do_shortcode("[contact-form-7 id='something' title='Something']"); ?>
<?php endif; ?>
You can read more about it in WPML coding APi https://wpml.org/documentation/support/wpml-coding-api/
In case you use qtranslate plugin you can use:
<? if(get_language_code()=='EN'): ?>
<?php echo do_shortcode("[contact-form-7 id='89' title='Contact']"); ?>
<? elseif(get_language_code()=='FR'): ?>
<?php echo do_shortcode("[contact-form-7 id='something' title='Something']"); ?>
<?php endif; ?>
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 } ?>