I am using a module for joomla called RokMiniEvents but there is a problem, once you use the navigation it adds a path to the events url: "/modules/mod_rokminievents3"..
Let's say the working url is this:
<a class="rme-title" href="/td/index.php/component/jevents/icalrepeat.detail/2014/07/22title=proto-seminario/0/-/-?rp_id=2&Itemid=0">Event name</a>
But once you use the Navigation it becomes:
<a class="rme-title" href="/td/modules/mod_rokminievents3/index.php/component/jevents/icalrepeat.detail/2014/07/22title=/0/-/-?rp_id=2&Itemid=0">Πρωτο Σεμιναριο</a>
I would like to use something like:
where a with class="rme-title" replace the /mod_rokminievents3 with nothing..
Is that possible with javascript or any other language ? I've seen a lot of answers here but without the class selection..
Select the elements and replace that part of the href with nothing using String.replace
$('a.rme-title').attr('href', function(_, href) {
return href.replace('/mod_rokminievents3','');
});
Hi I had same problem with this module, this is my solution:
In modules/mod_rokminievents3/tmpl open default_item.php
search the code:
<?php if (!$event->getLink()): ?>
<span class="rme-title"><?php echo $event->getTitle(); ?></span>
<?php else: ?>
<?php
$values = $event->getLink();
$internal = $values['internal'];
$link = $values['link'];
?>
<a class="rme-title<?php echo $internal ? '' : ' rme-external-link'; ?>" href="<?php echo $link ?>"><?php echo $event->getTitle(); ?></a>
<?php endif; ?>
finally get $link value and replace "modules/mod_rokminievents3/" by "" here is the final code:
<?php if (!$event->getLink()): ?>
<span class="rme-title"><?php echo $event->getTitle(); ?></span>
<?php else: ?>
<?php
$values = $event->getLink();
$internal = $values['internal'];
$link = $values['link'];
$link=str_replace ("modules/mod_rokminievents3/" ,"" , $link );
?>
<a class="rme-title<?php echo $internal ? '' : ' rme-external-link'; ?>" href="<?php echo $link ?>"><?php echo $event->getTitle(); ?></a>
<?php endif; ?>
This works for me.
Related
I'm having a hard time understanding how to import a specific variable for use with jQuery.
Some links on a Wordpress theme are using
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
As you can see the href is set as
href="<?php the_field('portfolio_link'); ?>"
Now I have a jQuery script as follows
<script>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<?php
$phpVar = 'http://www.google.com';
echo "var phpVariable = '{$phpVar}';";
?>
jQuery(".box").click(function() {
window.open(phpVariable);
});
<?php endif; ?>
</script>
This script currently works. It opens google in a new tab as a placeholder until I know how to make it open the same result as the href.
Now what I can't understand is how to set '$phpVar' to have the same effect as the 'href' I showed before instead of 'http://www.google.com';
Not sure just how the WordPress handling of this is, but given that the_field('portfolio_title'); returns a valid URL, you can simply assign the JavaScript variable the output of this variable.
var phpVariable = "<?php the_field('portfolio_link'); ?>";
I am working with wordpress and jquery tabs and was wondering if somebody can help me. My example is similar to this one jQuery UI Tabs
Here is my php code
<?php if (!defined('FW')) die( 'Forbidden' ); ?>
<?php $tabs_id = uniqid('fw-image-tabs-'); ?>
<div class="fw-image-tabs-container" id="<?php echo esc_attr($tabs_id); ?>">
<div class="fw-image-tabs">
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<h3 class="fw-image-tabs-content"><?php echo $tab['tab_image_title']; ?></h3>
<img src="<?php echo esc_attr( $tab['tab_image']['url']); ?>">
</div>
<?php endforeach; ?>
<ul>
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<li><?php echo $tab['tab_title']; ?></li>
<?php endforeach; ?>
</ul>
<?php foreach ( $atts['image_tabs'] as $key => $tab ) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<p><?php echo do_shortcode( $tab['tab_content'] ) ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
And my script
jQuery(document).ready(function ($) {
$('.fw-image-tabs-container').tabs();
});
The trouble i am having is that i cannot hide the second <div class="fw-image-tabs-content"></div>. Both divs have the same class name and the same id. For some reason only the first id works. How can i show/hide the text for both divs?
Thanks
Have you tried this?
jQuery(document).ready(function ($) {
$('.fw-image-tabs').tabs();
});
After hours of research and try and errors I start my first question here.
If it can be done with wordpress syntax even better. Otherwise I think I'm near to the solution.
I want a custom gallery on a wordpress template page but with the post image from certain categories with the content from it. So far so good.
In my designerin.php template I give every images a class img-x.
class="img-<?php echo $img_counter; ?>
And the content get the id img-x
id="img-<?php echo $post_counter; ?>
The counter is just an increment. So image 1 has class img-1, image 2 img-2 and so on.
Now I want the related content of that image created in the wordpress editor showing up when you are clicking on this specific image.
Say you click on image 5 and want the content from image 5.
I'm stucked on the step where I say (in jQuery), that display the content
if .img-x == #img-x {
display the_content()
}
Enough said - here is my jQuery code:
$(".large-img-wrapper").hide();
$('.gallery li').on('click', function(e) {
e.preventDefault();
var largeImgLink = $(this).find('a').attr('href');
$(".large-img-wrapper").first().fadeIn();
var imgContent = $('#img-5').html();
$('#large-img').remove();
$('#append-id').remove();
$(".large-img").append('<img id="large-img" src="' + largeImgLink + '">').fadeIn();
$(".large-img").append('<div id="append-id">' + imgContent + '</div>').fadeIn();
$(".large-img-container .img-title").remove();
});
The var imgContent was just a test. Every image shows up the content from image 5 at the moment.
My template page code:
<div class="row content full-width">
<div class="cats row">
Alle Kategorien
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
$cat_name = get_category(get_query_var('cat'))->name;
?>
<?php echo trim($output); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<ul class="row small-block-grid-3 medium-block-grid-5 large-block-grid-8 gallery">
<?php $img_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$img_counter++;
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$large_url_array = wp_get_attachment_image_src($thumb_id, 'large', true);
$thumb_url = $thumb_url_array[0];
$large_url = $large_url_array[0];
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
?>
<li>
**<img src="<?php echo $thumb_url; ?>" alt="<?php echo the_title(); ?>">**
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
<?php $post_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$post_counter++;
?>
**<ul class="large-img-wrapper">
<li>
<div class="large-img-container">
<div class="large-img"></div>
<div class="img-content" id="img-<?php echo $post_counter; ?>">
<div class="img-title">
<?php echo the_title(); ?>
</div>
<div class="img-text">
<?php echo the_content(); ?>
</div>
</div>
</div>
</li>
</ul>**
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
The first query is for filtering the categories by slug.
My last attempt feels so near..
var inc = '5';
var objClass = $(this).find("a").hasClass( "img-" + inc );
console.log(objClass);
When I'm clicking on the 5th image I get "true". But how can I get the X (inc) related to my template php code?
Sorry for my english and possible bad code
If i'm understanding correctly this might help
$('.gallery li').on('click', function(e) {
e.preventDefault();
var className = $(this).find('a').attr('class');
var imgContent = $('#'+className).html();
});
This is my wp loop:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div style="background:url(<?php echo $url; ?>);">
<button id="change">preview</button>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php get_footer(); ?>
After clicking on button "change" it should change my body background to $url for e.g.
<body style="background:url($url);
where $url is thumbnail url
Any ideas how to make it?
Greetings
EDIT: I noticed you are using id="change". Id is unique and if your loop makes more than one button with the same Id, it won't work. make class="change". I've edited the rest for you.
here is a jsfiddle. http://jsfiddle.net/Grimbode/2bt8Q/1/
You should essentially load your url's as the value of a hidden input, like so:
<body>
<div>
<button class="change">preview<input type="hidden" value="http://pngimg.com/upload/tree_PNG2517.png"/></button>
</div>
</body>
Then using jQuery:
$('.change').on('click', function(){
$(document.body).css('background', 'url('+$(this).find('input').val()+')');
});
When the button is clicked, it will change your document.body's background to whatever the URL is.
Thus your php file should look like this:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div>
<button class="change">preview<input type="hidden" value="<?php echo $url; ?>"/></button>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php get_footer(); ?>
Hope this helps, cheers.
Ok, if this question has already been answered, I apologize, I have searched and not found a satisfactory answer that fits my situation.
Here is the situation:
I have a custom template file for displaying the products in a category, part of that list is the ability to add products directly to the cart with a specified quantity from the category page. In order to accomplish this I wrote a function that re-writes the target line of the "Add to Cart" button, submits the request, then re-writes the button again back to it's original version (see code below). The problem I'm running into is that every time the button is clicked right now I get an error in the debug panel stating that customAddToCart is not defined. But if you look at the code for the product list template below you can see that the function is defined even before the list is generated (btw, I had it at the bottom of the page and was getting the same error).
If anyone can shed some light on why the javascript function would be undefined when it's being included on the same page as the list...I could sure use some help.
<?php
/**
* Product list template
*
* #see Mage_Catalog_Block_Product_List
*/
?>
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
<script type="text/javascript">
function customAddToCart( product_id, url ){
var qty = document.getElementById('qty_input_'+product_id).value;
document.getElementById('addtocartbutton_'+product_id).setAttribute('onclick', "setLocation(" + url + "/qty/" + qty ")");
document.getElementById('addtocartbutton_'+product_id).click(); return false;
document.getElementById('addtocartbutton_'+product_id).setAttribute('onclick', "customAddToCart(" + product_id + ", " + url + ")");
}
</script>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item">
<?php // Product Image ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(230, null); ?>" width="230" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<?php // Product description ?>
<div class="product-shop">
<div class="f-fix">
<?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></h2>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<div class="desc std">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<?php echo $this->__('Learn More') ?>
</div>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
<div class="add-to-cart-options">
<?php if($_product->isSaleable()): ?>
<?php if( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped() )){ ?>
<label for="qty_input">Quantity: </label>
<input type="text" class="spinner qty-input" name="qty_input" id="qty_input_<?php echo $_product->getId(); ?>" />
<?php /*<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p> */ ?>
<button type="button" class="button" onclick="javascript:customAddToCart(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product); ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
<?php } else { ?>
<button type="button" class="button" id="addtocartbutton_<?php echo $_product->getId(); ?>" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
<?php } ?>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ol>
<script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
<?php else: ?>
As you can see, the function is clearly defined at the top of the page, so why this button
<button type="button" class="button" onclick="javascript:customAddToCart(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product); ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
results in a message in the console saying that customAddToCart is not defined I'm not sure.
Is there an error about an "Unexpected string"? The concatenation in the second line of your function is missing its last plus sign.
Update
"/qty/" + qty ")"
to
"/qty/" + qty + ")"
and refresh.