Re: Afterpay Product Page assets showing twice

Afterpay Product Page assets showing twice

NoGrow
Visitor
3 0 0

Hello,

I have added the shopify code to my website today but the text is showing twice. How do I remove one of them, specifically the line directly under the price?

Product page example: https://www.nogrow.com.au/collections/no-grow-facial-product-range/products/no-grow-female-facial-ha...

Liquid code is noted below.

Thank you

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
<meta name="google-site-verification" content="IV7BPLESttSpBdxSWN1s4zlr4HIcuHkGQYmE3wLG59w" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_button }}">

{%- if canonical_url != blank -%}
<link rel="canonical" href="{{ canonical_url }}">
{%- endif -%}

{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}

{%- capture seo_title -%}
{%- if request.page_type == 'search' and search.performed == true -%}
{{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
{%- else -%}
{{ page_title }}
{%- endif -%}
{%- if current_tags -%}
{%- assign meta_tags = current_tags | join: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
&ndash; {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
&ndash; {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}
<title>{{ seo_title | strip }}</title>

{%- if page_description -%}
<meta name="description" content="{{ page_description | escape }}">
{%- endif -%}

{% include 'social-meta-tags' %}

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

<script>
var theme = {
breakpoints: {
medium: 750,
large: 990,
widescreen: 1400
},
strings: {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
regularPrice: {{ 'products.product.regular_price' | t | json }},
salePrice: {{ 'products.product.sale_price' | t | json }},
sale: {{ 'products.product.on_sale' | t | json }},
fromLowestPrice: {{ 'products.product.from_lowest_price_html' | t: lowest_price: '[price]' | json }},
vendor: {{'products.product.vendor' | t | json }},
showMore: {{ 'general.filters.show_more' | t | json }},
showLess: {{ 'general.filters.show_less' | t | json }},
searchFor: {{ 'general.search.search_for' | t | json }},
addressError: {{ 'sections.map.address_error' | t | json }},
addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
authError: {{ 'sections.map.auth_error_html' | t | json }},
newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
external: {{ 'general.accessibility.link_messages.external' | t | json }},
newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
update: {{ 'cart.label.update' | t | json }},
quantity: {{ 'cart.label.quantity' | t | json }},
discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
regularTotal: {{ 'cart.label.regular_total' | t | json }},
priceColumn: {{ 'cart.label.price_column' | t | json }},
quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
cartError: {{ 'cart.general.cart_error' | t | json }},
removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }},
products: {{ 'general.search.products' | t | json }},
loading: {{ 'general.search.loading' | t | json }},
number_of_results: {{ 'general.search.number_of_results' | t: result_number: '[result_number]', results_count: '[results_count]' | json }},
number_of_results_found: {{ 'general.search.number_of_results_found' | t: results_count: '[results_count]' | json }},
one_result_found: {{ 'general.search.one_result_found' | t | json }}
},
moneyFormat: {{ shop.money_format | json }},
moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }},
settings: {
predictiveSearchEnabled: {{ settings.predictive_search_enabled | json }},
predictiveSearchShowPrice: {{ settings.predictive_search_show_price | json }},
predictiveSearchShowVendor: {{ settings.predictive_search_show_vendor | json }}
}
}

document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>

{%- if request.page_type contains 'customers/' -%}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{%- endif -%}

<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

{{ content_for_header }}
</head>

<body class="template-{{ request.page_type | handle }}">

<a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}

{% section 'header' %}

<div class="page-container drawer-page-content" id="PageContainer">

<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>

{% section 'footer' %}

<div id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'sections.slideshow.navigation_instructions' | t -}}
</div>

</div>

<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
</ul>
</body>
</html>


<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.9) -->
<script type="text/javascript">
// Overrides:
// var afterpay_min = 0.04; // As per your Afterpay contract.
// var afterpay_max = 2000.00; // As per your Afterpay contract.
// var afterpay_cbt_enabled = false; // As per your Afterpay contract; change to true to display Cross-Border Trade artwork (for AU/NZ).
// var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_product_selector = '#product-price-selector';
// var afterpay_cart_integration_enabled = true;
// var afterpay_cart_static_selector = '#cart-subtotal-selector';

// Non-editable fields:
var afterpay_shop_currency = {{ shop.currency | json }};
var afterpay_cart_currency = {{ cart.currency.iso_code | json }};
var afterpay_shop_money_format = {{ shop.money_format | json }};
var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var afterpay_theme_name = {{ theme.name | json }};
var afterpay_product = {{ product | json }};
var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var afterpay_cart_total_price = {{ cart.total_price | json }};
var afterpay_js_snippet_version = '1.0.9';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
<!-- End Shopify-Afterpay JavaScript Snippet (v1.0.9) -->

Replies 8 (8)

NoGrow
Visitor
3 0 0

Bump... please help!

Jason
Shopify Partner
11206 226 2315

I'm having a little trouble looking at the code since it's not added within a code block but confirm something for me first.

Did you add the AfterPay code at the very, very bottom of the theme.liquid template - so after the closing </html> tag? That would not the correct place to put it so ignoring double ups that's something to also look at resolving.

Can you link to your shop so we can see the code in place on the live store?

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
NoGrow
Visitor
3 0 0

Hi Jason,
Thank you for your response.

Yes, I pasted the code at the end as per the instructions from AfterPay. I have inserted the code in a block, is this better?

Apologies, I am not good at coding so I am learning very quickly here.

My shop link is www.nogrow.com.au

Thank you

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
  <meta name="google-site-verification" content="IV7BPLESttSpBdxSWN1s4zlr4HIcuHkGQYmE3wLG59w" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_button }}">

  {%- if canonical_url != blank  -%}
    <link rel="canonical" href="{{ canonical_url }}">
  {%- endif -%}

  {%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {%- endif -%}

  {%- capture seo_title -%}
    {%- if request.page_type == 'search' and search.performed == true -%}
      {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
    {%- else -%}
      {{ page_title }}
    {%- endif -%}
    {%- if current_tags -%}
      {%- assign meta_tags = current_tags | join: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      &ndash; {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      &ndash; {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  <title>{{ seo_title | strip }}</title>

  {%- if page_description -%}
    <meta name="description" content="{{ page_description | escape }}">
  {%- endif -%}

  {% include 'social-meta-tags' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <script>
    var theme = {
      breakpoints: {
        medium: 750,
        large: 990,
        widescreen: 1400
      },
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        soldOut: {{ 'products.product.sold_out' | t | json }},
        unavailable: {{ 'products.product.unavailable' | t | json }},
        regularPrice: {{ 'products.product.regular_price' | t | json }},
        salePrice: {{ 'products.product.sale_price' | t | json }},
        sale: {{ 'products.product.on_sale' | t | json }},
        fromLowestPrice: {{ 'products.product.from_lowest_price_html' | t: lowest_price: '[price]' | json }},
        vendor: {{'products.product.vendor' | t | json }},
        showMore: {{ 'general.filters.show_more' | t | json }},
        showLess: {{ 'general.filters.show_less' | t | json }},
        searchFor: {{ 'general.search.search_for' | t | json }},
        addressError: {{ 'sections.map.address_error' | t | json }},
        addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
        addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
        authError: {{ 'sections.map.auth_error_html' | t | json }},
        newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
        external: {{ 'general.accessibility.link_messages.external' | t | json }},
        newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
        removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
        update: {{ 'cart.label.update' | t | json }},
        quantity: {{ 'cart.label.quantity' | t | json }},
        discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
        regularTotal: {{ 'cart.label.regular_total' | t | json }},
        priceColumn: {{ 'cart.label.price_column' | t | json }},
        quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
        cartError: {{ 'cart.general.cart_error' | t | json }},
        removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
        unitPrice: {{ 'products.product.unit_price_label' | t | json }},
        unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
        oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
        otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
        quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }},
        products: {{ 'general.search.products' | t | json }},
        loading: {{ 'general.search.loading' | t | json }},
        number_of_results: {{ 'general.search.number_of_results' | t: result_number: '[result_number]', results_count: '[results_count]' | json }},
        number_of_results_found: {{ 'general.search.number_of_results_found' | t: results_count: '[results_count]' | json }},
        one_result_found: {{ 'general.search.one_result_found' | t | json }}
      },
      moneyFormat: {{ shop.money_format | json }},
      moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }},
      settings: {
        predictiveSearchEnabled: {{ settings.predictive_search_enabled | json }},
        predictiveSearchShowPrice: {{ settings.predictive_search_show_price | json }},
        predictiveSearchShowVendor: {{ settings.predictive_search_show_vendor | json }}
      }
    }

    document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  </script>

  {%- if request.page_type contains 'customers/' -%}
    <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
  {%- endif -%}

  <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
  <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

  {{ content_for_header }}
</head>

<body class="template-{{ request.page_type | handle }}">

  <a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

  {%- if settings.enable_ajax -%}
    {% include 'cart-popup' %}
  {%- endif -%}

  {% section 'header' %}

  <div class="page-container drawer-page-content" id="PageContainer">

    <main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% section 'footer' %}

    <div id="slideshow-info" class="visually-hidden" aria-hidden="true">
      {{- 'sections.slideshow.navigation_instructions' | t -}}
    </div>

  </div>

  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
  </ul>
</body>
</html>


<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.9) -->
<script type="text/javascript">
// Overrides:
// var afterpay_min = 0.04;            // As per your Afterpay contract.
// var afterpay_max = 2000.00;         // As per your Afterpay contract.
// var afterpay_cbt_enabled = false;   // As per your Afterpay contract; change to true to display Cross-Border Trade artwork (for AU/NZ).
// var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_product_selector = '#product-price-selector';
// var afterpay_cart_integration_enabled = true;
// var afterpay_cart_static_selector = '#cart-subtotal-selector';

// Non-editable fields:
var afterpay_shop_currency = {{ shop.currency | json }};
var afterpay_cart_currency = {{ cart.currency.iso_code | json }};
var afterpay_shop_money_format = {{ shop.money_format | json }};
var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var afterpay_theme_name = {{ theme.name | json }};
var afterpay_product = {{ product | json }};
var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var afterpay_cart_total_price = {{ cart.total_price | json }};
var afterpay_js_snippet_version = '1.0.9';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
<!-- End Shopify-Afterpay JavaScript Snippet (v1.0.9) -->



 

krissd8
Visitor
1 0 0

Hey mate did you end up by solving the issue ? I’m having the same problem 

GinaE
Visitor
1 0 1

I am having the same issue and yes, I put the code at the very bottom the theme.liquid template - after the closing </html> tag? Please help, it looks very unprofessional. 

covaup.com

 
 

 

 

 

Rimmi96
Visitor
1 0 1

hello, I'm facing the same problem in product page. afterpay is showin twice in product page kindlyy helppp

dsadadsads.JPG

gary07
Excursionist
62 0 10

Hello Nogrow,

 

Please can you advise how did you add? 

 

You Can Also Add These...

 

Please can you share the code and instructions please

 

 

waxit-dev
Visitor
1 0 0

For anyone still wondering, this might be one of the reasons why you're seeing the widget twice. The issue I had with Afterpay messages rendering twice was because I was initialising Afterpay in theme.js as well when trying to update the Afterpay price to match the selected variant price.

 

Because Afterpay.init($) in theme.js was executing before the Afterpay widget rendered the html element to the DOM, the element was rendered twice. To get around this I've added a condition in theme.js to check if the element existed on the page yet or not. If it is then remove the existing element from the DOM, update the price then initialise the Afterpay messaging widget again.

//Check the afterpay message element exists on the page
if($('afterpay-placement').length){
    //Remove the element from the DOM
    $('afterpay-placement').remove();
    //Update the afterpay_current_variant object with updated price
    afterpay_current_variant.price = [UPDATED_PRICE];
    //Render new message element to the DOM
    Afterpay.initProductPage($);
} else {
    //If the element hasn't rendered yet, simply change the 
    //afterpay_current_variant object price and the message 
    //element will render to the DOM with the desired price.
    afterpay_current_variant.price = [UPDATED_PRICE];
}