NB1986

This appears to have fixed the issue, thank you very much.

Hello all, I've had a custom blog page set up for a while which has been working perfectly. However recently the blog post has started to fail to load entirely and you are often just present with a bunch of 'load more' buttons. the page in question is: https://www.nicolebarton.co.uk/blog It is set up as a Summary Block which pulls all of its information from the a hidden blog section where I publish all of my articles. It has custom code applied to the page which reads as follows: This sits above the primary Summary Block <div data-resource="blogs-hidden"></div> Then in my Code Injection I have the following in my header: //Blog Post Pagination <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <style> .load-more-summary + .sqs-block-summary-v2 .summary-item:not(.active){ display: none; } .load-more-summary + .sqs-block-summary-v2 .summary-item img{ position:absolute; top:0 !important; left: 0 !important; height: 100% !important; width: 100% !important; object-fit: cover; } .load-more-summary + .sqs-block-summary-v2 .sqs-block-button { width: 100% !important; } </style> With the next set in the footer: <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script> <script> $(document).ready(function(){ $('.sqs-block-code [data-resource]').each(function(){ $(this).closest('.sqs-block-code').addClass('load-more-summary'); }) if($('[data-resource]').length > 0) { var resource = $('[data-resource]').attr('data-resource'); var visiblePosts; var itemLength; var blogPosts = []; var jsonUrlOrigin = window.location.origin+'/'+resource+'?format=json-pretty'; var jsonUrl = window.location.origin+'/'+resource+'?format=json-pretty'; function ajaxRequests(url) { var promise = $.getJSON(url); promise.done(function(data){ var items = data.items; if(items) { for (var i = 0; i < items.length; i++) { var blogPost = {}; blogPost.title = items[i].title; blogPost.tags = items[i].tags; blogPost.categories = items[i].categories; blogPost.link = items[i].fullUrl; blogPost.excerpt = items[i].excerpt; blogPost.image = items[i].assetUrl; blogPosts.push(blogPost); } var lastItem = items[items.length - 1]; var offset = lastItem.publishOn; jsonUrl = jsonUrlOrigin + '&offset=' + offset; theLoop() } else { var list = $('.sqs-block-code.load-more-summary + .sqs-block-summary-v2 .summary-item-list'); var summaryStyle = list.find('.summary-item:first-child').attr('style') var summaryImgStyle = list.find('.summary-item:first-child .img-wrapper').attr('style') list.html(''); for (var i = 0; i < blogPosts.length; i++) { if(i<=5) { var active = 'active'; } else { var active = ''; } $('<div data-type="image" style="'+summaryStyle+'" class="summary-item summary-item-record-type-text sqs-gallery-design-autogrid-slide summary-item-has-thumbnail summary-item-has-excerpt summary-item-has-cats summary-item-has-tags summary-item-has-author '+active+'"><div class="summary-thumbnail-outer-container"> <a href="'+blogPosts[i].link+'" class="summary-thumbnail-container sqs-gallery-image-container"> <div class="summary-thumbnail img-wrapper" style="height:0;'+summaryImgStyle+'"><img class="summary-thumbnail-image" data-load="false" src="'+blogPosts[i].image+'"></div></a></div> <div class="summary-content sqs-gallery-meta-container"> <div class="summary-title"> <a href="'+blogPosts[i].link+'" class="summary-title-link">'+blogPosts[i].title+'</a> </div><div class="summary-excerpt summary-excerpt-only"> '+blogPosts[i].excerpt+' </div><a href="'+blogPosts[i].link+'" class="summary-read-more-link">Read More →</a> </div></div>').appendTo(list); } } $('.sqs-block-code.load-more-summary + .sqs-block-summary-v2 .summary-item-list').each(function(){ if ($(this).children().length > 6) { $('<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary"><a href="#load-more" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true">Load More</a></div></div></div>').appendTo($(this)); } }) Squarespace.initializeSummaryV2Block(Y) Y.all('[data-load]').each(function(img) { img.removeAttribute('data-load'); ImageLoader.load(img); img.addClass('loaded'); }); }) } function theLoop(){ ajaxRequests(jsonUrl); } ajaxRequests(jsonUrl); $(document).on('click','.summary-item-list .sqs-block-button-element', function(){ var visiblePosts = $(this).closest('.summary-item-list').find('.summary-item.active').length; var itemLength = $(this).closest('.summary-item-list').find('.summary-item').length; if(visiblePosts != itemLength || visiblePosts < itemLength) { $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).fadeIn().addClass('active'); $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().fadeIn().addClass('active'); $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().fadeIn().addClass('active'); $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().next().fadeIn().addClass('active'); $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().next().next().fadeIn().addClass('active'); $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().next().next().next().fadeIn().addClass('active'); visiblePosts=visiblePosts+6; if(visiblePosts == itemLength || visiblePosts > itemLength) { $(this).hide(); } } else { $(this).hide(); } }) } }) </script> I'll also provide below 2 photos, the first one which is my expected view, and then what I'm actually seeing: What we're actually seeing now where the blogs no longer load: As a final piece of information, sometimes when loading the page, it will just load the 'load more' button and nothing else. So it feels like the pagination piece is working but it is failing to load in the blogs. Any help would be greatly appreciated.

You can find it here: https://www.nicolebarton.co.uk/new-page-3 with the password nicolebarton It is really just a test page at the moment whilst I try and figure out if I can get this working. I only accept Klarna which is set up through Stripe and as far as I am aware Squarespace does not have the BNPL options for anything other than Clearpay in the UK. Upgrading to 7.1 would also take quite a bit of time for me which is not currently something I have the ability to do, so trying to get this working on 7.0 is really integral for me.

Doesn't seem to be working, this is what I am seeing:

This was added as a code block on a test page I have running, so there isn't really any more code to add. Of the 3 code blocks in the original post, I have the first one in the Header portion of the Custom Injection. The other 2 code blocks are set up on the same page currently as separate blocks. Do you think it should be added elsewhere?

Hello, In an attempt to comply with the new UK laws with regards to BNPL I am trying to integrate Stripe Payment Method Messaging Elements into my site next to products but I am currently having no luck. I am using this method on stripes own page and have it set up in a test page on my site. I have used the custom code injection to insert <script src="https://js.stripe.com/v3/"></script> into the 'head of my HTML file' as request in the description. I have then used custom code blocks for stages 2 and 3 to outline where the placeholder element will live. <div id="payment-method-messaging-element"></div> Followed by the following to define the payment messaging element // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('pk_test_51IxBONAh1CQRtcUDgb7IhoWfqGqjW4jbWmz1znyawspSHEQANyffOxsYcDmSgimF4P2GkVw1D3nRUgkfLS0OAg3c00w1LyXhnq'); const elements = stripe.elements(); const options = { amount: 9900, // $99.00 USD currency: 'USD', // the country that the end-buyer is in countryCode: 'US', }; const PaymentMessageElement = elements.create('paymentMethodMessaging', options); PaymentMessageElement.mount('#payment-method-messaging-element'); I have tried multiple variations of where the previous code blocks should be inserted, including adding them into the page headed code injection in the advanced page settings with little success. I have been updating the test key to my publishable key on each attempt Any help that can be provided would be greatly appreciated. Thank you in advance Nicole

Thank you for this it worked nicely! Lastly if you would be so kind, can you add a way to adjust the text size specifically to this banner

Specifically just the banner on the Homepage to use another font.

Unfortunately I have tried this and it does not seem to be working. Are there other options? I can see when examining the code that it is white-space:pre-wrap if I examine the elements in the console.

Would this still keep H2 on the rest of the site as Giveny as well?

Hi, I'm trying to override the font styles on my home page banner. Elsewhere in my site I have code which states the following: //Normal banner .desc-wrapper p { font-family: Andhika Finta; Determining the usual font type for my banners. However, I am wanting to override this with another font type, Giveny, also on my site. @font-face { font-family: 'Giveny'; src: url(https://static1.squarespace.com/static/5cbaf2a0fb22a570cea5ab68/t/64314ba455a77f1236bd54f4/1680952228467/Giveny.otf); font-weight: normal; font-style: normal; } h1, h1 a, h1 blog title, headline { font-family: 'Andhika Finta'; } h2 { font-family: 'Giveny'; } What I would like to do, is for the text on my home page only is to have it in the Giveny format with a custom colour applied. I'm not having the most luck at the moment so any help would be appreciated!

The site is www.nicolebarton.co.uk

Hello! So, I've had quite a lot of success being able to change the fonts across my site with CSS depending on the block used. However, I cannot get this to apply to the Promotional Popup. For example, I currently have the following: h1, h1 a, h1 blog title, entry-title { font-family: 'Wilderness'; } So that my blog titles etc are all my custom h1 font. However, this does not seem to be overriding within the popup and it is maintaining the font listed in the Site Styles. Is there a special identifier such as "h1 promotional" that can be used? I've tried using an inspect field in chrome to determine the data range, but using ".sqs-slide-wrapper", ".sqs-slice-heading" and ".sqs-popup-overlay" seem to have no affect. Any help is greatly appreciated!

Unfortunately I'm using the Bedford template, so this doesn't appear to be possible to have turned on.

Hi, I have added some custom font types to my website using the Custom CSS function, and for the most part, my custom styles are loading fine. Where I am having issues, is that pre-loaded fonts do not always show correctly within my website and default back to what is set in the sites styles. As a few examples, the code I am using is as follows. h1, h1 a, h1 blog title, entry-title { font-family: 'Wilderness'; } h2 { font-family: 'Wilderness'; } normal { font-family: 'Laski Sans'; } Wilderness is the custom font, that loads fine. Where I am having issues is the Laski Sans, which is a preexisting font on Squarespace. Even having this selected as Laski Sans in the site styles see's it not retain the font face and switch to another random font style. Is this a known / recurring issue for people? Is there a way to resolve and work around. It is also worth noting this largely tends to occur with card blocks, also if I click the card in page mode the font will correct itself. Then change back after a few hours/if I come on the next day. Thanks in advance!