rf_residentia Posted March 11, 2022 Share Posted March 11, 2022 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? Link to comment
paul2009 Posted March 11, 2022 Share Posted March 11, 2022 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
rf_residentia Posted April 13, 2022 Author Share Posted April 13, 2022 (edited) 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. Edited April 18, 2022 by rf_residentia Edit to code Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment