Comments Maxivillus started the conversationJanuary 30, 2022 at 8:39amIs it possible to add to 'Like Posts & Social Sharing' 'Copy to clipboard' feature?Or may be i can add this feature by below code?$(".copy_to_clipboard").click(function (e) { e.preventDefault(); var $temp = $("<input>"); $("body").append($temp); $temp.val($(this).attr('href')).select(); document.execCommand("copy"); $temp.remove(); alert("Copied the text "); }) 2,610PenciDesign repliedJanuary 30, 2022 at 12:38pmHi,Here is a full code about your request: <script type="text/javascript">$('.tags-share-box.center-box .post-share, .tags-share-box.hide-tags.page-share .post-share').append('<a href="#" class="copy_to_clipboard post-share-item post-share-copy"><i class="penci-faicon fa fa-copy"></i></a>');$(".copy_to_clipboard").click(function(e) { e.preventDefault(); var $temp = $("<input>"); $("body").append($temp); $temp.val($(this).attr('href')).select(); document.execCommand("copy"); $temp.remove(); alert("Copied the text ");})</script>You can paste it at Appearance → Customize → Footer → General → Add Custom HTML code before close </body> tag / Google Analytics CodeRegards,PenciDesign.Maxivillus repliedJanuary 30, 2022 at 1:21pmThis code will work on woocommerce products?Maxivillus repliedJanuary 30, 2022 at 2:37pmCorrect code for using in codesnippets:jQuery(document).ready(function($) { $('.list-posts-share').append('<a href="#" class="copy_to_clipboard post-share-item post-share-copy"><i class="penci-faicon fa fa-copy"></i></a>'); $(".copy_to_clipboard").click(function(e) { e.preventDefault(); var $temp = $("<input>"); $("body").append($temp); $temp.val($(this).attr('href')).select(); document.execCommand("copy"); $temp.remove(); alert("Copied the text "); });});Maxivillus repliedJanuary 30, 2022 at 3:35pmFinally correct code :)jQuery(document).ready(function($) { let sometext = '<a href="' + document.baseURI + '#" title="Copy link to Clipboard" alt="Copy link to Clipboard" class="copy_to_clipboard post-share-item post-share-copy"><i class="penci-faicon fa fa-copy"></i></a>'; $('.single-product-share .list-posts-share').append(sometext); $(".copy_to_clipboard").click(function(e) { e.preventDefault(); var copyText = $(this).attr('href'); document.addEventListener('copy', function(e) { e.clipboardData.setData('text/plain', copyText); e.preventDefault(); }, true); document.execCommand('copy'); //console.log('copied text : ', copyText); //alert('Copied link: ' + copyText); $(this).hide(600); $(this).show(600); });});Maxivillus repliedJanuary 30, 2022 at 3:55pmLast question: how to make this code work in section 'quick product view'? 2,610PenciDesign repliedJanuary 30, 2022 at 4:59pmHi,Unfortunately, this code doesn't work on Product Quickview because this content can't run after the ajax content loading.We'll consider adding more JS hooks in the future update to make the custom code work after the quick view popup shows.Regards,PenciDesign. Sign in to reply ...
Is it possible to add to 'Like Posts & Social Sharing' 'Copy to clipboard' feature?
Or may be i can add this feature by below code?
$(".copy_to_clipboard").click(function (e) {
e.preventDefault();
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(this).attr('href')).select();
document.execCommand("copy");
$temp.remove();
alert("Copied the text ");
})
Hi,
Here is a full code about your request:
You can paste it at Appearance → Customize → Footer → General → Add Custom HTML code before close </body> tag / Google Analytics Code
Regards,
PenciDesign.
This code will work on woocommerce products?
Correct code for using in codesnippets:
jQuery(document).ready(function($) {
$('.list-posts-share').append('<a href="#" class="copy_to_clipboard post-share-item post-share-copy"><i class="penci-faicon fa fa-copy"></i></a>');
$(".copy_to_clipboard").click(function(e) {
e.preventDefault();
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(this).attr('href')).select();
document.execCommand("copy");
$temp.remove();
alert("Copied the text ");
});
});
Finally correct code :)
jQuery(document).ready(function($) {
let sometext = '<a href="' + document.baseURI + '#" title="Copy link to Clipboard" alt="Copy link to Clipboard" class="copy_to_clipboard post-share-item post-share-copy"><i class="penci-faicon fa fa-copy"></i></a>';
$('.single-product-share .list-posts-share').append(sometext);
$(".copy_to_clipboard").click(function(e) {
e.preventDefault();
var copyText = $(this).attr('href');
document.addEventListener('copy', function(e) {
e.clipboardData.setData('text/plain', copyText);
e.preventDefault();
}, true);
document.execCommand('copy');
//console.log('copied text : ', copyText);
//alert('Copied link: ' + copyText);
$(this).hide(600);
$(this).show(600);
});
});
Last question: how to make this code work in section 'quick product view'?
Hi,
Unfortunately, this code doesn't work on Product Quickview because this content can't run after the ajax content loading.
We'll consider adding more JS hooks in the future update to make the custom code work after the quick view popup shows.
Regards,
PenciDesign.