Shopify.Checkout.OrderStatus.AddContentBox Content Not Visible

Solved
RBailey
Tourist
4 1 0

Hi,
I am going to post this question again but worded differently.

I am working on a feature for my company that requires additional scripts and content to render on the Order Status (Thank you) page. I have added my scripts and HTML but when I get the Thank you page, the content is not visible.

What I am trying to do is generate one or more link buttons with a dynamic url based on the logic.  I can View Page Source and see the correct HTML being rendered there with the correct url being generated. I can tell that the script is working because it is building a large URL with Querystring parameters based on order information and it looks correct. It's just that the content is not being rendered.  I am using the same logic in the confirmation email and I can see my link(s) added there and they work correctly.

Below is my script. The names have been changed to protect the innocent but otherwise it is exactly as I have it.

I tried putting in some simple <p> tag and nothing else and that works fine.

Editing the checkout.liquid file directly could also be an option but the documentation is not very clear on how to do it.

Please don't refer me to the Shopify documentation (Customize the order status page · Shopify Help Center.) as I have already read it. I followed the examples on there to get to where I am and it does not address the issue that I am seeing. My case is more complicated than any of the examples I have found.  

 

Thanks,

 

<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<table><tr><td><p> Click links below to send reimbursement claims for this order:</p></td></tr></table>'
{% assign ctr = 0 %}
{% assign fooUrl = "https://foo.com/?qc=PRA527B&pos=12&d1=Z11.52&bi=https://foo2.com/logo-test-web-1_a73884dd-ffe6-42a0-..." %}
{% capture fooUrlCustomer1 %}&e={{ customer.email }}&fn={{ customer.first_name }}&ln={{customer.last_name}}{% endcapture %}
{% capture fooUrlCustomer2 %}&m={{ customer.default_address.phone }}&s1={{ customer.default_address.address1 }}&s2={{ customer.default_address.address2 }}{% endcapture %}
{% capture fooUrlCustomer3 %}&c={{ customer.default_address.city }}&s={{ customer.default_address.province }}&z={{ customer.default_address.zip }}&dos={{ created_at | date: "%m-%d-%y" }}{% endcapture %}

{% assign printLink = false %}
{% for line in subtotal_line_items %}
{% if line.product.metafields.my_fields.cptcode != blank %}
{% assign lineTotalUnits = line.product.metafields.my_fields.unitsperbox | times: line.quantity %}
{% assign cptuCtr = line.product.metafields.my_fields.unitsperbox | times: line.quantity %}
{% assign numberReimburseLinks = 1 %}
{% if lineTotalUnits > 8 %}
{% assign numberReimburseLinks = lineTotalUnits | divided_by: 8 %}
{% assign remainder = lineTotalUnits | modulo: 8 %}
{% if remainder > 1 %}
{% assign numberReimburseLinks = numberReimburseLinks | plus: 1 %}
{% endif %}
{% endif %}

{% for ctr in (1..numberReimburseLinks) %}
{% if cptuCtr > 7 %}
{% assign cptu = 8 %}
{% else%}
{% assign cptu = cptuCtr %}
{% endif %}
{% assign cptuCtr = cptuCtr | minus: 8 %}
{% assign fooUrlCpt = '' %}
{% assign redirectURL = '&redirurl=https://foo3.com' %}
{% assign isFiler = '&fp=0' %}
{% capture customerName %}{{ customer.first_name }} {{ customer.last_name }}{% endcapture %}

{% if ctr == 1 %}
{% assign isFiler = '&fp=0' %}
{% comment %}{% capture buttonHeaderText %}Click to file a claim for {{ customerName }}{% endcapture %}{% endcomment %}
{% capture buttonText %}&ensp;CLICK TO FILE FOR PRIMARY POLICY HOLDER&ensp;{% endcapture %}
{% else %}
{% if ctr == 2 %}
{% capture displayNumberText%}{{ ctr }}nd{% endcapture%}
{% elsif ctr == 3 %}
{% capture displayNumberText%}{{ ctr }}rd{% endcapture%}
{%else%}
{% capture displayNumberText%}{{ ctr }}th{% endcapture%}
{% endif %}
{% assign isFiler = '&fp=1' %}
{% comment %}{% capture buttonHeaderText%}Click to file a claim for a family member{% endcapture %}{% endcomment %}
{% capture buttonText%}CLICK TO FILE FOR {{displayNumberText%}} ELIGIBLE FAMILY MEMBER{% endcapture %}
{% endif %}

{% capture fooUrlCpt %}&cpt1={{ line.product.metafields.my_fields.cptcode}}&cpt1f={{ line.product.metafields.my_fields.costperunit}}&cpt1u={{ cptu }}{% endcapture %}
{% assign fooUrlFinal = fooUrl | append: fooUrlCustomer1 | append: fooUrlCustomer2 | append: fooUrlCustomer3 | append: fooUrlCpt | append: isFiler | append: redirectURL%}
'<table><tr><td style="height: 8px;"></td></tr><tr><td style="background: #ff5f01; height: 50px;"><a href="{{ fooUrlFinal }}" style="text-align: center; color: white; text-decoration: none;" > {{ buttonText }}</a></td></tr><tr><td style="height: 15px;"></td></tr></table>'
{% endfor %}
{% endif %}
{% assign ctr = 0 %}
{% endfor %}
)
</script>

 

Accepted Solution (1)

Accepted Solutions
RBailey
Tourist
4 1 0

This is an accepted solution.

Mystery solved.  I just needed to add commas at the ends of the HTML strings to define them as separate parameters to the function.

View solution in original post

Reply 1 (1)
RBailey
Tourist
4 1 0

This is an accepted solution.

Mystery solved.  I just needed to add commas at the ends of the HTML strings to define them as separate parameters to the function.