Print url on gift card does not work

Solved
Highlighted
New Member
6 0 0

Hi there,

We are launching tomorrow and we are experiencing some issues with the print url that is by default on the gift card from shopify.

When we click this print url nothing is happening.

 

Does someone know what might be the cause of this issue?

 

Example gift card can be found here: https://checkout.shopify.com/gift_cards/42563272861/724a37eb1013bde227127d52ee15f302

After hitting the print url the only thing happening is that a # appears at the end of the original url: https://checkout.shopify.com/gift_cards/42563272861/724a37eb1013bde227127d52ee15f302#

 

Kind regards,

Lena

0 Likes
Highlighted
Shopify Partner
1080 169 194

Hi Lena,

Did you change anything in your Gift-card.liquid file? You might be missing the javascript code to handle this "Print" operation click. Let me know.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
New Member
6 0 0

Hi There,

I changed the code in Gift-card.liquid to change the picture shown.

But reversed the code to the original and still it will not work.

 

Is this the only code involved to make this button work?

 

Greetings

Lena

0 Likes
Highlighted
Shopify Partner
1080 169 194

Logically yes, would you mind sharing the original code here? I'll have a look of what might be wrong.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
6 0 0

Hi there,

 

Yes offcourse.

Here you have the original code with a small adjustment for the picture I made.

{%- layout 'gift_card' -%}

<header class="Header Header--sidebar Header--initialized">
  <div class="Header__Wrapper Header__Wrapper--center">
    <a href="{{ shop.url }}" class="Header__LogoLink">
      <span class="Heading u-h4">{{ shop.name }}</span>
    </a>
  </div>
</header>

<div class="GiftCard {% if gift_card.expired or gift_card.enabled != true %}GiftCard--disabled{% endif %}" data-section-id="gift-card" data-section-type="gift-card">
  <div class="Container">
    <div class="PageContent">
      <h1 class="GiftCard__SubText Heading u-h1">{{ 'gift_card.issued.subtext' | t }}</h1>

      {%- capture print_link -%}
        <a href="#" id="PrintGiftCard" class="Link Link--underlineNative">{{ 'gift_card.issued.print' | t }}</a>
      {%- endcapture -%}

      <p class="GiftCard__Redeem">{{ 'gift_card.issued.redeem_html' | t: print_link: print_link }}</p>

      <div class="GiftCard__Wrapper">
        {%- if gift_card.enabled and gift_card.expired == false -%}
          <div class="Alert Alert--success">
            {%- assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros: gift_card.currency -%}
            <p>{{ 'gift_card.issued.initial_amount_html' | t: initial_amount: formatted_initial_value }}</p>

            {%- if gift_card.balance != gift_card.initial_value -%}
              {%- assign formatted_balance = gift_card.balance | money_without_trailing_zeros: gift_card.currency -%}
              <p>{{ 'gift_card.issued.remaining_balance_html' | t: balance: formatted_balance }}</p>
            {%- endif -%}

            {%- if gift_card.expires_on -%}
              {%- assign gift_card_expiry_date = gift_card.expires_on | date: format: 'month_day_year' -%}
              <p>{{ 'gift_card.issued.expires_on' | t: expiry: gift_card_expiry_date }}</p>
            {%- endif -%}
          </div>
        {%- else -%}
          <div class="Alert Alert--error">
            {%- if gift_card.expired and gift_card.enabled -%}
              {%- assign gift_card_expiry_date = gift_card.expires_on | date: format: 'month_day_year' -%}
              <p>{{ 'gift_card.issued.expired' | t: expiry: gift_card_expiry_date }}</p>
            {%- else -%}
              <p>{{ 'gift_card.issued.disabled' | t }}</p>
            {%- endif -%}
          </div>
        {%- endif -%}

        <div class="GiftCard__IllustrationWrapper">
          <img class="GiftCard__Illustration" src="{{ 'giftcard.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">
          <span class="GiftCard__CodeHolder Heading u-h6">{{ gift_card.code | format_code }}</span>
        </div>

        <div id="QrCode" class="GiftCard__QrCode" data-identifier="{{ gift_card.qr_identifier }}"></div>
      </div>

      <div class="ButtonGroup">
        {%- if gift_card.pass_url -%}
          <div class="ButtonGroup__Item">
            <a href="{{ gift_card.pass_url }}" class="GiftCard__apple-wallet">
              <img class="apple-wallet-image" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_card.issued.add_to_apple_wallet' | t }}">
            </a>
          </div>
        {%- endif -%}

        <div class="ButtonGroup__Item">
          <a href="{{ shop.url }}" class="Button Button--primary" target="_blank">{{ 'gift_card.issued.shop_link' | t }}</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-header').offsetHeight + 'px');
</script>

 

 

 

Kind regards,

Lena

0 Likes
Highlighted
Shopify Partner
1080 169 194

This is an accepted solution.

Replace this line:

<a href="#" id="PrintGiftCard" class="Link Link--underlineNative">{{ 'gift_card.issued.print' | t }}</a>

 
with:

<a href="javascript&colon;if(window.print)window.print()" id="PrintGiftCard" class="Link Link--underlineNative">{{ 'gift_card.issued.print' | t }}</a>

 

Let me know! 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
6 0 0

Wauw thank you so much. 

That worked right away!

 

Any idea how I could get rid of the date and the URL on the printed page? And only print the gift card related stuff?

I have indicated the desired print result in orange hereunder:

print.png

 

Thanks for helping me

 

Kind regards,

Lena

0 Likes
Highlighted
New Member
2 0 0

Hi Lena, 

 

How did you change the card image?

0 Likes