Jump to content

How do I add things to the header that will show up on both web and mobile versions

Recommended Posts

Hi all,

I'm trying to add a 3rd party cart and login widget that will appear in the top right of both the mobile and desktop versions of my squarespace page: https://platinum-bamboo-58gw.squarespace.com/

I've successfully added it but realized the code only targets and appends to the header.actions of the desktop version of the site. The mobile version does not get it added. The tricky part is the cartNode and accountNode can only be instantiated once.

Any ideas on what might be the best workaround to have it stay in the top right of the screen on both mobile and desktop versions? I tried finding the name of the header.actions area on mobile but it seems like it has the same name as the desktop version so am not sure how to target and append into it.

<!-- Adds the Commerce7 styles -->
<link href="https://cdn.commerce7.com/v2/commerce7.css" rel="stylesheet">

<!-- Adds Commcerce7 widgets for the cart and customer account login -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(event) {
    var node = document.createElement('div')
    
    var accountNode = document.createElement('div')
    accountNode.id = 'c7-account'
    node.appendChild(accountNode)
    
    var cartNode = document.createElement('div')
    cartNode.id = 'c7-cart'
    node.appendChild(cartNode)
    
    var navBar = document.querySelector('.header-actions.header-actions--right');
      
    navBar.appendChild(accountNode)
    navBar.appendChild(cartNode)

 

Link to comment
  • Replies 6
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Hi @tuanphan thanks for the quick response!

I input those changes but it looks like it hasn't changed anything on the mobile version. The desktop version looks the same at least!

Another idea I had was to make the page reload when the resolution drops to a mobile version and try to reinstancate the widgets in the mobile header. I tried appending it to .header-display-mobile but was not successful.

Do you have any other ideas? I'll see if I can try something else!

Thanks,

-Nick

Link to comment

Hi @tuanphan,

I tried using this code snippet from another users question that you answered. It is successful in adding a square space button on mobile but the cart and login widget still won't show up. 

Again here is the site: https://platinum-bamboo-58gw.squarespace.com/

@media screen and (max-width:767px) {
.header-actions.header-actions--right {
    display: block !important;
}

.header-actions-action.header-actions-action--cta {
    display: block;
}

.header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 150px") !important;
}
}

Any ideas why it would apply to the button in header actions right but not the widgets I instantiated?

Link to comment

@tuanphan Okay made some slight progress, I made it target ".header-inner.container--fluid" instead of ".header-actions" and now it will instantiate in on both desktop and mobile versions of the site. But it makes the middle header logo or menu no longer be on center and the cart and login widgets are compressed like they have zero width. Here are some photos, the website link is the same.

Is this a potential fix or do I need to have it in header-actions in order to get some symmetry?

Screenshot 2024-01-18 at 8.34.27 AM.png

Screenshot 2024-01-18 at 8.34.12 AM.png

Link to comment

Hi @tuanphan

I was able to get it to show up on Mobile by placing it in a popup using the following code. Ideally I could keep it in .header--actions since right now it doesn't stay centered when floating above the header but I couldn't get it to add to both mobile and desktop versions of .header--actions. Can you think of any solutions to doing it without a popup?

Else I may try to code the popup so it dynamically moves to stay in line with the rest of the header items.

Thanks,
-Nick

 

<style>
    /* Styles for the popup container */
    .popup-container {
      position: fixed;
      top: 15px; 
      right: 20px; 
      background-color: transparent;
      padding: 10px;
      border-radius: 5px;
      z-index: 1000; /* Ensure the popup stays above other elements */
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
    }
</style>

<!-- Adds Commcerce7 widgets for the cart and customer account login -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(event) {
    var node = document.createElement('div')
    node.className = 'popup-container';
    
    var accountNode = document.createElement('div')
    accountNode.id = 'c7-account'
    node.appendChild(accountNode)
    
    var cartNode = document.createElement('div')
    cartNode.id = 'c7-cart'
    node.appendChild(cartNode)

    var navBar = document.querySelector('.header-inner.container--fluid');
      
    navBar.appendChild(node)
      
    })
</script>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.