Adding a conditional to mustache/php

Question

Consider:

<?php
/**
 * Single variation display
 *
 * This is a javascript-based template for single variations (see https://codex.wordpress.org/Javascript_Reference/wp.template).
 * The values will be dynamically replaced after selecting attributes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.5.0
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>

    <div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>

    <div class="woocommerce-variation-availability">{{{ data.variation.availability_html }}}</div>

 <div class="woocommerce-variation-custom-text-field">
        GTIN: <span class="sku">{{{ data.variation.wccaf_gtin }}}</span>
    </div>

 <div class="woocommerce-variation-custom-text-field">
        MPN: <span class="sku">{{{ data.variation.wccaf_mpn }}}</span>
    </div>

</script>
<script type="text/template" id="tmpl-unavailable-variation-template">
    <p><?php _e( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ); ?></p>
</script>

How do I implement a conditional, such that IF {{{ data.variation.wccaf_gtin }}} returns blank/empty value, THEN echo "GTIN unavailable"?

What I have tried:

I have read this on wiki:

Template with section tag:

{{#x}} Some text {{/x}} Here, when x is a Boolean value then the section tag acts like an if conditional

So I tried

 <div class="woocommerce-variation-custom-text-field">
        GTIN: <span class="sku">{{#repo}}{{ data.variation.wccaf_gtin }}{{/repo}}{{^repo}}N/A{{/repo}}</span>
    </div>

which doesn't work.

But I'm completely new to mustache and I need some guidance.

The `mustache` is good. But you can check this also www.github.com/Redcof/ints-jst — int soumen, Mar 12 '19 at 10:21

score 3 · Answer 1 · answered Mar 03 '19 at 08:47

3

That is not a Mustache template, as comment notes it's WordPress custom wp.template solution.

It doesn't have any logic tags, but has evaluate tags <# #>.

From quick google here is an example how would you write a check using them:

  <# if ( data.trueValue ) { #>
    <p> I am only output if <code>data.trueValue</code> is true.
  <# } #>

Via https://lkwdwrd.com/wp-template-js-templates-wp

answered Mar 03 '19 at 08:47

Rarst

2,335
16
26

Would you mind re-writing that solution so that if `{{{ data.variation.wccaf_gtin }}}` returns blank/empty value, then echo "GTIN unavailable"? I wouldn't know how to adapt it myself, thanks. – ptrcao Mar 03 '19 at 09:04
Would be something like `<# if ( ! data.variation.wccaf_gtin ) { #>` – Rarst Mar 03 '19 at 09:07
`<# if(isEmpty(data.variation.wccaf_gtin)) { #>
I am only output if data.variation.wccaf_gtin is true. <# } #>` Would this be correct usage? (I don't know either mustache or JS.)
– ptrcao Mar 03 '19 at 09:51
So to show a "placeholder" text if a value is empty, I believe it should look like this: `<# if ( data.variation.wccaf_gtin ) { #>
{{{ data.variation.wccaf_gtin }}}
<# } else { #>
GTIN unavailable
<# } #>` That being said, I've never worked with WP templates, or not in the last few years so I'm just thinking that should do it. You could wrap the condition in `isEmpty` if the check would fail otherwise – kachnitel Mar 05 '19 at 19:44
@kachnitel I tried your code plus also with the `isEmpty`: `<# if isEmpty( data.variation.wccaf_gtin ) { #>
{{{ data.variation.wccaf_gtin }}}
<# } else { #>
GTIN unavailable
<# } #>` No luck, friend, try again? – ptrcao Mar 06 '19 at 05:30
Odd, I've done some quick search and found [this question](https://stackoverflow.com/questions/42853993/is-there-a-tag-and-if-not-what-use-could-it-have-in-this-code) which uses the same idea in an existing code `<# if ( isVideo ) { #> Show Video List <# } else { #> Show Tracklist <# } #>` Are you getting any output at all with that one above? – kachnitel Mar 06 '19 at 07:24
@kachnitel There's a caveat on that answer which says `This may not only apply to wordpress.` Do you suppose that might have something to do with it? – ptrcao Mar 07 '19 at 08:17

score 2 · Answer 2 · answered Mar 07 '19 at 04:15

According to Mustache Documentation

// if exist
{{#repo}}
  <b>{{name}}</b>        
{{/repo}}

// if not exist
{{^repo}}
  No repos :(
{{/repo}}

You may try this

<div class="woocommerce-variation-custom-text-field">
        GTIN: <span class="sku">{{#data.variation.wccaf_gtin}}{{ data.variation.wccaf_gtin }}{{/data.variation.wccaf_gtin}}{{^data.variation.wccaf_gtin}}N/A{{/data.variation.wccaf_gtin}}</span>
</div>

score 1 · Answer 3 · answered Mar 12 '19 at 10:52

Try the same using ints-jst

Code:

<div id="try-jst">
            <div class="woocommerce-variation-description">
                <js-t> print(data.variation.variation_description);</js-t>
            </div>

            <div class="woocommerce-variation-price">
                <js-t> print(data.variation.price_html);</js-t>
            </div>

            <div class="woocommerce-variation-availability">
                <js-t> print(data.variation.availability_html);</js-t>
            </div>

            <div class="woocommerce-variation-custom-text-field">
                GTIN:
                <span class="sku">
            <js-t>
                if(!!data.variation.wccaf_gtin) {
                   print(data.variation.wccaf_gtin);
                } else {
                   print("unavailable");
                }
            </js-t>
        </span>
            </div>
            <div class="woocommerce-variation-custom-text-field">
                MPN:
                <span class="sku">
            <js-t>
                if(!!data.variation.wccaf_mpn) {
                   print(data.variation.wccaf_mpn);
                } else {
                   print("unavailable");
                }
            </js-t>
        </span>
            </div>
        </div>

Script:

<script>
    /* var data = {
        variation: {
            variation_description: 'variation_description',
            price_html: 'price_html',
            availability_html: 'availability_html',
            wccaf_gtin: '',
            wccaf_mpn: '123',
        }
    }; */
    // jQuery version
    compile($('#try-jst')[0]);
    run();

    // Plain Javascript
    /**
     * compile(document.getElementById('try-jst'));
     * run();
     */
</script>

Output:

<div id="try-jst">
                <div class="woocommerce-variation-description">variation_description</div>
                <div class="woocommerce-variation-price">price_html</div>
                <div class="woocommerce-variation-availability">availability_html</div>
                <div class="woocommerce-variation-custom-text-field"> GTIN: <span class="sku">unavailable</span></div>
                <div class="woocommerce-variation-custom-text-field"> MPN: <span class="sku">123</span></div>
            </div>

So you can give it a try.

Adding a conditional to mustache/php

3 Answers3