Enquire for Order button only shows up after the page refreshes

Site URL: https://www.edelmannewyork.com/furniture/bronze-table

Hi! 

I have hidden the add to cart button, and added in an enquire for order button using javascript, the enquire button only shows up after you reload the page and I am not sure why 

/*BRONZE CONSOLE TABLE hide add to cart*/ -- this is in the design CSS Section
#item-5fe10bde29f160075137ee0e .sqs-add-to-cart-button-wrapper {display:none!important}

this is in the page header code injection 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/contact/'>Enquire for Order</a>").insertAfter(".ProductItem-details-share");        
   });
</script>
<style>
.checkoutbutton {
 font-family: tradegothic-bold;
 font-size: 12px;
 text-transform: uppercase;
 color: #fff;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 text-decoration: none;
 padding: 14px;
 max-width: 200px;
 background-color: #070906;
  order:9;
  border:2px solid #070906;
}
.checkoutbutton:hover {
 color: #070906;
 background-color: #fff;

}
  .sqs-add-to-cart-button{display:none !important}
</style>

Quote

the enquire button only shows up after you reload the page and I am not sure why

It is probably related to Ajax loading. With Ajax turned on you need to go thru extra hoops to get your code to run.

Try the following.

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

<script>

  Squarespace.onInitialize ( Y, ( ) => {
  
    const html = `<a class="checkoutbutton" href="/contact/">
    
      Enquire for Order
      
      </a>`;
      
    const selector = '.ProductItem-details-share';
    
    $( selector ).after ( html );
    
    } );
    
  </script>

Let us know how it goes.

17 hours ago, LindseyMexico14 said:

I have hidden the add to cart button, and added in an enquire for order button using javascript, the enquire button only shows up after you reload the page and I am not sure why

If you're writing code manually for this then, in addition to the comments that @creedon made, I recommend that you add it to the footer injection (not the header injection as you described). It would also be better to write it in pure JavaScript because jQuery is an additional download for users (and can impact the speed of your site on initial load).

If you would prefer a supported solution that doesn't have these issues, please take a look at our extension called the Product Enquiry Form. This extension adds an Enquire button to products; the button can be added instead of the cart button or in addition to it. You can select this on a product-by-product basis or for the entire site. The button launches a pop-up form that the customer can complete right there on the page. A bonus is that the form submission will automatically include details of the product the user was viewing at the time 🙂.

On 10/1/2022 at 2:01 PM, creedon said:

It is probably related to Ajax loading. With Ajax turned on you need to go thru extra hoops to get your code to run.

Try the following.

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

<script>

  Squarespace.onInitialize ( Y, ( ) => {
  
    const html = `<a class="checkoutbutton" href="/contact/">
    
      Enquire for Order
      
      </a>`;
      
    const selector = '.ProductItem-details-share';
    
    $( selector ).after ( html );
    
    } );
    
  </script>

Let us know how it goes.

Great thank you so much it works better than what I had done!

On 10/1/2022 at 2:01 PM, creedon said:

It is probably related to Ajax loading. With Ajax turned on you need to go thru extra hoops to get your code to run.

Try the following.

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

<script>

  Squarespace.onInitialize ( Y, ( ) => {
  
    const html = `<a class="checkoutbutton" href="/contact/">
    
      Enquire for Order
      
      </a>`;
      
    const selector = '.ProductItem-details-share';
    
    $( selector ).after ( html );
    
    } );
    
  </script>

Let us know how it goes.

It's now requiring to reload before the enquire button shows, I just want it on the furniture page, so I have it in the page code injection, is there a better option? thanks!

1 hour ago, LindsEli said:

It's now requiring to reload before the enquire button shows

It showed up for me first time, no reloading required.

Be aware that it is possible to get different behaviour between viewing a page in preview and in private browsing. Always view your site in private browsing as part of diagnosing a problem.

On 10/9/2022 at 3:20 PM, creedon said:

It showed up for me first time, no reloading required.

Be aware that it is possible to get different behaviour between viewing a page in preview and in private browsing. Always view your site in private browsing as part of diagnosing a problem.

thank you for the response, I viewed in both private and public but the button didn't appear on my end first try for both my computers