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');
  });
});
Improve this question
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, 2014 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, 2014 at 11:51
  • Why do you need WPML for that?
    – fuxia ♦
    Sep 24, 2014 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, 2014 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, 2014 at 12:48

1 Answer 1

Reset to default
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 );
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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