Challenger2

On 4/13/2021 at 5:53 PM, creedon said:

Go to my Jan. 21st post (edited Apr. 2nd) earlier in this thread.

You want to change the line...

const targetAtttributeValue = '';

...to...

const targetAtttributeValue = '_blank';

 

Ah, brilliant, thank you.

On 3/25/2021 at 4:57 AM, creedon said:

I have updated my previous code post.

You will want to use the targetAtttributeValue setting as follows to open into a new window.

const targetAtttributeValue = '_blank';

Let us know how it goes.

And I have one other (possibly different) question.  Is it possible for a product item (on a product page) to link to another page.  So, rather than the item opening the product item page, it goes to another page?  I have a number of product pages, and want to link an apparent product item to another product page.

On 3/25/2021 at 4:57 AM, creedon said:

I have updated my previous code post.

You will want to use the targetAtttributeValue setting as follows to open into a new window.

const targetAtttributeValue = '_blank';

Let us know how it goes.

Sorry to be dim, but I can't find the updated code?  Where is it please?

On 3/25/2021 at 4:57 AM, creedon said:

I have updated my previous code post.

You will want to use the targetAtttributeValue setting as follows to open into a new window.

const targetAtttributeValue = '_blank';

Let us know how it goes.

Brilliant, thank you.  Only just seen this, apologies for the bump! 🙂

On 10/30/2020 at 11:03 PM, creedon said:

To redirect to a scheduling page upon clicking the Reserve Your Date button add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    // replace add to cart button on product item with button that goes to a url
    
    const skuUrlMappings = {
    
      /*
      
        skus can be copied from a product item
        
        if you need more than one mapping then copy and repeat the line below
        for each mapping, remove the "// " at the beginning of the line and
        enter the appropriate data
        
        the url can be any valid url in the context of Squarespace. It can be
        a full one like "https://www.squarespace.com/" or a partial url like
        "/contact"
        
        */
        
      // '[enter sku here]' : '[enter url here]',
      
      // last or only item doesn't get a comma at the end
      
      'SQ2015221' : 'https://www.squarespace.com/'
      
      }
      
    /*
    
      used when a mapping is not defined for a product that has other mappings
      defined
      
      */
      
    defaultUrl = 'https://squarespace.com/';
    
    // do not change anything below, there be the borg here
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    const skus = $.map ( Static.SQUARESPACE_CONTEXT.product.variants,
    
      function ( v ) {
      
        return ( v.sku );
        
        } );
        
    /*
    
      if our skus don't contain a mapped sku then bail, in other words does not
      replace add to cart button
      
      */
      
    if ( ! skus.some ( r => Object.keys ( skuUrlMappings ).indexOf ( r ) >= 0 )
    
      ) return;
      
    let $addToCartButton = $( '.sqs-add-to-cart-button' );
    
    let $addToCartButtonClone = $addToCartButton.clone ( )
    
      .click ( function ( ) {
      
        let sku = skus [ 0 ]; // we assume one variant for product item
        
        // we go looking for more than one
        
        let $productVariants = $( '.product-variants' );
        
        if ( $productVariants.length ) {
        
          let selectedVariant = $( '.product-variants' )
          
            .attr ( 'data-selected-variant' );
            
          if ( selectedVariant === undefined ) return;
          
          selectedVariant = JSON.parse ( selectedVariant );
          
          sku = selectedVariant.sku;
          
          }
          
        const url = sku in skuUrlMappings ? skuUrlMappings [ sku ] : defaultUrl;
        
        location = url;
        
        } );
        
    $addToCartButton.replaceWith ( $addToCartButtonClone );
    
    } );
    
  </script>

Let us know how it goes.

Hi @creedon, this is brilliant thank you!  Is there any way to make it open in a new window...?

I'm keen to understand how to do this.  Link to demo is great - but how can it be done please?

We created a workaround by adding it to the shipping option.  For example:

• Shipping Option 1: First Class Shipping (£6.50)
• Shipping Option 2: First Class Shipping + Gift Wrapping (£7.50)

It's not particularly elegant but it's working well for us.  Our site is at skywavegin.com

Hi Zoe and Paul,

In the v7.0 Brine family, I have managed to style the checkout button using the following code:

body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
   display:block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:#231f74;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  opacity:1;
  text-align: center;
  width: auto;
  height: auto;
  text-decoration: none;
  padding: 9px 20px;
  background-color: white;
  border-radius: 3px;
  transition: .1s opacity linear;
  cursor: pointer;
  border-color: #231f74;
  border-width:2px;
  border-style:solid;
  margin-top:10px;
}
body .checkout button.CheckoutButton-checkoutButton-3yWY2:hover {color: #fff; background-color: #231f74;}

I'm using it at https://skywavegin.com

Hi again @Hickory,

Markdown uses standard HTML, so to add an extra space, use

&nbsp

as in the following example:

     <body>
       Your`&nbsp`text`&nbsp`here
    </body>

Don't use the quote marks, and put a ';' after each (I couldn't get this system to just let me type that!) You can put as many in sequence as you like, each adds a 'non (line) breaking space'.

Centreing is just as easy. Use the style "text-align: center" as follows in any tag (note US spelling of 'center'):

<div style="text-align:center">This text will be centred.
<p>So will this paragraph.</p></div>

Or

<p style="text-align:center">This line will be centred.<br>
And so will this line.</p>

Let me know how you get on.

Hi @Hickory.

Use a markdown, not a text box. In the markdown use code like this:

<div class="boxBorder">
Your text here...
</div>

Then in the custom css use the following code, adjusting the values for size and colour as you wish:

.boxBorder {
     border: 2px solid #990066;
     padding: 10px;
     outline: #990066 solid 5px;
     outline-offset: 5px;
   }

Hope this works for you.