Как сделать кликабельную ссылку с копированием в буфер обмена?

Question

[nulledbox]

Имеется код из шаблона

if (!function_exists('elessi_loop_product_sku')) :
    function elessi_loop_product_sku() {
        global $nasa_opt;
        
        if (!isset($nasa_opt['loop_sku']) || !$nasa_opt['loop_sku']) {
            return;
        }
        
        global $product;
        
        $sku = $product->get_sku();
        
        if ($sku) {
            echo '<div class="nasa-sku nasa-show-one-line nasa-crazy-inline">';
            echo '<span class="ns-sku-lbl">' . esc_html__('SKU:', 'elessi-theme') . '&nbsp;</span>' .$sku;
            echo '</div>';
        }
    }
endif;

Выводит артикул в карточку товара.

Также имеется ACF поле:
<?php the_field( 'url' ); ?>

В котором находиться ссылка.

Помогите связать выше код с полем, чтобы при нажатии на артикул копировалась в буфер обмена ссылка из поля ACF.
Притом что функционал копирования в буфер был доступен только Администраторам

Comments

[Refguser]

"Как сделать кликабельную ссылку с копированием в буфер обмена?" - это вопрос по js, а не ВП. И "код из шаблона" тут не нужен.

[shurshur]

Вот пример функции, которая копирует в буфер:

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

А далее просто можно сделать a href="javascript:copyTextToClipboard('нужный текст');" (не забывая экранировать символы, чтобы не сломать js и разметку!), но лучше повесить на ссылку событие onclick, которое в итоге вызовет эту функцию.