Jump to content

ChannelSight "Where To Buy" button on product pages

Recommended Posts

Site URL: https://esatto.house/

Site URL: https://esatto.house/
Template: Squarespace 7.1

Hi, I currently have ChannelSight's "Where to Buy" button displaying below each of my product descriptions as a "Buy Now" button. Eg: https://esatto.house/refrigeration/p/84l-upright-freezer-stainless-steel-euf92s

To achieve this, I added the following ChannelSight JS Reference in the Header section of the Code Injection:
 

<script src="https://cscoreproweustor.blob.core.windows.net/widget/scripts/cswidget.loader.js" defer></script>

Since I don't want the button to display below in the Additional Info section of the product page but below the product description. I've added the widget container to the end of the product description manually by added it to the end of the Description field of a CSV file and importing it via Commerce/Inventory:

<button class="cswidget" data-asset-id="2088" data-product-sku="<!–– SKU-NUMBER-HERE ––>" >Buy Now</button>


This method has worked for me initially but it's very manual and every time I make a change to the product description, I'll have to re-add the widget container and reupload the CSV file.


I was wondering if it is possible to inject this widget to each product within a Store via the Store's Page Header Code Injection and <!–– SKU-NUMBER-HERE ––> is pulled from product's SKU field?

SKU to reference.png

Widget Open.png

Button location.png

CSV file with widget code.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Yes, it would be possible to custom code this with JavaScript, assuming that the products don't have variants.

You'd do this by creating a new element and adding it to the required on the the product detail page (PDP) when the page has been loaded. The SKU can then be pulled from the page data (checking for errors and null values) and inserted into the new element. This will create the button automatically so that you don't need to add it manually to each page.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...

Hi again,

We had someone write some Javascript using your advice above and the button is indeed getting loaded automatically now but it isn't loading the widget from ChannelSight.

These are loaded into the Header via Code Injection

<!--load channelsight loader-->
<script src="https://cdn.channelsight.com/widget/scripts/cswidget.loader.js" defer></script>

<!--load jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

 

Here is the Javascript written on the Store's Header via Advance/Page Header Code Injection:

<script>
jQuery(document).ready(function (){
  var pathname = window.location.pathname;
jQuery.ajax({
  url: pathname + "?format=json-pretty",
  dataType: "json",
  success: function (data) {
    sku = data.item.structuredContent.variants[0].sku;
console.log(sku);
  }
});  
setTimeout(function(){
  jQuery('.ProductItem-details-excerpt').append('<p><button class="cswidget sqs-block-button-element--small sqs-button-element--tertiary sqs-block-button-element cs-unloaded cswidget-root _xmynltb3v" data-asset-id="2088" data-product-sku="'+sku+'" type="button" data-instanceid="_xmynltb3v">Buy Now</button></p>')
  
}, 1000);
})

</script>

 

If you look at our test page: https://esatto.house/test/p/7kg-heat-pump-dryer, the top Buy Now button is the one I've placed by adding the code via a .csv file which correctly loads the ChannelSight widget.

The below Buy Now button is the one loaded by Javascript referencing the SKU of the product but it doesn't load the ChannelSight widget. Is there something I can do for the button to load the ChannelSight widget via Javascript?

 

Thanks in advance.

Screen Shot 2022-04-13 at 12.13.56 pm.png

Edited by rf_residentia
Edit to code
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.