Develop Reference

javascript - don't add class for specific css class

I'm working with a template in Wordpress that someone else set up and I need to fix something.
There is a javascript function that adds a class to every css class that's called object-fit - the added class is called bg--image. This was to fix an error showing up in IE11 , where all the images where messed up.
The problem now is that there's a page where this function shouldn't apply even though the css class is also called object-fit.
I'm a little confused on how to work here. As I don't want to mess up the whole theme and my coding options are quite limited, it just makes a knot in my brain.
Is there any possibility I can add a javascript function to not apply the IE 11 function on this one specific class? the difference is that the one img where it shouldn't apply is a span, the other one is not.
Any ideas?
try {
if (ie_ver() == 11) {
var $img = $('.banner--small').find('img');
$('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
$('.banner--small').addClass('bg--image');
$img.addClass('hidden');
var $img2 = $('.object-fit').find('img');
$('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
$('.object-fit').addClass('bg--image');
$img2.addClass('hidden');
$('.slick__inner').each(function() {
var $img3 = $(this).find('img');
$(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
$(this).addClass('bg--image');
$img3.attr('style', 'display:none');
});
<div class="article--text">
<div class="container container--tiny spacing--huge">
<?php the_content(); ?>
</div>
<div class="container margin-bottom--huge">
<?php if (get_field('direktionen')) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach (get_field('direktionen') as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
<span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>"
srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x"
alt="<?php echo $child['name']; ?>" /></span>
<h3>
<?php echo $child['name']; ?>
</h3>
<p>
<?php echo $child['adresse']; ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } else if ($children) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach ($children as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
<span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>"
srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
alt="<?php echo $child->post_title; ?>" /></span>
<h3>
<?php echo $child->post_title; ?>
</h3>
<p>
<?php echo get_field('adresse', $child->ID); ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>

Since this is a WordPress template, you have a couple of solutions.
Solution 1 - HTML & jQuery modification
If you can add an additional class to only this page's HTML, then applying the following updates to this page template should allow you to avoid having the .bg--image class added to just this page:
HTML
<span class="object-fit avoid-change">
jQuery
$('.object-fit').not( '.avoid-change' ).addClass('bg--image');
More info on jQuery's .not() method:
https://api.jquery.com/not/
Solution 2 - WordPress Conditional
Another option is to use a WordPress conditional to avoid running the entire script on this page.
You could use the following to prevent the script from loading in this template:
<?php if(! is_page_template( 'your-template-name.php' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
You could also target an exact page by its page ID. In this example, your page ID would be 7.
<?php if(! is_page( '7' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
More info on WordPress conditionals:
https://codex.wordpress.org/Conditional_Tags

Adding multiple products to cart (multiple post buttons at once)

Is it possible to post multiple add to cart buttons in javascript with single button click? Here is my code for single add to cart buttons:
<div class="buy_now" style="margin: 1em 0;">
<?php echo functions::form_draw_form_begin('buy_now_form', 'post'); ?>
<?php echo functions::form_draw_hidden_field('product_id', $product_id); ?>
<?php if (!$catalog_only_mode) { ?>
<div class="form-group">
<label><?php echo language::translate('title_quantity', 'Quantity'); ?></label>
<div style="display: flex">
<div class="input-group">
<?php echo (!empty($quantity_unit['decimals'])) ? functions::form_draw_decimal_field('quantity', isset($_POST['quantity']) ? true : 1, $quantity_unit['decimals'], 1, null) : (functions::form_draw_number_field('quantity', isset($_POST['quantity']) ? true : 1, 1)); ?>
<?php echo !empty($quantity_unit['name']) ? '<div class="input-group-addon">'. $quantity_unit['name'] .'</div>' : ''; ?>
</div>
<div>
<?php echo '<button class="processed" name="add_cart_product" value="true" type="submit"'. (($quantity <= 0 && !$orderable) ? ' disabled="disabled"' : '') .'>'. language::translate('title_add_to_cart', 'Add To Cart') .'</button>'; ?>
</div>
</div>
</div>
<?php } ?>
<?php echo functions::form_draw_form_end(); ?>
</div>
And I have another button, which I would like to add all items at once(it's doesnt do anything right now):
<?php echo '<button id="triggerAll" class="btn" name="add_cart_product_all" value="true" type="submit">'. language::translate('title_add_to_cart', 'Add To Cart') .'</button>'; ?>

No, you aren't able to make multiple POST requests with standard browser call. You'll have to do it with JavaScript which makes Ajax POST calls on the same page.

Found a solution:
<script>
$('#triggerAll').on('click',function(){
$('.processed').trigger('click');
});
</script>

Magento not recognizing custom javascript function

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.

Get Wordpress Post ID in JQuery file

The following Wordpress loop creates several textblocks on a page:
<?php while ( $query->have_posts() ) : $query->the_post();?>
<div class="col-md-<?php echo $column_width_input = get_post_meta( get_the_ID(), 'column_element_grid_class_meta_box', true ); ?>">
<div id="post-<?php the_ID(); ?>" class="textblock dicon" data-animation="<?php echo $animation_type_input = get_post_meta( get_the_ID(), 'animation_element_grid_class_meta_box', true ); ?>" data-delay="1">
<div class="dicon discipline-icon"><i class="fa fa-comment-o fa-2x"></i></div>
<h4 class="text-center"><?php echo the_title(); ?></h4>
<p class="text-center"><?php echo the_content(); ?></p>
</div>
<!-- END #post -->
</div>
<?php endwhile; ?>
I am trying to write a script that will animate a particular text block .textblock with a particular animation (each textblock has a different animation). I figured that I'll use the post ID to target a textblock (id="post-") but I'm not sure how to use the_ID(); in the JS file. I have seen the rel attribute used to do this but is is not currently working for me. Here is what I have so far which only applies the same animation to all the text boxes:
var topOfOthDiv = $(".textblock").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv - 400) { //scrolled past the other div?
$(".textblock").addClass('animated ' + $(".textblock").data('animation'));
}
});

You could have a hidden input, and get it through js like this:
HTML:
<input type="hidden" id="post_id" value="<?php the_ID() ?>">
Javascript:
post_id = $("#post_id").val();

Number of products displayed in HelloSlide homepage block in Magento 1.4.2

http://bit.ly/bsydBA
I've widened the product slider displaying boots to be full page width but I'm not seeing how to expand the number of products being displayed neither vía CSS or the code in featured.phtml (below). I also haven't found anything in the admin which would let me set any parameters.
The site just came to me after a variety of prior developers got under the hood so I'm just wrapping my head around any changes made to core files (yes, they didn't use /app/code/local/).
Has anyone worked with theme or see where I might be able to make the required adjustment?
Thanks in advance.
<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<div class="note-msg">
<?php echo $this->__('There are no products matching the selection. Please provide a category ID.') ?>
</div>
<?php else: ?>
<?php // Grid Mode ?>
<ul id="featured" class="jcarousel-skin-tango">
<?php $_collectionSize = $_productCollection->count() ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if($i++%4==0): ?>
<?php endif ?>
<li><a class="preview" rel="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300, 300); ?>" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(105, 105); ?>" width="105" height="105" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</a> </li>
<?php if ($i%4==0 && $i!=$_collectionSize): ?>
<?php endif ?>
<?php endforeach ?>

I solved the issue. Turns out the site was using GTSpeed to minify the JS and CSS and cache them so the changes that I made in Firebug just didn't appear.
Once I figured this out and disabled it was a snap, just needed to change
.jcarousel-skin-tango .jcarousel-container-horizontal for the outer container
.jcarousel-skin-tango .jcarousel-clip-horizontal for the inner container