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

On 6/10/2020 at 1:31 AM, jpeter said:

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>

 

Hi,

I've got this code which was working but now only works if you refresh the page.  On first viewing the page the buttons and back to all text is still showing the original text (view event instead of workshop details). PLEASE can anyone help ASAP?

https://www.rebelrebel.co.uk/london-workshops

thank you.

Anyone? I'm desperate!

On 11/28/2022 at 2:58 PM, Nikitaly said:

Hi,

I've got this code which was working but now only works if you refresh the page.  On first viewing the page the buttons and back to all text is still showing the original text (view event instead of workshop details). PLEASE can anyone help ASAP?

https://www.rebelrebel.co.uk/london-workshops

thank you.

Try Design > Site Styles > Disable Ajax Loading

I think I'm in love.  Thank you so very much Tuanphan

On my website, I am using the Events page format to post job opportunities instead of events. For each job that I have posted, there is a button that says 'View Event' and I would like to change this button to read 'View Opportunity' instead. When you click on 'View Event', you can also see in the top left-hand corner another button that reads 'Back to All Events', which I would like to change to read 'Back to All Opportunities'. Here is the link to the Opportunities page so you can see what I am talking about. https://www.guamcoralreefs.info/opportunities

I am using version 7.1 and have looked all over Squarespace help pages, but haven't found any information on how to change the text in these buttons.

Any advice and suggestions on how to fix this issue are greatly appreciated!

On 7/18/2023 at 9:11 AM, Cowfish23 said:

On my website, I am using the Events page format to post job opportunities instead of events. For each job that I have posted, there is a button that says 'View Event' and I would like to change this button to read 'View Opportunity' instead. When you click on 'View Event', you can also see in the top left-hand corner another button that reads 'Back to All Events', which I would like to change to read 'Back to All Opportunities'. Here is the link to the Opportunities page so you can see what I am talking about. https://www.guamcoralreefs.info/opportunities

I am using version 7.1 and have looked all over Squarespace help pages, but haven't found any information on how to change the text in these buttons.

Any advice and suggestions on how to fix this issue are greatly appreciated!

#1. Add to Design > Custom CSS

a.eventlist-button.sqs-editable-button.sqs-button-element--primary {
    font-size: 0 !important;
}

a.eventlist-button.sqs-editable-button.sqs-button-element--primary:before {
    content: "View Opportunity →";
    font-size: 15px;
}

#2. Add to Settings > Developer Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.eventitem-backlink").html(function() { 
          return $(this).html().replace("Back to All Events", "Back to All Oppurnitures");  
    });
});
</script>

@tuanphan Thank you so much for providing this code and I apologize for the very late reply! Unfortunately, my organization only has the personal plan from Squarespace so injecting code into the footer is not a feature that we have access to. Is there a workaround for this?

@Cowfish23 I believe you can try to add it via a code block, but it still may not work in a personal plan... worth a shot to try it though?

On 8/25/2023 at 11:40 PM, MayaViolet said:

@Cowfish23 I believe you can try to add it via a code block, but it still may not work in a personal plan... worth a shot to try it though?

Personal Plan doesn't support script code in Code Block

On 8/25/2023 at 12:06 PM, Cowfish23 said:

@tuanphan Thank you so much for providing this code and I apologize for the very late reply! Unfortunately, my organization only has the personal plan from Squarespace so injecting code into the footer is not a feature that we have access to. Is there a workaround for this?

#1. Personal Plan supports CSS code so you can use it

#2. You can edit your Site Footer > Add a Markdown Block > Then use code