Develop Reference

Wordpress - Translate a string within javascript or jquery

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);

Woocommerce 'remove product' remove X and replace with an image

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 &times 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);
}

How to pass extra data content on yii activeform's ajax parameters?

I am trying to set up a ajax request when radio button is clicked. Here is my code that I am trying for.
<?php echo $form->dropDownListRow($model, 'page', $pages, array('class' => 'span5', 'prompt' => '-- page --')); ?>
<?php echo $form->radioButtonListInlineRow($model, 'for', array('desktop'=>'Desktop', 'mobile'=>'Mobile'), array('ajax' => array(
'type'=>'POST',
'url'=>Yii::app()->createUrl('/admin/adv/loadpositions'), //or $this->createUrl('loadcities') if '$this' extends CController
'update'=>'#Adv_position', //or 'success' => 'function(data){...handle the data in the way you want...}',
'data'=>array('for'=>'js:this.value', 'page' => 'XXXXXXXX'),
)));
?>
I just want to pass its's value as well as it's upper field's value to the ajax action. How can I make it come true. 'data'=>array('for'=>'js:this.value', 'page' => 'XXXXXXXX'),.
Thanks in advance.

$(this.form).serialize()
Will give you the form data. Try something like:
<?php
echo $form->radioButtonList($model, 'for', array('desktop'=>'Desktop', 'mobile'=>'Mobile'), array('ajax' => array(
'type'=>'POST',
'url'=>Yii::app()->createUrl('/admin/adv/loadpositions'),
'data'=>array('data'=>'js:$(this.form).serialize()'),
)));
?>
Update:
You can easily parse this serialized string using PHP function parse_str
<?php
$data = 'str1=value1&str2=value2';
parse_str($data);
echo $str1; //value1
echo $str2; //value2

Just change your data attribute to something like this:
'data'=>array('for'=>'js:this.value', 'page' => 'js:$("#someId").val()'),

WP get_post_thumbnail with Backstretch JS

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>

yii framework CActiveform dependent dropdown won't work inside pjax'ed content

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?