Im trying to replace a cross with an image to delete products but i can't make it work, it says that the path invalid.
here's the JS:
function replaceCross($){
// search the Woocommerce object
var link = $(".woocommerce .product-remove a");
var can = $('<img id="trashcan">');
var dir = "<?php echo get_template_directory_uri(); ?>";
can.attr("src", +dir+ "/images/garbage.png");
can.appendTo(".woocommerce .product-remove");
}
and the HTML:
<tr class="woocommerce-cart-form__cart-item cart_item">
<td class="product-remove">
×
<img id="trashcan" src="NaN/images/garbage.png">
</td>
</tr>
and i'm running a localize script in the functions.php like:
function custom_script(){
wp_enqueue_script( 'general-script' ,STYLE_WEB_ROOT . '/js/script.js', array('jquery'), '1.0' , true );
$script_data = array(
'image_path' => get_template_directory_uri() . '/images/'
);
wp_localize_script(
'custom_script',
'cs_custom',
$script_data
);
}
I'm still a learner in jQuery and PHP so be gentle please c:
thanks in advance!
As of the day, I am writing this, one of the easiest ways of doing this is to override the cart.php file in your theme on woocommerce/cart/cart.php. Copy the contents of template/cart/cart.php from woocommerce plugin folder into your theme on woocommerce/cart/cart.php.
Make changes to the following section by removing × to anything you wish.
<td class="product-remove">
<?php
echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
'woocommerce_cart_item_remove_link',
sprintf(
'<i class="fa fa-trash-alt"></i>',
esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
esc_html__( 'Remove this item', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() )
),
$cart_item_key
);
?>
</td>
Changing that icon in JavaScript is a huge mistake. Basically what you would be doing is loading the old icon and then send a script to the client to change it.
The correct solution is to replace it in WordPress using CSS, so you actually send the new icon style from the beginning. You can find a comprehensive tutorial on how to change that icon by a simple google search: https://businessbloomer.com/woocommerce-change-remove-item-icon-cart/
The tutorial shows how to modify the icon using font awesome, but you can do it with your own image (an avoid loading the entire font-awesome library just for that icon) doing:
.woocommerce a.remove:before{
content: "";
background-image: url(path-to-your-image.png);
}
Related
I have been trying to create a recent post slider using slick-slider for my wordpress page. I want to be able to add the slider into elementor by using a shortcode. I don't have a lot of experience in coding. So I am not sure where I am going wrong. I managed to compose the following piece of coding based on some examples that I found online and I added the javascript file using a custom js plugin for wordpress. I obviously have done something wrong, because if I activate this file, elementor will not load because of a critical error. I have been trying to create custom post slider for a while now without any success. I would really appreciate any help I can get. Thanks!
//Enqueue Slick
function add_slick() {
wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/assets/css/slick.css' );
wp_enqueue_style( 'slider-theme', get_stylesheet_directory_uri() . '/assets/css/slick-theme.css');
wp_enqueue_script( 'slick-script', get_stylesheet_directory_uri() . '/assets/js/slick.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_slick' );
//Build Shortcode to Loop Over Testimonials
function recentpost_loop_func( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'date',
) );
if ( $query->have_posts() ) { ?>
<div class="recentpost-slider">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="single-post">
<a class="single-post-image" href="<?php the_permalink(); ?>"><?the_post_thumbnail(); ?></a>
<a class="single-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
};
add_shortcode( 'recentpostSlider', 'recentpost_loop_func' );
//Initiliaze Slick
jQuery(document).ready(function(){
$('.recentpost-slider').slick({
centerMode: true,
centerPadding: 50px,
});
});
Im trying to translate this string in javascript but i cant seem to do it properly.
$(".search-overlay .s").attr("placeholder", "Type here to search");
Ive tried the following but it gives errors, any ideas ?
$(".search-overlay .s").attr("placeholder", "<?php _e( '"Type here to search"', 'romeo' ); ?>");
Thanks.
You should do this proper Wordpress way by using wp_localize_script() function
Please check this codex page out:
https://codex.wordpress.org/Function_Reference/wp_localize_script
Basically in php:
// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
// Localize the script with new data
$translation_array = array(
'some_string' => __( 'Some string to translate', 'plugin-domain' ),
'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );
And in javascript:
alert(object_name.some_string);
I am using a javascript that's called 'Backstretch' to display an image on the back of my website that resizes when the viewport is getting bigger or smaller. Now I would like to combine it with the get_post_thumbnail function from WordPress so I can set a background image as featured image.
I tried the standard WP function but that doesn't work because it adds tags:
$.backstretch("<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>");
So I need to strip off those tags.. I'm getting close because i'm now getting an url (and image) but it's always the same one even though I set a different featured image on every page
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post_id, $size, $attr ) ); ?>
<script>$.backstretch("<?php echo $url; ?>");</script>
You get the answer to your question in this tutorial: http://sridharkatakam.com/set-featured-image-full-sized-background-posts-pages-wordpress/
Create a backstretch-set.js-file and include
jQuery(document).ready(function($) {
$("body").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});
and then enqueue both js-files (backstretch.js and your backstretch-set.js) in your functions.php
//* Enqueue Backstretch script
add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
function enqueue_backstretch() {
//* Load scripts only on single Posts, static Pages and other single pages and only if featured image is present
if ( is_singular() && has_post_thumbnail() )
wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backstretch.min.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'backstretch' ), '1.0.0' );
wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );
Try using the global $post object like so:
<?php global $post; $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full' ) ); ?>
<script>$.backstretch("<?php echo $url; ?>");</script>
here's my dependent dropdown php code:
<?php $find= new SomeModule;
$form=$this->beginWidget('CActiveForm', array(
'action'=> Yii::app()->createUrl('someurl'),
'method'=>'post',
'id'=>'filter-id',
'enableAjaxValidation'=>true,
)); ?>
<?php
echo $form->dropDownList($find,'category',
CHtml::listData(BaseCategory::model()->findAll(array(
'order' => 'name',
'condition'=>'type=:postID',
'params'=>array(':postID'=>1),
)), 'id', 'name'),
array(
'prompt'=>'Select Category',
'ajax'=>array(
'type'=>'POST',
'url'=>CController::createUrl('someurl/searchCategory'),
'update'=>'#'.CHtml::activeId($find,'category2')
),
)
);
?>
<?php
echo $form->dropDownList($find,'category2', array(), array(
'prompt'=>'Select Sub Category',
)
);
?>
I need to place this php code inside pjax content. Working fine when the page refreshed. But when it's loaded using pjax, this dependent dropdown won't work.
question:
How to make this dependent dropdown working when its loaded using pjax? What code should I add in:
$(document)
.on('pjax:success', function() {
})
to make this dependent dropdown works? Is there any script to "reload" this php code, so the dependent dropdown works? Or is there another solution?
I am declaring an image as
<?php echo $this->Html->image('buttonaft.png', array('alt'=> __('img', true), 'border' => '0')); ?>
inside a javascript file that would be read by default.ctp in cakephp
The code is not able to read the image.
try to give like this..
but make sure you are giving correct path.
echo $html->image('image.png', array('url' => '/' . IMAGES_URL . 'image.png'));
you can also do this in 1.2
echo $html->link(
$html->image('img.png'),
'img.png',
array(),
null,
false
);
or in 1.3
echo $html->link(
$html->image('img.png'),
'img.png',
array(),
array( 'escape' => false ),
);