Javascript not allowing actually image to be linked out - javascript

I am trying to get my website to link the slider image. Nothing in my wordpress has the options, so I opened up the slider php from the file manager, and I am trying to figure out exactly what I need to do to enable the image to link out without having to put on the "caption". Here is the website
<div id="home-slide-wrapper">
<div id="home-slide" class="<?php echo $img_slide_effect_direction; ?>">
<ul class="slides">
<?php
foreach( $slides as $slide ) :
$image_id = get_post_meta($slide->ID, 'info_image', true);
// $resized_image_src = wp_get_attachment_image_src($image_id, 'full');
// $resized_image_src = $resized_image_src[0];
$resized_image_src = theme_get_image( $image_id, 5000, $img_slide_height, true );
// Caption
$caption_pos = get_post_meta($slide->ID, 'info_caption_pos', true);
$caption_title = __(get_post_meta($slide->ID, 'info_caption_title', true));
$caption_text = __(get_post_meta($slide->ID, 'info_caption', true));
$link = __(get_post_meta($slide->ID, 'info_link', true));
// Pre-Process
$caption_title = ( $link != '' && $caption_title != '' ) ? '' . $caption_title . '' : $caption_title;
$caption_title_bg_tone = 'slide-caption-bg-' . getDarkLightYIQ( $sitewide_caption_title_bg_color );
$caption_style[] = ( $sitewide_caption_title_text_color != '' ) ? 'color:' . $sitewide_caption_title_text_color . ';' : '';
$caption_style[] = 'background-color:' . $sitewide_caption_title_bg_color . ';';
$caption_title_style = 'style="' . implode( ' ', $caption_style ) . '"';
?>
<li>
<img src="<?php echo $resized_image_src; ?>" alt="<?php echo $slide->post_title; ?>" />
<?php if( $caption_title || $caption_text ): ?>
<div class="slide-caption <?php echo $caption_pos; ?>">
<div class="container">
<?php if( $caption_title != '' ) : ?>
<div class="slide-caption-headline <?php echo $caption_title_bg_tone; ?>"><?php echo $caption_title; ?></div>
<?php endif; ?>
<?php if( $caption_text ) : ?>
<div class="slide-caption-text"><?php echo $caption_text; ?></div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</div><!-- #home-slide-wrapper -->

Replace
<img src="<?php echo $resized_image_src; ?>" alt="<?php echo $slide->post_title; ?>" />
with
<a href="<?php echo $link; ?>">
<img src="<?php echo $resized_image_src; ?>" alt="<?php echo $slide->post_title; ?>" />
</a>

Related

Button gets an incorrect PHP value by default via javascript

I have the following selector with options:
<select name="" id="product-selector" class="list_item">
<?php
if( have_rows('section_a') ):
while( have_rows('section_a') ): the_row();
if( have_rows('product_item') ):
while( have_rows('product_item') ): the_row();
$product_item_quantity = get_sub_field('product_item_quantity');
$product_item_price = get_sub_field('product_item_price');
$product_item_id = get_sub_field('product_item_id');
$product_item_variation_id = get_sub_field('product_item_variation_id');
?>
<option value="<?php echo $product_item_variation_id; ?>" data-id="<?php echo $product_item_variation_id; ?>" data-content="<?php echo $product_item_quantity; ?> <span class='price' data-count='<?php echo $product_item_quantity; ?>' data-price='<?php echo $product_item_price; ?>'><?php echo $product_item_price; ?>"> </option>
<?php endwhile; endif; endwhile; endif; ?>
</select>
And I have the following button:
<div class="submit">
<a class="btn btn-warning" id="purchase" href="?add-to-cart=<?php echo $product_item_id; ?>&variation_id=<?php echo $product_item_variation_id; ?>">Order Now</a>
</div>
My javascript is:
<script>
document.getElementById("product-selector").onchange = function() {
document.getElementById("purchase").href = "?add-to-cart="+"<?php echo $product_item_id; ?>"+"&"+"variation_id="+this.value+"/";
}
</script>
When user click by the Order button the link changes dynamically - it gets the value of and should get the <?php echo $product_item_variation_id; ?>" via the "variation_id="+this.value+" and it works fine, but when the page loads, the <?php echo $product_item_variation_id; ?> value of the button get the LAST option value, but not a first (default) one.
Much appreciate any help.
I think that you should make a variable to save the first value. Because you already loop. so default value is last value of the select.
<?php $product_item_variation_id_first = ""; ?>
<select name="" id="product-selector" class="list_item">
<?php
if( have_rows('section_a') ):
while( have_rows('section_a') ): the_row();
if( have_rows('product_item') ):
while( have_rows('product_item') ): the_row();
$product_item_quantity = get_sub_field('product_item_quantity');
$product_item_price = get_sub_field('product_item_price');
$product_item_id = get_sub_field('product_item_id');
$product_item_variation_id = get_sub_field('product_item_variation_id');
if ($product_item_variation_id_first == "")
$product_item_variation_id_first = $product_item_variation_id;
?>
<option value="<?php echo $product_item_variation_id; ?>" data-id="<?php echo $product_item_variation_id; ?>" data-content="<?php echo $product_item_quantity; ?> <span class='price' data-count='<?php echo $product_item_quantity; ?>' data-price='<?php echo $product_item_price; ?>'><?php echo $product_item_price; ?>"> </option>
<?php endwhile; endif; endwhile; endif; ?>
</select>
<div class="submit">
<a class="btn btn-warning" id="purchase" href="?add-to-cart=<?php echo $product_item_id; ?>&variation_id=<?php echo $product_item_variation_id_first; ?>">Order Now</a>
</div>

PHP/HTML Add onclick function to subcategories with certain name

I am trying to add an onclick function for only certain recursively generated subcategories.
This code currently displays the subcategories correctly:
<?php if($parent) { ?>
<?php $search_params['sCategory'] = $parent['pk_i_id']; ?>
<a href="<?php echo osc_search_url($search_params); ?>" class="parent active" data-name="sCategory" data-val="<?php echo $parent['pk_i_id']; ?>">
<span class="name"><?php echo $parent['s_name']; ?></span><em>(<?php echo ($parent['i_num_items'] == '' ? 0 : $parent['i_num_items']); ?>)</em>
</a>
<?php } ?>
<?php foreach($categories as $c) { ?>
<?php $search_params['sCategory'] = $c['pk_i_id']; ?>
<a href="<?php echo osc_search_url($search_params); ?>" class="child<?php if($c['pk_i_id'] == $search_cat_id) { ?> active<?php } ?>" data-name="sCategory" data-val="<?php echo $c['pk_i_id']; $
<span class="name"><?php echo $c['s_name'];?></span><em>(<?php echo ($c['i_num_items'] == '' ? 0 : $c['i_num_items']); ?>)</em>
</a>
<?php } ?>
</div>
I would like to call say functionX(); written in JS for only the subcategory named "catx".
FunctionX() is working correctly when called else where.
I've tried something like this but get a White screen:
<?php if($search_params == "catX") {
echo '<a onclick="functionX();" href="<?php echo osc_search_url($search_params); ?>" class="parent active" data-name="sCategory" data-val="<?php echo $parent['pk_i_id']; ?>">
<span class="name"><?php echo $parent['s_name']; ?></span><em>(<?php echo ($parent['i_num_items'] == '' ? 0 : $parent['i_num_items']); ?>)</em>
</a>;'
} else {
echo '<a href="<?php echo osc_search_url($search_params); ?>" class="parent active" data-name="sCategory" data-val="<?php echo $parent['pk_i_id']; ?>">
<span class="name"><?php echo $parent['s_name']; ?></span><em>(<?php echo ($parent['i_num_items'] == '' ? 0 : $parent['i_num_items']); ?>)</em>
</a>;' ?>
Pretty new to this, thanks for the help!
When you use an echo you are using ' to specify the borders of what you are going to output.
In your code you have echo 'Some content' but your content contains an ' aswell. Named: $parent['pk_i_id']
There a several ways to do this. Here is an example (Concatenation):
echo '<a onclick="functionX();" href="' . osc_search_url($search_params) . '">Click me</a>'; // ...
The inline notation is useful, in case you have surrounding HTML-Code:
<b>My name is<?php echo $name ?></b>
Just dont mix em :)
It's not an approach that works for everyone but in this kind of scenario I find it visually helpful (and very useful if I need to debug anything) to incrementally build a string using
statements
variables; and
conditional statements
and then echo the string, once I have built it.
Example:
<?php
$Item_Number = ($parent['i_num_items'] === '') ? 0 : $parent['i_num_items'];
$Link = '';
$Link .= '<a ';
if ($search_params === 'catX') {
$Link .= 'onclick="functionX();" ';
}
$Link .= 'href="'.osc_search_url($search_params).'" class="parent active" data-name="sCategory" data-val="'.$parent['pk_i_id'].'">';
$Link .= '<span class="name">'.$parent['s_name'].'</span>';
$Link .= '<em>('.$Item_Number.')</em>';
$Link .= '</a>';
echo $Link;
?>

Fancybox 3 Style Issue

When I click one of the preview images, in order to bring up the fancybox gallery, it just swipes the image to the right and gives me this broken overlay. Not sure what the issue is here...
HTML (Note I'm using WordPress and Advanced Custom fields):
<?php if ( have_rows("inspiration_gallery") ) : ?>
<?php $i = 0; while ( have_rows("inspiration_gallery") ) :
the_row();
$img = get_sub_field("inspiration_image");
$img_id = $img['ID'];
$img_url = $img['url'];
$gallery_id = $gallery_id ? $gallery_id : $img_id;
$related = get_sub_field("inspiration_related");
?>
<?php if ($i == 0): ?>
<!-- Preview Image -->
<a class="inspiration__preview-link" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>">
<?php echo wp_get_attachment_image( $img_id, "full", false, array("class" => "inspiration__prev_img") ); ?>
</a>
<?php else: ?>
<!-- Gallery Fancybox Link -->
<a class="inspiration__gallery-link none" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>"></a>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php endif; ?>
I've got the latest versions of Fancybox JS and CSS files enqueued.

Giving unique ID's in a loop doesnt work

I'm trying to give each ID in the loop a unique ID.
Like: check-1, check-2 etcera.
But it is not working .
Here is my code:
<?php
if( have_rows('activiteiten_knoppen') ): $count=0;?>
<?php while(have_rows('activiteiten_knoppen') ): the_row();
$meer_info = get_sub_field('meer_info');
$tijd = get_sub_field('reserveren');
?>
<p class="activiteitInfo"><a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a></p>
<p class="activiteitReserveer"><a style="color: #f3f3f3 !important;" href="<?php echo $tijd; ?>">Reserveren</a></p>
<div id="check-<?php echo $count ?>" style="display: none;"><?php echo $meer_info; ?></div>
<script>
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>

CloudZoom magento integration

Hi guys really need some help on this issue. I've searched all over but cant find any solution.
Using http://www.starplugins.com/cloudzoom/quickstart to add hover zoom feature on single product page. Rollover on first product thumbnail shows the same image. However on second or subsequent rollover of other images the rollover image is always the 1st image.
Media.phtml
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_nativeZoom = false;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php /* <h2><?php echo $this->__('More Views') ?></h2> */ ?>
<?php
$galleryImages = $this->getGalleryImages();
$numGalleryImages = count($galleryImages);
$i = 0;
foreach ($galleryImages as $_image): $i++; ?>
<div class="<?php
if($i == 1) {
echo 'first';
}
if($i == $numGalleryImages) {
echo 'last';
}
?>">
<a href="#" data-large-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
title="<?php echo $_product->getName();?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(124); ?>"
alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div id="main-image">
<?php
$_img = '<img class="cloudzoom" id="main-product-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(450).'" data-cloudzoom="zoomImage: \''.$this->helper('catalog/image')->init($_product, 'image').'\'" alt="'.$this->escapeHtml($_product->getImageLabel()).'" title="'.$this->escapeHtml($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<script type="text/javascript">
jQuery('.more-views a').click(function(){
jQuery('#main-product-image').attr('src', jQuery(this).attr('data-large-image'));
return false;
});
</script>
jquery initialize script
jQuery(document).ready(function($) {
if (jQuery('.catalog-product-view').length) {
if (window.location.hash == '#_reviews') {
//add scroll to down to product reviews list when pagination is used
jQuery.scrollTo(jQuery('#reviews'), {duration: 1000, interrupt: true});
}
//cloudzoom configuration http://www.starplugins.com/cloudzoom/quickstart
$('#main-product-image').CloudZoom({
tintColor: '#6e4d56',
tintOpacity: 0.43,
zoomSizeMode: 'image',
autoInside: 1000
});
}
});

Categories