Customising the text on "View event" and "Back to All Events" links

Site URL: https://miguelmateas.com/daily-science-picks

Hi there! 

I'd be eternally grateful if anyone could help me edit the text of the "View Event" button and the "Back to All Events" link. I'd like to replace this text with something. 

Thank you so much in advance to any customisation gurus out there! 🙂

Miguel

You can add the following JS below.

Features:

• Update the value of the eventButtonText['default'] variable to update all buttons.
• Target individual buttons using the eventButtonText[<POSITION>] syntax. If you want to customize the button of the 2nd event item, you'd use, eventButtonText[2]. The example below has items 1 and 3 commented out based on the 2 forward slashes in front of the variable. Remove those slashes to uncomment.  
• Update the value the back to events link by updating the value of the eventBackButtonText variable

JavaScript

(function (document) {

  var eventButtonText = {}; // DO NOT DELETE

  // Back button text.
  var eventBackButtonText = 'Go back to my awsome events!'

  // Default text for all buttons for each event listing item.
  eventButtonText['default'] = 'View my awesome event!';

  // Target specific item in the event listing. Remove the 2 forward slashes
  // below before the `eventButtonText` variableto uncomment the lines. Update
  // the number in the bracket to equal the position of the event in the listing.
  // eventButtonText[1] = 'Event 1';
  // eventButtonText[3] = 'Event 3';

  /**************************************************************************
   * DO NOT EDIT CODE BELOW, unless you know what your doing.
   ***************************************************************************/

  // Initialized code depending on if the user places it in the header or footer
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    addNodeListForEachPolyfill();

    var eventButtons = document.querySelectorAll('.eventlist .eventlist-button');
    var backLink = document.querySelector('.eventitem-backlink');
    var text;

    if (eventButtons) {
      eventButtons.forEach(function (button, index) {
        index = index + 1;
        text = eventButtonText[index] || eventButtonText['default'];
        if (text) {
          button.textContent = text;
        }
      });
    }

    if (backLink) {
      backLink.textContent = eventBackButtonText;
    }

  }

  function addNodeListForEachPolyfill() {
    if (window.NodeList && !NodeList.prototype.forEach) {
      NodeList.prototype.forEach = Array.prototype.forEach;
    }
  }

})(document);

Be sure to place the code above between <script> tags, example:

<script>
  // Add js code here
</script>

Good morning @jpeter! That is incredible! It's worked like a charm, I can't be thankful enough! 

Have a great rest of the week and stay healthy and happy!

I am trying to do the same thing and I can't get the code to update my buttons and back link. Miguel, did you place this in the page header code injection section or add the code in the footer? Would you mind taking a screen shot of how you accomplished this? I'm new to JS coding, so I would be very appreciative! 

5 hours ago, HaileeWestberry said:

I am trying to do the same thing and I can't get the code to update my buttons and back link. Miguel, did you place this in the page header code injection section or add the code in the footer? Would you mind taking a screen shot of how you accomplished this? I'm new to JS coding, so I would be very appreciative! 

Yesterday I solve a same question, if you search on forum, I think you can find it out.

Or can you share link to event? We can check easier.

This solutions works on the all events/calendar blocks. I use a lot of summary blocks of events filtered by tag/category. The "view event" button doesn't even show up. Users can't tell where to click. Is there code to insert the view event button on a page or summary block? Thanks!

Hey all - 

I'm on a similar, but different quest. I am trying to redirect the "Back to all events" link to a different page itself. I have used the script below, but I'm missing something - I can't get it to work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.eventitem-backlink[href="/events-workshops?view=calendar&amp;month=07-2020"]').attr("href", "/workshops");
   }); 
</script>

Web page: https://fairfaxbackyardfarmer.squarespace.com/events-workshops/template-workshop

I would appreciate any direction or ideas! Thank you!

You can try something like the following.

$( '.eventitem-backlink' ).attr ( 'href', '/workshops' );

This is for a v7 site using a Brine family template.

That targets the class of the link.

Let us know how it goes.

Or a modification of your selector.

$( '.eventitem-backlink[href^="/events-workshops"]' );

The href begins with...

On 9/25/2020 at 9:18 PM, creedon said:

You can try something like the following.

$( '.eventitem-backlink' ).attr ( 'href', '/workshops' );

That targets the class of the link.

Let us know how it goes.

That did it! Thank you thank you thank you!

On 9/29/2020 at 4:27 AM, MayaViolet said:

That did it! Thank you thank you thank you!

Hi, I'm a bit lost here, where do you paste that code? Thanks

9 hours ago, perezalex said:

Hi, I'm a bit lost here, where do you paste that code? Thanks

Page Header or Code Injection Header/Footer

On 9/28/2020 at 2:27 PM, MayaViolet said:

That did it! Thank you thank you thank you!

Worked for me too, thanks @creedon!

This worked perfectly for me - one additional question - how can you make it so that the "view event" button on click opens in a new tab?

@AziJamalian

Please post the URL for a page with the view event "button" on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedon @jpeter

Hi guys! This helps a lot. Where can I edit this code? I tried to do it within events code block but it didn't work out.

21 minutes ago, Zkoster said:

@creedon @jpeter

Hi guys! This helps a lot. Where can I edit this code? I tried to do it within events code block but it didn't work out.

Settings > Advanced > code Injection > Footer or Header

Hi all, 

I am trying to just remove the text completely 'Back to All Events' does anyone have a solution? And where to paste? 

Thanks!

@margmorg

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page.

<style>

  /* hide back to all events link */
  
  .eventitem-backlink {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Thank you @creedon!

Thanks for all the info but this is not working for me.  Can anyone help please?

thanks

https://walrus-springtail-ljhd.squarespace.com/workshop-events?p

pw: 1mageproblem

2 hours ago, Nikitaly said:

but this is not working for me.

The first issue to solve is that the code has been installed improperly. There is code missing and so it is erroring out. Please reinstall making sure to add all the provided.

Hi Creddon,

Thanks for reply.  Sorry, yes I caught that = it hadn't pasted properly.  It should be correct now.

Niki

22 hours ago, Nikitaly said:

It should be correct now.

Same error as before. Code has not changed from last I looked.

Oh blimey.  Thank you. Sorry about that.

Its working now.