Copy to Clipboard from a Regular Page, Dynamic Page and Repeater

Updated: Sep 14, 2020


Tutorial Video



About the Tutorial

Wix released the Copy to Clipboard function.  This function will allow a User to copy text onto their device's clipboard.  (See a copy of their code in the image below.) This tutorial will show you how to take the example code Wix provided, and modify it by using 3 different methods of real use-case scenarios.



Follow Along #1

Tutorial Site


Link to Tutorial Site: https://codequeen.wixsite.com/copy-to-clipboard



Method #1

Copy Text from a Regular Page

In our example, we used the following elements with the following ID names:

  • 1 Button Element to click to copy  /  #clickToCopy

  • 1 Text Element to display after copy function is successful  /  #successCopy

  • 1 Text Element to display the text we want to copy  /  #text2copy

  • 1 User Input Text Element to paste copied code  /  #checkCopy

  • 1 Text Element to display success message if copy matches  /  #itWorked

  • 1 Text Element to display failure message if copy does not match  /  #sorry

We used the properties panel to make sure the success and failure text elements were set to 'hidden on load'.


The Code


import wixWindow from 'wix-window';
let copyFunction;
let true;

$w.onReady(function () {
 $w("#clickToCopy").onClick((event) => {
 let text = $w('#text2copy').text;
  wixWindow.copyToClipboard(text)
   .then(() => {
    $w('#successCopy').show();
   })
   .catch((err) => {
    console.log(err)
   });
 });
 
 //If you do not require the person to paste the copied text onto your page, then you can delete the code between here .....

 $w("#checkCopy").onKeyPress((event) => {
 let key = event.key;
  $w('#sorry').hide();
  $w('#itWorked').hide();
 if (key === "Enter") {

   console.log("Pressed Enter key on Password field"); //You can change the text of this line or delete it
 let toCheck = $w("#text2copy").text;
 let theCopied = $w("#checkCopy").value;

 if (toCheck === theCopied) {
    $w('#itWorked').show();
    $w('#sorry').hide();
   } else {
    $w('#sorry').show();
    $w('#itWorked').hide();
   }
  } else {
   console.log("Did not press Enter key."); //You can change the text of this line or delete it
  }
 });
 
 //.....and up to here.  Do not delete the last line.

});
        

Method #2

Copy Text from a Repeater

In our example, we used the following elements with the following ID names:

  • 1 dataset connected to restaurant database collection  /  #dataset1

  • 1 repeater element  /  #repeater1

  • 1 Button Element to click to copy promo code  /  #copyPromo

  • 1 Button Element to click to copy email  /  #copyEmail

  • 1 Button Element to link to dynamic page  /  #readMore

  • 1 Text Element to display after copy function is successful  /  #copy1

  • 1 Text Element to display after copy function is successful  /  #copy2

  • 1 Text Element to connect to category  /  #category

  • 1 Text Element to connect to restaurant name  /  #title

  • 1 Text Element to connect to description  /  #description

  • 1 Text Element to connect to contact name  / #contact

  • 1 Text Element to connect to email  /  #email

  • 1 Image Element to connect to restaurant image /  #image1

  • 1 Image Element to connect to contact image /  #image2

We used the properties panel to make sure that #copy1 and #copy2 were set to 'hidden on load'.



The Code


import wixWindow from 'wix-window';
let copyFunction;
let true;

$w.onReady(function () {
 
 $w("#dataset1").onReady(() => {

  $w("#repeater1").onItemReady(($item, itemData, index) => {
 let thePromo = itemData.promoCode;
 let theEmail = itemData.email;

   $item("#copyPromo").onClick((event) => {
    wixWindow.copyToClipboard(thePromo) //This should match the variable for the promo code
     .then(() => {
      $item('#copy1').show(); //This is the success message that you will show after the copying function is successful
     })
     .catch((err) => {
      console.log(err)
     });
   });

   $item("#copyEmail").onClick((event) => {
    wixWindow.copyToClipboard(theEmail)  //This should match the variable for the email
     .then(() => {
      $item('#copy2').show();  //This is the success message that you will show after the copying function is successful
     })
     .catch((err) => {
      console.log(err)
     });
   });
  });

 });

});
  


Method #3

Copy Text from a Dynamic Page

Are you trying to copy static text on a dynamic page?

Then follow method #1 instead!


In our example, we used the following elements with the following ID names:

  • 1 dynamic dataset connected to restaurant database collection  /  #dynamicdataset

  • 1 Button Element to click to copy promo code  /  #copyPromo

  • 1 Button Element to click to copy email  /  #copyEmail

  • 1 Button Element to click to copy current dynamic page URL /  #copyURL

  • 1 Text Element to display after copy function is successful  /  #copy1

  • 1 Text Element to display after copy function is successful  /  #copy2

  • 1 Text Element to display after copy function is successful  /  #copy3

  • 1 Text Element to connect to category  /  #category

  • 1 Text Element to connect to restaurant name  /  #title

  • 1 Text Element to connect to description  /  #description

  • 1 Text Element to connect to contact name  / #contact

  • 1 Text Element to connect to email  /  #email

  • 1 Image Element to connect to restaurant image /  #image1

  • 1 Image Element to connect to contact image /  #image2

We used the properties panel to make sure that #copy1 , #copy2 and #copy3 were set to 'hidden on load'.  We connected all of our elements to the dynamic dataset.  The only elements we did not connect are the 3 text elements that were used to display the 'successful' message.



The Code


import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
let url = wixLocation.url;
let copyClipboard;
var true;

$w.onReady(function () {

 $w("#dynamicDataset").onReady(() => {
 let currentListing = $w("#dynamicDataset").getCurrentItem(); //This line gets the current item in the database
 let thePromo = currentListing.promoCode;  //This line gets the value from the promoCode field in the database
 let theEmail = currentListing.email; //This line gets the value from the email field in the database

  $w("#copyPromo").onClick((event) => {
   wixWindow.copyToClipboard(thePromo) //This should match the variable for the promo code
    .then(() => {
     $w('#copy1').show();  //This is the success message that you will show after the copying function is successful
    })
    .catch((err) => {
     console.log(err)
    });
  });

  $w("#copyEmail").onClick((event) => {
   wixWindow.copyToClipboard(theEmail)  //This should match the variable for the email
    .then(() => {
     $w('#copy2').show();  //This is the success message that you will show after the copying function is successful
    })
    .catch((err) => {
     console.log(err)
    });
  });

 });

 $w("#copyURL").onClick((event) => {
  wixWindow.copyToClipboard(url) //This should match the variable for the dynamic URL
   .then(() => {
    $w('#copy3').show(); //This is the success message that you will show after the copying function is successful
   })
   .catch((err) => {
    console.log(err)
   });
 });

});


If you wan't to share a static URL instead of the dynamic page URL, you can replace that piece of corresponding code with the following:



 //Make sure to place this code within the onReady section of your code.  It does not necessarily have to be placed within the onReady of the dataset.

$w("#copyURL").onClick((event) => {
 wixWindow.copyToClipboard("www.codequeen.co") // Replace the text within the quoatation marks with your custom text or URL
  .then(() => {
   $w('#copy3').show();  //This is the success message that you will show after the copying function is successful
  })
  .catch((err) => {
   console.log(err)
  });
});
  

Author

by Code Queen


Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.


Online Booking: Discovery Session

Contact Form: Send project details

1,234 views0 comments

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.