Bilingual Website and ecommerce

Site URL: https://www.terroir-imports.com/produits

Hi guys, 

I need some help with some finishing touches for my bilingual website. I seem to encounter some issues, especially when it comes to my shopping cart and checkout page. Here is a list of things I'm looking to do:

• Shopping cart: throughout my entire website I have chosen to hide either secondary (French) or primary navigation (English) depending on which version of my site clients use. However, when you arrive at the shopping cart, both primary and secondary navigation are displayed. Is there a way of hiding primary navigation when my clients are using the French version of my online store (https://www.terroir-imports.com/produits) and hiding secondary navigation when my clients are using my English version of my online store (https://www.terroir-imports.com/products)?

• Shopping cart: is there any way of changing the following:
  • "QTY" = Case(s) | Caisse(s)
  • "Price" = Price | Prix
  • "Subtotal" = Subtotal | Sous-total
  • "Checkout" = Checkout | Paiement

• Quick view (working link: https://www.terroir-imports.com/produits) : does anyone have a custom code to change "Quick view" to "Aperçu rapide" only on my French site?
• View full item: does anyone have a custom code to change "View full item" to "Plus de détails" only on my French site?
• Checkout page: is there anyway of modifying the preset text in the checkout page? I would want to make the headers bilingual (ex. Payment | Paiement).
• Store (working link: https://www.terroir-imports.com/produits/bourgogne-aligot-2018-mark-haisma) : is it possible to change the following button in my online store 
  • "Added to cart" = "Ajouter au panier"
  • "Adding" = "Ajout en cours"
  • "Added!" = "Ajouté!"

Thanks for your help guys!

@tuanphan @creedon

48 minutes ago, codefordummies said:

does anyone have a custom code to change "Quick view" to "Aperçu rapide" only on my French site?

Add the following to Store Settings > Advanced > Page Header Code Injection for your french store.

<script>

  $( ( ) => {
  
    /* change Quick View to Aperçu rapide */
    
    $( '.sqs-product-quick-view-button' ).html ( 'Aperçu rapide' );
    
    } );
    
  </script>

1 hour ago, codefordummies said:

View full item: does anyone have a custom code to change "View full item" to "Plus de détails" only on my French site?

This one is a bit trickier as the Quick View lightboxes are created on the fly. This needs more than a few lines of code.

5 minutes ago, creedon said:

This one is a bit trickier as the Quick View lightboxes are created on the fly. This needs more than a few lines of code.

Ah I see! Thanks anyway @creedon! The other code helped for the French version of  "Quick view"!

1 hour ago, codefordummies said:

is it possible to change the following button in my online store 

• "Adding" = "Ajout en cours"
• "Added!" = "Ajouté!"

 

I think this one is in the same boat as my previous post. It is dynamic behaviour which needs to be watched with a MutationObserver. MTs basically watch an element for changes and then act upon that change. I've created MTs but as I say it's not just a few lines of code.

1 minute ago, creedon said:

I think this one is in the same boat as my previous post. It is dynamic behaviour which needs to be watched with a MutationObserver. MTs basically watch an element for changes and then act upon that change. I've created MTs but as I say it's not just a few lines of code.

@creedon Gotcha! Thank you anyway 🙂 

On 10/25/2020 at 5:44 PM, codefordummies said:

Shopping cart: is there any way of changing the following:

• "QTY" = Case(s) | Caisse(s)
• "Price" = Price | Prix
• "Subtotal" = Subtotal | Sous-total
• "Checkout" = Checkout | Paiement

Add the following to Design > Custom CSS.

#cart .XgjsO_M3Y ._3zzV1fDFF span:after { /* column label */ /* price column label */
  
  content: ' | Prix';
  
  }

#cart ._225eTv05l ._3zzV1fDFF:before { /* column label */ /* quantity column label */
  
  content: 'Case(s) | Caisse(s)';
  
  }

#cart ._225eTv05l ._3zzV1fDFF span { /* column label */ /* quantity column label */

  display: none;
  
  }

#cart ._3qWE9VU-U span:after { /* subtotal label */

  content: ' | Sous-total';
  
  }

#cart .checkout-button:after {

  content: ' | Paiement';
  
  }

1 hour ago, creedon said:

#cart .CartTable-itemPrice-XgjsO .CartTable-itemLabel-3zzV1 span:after {      content: ' | Prix';      } #cart .CartTable-itemQuantity-225eT .CartTable-itemLabel-3zzV1:before {      content: 'Case(s) | Caisse(s)';      } #cart .CartTable-itemQuantity-225eT .CartTable-itemLabel-3zzV1 span {   display: none;      } #cart .CartTable-subtotalLabel-3qWE9 span:after {   content: ' | Sous-total';      } #cart .checkout-button:after {   content: ' | Paiement';      }

This worked wonderfully! Thank you @creedon🤩

On 10/25/2020 at 11:01 PM, creedon said:

#cart .CartTable-itemPrice-XgjsO .CartTable-itemLabel-3zzV1 span:after {      content: ' | Prix';      } #cart .CartTable-itemQuantity-225eT .CartTable-itemLabel-3zzV1:before {      content: 'Case(s) | Caisse(s)';      } #cart .CartTable-itemQuantity-225eT .CartTable-itemLabel-3zzV1 span {   display: none;      } #cart .CartTable-subtotalLabel-3qWE9 span:after {   content: ' | Sous-total';      } #cart .checkout-button:after {   content: ' | Paiement';      }

Hello Creedon

I tried this code and, in my case it just worked partially, all the text stays in english, except the 'checkout button'

Any chance you can help me please?

Jean-Guy 

@Amsterixe

It probably only worked partially because SS in the mean time changed the code for the cart.

I've just updated my code post. See if that works better for you.

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.

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.

On 10/26/2020 at 2:01 PM, creedon said:

Add the following to Design > Custom CSS.

#cart .XgjsO_M3Y ._3zzV1fDFF span:after { /* column label */ /* price column label */
  
  content: ' | Prix';
  
  }

#cart ._225eTv05l ._3zzV1fDFF:before { /* column label */ /* quantity column label */
  
  content: 'Case(s) | Caisse(s)';
  
  }

#cart ._225eTv05l ._3zzV1fDFF span { /* column label */ /* quantity column label */

  display: none;
  
  }

#cart ._3qWE9VU-U span:after { /* subtotal label */

  content: ' | Sous-total';
  
  }

#cart .checkout-button:after {

  content: ' | Paiement';
  
  }

 

Hi @creedon 
Thankyou for this. It's been helpful for me as well, but can you explain what the "_3qWE9VU-U" and similar are? Like @Amsterixe, I found that this code only worked on the Checkout text but not the other items. I'd like to change the Subtotal label, and just don't know how to refer to it in the code. 
(Should it be the same for everyone, like .checkout-button , or is it individual site by site?)

7 hours ago, inspiredrachel said:

can you explain what the "_3qWE9VU-U" and similar are?

Those are class names as generated by Squarespace. Unfortunately and inexplicably SS for some reason is generating gibberish class names instead of semantic ones.

Quote

I found that this code only worked on the Checkout text but not the other items.

Yes that is likely to happen at some point with many of the classes that the cart uses. SS again in a move I can't fathom is regenerating new class names for many of the elements of the page when they update the cart.

The big downside to this is that code you write today may break in the very near future. When those changes will occur are often unannounced and of course we can only react to the change.

SS has provided some semantic class names but I'm dubious as to their stability long term.

Quote

(Should it be the same for everyone, like .checkout-button , or is it individual site by site?)

It should be the same for everyone.

Quote

I'd like to change the Subtotal label, and just don't know how to refer to it in the code.

The label itself is class TPEfWzjos

Let us know how it goes.

@creedonThankyou again for your patient and generous assistance. That helped a lot. I'm starting to get the hang of it!