I need some Javascript that will redirect product pages to blog pages

Site URL: https://idmdiscovery.com

password idm.

Hey! so  i need  some script that can redirect links to another link, for instance i want to change all the links in my cart so that they link to blog posts.  I was using this code:

<script>

  $( ( ) => {
  
    /* map cart item title urls */
    
    const urlMappings = {
    
      '/saved/p/analogical-force'  : '/labels/analogical-force'
      /* last or only item doesn't get a comma */
      }
      
    const urlError = '/x'; /* page to go to in case a url mapping isn't found */
    
    // do not change anything below, there be the borg here

    
    if ( location.pathname != '/cart' ) return;
    
    $( '.CartTableRow-itemTitle-1MDgZ' ).each ( function ( ) {
    
      let $this = $( this );
      
      let href = $this.attr ( 'href' );
      
      if ( href in urlMappings ) {
      
        href = urlMappings [ href ];
        
        } else {
        
          href = urlError;
          
          }
          
      $this.attr ( 'href', href );
      
      } );
      
    } );
    
  </script>

and it worked until i installed the customcartdrawer plugin from squarewebsites.org, now the link redirect doesnt work with the cart drawer, i think i need to change the location pathname in the above script so its sitewide but i cant figure that out, i dont want anyone seeing the product pages, they are supposed to just hold data for the cart. If i can change the links sitewide instead of just the cart that might make it work again, can anyone help me out please? thanks so much. 

I think this code by @creedon ☘️

Yeah that code looks familiar! 🙂

Right my code was designed to work only on the SS cart page. I suspect if you go to the /cart page on your site it is still working there.

Off the top of my head I don't think changing the path name is going to do the trick. It looks like you need to use the following feature to accomplish your goal.

Quote

onUpdateFunction in config is the function that runs on Drawer init and each time you upadate the cart with adding/removing/editing products. So this function may be used to append your custom elements into Drawer or re-render things or any other case you have in mind.

https://www.squarewebsites.org/products/squarespace-custom-cart-drawer

@creedon Thaknyou so so much i will give it a go and report back! 

@creedon so sorry to be a bother again, you have been so much help, so i was thinking because i need to do this to multiple links it would be fastest if i could replace the middle part of a link because the end parts of will be the same, that way i dont have to manually do this for every link.  (i dont want anyone ever going to the product pages)  for example:

https://idmdiscovery.com/saved/p/analogical-force   --->

https://idmdiscovery.com/labels/analogical-force 

would there be a way to replace saved/p  with labels (for every single instance a link with saved/p appears on my site?)   i hope this makes sense, thanks again you are a life saver. 

i figured it out myself!!! i dont know javascript so im patting myself on the back right now haha. 

<script>
  window.customCartDrawer = {
onUpdateFunction: function(drawer, data) {
  
$(document).ready(function(){
    $('a').each(function(){
        this.href = this.href.replace('/saved/p/', '/labels/');
    });
});
  
  
  } }
</script>

this is what i used and it worked 🙂 

Nicely done!

Hello,

I'm hoping someone can point me in the right direction here. I've been messing around with 2 different approaches but haven't been able to work it out (it's been dayyyyysss 😑).  I know I'm doing something(s) wrong..I just don't know what I don't know yet! 😅 

I'm trying to implement some javascript on my store page so I can redirect the product links. 

I want to redirect product urls like: https://mayellre.squarespace.com/rentals/p/130-water-street to urls like: https://mayellre.squarespace.com/130-water-street.

There are currently 40  rental "products" (more to come eventually), but they will never be able to be added to a cart/purchased. I assume that may be why the below doesn't work.

<script>
  window.customCartDrawer = {
onUpdateFunction: function(drawer, data) {
  
$(document).ready(function(){
    $('a').each(function(){
        this.href = this.href.replace('/rentals/p/', '/');
    });

  } }
</script>

This is the other option I tried. I was able to get this to work for one redirect, however when I tried to implement it for all 40 product links, it only redirects 1 of them. Maybe im targeting them or separating wrong?

Single var set:

<script>
   var fromUrl = '/rentals/p/1-west-street-listing';
   var toUrl = '/1-west-street';
   // do not edit below this line
   var fromRegex = "^\\" + fromUrl + "\\/?$";
   var match = location.pathname.match(new RegExp(fromRegex, 'i'));
   if (match && !window.frameElement) {
     window.location.replace(toUrl);
   }
 </script>

My best guess at multiple var (not working) 😕

<script>
var fromUrl = '/rentals/p/1-west-street-listing';
var toUrl = '/1-west-street';

var fromUrl = '/rentals/p/2-gold-street-listing';
var toUrl = '/2-gold-street';

var fromUrl = '/rentals/p/2-water-street-listing';
var toUrl = '/2-water-street';

var fromUrl = '/rentals/p/8-spruce-street-listing';
var toUrl = '/8-spruce-street';

var fromUrl = '/rentals/p/10-barclay-street-listing';
var toUrl = '/10-barclay-street';

var fromUrl = '/rentals/p/10-liberty-street-listing';
var toUrl = '/10-liberty-street';

var fromUrl = '/rentals/p/15-broad-street-listing';
var toUrl = '/15-broad-street';

var fromUrl = '/rentals/p/15-cliff-street-listing';
var toUrl = '/15-cliff-street';

var fromUrl = '/rentals/p/15-park-row-listing';
var toUrl = '/15-park-row';

var fromUrl = '/rentals/p/15-william-street-listing';
var toUrl = '/15-william-street';

var fromUrl = '/rentals/p/19-dutch-street-listing';
var toUrl = '/19-dutch-street';

var fromUrl = '/rentals/p/20-exchange-place-listing';
var toUrl = '/20-exchange-place';

var fromUrl = '/rentals/p/20-pine-street-listing';
var toUrl = '/20-pine-street';

var fromUrl = '/rentals/p/20-west-street-listing';
var toUrl = '/20-west-street';

var fromUrl = '/rentals/p/21-west-street-listing';
var toUrl = '/21-west-street';

var fromUrl = '/rentals/p/21-23-south-william-street-listing';
var toUrl = '/21-23-south-william-street';

var fromUrl = '/rentals/p/30-park-place-listing';
var toUrl = '/30-park-place';

var fromUrl = '/rentals/p/37-wall-street-listing';
var toUrl = '/37-wall-street';

var fromUrl = '/rentals/p/40-broad-street-listing';
var toUrl = '/40-broad-street';

var fromUrl = '/rentals/p/40-broad-street-listing';
var toUrl = '/40-broad-street';

var fromUrl = '/rentals/p/45-wall-street-listing';
var toUrl = '/45-wall-street';

var fromUrl = '/rentals/p/50-west-street-listing';
var toUrl = '/50-west-street';

var fromUrl = '/rentals/p/55-liberty-street-listing';
var toUrl = '/55-liberty-street';

var fromUrl = '/rentals/p/55-wall-street-listing';
var toUrl = '/55-wall-street';

var fromUrl = '/rentals/p/63-wall-street-listing';
var toUrl = '/63-wall-street';

var fromUrl = '/rentals/p/67-wall-street-listing';
var toUrl = '/67-wall-street';

var fromUrl = '/rentals/p/70-pine-street-listing';
var toUrl = '/70-pine-street';

var fromUrl = '/rentals/p/71-broadway-listing';
var toUrl = '/71-broadway';

var fromUrl = '/rentals/p/75-wall-street-listing';
var toUrl = '/75-wall-street';

var fromUrl = '/rentals/p/80-john-street-listing';
var toUrl = '/80-john-street';

var fromUrl = '/rentals/p/85-john-street-listing';
var toUrl = '/85-john-street';

var fromUrl = '/rentals/p/88-greenwich-street-listing';
var toUrl = '/88-greenwich-street';

var fromUrl = '/rentals/p/90-west-street-listing';
var toUrl = '/90-west-street';

var fromUrl = '/rentals/p/90-william-street-listing';
var toUrl = '/90-william-street';

var fromUrl = '/rentals/p/95-wall-street-listing';
var toUrl = '/95-wall-street';

var fromUrl = '/rentals/p/100-barclay-street-listing';
var toUrl = '/100-barclay-street';

var fromUrl = '/rentals/p/110-greenwich-street-listing';
var toUrl = '/110-greenwich-street';

var fromUrl = '/rentals/p/114-liberty-street-listing';
var toUrl = '/114-liberty-street';

var fromUrl = '/rentals/p/123-washington-street-listing';
var toUrl = '/123-washington-street';

var fromUrl = '/rentals/p/130-water-street-listing';
var toUrl = '/130-water-street';

var fromUrl = '/rentals/p/180-water-street-listing';
var toUrl = '/180-water-street';
   // do not edit below this line
   var fromRegex = "^\\" + fromUrl + "\\/?$";
   var match = location.pathname.match(new RegExp(fromRegex, 'i'));
   if (match && !window.frameElement) {
     window.location.replace(toUrl);
   }
 </script>

@PrismaVisual

For a wholesale every product item page gets redirected add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  ( ( ) => {
  
    /*
    
      begin redirect product pages
      
      SS Version : 7.1
      
      */
      
    // no user serviceable parts below
    
    if ( window.frameElement !== null ) return;
    
    let pathPart = location.pathname.split ( '/' ) [ 3 ];
    
    if ( pathPart === undefined ) return;
    
    location.href = '/' + pathPart;
    
    } ) ( );
    
  </script>

This effect only works when you view the site as an outside user.

Have you considered using the product items pages and just hiding the add to cart button with some CSS? Lots of folks do that.

Let us know how it goes.

@creedon Thanks so much for the reply!  I tried adding that where specified but the entire page content disappeared and showed as "/undefined" up in the address bar.  I'm way over my head here lol...it is my first time messing with javascript. Am I supposed to modify that somehow? 

I am adding properties/neighborhoods as "products" in "store pages" so that I can use them in conjunction with advanced map blocks plugin and universal filter from squarewesbites. These both work beautifully but then I realized that every instance of a product automatically links to the built in pages. 🤦🏻‍♀️  And of course I had already created all custom 40 property pages and 28 neighborhood pages. 🤡😩

I just need a way to change those links!! I figured javascript would be the quickest solution. I thought either having a script that would omit the "/rentals/p" part from the urls, placed in the sitewide header injection would be best. Or even a script to redirect the urls would be amazing. I got close but could only make it work for 1/40 of them. 🤣

@PrismaVisual

I've updated my code post. This is pretty simple code as far as Javascript goes. The trick is making it perfect! 🙂

Quote

but then I realized that every instance of a product automatically links to the built in pages.

I'm wondering if the issue can be tackled earlier than after the user clicks on a link that takes them to a store page.

Can you point us to a URL for a page that takes the user to the store page when they click on a link?

Let us know how it goes.

13 hours ago, creedon said:

@PrismaVisual

I've updated my code post. This is pretty simple code as far as Javascript goes. The trick is making it perfect! 🙂

I'm wondering if the issue can be tackled earlier than after the user clicks on a link that takes them to a store page.

Can you point us to a URL for a page that takes the user to the store page when they click on a link?

Let us know how it goes.

This worked perfectly!!! It works on all instance: store pages, the summaries, the maps...everywhere! I am beyond grateful. Thank you so much! Can I buy you a coffee?

Hi, I'm wondering if i'm trying to do the same thing. We want to show that one of our theatre shows is on sale now, but we can't sell the tickets ourselves, instead we need to redirect customers to the actual theatre's website. 

Is it possible to remove the add to cart function, so that people can see the 'product' listing on our store, but not actually buy it through us? You'll see i've added a link to the theatre's site. Ideally the 'Purchase' button would lead them to the theatre's website. Is that possible?

www.thepappyshow.co.uk

Thanks!

@Hebon

One way to do it is add the following in a code block in the additional info area of your product.

<style>

  .sqs-add-to-cart-button-wrapper {
  
    display : none;
    
    }
    
  </style>

Then add your link or button below the code block pointing to the other site.

Let us know how it goes.