Add to Cart button not displaying on product pages in Chrome

Solved
Highlighted
Tourist
15 0 0

I am having trouble with the Add to Cart button on my Sunrise theme. It isn't regularly appearing in chrome, even incognito. It appears to work fine in Firefox and Internet Explorer.  The Theme developer says its and app, but I removed all apps and reverted back to the earliest revision and I'm still having the problem. 

Here is a sample product. https://videogametrader.com/products/6691

When the page first loads the Add to Cart button Flashes for a second and then goes away. On other browsers it does appear. I've attached images.

This is FirefoxThis is Firefox

FireFox Browser

This is Internet ExplorerThis is Internet Explorer

Internet Explorer

This is ChromeThis is Chrome

Chrome Browser

 

This is driving me nutty. 

Here is my theme code. Any help is appreciated.

====================================

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign zoom_enabled = section.settings.zoom_product -%}

<div itemscope itemtype="http://schema.org/Product" id="prod-{{product.id}}" class="clearfix" data-section-id="{{ section.id }}" data-section-type="product"{% if section.settings.show_preorder %} data-show-preorder="yes"{% endif %}{% if section.settings.show_inventory %} data-show-inventory="yes"{% endif %}{% if zoom_enabled %} data-zoom-enabled="true"{% endif%}>

<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

<h1 class="page-title">{{ product.title | escape}}</h1>

<div id="product-images" class="clearfix{% if product.images.size > 1%} multi-image{% else %} single-image{% endif %}">
<a id="product-shot" class="productimage" data-image-id="{{featured_image.id}}" href="{{ featured_image | img_url: 'master' }}">
<img src="{{ featured_image | img_url: product_image_zoom_size }}" alt="{{ featured_image.alt | escape }}" />
{% if product.compare_at_price > product.price %}
{% if section.settings.show_sale_sticker %}
<span class="sale round">{{ 'products.general.sale' | t }}</span>
{% endif %}
{% endif %}
<span class="icon-magnifier"></span>
</a>

<div id="more-images" class="product-thumbs-{{section.id}} clearfix" data-arrow-left="{% include 'icon-arrowleft'%}" data-arrow-right="{% include 'icon-arrowright'%}">
{% for image in product.images %}
{%- assign active_image = "" -%}
{%- if featured_image == image -%}
{%- assign active_image = "active-img" -%}
{%- endif -%}
<a href="{{ image | product_img_url: product_image_zoom_size }}" class="{{active_image}} productimage smallimg{% if section.settings.mobile_hide_prd_images %} hide-for-mobile{% endif %}" data-image-index="{{forloop.index0}}" title="{{product.title | escape }}" data-image-id="{{ image.id }}">
<img src="{{ image | product_img_url: 'compact'}}" alt="{{ image.alt | escape }}" />
</a>
{% endfor %}
</div>
</div>

<div id="product-details">
{% assign product_vendor_handle = product.vendor | handle %}
{% if collections[product_vendor_handle].handle == product_vendor_handle %}
{% assign vendor_url = collections[product_vendor_handle].url %}
{% else %}
{% assign vendor_url = product.vendor | url_for_vendor %}
{% endif %}

<h2 itemprop="brand" class="{% unless section.settings.show_vendor %}hide{% endunless%}">{{ product.vendor | link_to: vendor_url }}</h2>


{% if product.tags contains "MAP" %}
<p>Add to cart for price</p>
{% else %}
<div class="product-price-wrap" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
{% if product.available %}
<link itemprop="availability" href="http://schema.org/InStock" />
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock" />
{% endif %}
{% if product.compare_at_price > product.price %}
<span id="productPrice-{{ section.id }}" class="product-price on-sale" itemprop="price" content="{{ current_variant.price | money_without_currency }}"><span class=price-money>{{ current_variant.price | money }}</span></span>&nbsp;<s id="comparePrice-{{ section.id }}" class="product-compare-price"><span class=price-money>{{ current_variant.compare_at_price | money }}</span></s>
{% else %}
<span id="productPrice-{{ section.id }}" class="product-price" itemprop="price" content="{{ current_variant.price | money_without_currency }}"><span class=price-money>{{ current_variant.price | money }}</span></span>&nbsp;<s class="product-compare-price"></s>
{% endif %}
</div>
{% endif %}

{% if section.settings.show_product_sku %}
<div id="productSKU-{{ section.id }}" class="sku-info">{% if current_variant.sku != blank %}{{'products.product.sku' | t}} {{current_variant.sku}}{% endif %}</div>
{% endif %}


<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">
<div class="product-variants">
<fieldset>
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-name="{{ option.name }}"
data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

<select name="id" id="productSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %}date-image-id="{{variant.featured_image.id}}" data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - <span class=price-money>{{ variant.price | money_with_currency }}</span>
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
</fieldset>

<div id="stockMsg-{{ section.id }}">
{% if section.settings.show_preorder and current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.inventory_policy == "continue" %}
<div class="var-msg">
<!-- inventory is managed and stock qty is 0 or less but item can still be purchased -->
{{'products.product.preorder_msg' | t}}
</div>
{% elsif section.settings.show_inventory and current_variant.inventory_management %}
<!-- show inventory qty for managed variants -->
<div class="var-msg">
{{'products.product.availability' | t}} {{current_variant.inventory_quantity}} {{ 'products.product.in_stock' | t }}
</div>
{% endif %}
</div>

</div>
<!-- NBIS installation -->
<script data-app="esc-out-of-stock" type="text/json">[{% for variant in product.variants %}{"id":{{ variant.id }},"title":"{{ variant.title | escape }}","option1":{% if variant.option1 %}"{{ variant.option1 | escape }}"{% else %}null{% endif %},"option2":{% if variant.option2 %}"{{ variant.option2 | escape }}"{% else %}null{% endif %},"option3":{% if variant.option3 %}"{{ variant.option3 | escape }}"{% else %}null{% endif %},"sku":{% if variant.sku %}"{{ variant.sku | escape }}"{% else %}null{% endif %},"requires_shipping":{{ variant.requires_shipping }},"taxable":{{ variant.taxable }},"featured_image":{% if variant.featured_image %}"{{ variant.featured_image }}"{% else %}null{% endif %},"available":{{ variant.available }},"name":"{{ variant.name }} | escape","public_title":"{{ variant.public_title }} | escape","options":{{ variant.options | json }},"price":{{ variant.price }},"weight":{% if variant.weight %}{{ variant.weight }}{% else %}0{% endif %},"compare_at_price":{% if variant.compare_at_price %}{{ variant.compare_at_price }}{% else %}null{% endif %},"inventory_quantity":{{ variant.inventory_quantity }},"inventory_management":{% if variant.inventory_management %}"{{ variant.inventory_management }}"{% else %}null{% endif %},"inventory_policy":{% if variant.inventory_policy %}"{{ variant.inventory_policy }}"{% else %}null{% endif %},"barcode":{% if variant.barcode %}"{{ variant.barcode }}"{% else %}null{% endif %}}{% unless forloop.last %},{% endunless %}{% endfor %}]</script>
<div id="esc-oos-form"></div>
<div class="quick-actions clearfix">
{% if section.settings.show_qty %}
<p class="qty-field">
<label for="product-quantity-{{product.id}}">{{'products.product.quantity' | t}}</label>
<input type="number" id="product-quantity-{{product.id}}" name="quantity" value="1" min="1" />
</p>
{% endif %}
<button type="submit"
class="purchase button pulse animated"
name="add"
id="addToCart-{{ section.id }}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="addToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
</form>

 

{% if collection %}
{% if collection.previous_product or collection.next_product %}
<div class="product-nav clearfix">
{% if collection.previous_product %}
{% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
<span class="left">{{ 'products.general.previous_product_html' | t | link_to: prev_url }}</span>
{% endif %}
{% if collection.next_product %}
{% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
<span class="right">{{ 'products.general.next_product_html' | t | link_to: next_url }}</span>
{% endif %}
</div>
{% endif %}
{% endif %}

{% if section.settings.product_social %}
<div id="share-me" class="clearfix">
{% capture shareHeading %}{{ 'products.general.share' | t }}{% endcapture %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product, share_heading:shareHeading %}
</div>
{% endif %}
</div> <!-- product details -->

<div id="product-description" class="rte" itemprop="description">
{{ product.description }}
</div>

</div>

{% if section.settings.product_related %}
{% include 'related' %}
{% endif %}

{% unless product.empty? %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}

{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "show_inventory",
"label": "Show inventory quantity",
"default": true
},
{
"type": "checkbox",
"id": "show_preorder",
"label": "Show \"pre-order\" message",
"default": true,
"info": "This will only appear when a product has managed inventory that is 0 or less and still available to buy"
},
{
"type": "checkbox",
"id": "zoom_product",
"label": "Enable image zoom",
"default": true
},
{
"type": "checkbox",
"id": "show_qty",
"label": "Show qty box on product screen",
"default": true
},
{
"type": "checkbox",
"id": "show_product_sku",
"label": "Show SKU",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "show_sale_sticker",
"label": "Show sale sticker",
"default": true
},
{
"type": "checkbox",
"id": "product_social",
"label": "Show sharing buttons",
"default": true
},
{
"type": "header",
"content": "Related items"
},
{
"type": "checkbox",
"id": "product_related",
"label": "Enable",
"default": true
},
{
"type": "text",
"id": "title_related",
"label": "Title",
"default": "You may also like..."
},
{
"type": "checkbox",
"id": "mobile_related_items",
"label": "Hide related items on mobile",
"default": false
}
]
}
{% endschema %}

0 Likes
Highlighted
Shopify Partner
464 67 98

it is appearing in my chrome browser everytime. Do not know what the issue in your browser. Please first remove all cache and cookie data from your browser and then try

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Tourist
15 0 0

It's so weird. Some product pages work. Some don't and some work after I refresh a bunch of times. I also have customers telling me they can't order because the button doesn't exist. I tried deleting data and it worked for a few minutes then stopped again. I'm at a loss. I also tried incognito and it didnt' work.

0 Likes
Highlighted
Shopify Partner
464 67 98

Please place this code at the end of theme.scss and then try

.purchase {
display: block !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Tourist
15 0 0

Hi. Thanks for the reply. I don't have a Theme. scss. I have a theme.liquid and theme.js.liquid

0 Likes
Highlighted
Shopify Partner
464 67 98

then in theme.liquid, between head tag, do code like this

<style>

MY GIVEN CODE HERE

</style>

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Tourist
15 0 0

Ok, so when I went to the <Head> I was going to install your code at the end right before </head>. That is when I noticed old APP code. I deleted that and now this appears to be working. 

I didn't add your code yet. What does it do? I may still add it.

Thanks again.

0 Likes
Highlighted
Shopify Partner
464 67 98

This is an accepted solution.

So now there is no need to install my code

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like