Reusable Content Blocks

From Code + Tonic.

Order Number: #00129
accounts@maynarddesign.com.
product-reusable-blocks.html

Password apple-pear
Link to the plugin: https://codeandtonic.com/rub1

PAGE Code Snippet:

Create page in SS. replace url slug.
(in SHF website, .sidebar1 class is my addition - for styling only in css. Remove in snippet if style not in use)

<!--Reusable block--> <div class=sidebar1><div class="vp-reusable-content"></div></div> <script> reusableBlock("URLSLUG"); </script>

Code Snippets

Reusable Content Block / PAGE:

Place on the page in a code block. Can add css style class - see above. You may need to Hard-Refresh.

Content Blocks Used on This Site

RCB-BOOKS

<!--Reusable block--> <div class=sidebar1><div class="vp-reusable-content"></div></div> <script> reusableBlock("URLSLUG"); </script>

RCB-LEY-Sidebar

<!--Reusable block--> <div class=sidebar1><div class="vp-reusable-content"></div></div> <script> reusableBlock("rcb-ley-sidebar"); </script>

<!--Reusable block-->
<div class="vp-reusable-content"></div>
<script>
reusableBlock("URL-SLUG-HERE");
</script>

SITE HEADER SNIPPET / Block 1:

Insert into Site Header with Code Injection

<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

SITE HEADER SNIPPET / Block 2:

Insert into Site Header with Code Injection after block 1

<!--REUSABLE BLOCKS INIT START-->


<style>
  /* Non-rendered Newsletter Blocks are hidden by default. Fix.*/
  .vp-reusable-content .newsletter-block:not(.rendered) {
  opacity:1 !important;
  }
</style>


<script>
function reusableBlock(fetchUrl) {

  // in case there are several on page, get the last / latest div.vp-reusable-content as we want to only work on that
  var thisReusableBlock = $(".vp-reusable-content:last");  
   
   
  //JS-fetch location: http/https + domain + page url + SQS json format
  var fetchUrl = window.location.protocol + "//" + window.location.hostname + "/" + fetchUrl + "?format=json-pretty";
   
    
    fetch(fetchUrl, {credentials: 'include'})
    .then(response => {
    return response.json();
  })
    .then(data => {
      thisReusableBlock.html(data.mainContent);
      thisReusableBlock.find('.sqs-layout').removeClass('sqs-layout');
      
      // loop images and set data-src as src
      thisReusableBlock.find( ".image-block" ).each(function(i) {
        var reusableImg = $( this ).find( "img" );
        reusableImg.attr("src", reusableImg.attr("data-src"));
    });

    //remove double paddings
    thisReusableBlock.closest(".sqs-block.code-block")
        .addClass("vp-reusable-parent-codeblock")
        .css("padding", "0px");
    
  })
    .catch(err => {
    // Fetch Erorr
      console.log("REUSABLE BLOCKS ERROR: Error fetching content. Check fetchUrl. Might also be caused by an older browser. Please update to new Chrome, Firefox, Safari or Microsoft Edge");
  });
}
 </script>
 <!--REUSABLE BLOCKS INIT END-->