Burchard

1 hour ago, tuanphan said:

Design > Site Styles > Disable Ajax Loading

perfect, thanks!

To apply certain page specific changes I use Page Header Code Injection on the index page, which then also get applied to the 'underlying' pages that are part of the index collection. Amongst others, the CSS changes the color and size of certain buttons and hides the quantity input for a product block. This works fine while still working in the editor, however, when I load the page separately, the CSS does not get applied until I reload the page.

I have tried adding the CSS to the underlying pages, but this doesn't seem to make any difference. I would really appreciate some insight into why this is happening and how I can make it so that the CSS gets applied immediately on first load.

Thanks!

The website is running on 7.0

One of the pages I'm working on:

https://www.maartenrots.nl/march-rock-29-la-aldea-azul

Code I'm using:

<style>
.product-quantity-input {
  display:none;
  visibility: hidden;
 }
  
 .product-block .sqs-add-to-cart-button-wrapper {
  margin: 0px 0;
  display: block;
}
  
.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
  color: #454545 !important;
  background-color: rgba(0,0,0,0);
 }
  
.sqs-block-button .sqs-block-button-element--large {
  padding: 1em 2.5em;
  font-size: 12px;
  color: #fff;
  background-color: #0299d8 !important;
}
  
  body:not(.button-style-default) .sqs-editable-button, body:not(.button-style-default) .sqs-editable-button-color, body:not(.button-style-default) .tock-block div#Tock_widget_container > div.TockWidgetWrapper .TockButton-blue {
  color: #fff;
  background-color: #0299d8 !important;
  border-color: #ebebeb;
  } 
  
</style>

That worked like a charm, thanks a lot! I imagine this will be helpful for others as well, thank you for your generosity in sharing your skills and the code, much appreciated!

I've done that, but no success yet. I'm working on this page to achieve the desired effect:

https://www.maartenrots.nl/la-aldea-azul-editions/untitled-juzcar-2023-1/

Maybe you can spot where I am failing? Thanks again, your help is much appreciated

13 hours ago, creedon said:

 '#block-64797599d9caa1491329a76c' : {
      
        selectorDestination : 'x-placeholder',
        
        // selectorParentDestination is optional
        
        selectorParentDestination : '.sqs-block-code',
        
        action : 'replace' // values are append, prepend or replace
        
        },
        

Thank you for your solution.

I've made the adjustments, but I'm not sure where I should add this bit of code?

11 hours ago, creedon said:

Can you tell us more about this formatted text? Is it text that can be input into a text block and maintain the formatting you want?

AJAX is one way to go. Another way that is commonly used is to put a block in the site footer, hide, then use code to move it into place. Which method you use may be driven by the complexity of the formatted text you mention.

It will be two text blocks, divided with a line block, with some bold text and one or two hyperlinks. I think the solution with the hidden block in the footer might be a good way to achieve this.

How would you go about this?

Giving this a bump.

I would really like to achieve this, but do not have any experience using AJAX requests. It would be great if someone can give me directions. Thanks!

1 hour ago, Beyondspace said:

I suggest you place the content into a external page and load the page content into your product page using AJAX request

Thanks for your reply!

Can you explain how to do this? I'm not familiar with using AJAX requests.

For the 'additional info' below a product, I would like to use a code block that loads pre-formatted text from a file on my web server (either uploaded through the Squarespace interface or via FTP, whichever works best). I want to do this so that I can change the additional information for all products on the website at once, by changing only one document, instead of manually going through all products one by one. It would save a lot of time,and minimize the chance of errors.

The website is built on 7.0 in the Brine family.

How can such a thing be achieved? Thanks for your input.

Works like a charm, thank you!

I'm working this out on maartenrots.nl

@tuanphan Is there a way to make the above code also work on mobile displays? Thanks!

Sure, here it is a bit more in-depth;

This is the bit of code to add the social icons. I added e-mail and Instagram, to figure out the specific codes for other platforms I would suggest to briefly turn on the icons in the design styles and then copy that code;

<div class="social-footer">
      <a href="http://instagram.com/your-username" target="_blank" class="SocialLinks-link instagram-unauth" style="">
        <div>
          <svg class="SocialLinks-link-svg" viewBox="0 0 64 64">
            
            <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#instagram-unauth-icon"></use>
            <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#instagram-unauth-mask"></use>
          </svg>
        </div>
      </a><a href="mailto:name@yourwebsite.com" target="_blank" class="SocialLinks-link email" style="">
        <div>
          <svg class="SocialLinks-link-svg" viewBox="0 0 64 64">
            
            <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#email-icon"></use>
            <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#email-mask"></use>
          </svg>
        </div>
  
    </div>

This is the CSS I used to position the icons:

/* Footer social icons */
.social-footer {
  display: flex;
  justify-content: center;
}

Fixed it after some fiddling around.

I added the social links to the header in the Site Styles.
Then I copied the piece of code Squarespace uses to add the icons in the header.
I pasted this in a code block in the footer and used CSS to position it.
I then turned the social links off again in the Site Styles.

That's it, works like a charm 🙂

Site URL: https://www.maartenrots.nl/

Hi there,

I'm using Brine (Moksha) and would like to have the social icons in the footer instead of the header.
It would be great to get some help with this, thanks!