AndyF Posted December 12, 2019 Share Posted December 12, 2019 When you select an item to buy in the store, there's an Add to Cart button. When you click it, the button text changes momentarily to Adding... and the changes to Added. But at that point, in order for the user to Checkout, they have to (know to) scroll back to the top of the page to find the Cart(1) link. I'd like there to be two buttons near the Added button that say Continue Shopping and Go To Cart. Can anybody help me with how to add these buttons? Thank you. Amsterixe and jaisequoia 2 Link to comment
SnazzyView Posted December 12, 2019 Share Posted December 12, 2019 Yes, I wrote a blog post about how to make a pop-up appear when a user adds an item to their cart which gives them the option to continue shopping or proceed to their cart. https://thompsonweb.design/squarespace-website-tips/added-to-cart-pop-up JonathanK, tuanphan and paul2009 3 snazzyview.com Link to comment
JonathanK Posted January 8, 2020 Share Posted January 8, 2020 (edited) This script is great. However, when I load these three scripts I get text that pops up in the top left corner of the page on loading of my cover page. Is this typical behavior? It doesn't seem to do it on the "behind the scenes" site that I am still building. Is there any way to avoid this? See video attached --first 10 seconds only unless you want to watch me figure out where my QuickTime app went. 😃 Also attached is a screenshot of the header text. I have a feeling I have typo here trying to copy/paste several injections for various customizations and plugins. Screen Recording.mov Edited January 8, 2020 by JonathanK Link to comment
paul2009 Posted January 10, 2020 Share Posted January 10, 2020 @JonathanK In summary, it's expected behaviour for this piece of code but I can see why this would be a problem on a live site. It's due to the way the sample of code has been written. Snippets provided free on forums are often written quickly to show the art of the possible, to help someone decide whether a solution might help them. Issues like this "flash of unstyled content" are to be expected. These snippets are simply not designed to be used in place of tested, paid solutions. They are "get you started" code that shows what is possible and allows you to (a) decide if Squarespace might be suitable and (b) consider whether it is worth hiring a developer to customise an element of your site. This particular snippet includes a section of HTML (lines 2 to 12) that creates the buttons. It is being added to the top of every page on the site, regardless of whether the page is a product page or has an 'Add to Cart' button on it. That's why you see it on your cover page, even though there's no need for the buttons on this page. If the developer had been paid to write this, they would have used JavaScript instead, checking for the Cart button first and, only when it is found, creating the buttons on the page. SnazzyView 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
SnazzyView Posted January 10, 2020 Share Posted January 10, 2020 Pretty much what @paul2009 said, it’s meant more as a starting off point. As you can imagine when trying to provide a solution such as this, there are a lot of different variables in how a Squarespace website might be configured from AJAX to the specific templates, product blocks vs product pages... So one for all solutions like this do sometimes present problems. It was basically designed to work in a wide variety of use cases whilst also being simple enough for the lay person or anyone else who would like to develop on it further to decipher. In addition it was also designed in a way that makes it relatively easy to maintain incase something fundamentally changes on Squarespace. Unfortunately that means that in some instances it does cause some less then ideal situations like this one with the cover page. Really the only reason I suggest you put the html code in the global header is incase you have AJAX enabled. If you don’t then you can simply put it into the specific product page header which will solve your problem. jaisequoia and paul2009 2 snazzyview.com Link to comment
brandon Posted January 10, 2020 Share Posted January 10, 2020 Related: paul2009 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
dklear Posted June 11, 2020 Share Posted June 11, 2020 I didn't see this thread working on the same problem, but here is my solution. Seems to work well for matching the button style of "Add To Cart". Link to comment
francescalo Posted June 25, 2020 Share Posted June 25, 2020 On 12/12/2019 at 10:51 AM, ThompsonWebDesign said: Yes, I wrote a blog post about how to make a pop-up appear when a user adds an item to their cart which gives them the option to continue shopping or proceed to their cart. https://thompsonweb.design/squarespace-website-tips/added-to-cart-pop-up Hi, If I use your link I don't see your blog post, but directly your shop to buy a plug-in to make a pop-up appear... I'm in the right place? Link to comment
SnazzyView Posted June 25, 2020 Share Posted June 25, 2020 28 minutes ago, francescalo said: Hi, If I use your link I don't see your blog post, but directly your shop to buy a plug-in to make a pop-up appear... I'm in the right place? Yes, you are in the right place. The plugin has now been completely re-written using a different method to observe when an item is added to a users cart. The result is a much more versatile plugin. Whereas before it would only appear once per page load, it now appears every time an item is added to a users cart. In addition, the old version was limited to one add to cart button per page whereas the new one will work for every add to cart button on the page which is useful if you use product blocks. snazzyview.com Link to comment
fadyhaddad Posted June 25, 2020 Share Posted June 25, 2020 Hi, i came across this site https://inscapewebdesign.com/free-squarespace-hacks/checkout-button-appears-after-clicking-add-to-cart they have a CSS script to solve this issue. i used it and it works perfectly. Hope this will help you solve your problem. Link to comment
Nikitaly Posted October 27, 2022 Share Posted October 27, 2022 On 6/25/2020 at 12:25 PM, SnazzyView said: Yes, you are in the right place. The plugin has now been completely re-written using a different method to observe when an item is added to a users cart. The result is a much more versatile plugin. Whereas before it would only appear once per page load, it now appears every time an item is added to a users cart. In addition, the old version was limited to one add to cart button per page whereas the new one will work for every add to cart button on the page which is useful if you use product blocks. Hi, this is just what we need but does it support v7.0 York Family templates? Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/27/2022 at 6:52 PM, Nikitaly said: Hi, this is just what we need but does it support v7.0 York Family templates? If you want to add a button (always appear under add to cart) just share link to a product, we can give the code to achieve this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment