change URL link on products in shopping cart

Site URL: https://lychee-lanternfish-y5ft.squarespace.com/

I need to change the url links on all of my products in the shopping cart. Right now, they link back to the product, but I need them to link back to the page the product resides. (My actual product page should not be visible to visitors)

I have about 40 product links I have to treat similarly. 

See attached images for more info:

The "photography" link circled is the link that needs a different url (but all products do, as well)

The image with the camera is the current link:  /dyo/p/photography

The image w/ the couple should be the new link: /design-your-own

I'm afraid the shopping basket can't be modified in that way

I have changed the cart with custom code. As an example see the following.

To be clear some parts of the cart can be changed, the check out page can not.

Thinking out loud the trick here is going to be mapping from the cart item which points to a product item in the store to the page where the product was added to the cart. I don't think there is a natural mapping there. So the code would need to translate product items links into the source page where the product was added.

One issue I can see is if multiple pages have product blocks pointing to one product then there is no way from the cart to know which page to go back to. You would need to maintain a one to one relationship. In other words for any item in the cart there could be only one page that you could go back to.

Thanks Thomas! Your explanation makes sense. I already have unique URLs for all products, even repeats, so all products are one-to-one relationships. 

I'm not sure "Change Empty shopping Cart Text" is the right link for me to refer to. Can you send me the correct  link?

Thanks again!

26 minutes ago, AndreaGC said:

I'm not sure "Change Empty shopping Cart Text" is the right link for me to refer to. Can you send me the correct  link?

That was an example of code that the cart can be changed. I don't know of any code that has been created for what you want to do.

10 minutes ago, creedon said:

That was an example of code that the cart can be changed. I don't know of any code that has been created for what you want to do.

Ok, I see, thank you!

Please see Cart Item Links Redirect.

I suggest putting a few items in from several different pages and do some testing. Once we are sure it's working OK then go whole hog and put in all your URL mappings.

Let us know how it goes.

54 minutes ago, creedon said:

Here is a little something I whipped up.

Add the following to Settings > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /* map cart item title urls */
    
    const urlMappings = {
    
      '/dyo/p/cake'              : '/design-your-own',
      '/dyo/p/frosting-style'    : '/design-your-own',
      '/dyo/p/officiant-roxanne' : '/design-your-own'  /* 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
    
    if ( window.location.pathname != '/cart' ) return;
    
    $( '.CartTableRow-itemTitle-1MDgZ a' ).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>

I suggest putting a few items in from several different pages and do some testing. Once we are sure its working OK then go whole hog and put in all your URL mappings.

Let us know how it goes.

Yes! this works! Brilliant, thank you!

Hello all, I'm trying to do the same thing but it's not quite working for me. Any advice? I used the above code and plugged in my own urls, but it doesn't work properly.

<!-- Change Shopping Cart Service Product Links -->

<script>

  $( ( ) => {
  
    /* map cart item title urls */
    
    const urlMappings = { 
      '/mini-expert-review-services/purchase'              : '/mini-expert-review',
      '/mini-expert-review-services/spreadsheet' : '/mini-expert-review-spreadsheet'  
/* last or only item doesn't get a comma */
      }
      
    const urlError = '/mini-expert-review-services/purchase'; /* page to go to in case a url mapping isn't found */
    
    // do not change anything below
    
    if ( window.location.pathname != '/cart' ) return;
    $( '.CartTableRow-itemTitle-1MDgZ a' ).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>

<!-- Change Shopping Cart Service Product Links -->

7 hours ago, j_blubird said:

I'm trying to do the same thing but it's not quite working for me. Any advice?

Please post the URL for 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.

We can then take a look at your issue.

On 1/29/2021 at 4:04 PM, creedon said:

Please post the URL for 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.

We can then take a look at your issue.

These are the two service pages:

https://slideux.com/mini-expert-review

https://slideux.com/mini-expert-review-spreadsheet

We are avoiding these pages:
https://slideux.com/mini-expert-review-services/purchase
https://slideux.com/mini-expert-review-services/spreadsheet

Thank you for your help.

@j_blubird

Some problems.

First you don't have jQuery installed. I didn't mention this step to the OP because they already had jQuery installed.

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Second the code on the cart page is not the same as you've posted above. It has been changed somehow introducing syntax errors. Where did you install the code? It doesn't appear to be install in Settings > Code Injection > FOOTER.

Once we get those things figured out we'll see where we stand. The OP's site is v7.1 and yours is v7.0 so some further tweaks may need to be made.

@creedon
I've installed the jQuery. I also copied the code again and placed into the Advanced > Code Injection > Footer.

It's working properly now. Thanks for your help, I along with my team appreciate it!

I have updated my November 11, 2020 code post. If your code is working now I don't see a need to update it. The basically functionality is the same.

Hi Creedon, I currently have a problem with this too. I have try your code too but it don't work with me. Could you help me solve this problem ??? Thank you so much !
Here is my Product URL : https://origine-studiolinear.squarespace.com/kooij/p/chubby-chair-kooij
and here is my URL : https://origine-studiolinear.squarespace.com/chubby-chair-kooij
Here my Code :

<script>

  $( ( ) => {
  
    /*
    
      redirect cart item link urls
      
      SS Versions : 7.0, 7.1
      
      */
      
    const urlSlugMap = {
    
      'store' : {  /* for a single Store page, copy value here from
                      Store Settings > General > URL SLUG field. you only need
                      exactly what can be selected from the field */
                      
        /*
      
          the format of each line is a Product URL and a Page URL Slug
          
          for each product, copy a value from Edit Service Product > Options >
          Product URL field. you only need exactly what can be selected from the
          field
          
          for a single Page, copy a value from Page Settings > General >
          URL SLUG field. you only need exactly what can be selected from the
          field
          
          */
          
        // '[enter product url field here]' : '[enter page url slug here]',
        
        '/kooij/p/chubby-chair-kooij' : '/chubby-chair-kooij',
        '2' : 'b',
        '3' : 'c',
        
        }
      }
      
    const errorPageUrlSlug = 'error'; /* page to go to in case a product url
                                         is not found */
    
    // do not change anything below, there be the borg here
    
      if ( window.location.pathname != '/cart' ) return;
    $( '.cart-container a' ).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>

On 4/14/2021 at 11:53 PM, creedon said:

I have updated my November 11, 2020 code post. If your code is working now I don't see a need to update it. The basically functionality is the same.

14 hours ago, SupportSocialectric said:

I have try your code too but it don't work with me.

After I created the code SS changed the way the cart page is loaded and that code no longer works.

I have updated my November 11, 2020 post.

Let us know how it goes.