If function to hide/show links

Highlighted
Tourist
13 0 1

Hello everyone,

we want to add an if query to the "my account" page. There should be a opportunity to download a shipment document which is only available AFTER fulfilment.

The following condition must be met:

If the order is marked as fullfilled, the link should be visible. If not, the link should not be clickable.

I'm looking for something like this:

If fulfillment_status = 'null' -> link not clickable
If fulfillment status = 'fulfilled' -> link clickable

I attached a code snippet. We need the hyperlink at the last <td> to get this feature.

I hope you can help

 

Kind regards,

Paul

  <div class="table-wrap">
        <table class="full">
          <thead>
            <tr>
              <th>{{ 'customer.orders.order_number' | t }}</th>
              <th>{{ 'customer.orders.date' | t }}</th>
              <th>{{ 'customer.orders.payment_status' | t }}</th>
 <th>{{ 'customer.orders.fulfillment_status' | t }}</th>
              <th>{{ 'customer.orders.total' | t }}</th>
              <th>Ablieferbeleg</th>
            </tr>
          </thead>
          <tbody>
            {% for order in customer.orders %}
              <tr>
                <td>{{ order.name | link_to: order.customer_url }}</td>
                <td>{{ order.created_at | date: format: 'date' }}</td>
                <td>{{ order.financial_status_label }}</td>       
                <td>{{ order.fulfillment_status_label }}</td>                  
                <td>{{ order.total_price | money }}</td>
                <td><a target='_blank' href='https://XXXXX.com>Download</a></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
0 Likes
Highlighted
Shopify Partner
2227 483 626

Hey @Hyperrick,

Try with the following

 

 

  <div class="table-wrap">
        <table class="full">
          <thead>
            <tr>
              <th>{{ 'customer.orders.order_number' | t }}</th>
              <th>{{ 'customer.orders.date' | t }}</th>
              <th>{{ 'customer.orders.payment_status' | t }}</th>
 <th>{{ 'customer.orders.fulfillment_status' | t }}</th>
              <th>{{ 'customer.orders.total' | t }}</th>
              <th>Ablieferbeleg</th>
            </tr>
          </thead>
          <tbody>
            {% for order in customer.orders %}
              <tr>
                <td>{{ order.name | link_to: order.customer_url }}</td>
                <td>{{ order.created_at | date: format: 'date' }}</td>
                <td>{{ order.financial_status_label }}</td>       
                <td>{{ order.fulfillment_status_label }}</td>                  
                <td>{{ order.total_price | money }}</td>
                <td>
                     {% if order.fulfillment_status_label=="fullfilment" %}
                        <a target='_blank' href='https://XXXXX.com>Download</a>
                      {% else %}
                         <a href="javascript&colon;void(0);">Download</a>
                      {% endif %}
               </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

 

 

 

 

The above editor has a problem. so you can change

&colon; with  colon (:)

Change condition text as per your status.

Hope this works for you.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
13 0 1

Hello dmwwebartisan,

thanks for your reply!

Ich pasted your solution into my code but unfortunately now every link lead to the "javascript&colon;void" even it's fulfilled. Maybe it has something to do with the language? We're using german, I atttached you a screenshot. The order #1007 is fulfilled, oder #1008 not.

Thank you in advance

Paul

Hyperrick_0-1597497503368.png

 

0 Likes
Highlighted
Shopify Partner
2227 483 626

Hey @Hyperrick,

Nothing to do with the language. Please check the following screenshot. Change status text for fulfillment. I just type example text and change

else href code with given in screenshot.

liquid-js.jpg

 

Let me know if it works!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
13 0 1

hmm I can't get it to work..

 

That's my code now:

                <td>{% if order.fulfillment_status_label=="Erfüllt" %}
                        <a target='_blank' href="https://XXXXX.com">Download</a>
                      {% else %}
                         <a href="javascript&colon;void(0);">Download</a>
                      {% endif %}
                 </td>

 

But still all links in this <td> are not clickable. I think there must be something wrong with the condition..

Hyperrick_0-1597498792156.png

I changed the string from "fullfilment" to "Erfüllt" which is the german word for fulfilled.

Paul

0 Likes
Highlighted
Shopify Partner
2227 483 626

Hey @Hyperrick,

First we work on condition, Okay.

try to print this inside td

{{order.fulfillment_status_label}}

See you what you get the value. If it is null then it is fine but what is the text when it is not null. That text will have to put on condition.

Just do this

                <td>
                  Status : {{ order.fulfillment_status_label }}
                   {% if order.fulfillment_status_label=="Erfüllt" %}
                        <a target='_blank' href="https://XXXXX.com">Download</a>
                      {% else %}
                         <a href="javascript&colon;void(0);">Download</a>
                      {% endif %}
                 </td>

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
13 0 1

Ok check, that's the outcome:

Hyperrick_0-1597499434195.png

I already pasted "Erfüllt" for the condition. It's never "null"

it's Nicht ausgeführt (unfulfilled) or Erfüllt (fulfilled)

Paul

 

0 Likes
Highlighted
Shopify Partner
2227 483 626

Hey @Hyperrick,

Try this:

                <td>
                  Status : {{ order.fulfillment_status_label }}
                   {%- if order.fulfillment_status_label=="Erfüllt" -%}
                        <a target='_blank' href="https://XXXXX.com">Download</a>
                      {% else %}
                         <a href="javascript&colon;void(0);">Download</a>
                      {% endif %}
                 </td>

 

I change in if condition. Please paste this code.

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
13 0 1

Unfortunately nothing has changed. Both download links still lead to JavaScript

0 Likes
Highlighted
Shopify Partner
2227 483 626

Hey @Hyperrick,

It's weird. I tried with my shop in the same condition. Just assign a variable with "Erfüllt"  and check it with if condition.

It worked fine. Both if and else condition runs fine. It is difficult to debug on your side. I think only you can do it.

 

Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes