Shogun is compatible with AJAX cart requests, however, you may find the icon in your theme's header won't update without a page refresh without a workaround.
How do I know I have an AJAX cart?
Our support team is more than happy to help you determine whether or not your theme has an AJAX cart or not. There are a few signs that this is the case,
The cart icon is not updating on a Shogun page after the add to cart button has been clicked
There is a slide-out checkout drawer in your store
The theme's script will only update the cart preview/counter, or slide-out checkout drawers if it detected the theme's built-in buttons being clicked, or when the page is refreshed.
No-Code Recommendation
For themes with AJAX carts, we typically recommend using the Go to Cart option of the Shogun Add to Cart button as this will remove the need for the cart icon to update, or for the page to refresh.
Advanced Recommendation(s)
Shopify
No-Code
Ajax carts use an event listener to 'listen' for specifically Shopify Add To Cart buttons being clicked - therefore, if you use Shogun's Shopify Page Importer to import a version of the page or a section that contains a Shopify Add To Cart button then the cart preview will update when these buttons are pressed.
Importing a page can be done by clicking the "Import Page" button on the main Shogun dashboard, and then selecting either "Layout from Theme" or "Shopify 2.0 Sections" when available.
Your Shopify sections will also be available at the bottom of your Elements library while editing a page.
Code Based
It might be possible to allow the cart icon in your theme's navigation to update when a product is added to the cart and the Stay on Page option is selected for the Add To Cart button in Shogun. However, as mentioned higher in this same article, there is no consistent policy between themes over how this is implemented.
Note: Before trying this, we recommend duplicating your current theme so you can easily roll back in the event this doesn't work or implementing this change has unintended consequences.
In your Shopify admin go to Sales Channels > Online Store > Click on the three dots next to the Customize button and select 'Edit Code'.
In the theme editor, on the right-hand side search for the word header.
Select the header.liquid file to open up the code for that file. Click anywhere in the code and search ( Ctrl + f (Windows, Linux, and ChromeOS) or + f (Mac) ) for the text cart-icon-bubble. Before the closing > add the text data-shogun-cart-items-count.
The end result should look like this:
Please note the class cart-icon-bubble and the file header.liquid it will be located in will be the same for all Free Shopify themes, however, for third-party paid themes this class and file may be different.
BigCommerce
For BigCommerce stores to make AJAX cart workable, your store must fulfill 2 prerequisites:
Your store has to rely on Stencil theme framework + make sure Stencil Utils is a part of your theme and available via
window.stencilUtils(typingwindow.stencilUtilsin the browser’s console mustn’t returnundefined). P.S. Don’t worry, usually, it’s already preinstalled across all Stencil themesYour cart-related HTML + CSS must be unmodified
That didn't work; What else can I try?
Note: These recommendations are provided as guides only and would require developer assistance to implement.
A custom function can be added to the theme's script to refresh the page or cart view upon clicking Shogun's Add to Cart button.
Custom code modeled after the theme's live product form can be added to the page using the HTML or Custom Element features in Shogun. If the same HTML markup & classes are used, the theme's cart script should recognize it and update the AJAX cart accordingly.
Since the theme controls the cart functionality, cart modification is outside of our scope to modify the theme or create custom code. If you do feel like you could use a developer's assistance with this, we have some recommended resources in this guide,