Cart Does Not Update Unless Page Is Refreshed(RefreshTheme)

[Vluu]

Hi,

I've been trying to find a solution to an issue that I have, in which the cart icon as well as the cart, do not update unless the entire page is refreshed. Is there a way that I can alter the code so that both update automatically without refreshing the page? Here are some images provided below to further explain:

Cart Before Page Refresh:

 

Cart After Page Refresh:

URL: https://cozycomfycorners.com/
PW: aGoku

[SomeUsernameHe]

Hmmm... That is strange. Let me do some testing on your site really fast.

[SomeUsernameHe]

Looks like when I try to add something to the cart I get this error:

POST https://cozycomfycorners.com/cart/add 404 (Not Found)
spb.en.js:1 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

I know you probably won't know what that means, but have you possibly worked on the theme files? Or had someone work on them?

[Vluu]

Yeah I made some changes. Do you think there is something i can do to fix this?

[SomeUsernameHe]

Yes, but it might be difficult if you are not familiar with liquid and shopify theme files. You might want to see if someone here can dive into your theme files for you or just start on a new theme install. 

[Vluu]

Could I possible provide some of the changes i made?

[SomeUsernameHe]

Sure, You can send me the changes you made and I can check it out!

[Vluu]

<style>
@media (max-width: 767px){
#MainContent {
    z-index: unset !important;
}
}
</style>

<style>
@media screen and (max-width: 767px){
.videoBackground .fullscreen-video-wrap {
z-index: -1 !important;
}
}
</style>

{%- if section.blocks.size > 0 -%}
	{%- for block in section.blocks -%}
		{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

		{% if block.type == 'video' %}
			<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">

				{%- if block.settings.video_link != blank -%}
					<div class="fullscreen-video-wrap">
						<video class="video-js" loop autoplay preload="none" muted playsinline
						poster="https:{{ block.settings.video_image | img_url: 'master' }}">
							<source src="{{ block.settings.video_link }}" type="video/mp4">
						</video>
					</div>
				{% endif %}

				<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
				<div class="videoBoxInfo">
					{% if block.settings.title != blank %}
						<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
							{{ block.settings.title | escape }}
						</h1>
					{% endif %}

					{%- style -%}
						.videoBackground .imageBoxInfoDescription p {
							color: {{ block.settings.color_text }}!important;
						}
					{%- endstyle -%}

					{% if block.settings.text != blank %}
						<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
							{{ block.settings.text }}
						</div>
					{% endif %}

[SomeUsernameHe]

Can you look for the file cart.json for me and copy and paste the contents of that file for me? 

[Vluu]

Appreciate the help by the way. Here's the cart.json. 

{
  "sections": {
    "cart-items": {
      "type": "main-cart-items",
      "settings": {
        "color_scheme": "background-1",
        "padding_top": 36,
        "padding_bottom": 36
      }
    },
    "cart-footer": {
      "type": "main-cart-footer",
      "blocks": {
        "subtotal": {
          "type": "subtotal",
          "settings": {
          }
        },
        "buttons": {
          "type": "buttons",
          "settings": {
          }
        }
      },
      "block_order": [
        "subtotal",
        "buttons"
      ],
      "settings": {
        "color_scheme": "background-1",
        "padding_top": 20,
        "padding_bottom": 40
      }
    }
  },
  "order": [
    "cart-items",
    "cart-footer"
  ]
}

[SomeUsernameHe]

Sorry, I misread the error, there was no need for the cart.json, I apologize for that.

So, nothing in your code would be causing this, at least those changes. I am still kind of poking around and looking. I know what the problem is, I just do not know what is causing it. 

Are you using any plugins that deal with the cart? 

[Vluu]

I was wondering if this issue was not related to the codes I added, because I have the same issues when I use the default versions such as the dawn theme, as well. 

[SomeUsernameHe]

I would try to add a new copy of refresh theme to your site, then preview it and try to add an item to the cart. If it works, you know it has to be something in one of the theme files. 

I downloaded refresh theme to troubleshoot for you and it worked for me. 

[Vluu]

Just tried your suggestion and I still have the same issue with a new default Refresh theme. The same happens for the Dawn theme. 

[SomeUsernameHe]

What plugins are you using? 

[Vluu]

By plugins do you mean the apps? If so I am using the cjdropshipping and email app. 

[SomeUsernameHe]

Yes apps, sorry about that. 

I added the CJ app to my store and still nothing, I cannot find that error on my end. I send you a direct message about possibly granting me collaborator access to your site to see if I can solve this a little quicker with direct access. 

This one is tough especially since you are saying it carries over on to brand-new theme installs. 

[SomeUsernameHe]

One thing I found online was that someone had a similar issue when they had issues with their quantities, make sure you have some quanitity of that product in stock. Also, you can try to create a new product with some stock and just blank photo and info and see if that adds to cart. 

[Vluu]

I didn't realize this before, because I am still new to the shopify editing features, but I decided to opt to change the cart from draw to page, that way the user is forced to refresh onto a new page to check their products in their cart and the items will appear. I am a bit hesitant to give access to the site, but thank you for sticking with me through the process. 

[Bunkurs]

I am also new, and i have the same problem. What do you mean exactly when you change the cart from "drag" to "page" and how can i do that in my store?

[holidays]

This worked for me from a solution by @rmate on another thread:

You can add this line of Javascript in product-info.js line 341 (on the latest Dawn install), right where the fetchQuantityRules() function begins.

if (!this.querySelector('.quantity__rules-cart')) return;

This will ensure that the cart still updates even though you don't have the relevant class.

https://community.shopify.com/c/shopify-design/cart-drawer-does-not-update-automatically-dawn-theme/...