0

I've made this script for changing some colors on a custom element. My problem is that I can't find a way to localize the links in the href attribute.

Is there an easy way for me to do this?

/* Wilfa Svart Color Change Function */
jQuery(document).ready(function() {
  jQuery('.precision-link-color-1').on('click', function(e){
       e.preventDefault();
       jQuery(".precision-image-link").attr("href", "http://newsite.wilfa.no/produkter/kaffetrakter/svart-presisjon-aluminium/");
       jQuery('.wilfa-precision-product-content').css('background', 'url(../wp-content/themes/wilfa/images/coffee-brewer.jpg) no-repeat center center');
  });
  jQuery('.precision-link-color-2').on('click', function(e){
       e.preventDefault();
       jQuery(".precision-image-link").attr("href", "http://newsite.wilfa.no/produkter/kaffetrakter/svart-presisjon-sort/");
       jQuery('.wilfa-precision-product-content').css('background', 'url(../wp-content/themes/wilfa/images/coffee-brewer-black.jpg) no-repeat center center');
  });
});

Specifically, this line:

jQuery(".precision-image-link").attr("href", "http://newsite.wilfa.no/produkter/kaffetrakter/svart-presisjon-sort/");

UPDATE

Here's my attempt with an else/if statement to get the lang attr(This works):

/* Wilfa Svart Color Change Function */
jQuery(document).ready(function() {

    var theLanguage = jQuery('html').attr('lang');

    jQuery('.precision-link-color-1').on('click', function(e){
        e.preventDefault();
        if(theLanguage == 'en-US') {
            jQuery(".precision-image-link").attr("href", "http://alternative-link.com/");
        } else {
            jQuery(".precision-image-link").attr("href", "http://original-link.com/");
        }
        jQuery('.wilfa-precision-product-content').css('background', 'url(../image.jpg) no-repeat center center');
  });
    jQuery('.precision-link-color-2').on('click', function(e){
        e.preventDefault();
        if(theLanguage == 'en-US') {
            jQuery(".precision-image-link").attr("href", "http://alternative-link.com");
        } else {
            jQuery(".precision-image-link").attr("href", "http://original-link.com");
        }
        jQuery('.wilfa-precision-product-content').css('background', 'url(../image.jpg) no-repeat center center');
  });
});
7
  • If you want to keep on using this static way for writing your url's, you could sniff the lang attribute value of html-element and output a different url for different lang values. But why are you writing href's with jquery in the first place? It seems a bit funny. – jounileander Sep 24 '14 at 11:42
  • That seems viable, although I'm not sure how to sniff the lang attribute. Yes, it is definitely a bit funny, but it works as intended, except for the language part.. – turtledropbomb Sep 24 '14 at 11:51
  • Why do you need WPML for that? – fuxia Sep 24 '14 at 11:51
  • @toscho it's just the plugin I'm using for localization on my site, I thought it would be appropriate to mention – turtledropbomb Sep 24 '14 at 11:52
  • Get the lang attribute value with jQuery .attr, store it as a variable and do a simple if else statement to output different href for different values. You could also output the href with php from stored custom field etc. or use icl_language_code to output different static values for different languages. But to keep it simple, just get lang value from html and go with that. – jounileander Sep 24 '14 at 12:48
2

To translate something in your js you can use wp_localize_script() really handy :

 $translation_array = array( 'some_string' => __( 'Some string to translate' ), 'a_value' => '10' );
 wp_localize_script( 'some_handle', 'object_name', $translation_array );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.