Question 3286 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

PHP modify fetched variable and return to frontend for JS – Woocommerce

Im fetching Product Attributes from Woocommerce, and echo them out in a script tag as variable to use with javascript in frontend.
This might be a bad practice, feel free to enlighten me.

Example:

Product Attributes:

Total height: 43m

Total length: 55m

PHP queries "Total-height" as Attribute Name and "43m" as Attribute Value.
PHP replaces empty space with "-".
I can’t define a javascript var with "-" in var name.
Example: var Total-height = "43m";

How could I fix this issue?
Here is my code.
Thanks in advance.

function product_attribute_dimensions(){
    global $product;
    
foreach ($product->get_attributes() as $taxonomy => $attribute_obj ) {
    // Get the attribute label
    $attribute_label_name = wc_attribute_label($taxonomy);
    $value = $product->get_attribute($taxonomy);
        if ($value) {
            $label = get_taxonomy($taxonomy)->labels->singular_name;
    
            $profile_one = $value;
            echo '<script>' . $attribute_label_name . ' = "' . $value . '";
            </script>';
                
        }

}
Tags:

3

Answers


  1. 0

    As I understand the generated string in the variable "$attribute_label_name" is the problem? Take a look at https://www.php.net/manual/de/function.str-replace.php

    With this native PHP function you can search for a character (eg."-") and replace with something else (eg. "_")
    echo '<script>' . str_replace("-", "_", $attribute_label_name) . ' = "' . $value . '";

    But as you said, this might not be the best approach. I personally would add this kind of information into a "data-X" HTML attribute in some HTML element and would extract this in my JS. Similar to this:

    <div id="some_element" class="could be hidden" data-total-height="<?= $value ?>"></div>

    You could Query something like this with jQuery $("#some_element").attr("data-total-height")

    Login or Signup to reply.
  2. 0

    try using window["variable_name"]
    do this:

    echo '<script>window["' . $attrname . '"]=' . $attrval

    then in your js:

    let this_var = window[attrname]

    It seems like the clearest shortest way to do this.

    Login or Signup to reply.
  3. 0 
    function product_attribute_dimensions() {
    global $product;

    $product_atrributes = array();
    foreach ($product->get_attributes() as $taxonomy => $attribute_obj) {
        // Get the attribute label
        $attribute_label_name = wc_attribute_label($taxonomy);
        $attribute_label_name = str_replace(' ', '_', $attribute_label_name);
        $value = $product->get_attribute($taxonomy);
        if ($value) {
            $product_atrributes[$attribute_label_name] = $value;
        }
    }
    echo '<script type="text/javascript">var product_atrributes = ' . json_encode($product_atrributes) . ';</script>';
}

    Now you can use in JS like product_atrributes.Total_height.value
    This way the redundant script tag also can be avoided.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search