Jump to content

Enquire for Order button only shows up after the page refreshes

Recommended Posts

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>

 

 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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.

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

Link to comment
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 🙂.

baume-and-mille-enquiry-form.gif?format=1500w

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 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!

Link to comment
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!

Link to comment
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.

412413884_ScreenShot2022-10-09at1_13_46PM.png.31469940f35feb04a1d053a1bc27e1ea.png

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.

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

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

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

412413884_ScreenShot2022-10-09at1_13_46PM.png.31469940f35feb04a1d053a1bc27e1ea.png

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

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.