Jump to content

2nd custom 'Add to Cart' button on product page no longer showing on mobile view.

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://disegnojournal.com/shop/p/disegno32

Hi there, 

A while ago I custom coded a 2nd 'Add to Cart' button on the product pages of my client's website for 'EU check out' customers. Everything was working just fine until the client notified me that the button no longer shows on mobile view. Here's the code. I cannot see the error only that the product page design has changed since I first designed it. Please can someone help troubleshoot why the button disappears on mobile view? This is the current code:

 

/* EU BUTTON CHECKOUT CODE  */
.sqs-add-to-cart-button-pretext 
a[href="https://disegno.newsstand.co.uk"] {
    background-color: black;
    color: white !important;
    font-size: 19.2px !important;
    text-align: center !important;
    padding-top: 8.2px !important;
    padding-bottom: 8.2px!important;
    padding-right: 68px !important;
    padding-left: 68px !important;
    display: inline-block;
}

   @media screen and (max-width:640px) {
   .ProductItem-details .sqs-add-to-cart-button-wrapper {
    width: 80% !important;
      display: inline-block;
     
   }
  
}
@media screen and (max-width:640px) {
  .sqs-add-to-cart-button-pretext 
a[href="https://disegno.newsstand.co.uk"] {
    width: 47% !important;
      display: inline-block;
  margin: 0px, 20px, 0px;
     }
}


.ProductItem-details-title-subtext {
  order: 2;
}

.ProductItem-details-title-subtext {
  margin-top: 0;
  margin-bottom: 0rem;
}

.sqs-add-to-cart-button-pretext {
  margin-bottom: 1.1rem;
}

@media screen and (min-width: 640px ) {
  .ProductItem-details .ProductItem-details-checkout {
    display: flex;
  }
  
  media screen and (min-width: 768px)
.tweak-product-basic-item-content-alignment-top .ProductItem-details {
  padding-top: 0;
}
  
}

#cta-button-container {
text-align: left !important;
}

Screenshot 2022-04-11 at 19.32.14.png

Screenshot 2022-04-11 at 19.32.25.png

Link to comment
  • Solution

Did someone change the Product Detail Page design from “Simple” to one of the newer designs like Wrap, Half or Full? If so, coding will need to be changed as mobile is handled differently.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
28 minutes ago, Beth_King said:

I think that is exactly what happened, although I can't see how the code now needs to change

If you go back to the 'Simple' layout it will continue to work. However on newer layouts there are now two 'product detail' sections to the page - one desktop version (that comes first) and a mobile version (that follows). Depending on the device, Squarespace hides one or other of these designs from the user. The script you've used on the site is looking for just one section and adding the button to this. As the desktop section comes first, it receives the button. The script will now need to add the button to both sections instead. Note that the code you've posted above is the CSS styles that format the button, whereas you'll need to rewrite the script that adds the button.

I hope that helps.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 4/11/2022 at 9:05 PM, paul2009 said:

If you go back to the 'Simple' layout it will continue to work. However on newer layouts there are now two 'product detail' sections to the page - one desktop version (that comes first) and a mobile version (that follows). Depending on the device, Squarespace hides one or other of these designs from the user. The script you've used on the site is looking for just one section and adding the button to this. As the desktop section comes first, it receives the button. The script will now need to add the button to both sections instead. Note that the code you've posted above is the CSS styles that format the button, whereas you'll need to rewrite the script that adds the button.

I hope that helps.

Thanks Paul2009, I tried to choose 'Simple' layout but the button disappeared altogether. I'm going to need to add new Json code. Thanks for input/info. Much appreciated!

Link to comment
7 minutes ago, creedon said:

When you edit the design for a product page you are not seeing something like the following?

1080918315_ScreenShot2022-04-12at2_17_10PM.png.42fc058c1503b56de512e8a610186b35.png

Hi Creedon, Yes I see that but when I choose Simple, and the design changes the 2nd add to cart button disappears. Very odd. So I don't save the changes. 

Link to comment
14 minutes ago, Beth_King said:

Yes I see that but when I choose Simple, and the design changes the 2nd add to cart button disappears.

Ah I get it now.

Quote

you would help write the script for the EU Buy Now Button to be seen on mobile view?

I see that you installed my code but that it is not running because jQuery needs to load before my code. I think I can help you get things sorted.

In Settings > Advanced > Code Injection > FOOTER you should see a couple of lines like the following. Cut those two line out.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Paste the two lines into Settings > Advanced > Code Injection > HEADER. Remove the first line. In most cases you only need one copy of jQuery installed.

Then you'll need to do is remove the code blocks containing the current code you have for adding a button.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

I remembered now as I was a bit confused - my original code above changed a link to a button and I couldnt see the JQuery script in the Product Page > Settings > Advanced > Code injection. So I've been scratching my head. Then realised that the script in a code block in Product Page > Additional information.

Here it is...

<script>(function(document){

  // Edit HTML between the quotes.
  var BUTTON_PRETEXT_HTML = '<p><a href="https://disegno.newsstand.co.uk">EU BUY NOW</a></p>'; var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>';
 /****************************************************************
   * DO NOT MODIFY CODE BELOW, unless you know what you're doing.
   ****************************************************************/
  // Execute code based on if it's in the header or footer
  if(document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  function init(){
    var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper');
    var productTitle = document.querySelector('.ProductItem-details-title');
    var div;

    if(buttonContainer) {
      div = document.createElement('div');
      div.setAttribute('class', 'sqs-add-to-cart-button-pretext');
      div.innerHTML = BUTTON_PRETEXT_HTML;
      buttonContainer.insertBefore(div, buttonContainer.firstChild);
    }
  }

If I attempt to change the Product Page layout to 'Simple' the EU BUY NOW button vanishes. It's still missing when I revert the product page design back to 'Wrap' layout so I discard the changes.

Perhaps I have to re-enter the script above once the layout is changed?

Link to comment
2 minutes ago, creedon said:

Ah I get it now.

I see that you installed my code but that it is not running because jQuery needs to load before my code. I think I can help you get things sorted.

In Settings > Advanced > Code Injection > FOOTER you should see a couple of lines like the following. Cut those two line out.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Paste the two lines into Settings > Advanced > Code Injection > HEADER. Remove the first line. In most cases you only need one copy of jQuery installed.

Then you'll need to do is remove the code blocks containing the current code you have for adding a button.

Let us know how it goes.

Wow, thanks - I'll do try that now

Link to comment
13 minutes ago, creedon said:

Ah I get it now.

I see that you installed my code but that it is not running because jQuery needs to load before my code. I think I can help you get things sorted.

In Settings > Advanced > Code Injection > FOOTER you should see a couple of lines like the following. Cut those two line out.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Paste the two lines into Settings > Advanced > Code Injection > HEADER. Remove the first line. In most cases you only need one copy of jQuery installed.

Then you'll need to do is remove the code blocks containing the current code you have for adding a button.

Let us know how it goes.

Creedon! That's brilliant thank you. I just need to add a gap/padding between the buttons. Nearly there! Thank you so much for your help. You Legend! 🙂

Link to comment
On 4/12/2022 at 10:54 PM, creedon said:

Ah I get it now.

I see that you installed my code but that it is not running because jQuery needs to load before my code. I think I can help you get things sorted.

In Settings > Advanced > Code Injection > FOOTER you should see a couple of lines like the following. Cut those two line out.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Paste the two lines into Settings > Advanced > Code Injection > HEADER. Remove the first line. In most cases you only need one copy of jQuery installed.

Then you'll need to do is remove the code blocks containing the current code you have for adding a button.

Let us know how it goes.

Hi again Creedon. Thanks again for your help. But I now just need to hide the cart buttons I've added on specific product pages. Here's an example - on this page https://disegnojournal.com/shop/p/disegno24-digital I need to hide the buttons by identifying the block and hiding them. This is CSS code that I've tried...but it doesn't work...pls can you help?

[data-section-id="604d1646e89f7c51415d5e00"] {
//CSS Hide Add to Cart Button
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {display:none;}

Thanks!

Beth

Link to comment
2 hours ago, Beth_King said:

But I now just need to hide the cart buttons I've added on specific product pages.

 

Quote

I need to hide the buttons by identifying the block and hiding them. This is CSS code that I've tried...but it doesn't work...pls can you help?

Although you can hide specific atc buttons with CSS one by one. I suggest a different method. Please see the following.

Let us know how it goes.

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
8 hours ago, creedon said:

 

Although you can hide specific atc buttons with CSS one by one. I suggest a different method. Please see the following.

Let us know how it goes.

 

Thanks Creedon, I need to hide them only on specific pages though. It's complicated with digital and hardcopy products sold on one page and with EU check out and digital copies with a third party (off site). The hardcopy products are bought through the client's Squarespace site whereas when they've sold out the digital copies are sold off site. What is happening at the moment is that the ATC button appears when the hardcopy is sold out but I can't mark it as sold out as the digital copy is below to purchase so I just need to hide the ATC buttons on those pages....That code would hide them all?

Link to comment
Just now, Beth_King said:

Thanks Creedon, I need to hide them only on specific pages though. It's complicated with digital and hardcopy products sold on one page and with EU check out and digital copies with a third party (off site). The hardcopy products are bought through the client's Squarespace site whereas when they've sold out the digital copies are sold off site. What is happening at the moment is that the ATC button appears when the hardcopy is sold out but I can't mark it as sold out as the digital copy is below to purchase so I just need to hide the ATC buttons on those pages....That code would hide them all?

Can I use a code block on those pages with the CSS or a script to hide them on those pages and I could add it to Additional Information section of the product page?

Link to comment
10 hours ago, creedon said:

 

Although you can hide specific atc buttons with CSS one by one. I suggest a different method. Please see the following.

Let us know how it goes.

 

Hi Creedon, I studied your code and added the tag 'hide-atc' and 'tag-hide-atc' to this product page https://disegnojournal.com/shop/p/disegno-28 to test it.

Then I added style script to the Store > Settings > Code Injection. The product page layout is wrap, and so added all variations incase the client changes the design. Any idea why it's not hiding the ATC buttons? Could it be conflicting with your code to add the 2nd atc button? Thanks!!

image.png.6d32e4dc9214b61b3f7a708c2ab8af2c.png

Edited by Beth_King
Link to comment
7 hours ago, Beth_King said:

I studied your code and added the tag 'hide-atc' and 'tag-hide-atc'

The first form is what is entered in the product detail. The second form is what SS produces for CSS from your input.

Quote

Any idea why it's not hiding the ATC buttons?

Yes. The code you show in your last post is not the full code. Please install all the code I provided. It only works if it is all there.
 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
14 hours ago, creedon said:

The first form is what is entered in the product detail. The second form is what SS produces for CSS from your input.

Yes. The code you show in your last post is not the full code. Please install all the code I provided. It only works if it is all there.
 

I've installed the full code in the Store > Page Header Code Injection and added the hide-atc tag to the product page but its not working?

<style>
   
  /*
   
  begin store product detail elements tagged hide
   
  Version : 2.1
   
  SS Versions : 7.1, 7.0
   
  v7.0 Templates : Adirondack
   
  Brine ( Aria, Blend, Burke, Cacao, Clay, Fairfield, Feed,
  Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
  Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
  Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva,
  Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora,
  Stella, Thorne, Vow, Wav, West )
   
  York ( Artesia, Flores, Harris, Jasper, Jones, Lange,
  Shibori, Taylor )
   
  your template is not listed? then it is not currently
  supported
   
  Note : the following tags added to your products will hide
  elements
   
  hide atc ( add to cart )
   
  hide price
   
  hide quantity
   
  By : Thomas Creedon < http://www.tomsWeb.consulting/ >
   
  */
   
  /* 7.1 */
   
  /* begin atc */
   
  /* layout simple */
   
  .tag-hide-atc .ProductItem-details .sqs-add-to-cart-button-wrapper,
   
  /* layouts full, half, wrap */
   
  .tag-hide-atc.pdp-layout .pdp-details .sqs-add-to-cart-button-wrapper,
   
  /* end atc */
   
  /* begin price */
   
  /* layout simple */
   
  .tag-hide-price .ProductItem-details .ProductItem-product-price,
   
  /* layouts full, half, wrap */
   
  .tag-hide-price.pdp-layout .pdp-details .pdp-details-price,
   
  /* end price */
   
  /* begin quantity */
   
  /* layout simple */
   
  .tag-hide-quantity .ProductItem .ProductItem-details .product-quantity-input,
   
  /* layouts full, half, wrap */
   
  .tag-hide-quantity.pdp-layout .pdp-details .pdp-details-quantity,
   
  /* end quantity */
   
  /* 7.0 */
   
  /* Brine, York */
   
  .tag-hide-atc .ProductItem-details .sqs-add-to-cart-button-wrapper,
   
  .tag-hide-price .ProductItem-details .product-price,
   
  .tag-hide-quantity .ProductItem-details .product-quantity-input,
   
  /* Adirondack */
   
  .tag-hide-atc #productDetails .sqs-add-to-cart-button-wrapper,
   
  .tag-hide-price #productDetails .product-price,
   
  .tag-hide-quantity #productDetails .product-quantity-input,
   
  twc-selector /* dummy selector so that each selector line above can end with
  a comma */
  {
   
  display : none;
   
  }
   
  /* end store product detail elements tagged hide */
   
  </style>
Link to comment
14 hours ago, creedon said:

Yes. It would hide them all.

Do I understand that you need to control the display at the each button level? Not as a group?

Yes, as I understood it though. Your code targets pages with the hide-atc tag and hides the button on those pages so this would be perfect it I can get it to work. This would mean the client would only need to add the tag to the product page when it sells out and the button would disappear, I'm assuming?

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.