We Keep Coding

WooCommerce - Trying to add a custom field text under the product name [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I had been trying to set custom text under the product name in WooCommerce for one of the clients.
There's an Attribute that I created for each product, whose class name is "woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_underprice".
I'd like to take the value that I set in there and show it on the Product Category page (also known as Product Archive page). Additionally, it'd be great if this could ONLY work for a specific category (URL slug is /product-category/wigs).
I have pretty much never coded in JavaScript before, but from what I understand... it could look something like this?
Needless to say, when I add this code to functions.php, the whole website crashes (I must be missing a lot of things).
I appreciate any and all help!
function UnderPrice() {
var id = document.getElementsByClassName("woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_underprice");
if (id.length > 0) {
alert (id[0].value);
}
}
remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
function customize_shop_page_product_title() {
$custom_text = 'My Custom Text';
echo '<h3 class="woocommerce-loop-product__title">' .UnderPrice .$custom_text.'</h3>';
}
add_action('woocommerce_shop_loop_item_title','customize_shop_page_product_title');

I believe you are mixing JS and PHP in the same file. The code crashes because the PHP engine sees a malformed function (because it is JS) and then later you try to concatenate it into a string.
If you want to have the javascript rendered as part of your frontend template, you should put the whole function in a string variable (know though, that this is a bad practice, because it is hard to debug), or import it somehow.
Also it seems that you try to place the javascript function amid a <h3> tag, which would never work in the frontend. The browser will only be able to access any javascript placed between tags, or imported from a .js file by a <script> tag.
The javascript function underPrice seems well-formed, syntactically. (tip: It is customary to use camelCase for functions rather than PascalCase.) Not sure what the function is supposed to do, but this would cause an popup window with some value and an ok button, if it finds the element with the two classes.
I hope this helps you forward somewhat. Since you mention little experience with JS, I would suggest to lookup some tutorials with it, there are many wonderful ones online for free, and it is well worth the time.

Javascript Alert won't show up [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to "hack" a web app by customizing the login page.
I've succefully been able to change an <img>, but I can't seem to use some js.
Whenever I try a simple alert, it shows up on the source code but won't show up on the page.
I wonder if there's any way they blocked js or if I'm missing something on why my alert won't show up.
Below : screenshot of the img tag i've successfully changed and the js I failed to execute from the firefox dev tools.
Please let me know if you're missing some informations.
EDIT : I think I've gave you all the wrong idea :)
I'm not hacking anything. I have the source code of a huge web app.
Now what I'm trying to do is to customize some part of a page. I edited the source code adding an alert (that should show up and that won't).
Here is a part of my code :
<img id="Img_site" src="/images/custom/Img_site.png" style="margin-left:-40px;"/>
<script type="text/javascript">alert("test js")</script>

If you're trying to "hack" a web app that allows users to enter custom code. There is a good change that the developer of that web app put measures in place so strip any scripting. For example i have an application where users can enter custom markup but i have the below code on the front end to strip any script tags and any code in between them before they get submitted to the server. Then on the server I do the same thing to make sure that no script can be passed to the interface effecting users.
var SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
while (SCRIPT_REGEX.test(html_code)) {
html_code = html_code.replace(SCRIPT_REGEX, "");
}

You have to notice that the content is already loaded when you append the script. So it won't excute. If you want inyect javascript code to the web you must use the developer tool.

Is there a way to stop users cutting and pasting content from my HTML pages? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have content that has taken me a long time to create. From what I understand there is no way to stop a person getting at the content and copying it if they access the source. However is there a way to stop the users from doing a simple copy from the screen? A non jQuery way. Thanks

Rules of the web 101: if it is on their screen, they can have it. That's because in order for the user to see content on your site, your site must first enter the realms of their territory, their turf, their house. In order for people to see your website, the stuff that is on your website must travel along the power lines that eventually leads in to their home. Once that information is in their home, it's just a matter of keeping it there. It's just the way emissions work.
You can use tricks to make it harder such as converting your text to an image so the user has to type it out again, but OCR can work around that, and it'll take up more precious space on your site. You can disable right click, but this is easy to work around. Not only do browser extensions exist to re-enable right clicking, Javascript could easily be turned off in any browser, breaking that protection. You could use Flash to protect your text, pretty much the same case scenario as an image. No matter what you do, the user can in some way record or recreate your content. If it is copyrighted, the only way is to use the legal system to ensure there are no unauthorized copies, but once again, the rules of the web state if it is on their screen, they can have it.
Some answers will probably suggest these tricks to make it harder, and you can implement them, but they are never foolproof and they might scare away what was otherwise a potential fan or customer. Since I know all this, if I see a site that disables right click I feel like the site owner doesn't know how useless it is what they're doing, and by extension don't know what they're doing at all.

anybody who even know how to access the developer tools of the browser will tear down the page and get the content needed anyway...so if you ask me it is not really worth the effort and plus it just gets annoying to users and a bad UI design .
but even if you disregard the above paragraph then here is a link you can refer.. http://www.hypergurl.com/norightclick.html
here is another way you can slow down people from copying images..
<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by GreenLava (BloggerSentral.com)
Version 1.0
You are free to copy and share this code but please do not remove this credit notice.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
alert(alertMsg);
return false;
}
}
var alertMsg = "Image context menu is disabled";
document.oncontextmenu = nocontext;
//]]>
</script>
Now this diables right click on images that was defined with "img" tag....you can extend this to other tags as well.
But for usability sake dont do it as it is not worth it and also wont achieve anything.

DO NOT DO THIS
...As if you are gonna listen to me. One of the most straightforward ways is to use the built-in event copy. The event is trigerred when someone copies anything from the element to which the event is attached.
document.getElementById('myContent').oncopy = function() {
/*alert("do something if you want to here")*/
return false;
};
input {
width: 400px;
}
<span id="myContent">Your content which you don't wanna be copied!</span>
<br/>
<input placeholder="try copying and pasting the above here to test" />
See the above for a simple test. You can attach the event to the html element to add the effect to all the elements.
DO NOT DO THIS
P.S. Check browser support for the copy event.

Best practice for element that needs to use javascript only (restrictions apply) [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Because of business rules and requirements, I need an element that is tab-able (without the use of tabindex), looks like a link, only has javascript functionality (it needs to make an ajax call to a web service for instance) and it cannot contain any special character such as '#' because the url will have that at the end and that will be blocked by our firewall which is set very strict due to external regulations.
Also the href cannot be empty because of our web site resides inside Sharepoint and keeping it empty means that you are redirected to the default landing page.
I've come across various questions which all contain some truth and arguments to use one element over the other, but none of those questions contained a satisfying answer, if it even had a marked answer. E.g.:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Is an empty href valid?
those two examples are not completely satisfying because for the first one, eventhough one answer has a high amount of votes but I'm not sure if that answer meets the above requirements. the second one for the same reason really.
In summary, which of the below options is preferred, keeping the restrictions and requirements in mind as well as known best practices for semantics and javascript?
OR
OR
OR
<button class="action"></button>
OR
<span class="action"></span>
WITH (example) ajax call:
<script>
$('.action').click(function() {
$.ajax({
url: "test.html",
context: document.body
})
.done(function() {
$(this).addClass("done");
});
});
});
</script>
As mentioned the restrictions cannot be changed. Period.

I remember once a teacher told me that the best was to use a <a> tag ahd the href should point to a page that probably does the exact same thing as the javascript event. So if for any reason the javascript is desactivated on the browser, the user could still use the website as any normal website... but well that works fine on papers... but it would be hard to implement.
If you add javascript code on the href or onclick your user wont be able to open the link on a new tab (by using the middle button or with the context menu)... I personally hate that on a website... links should be used to "link" pages.. not to make javascript changes on the current page, so a <button> seems more semantic to me...
You should also consider SEO (maybe) because robots will try to follow your links to index pages, but they wont follow buttons. Seo is a gray area, but i'd not be surprised if the robots have a max limit of links to follow.. and if your page has lots of links that are used only for js, maybe the robots are not able to correctly index your site
Finally, I rather have unobtrusive Js, so I really try to separate behavior from presentation. I find it ugly when i see html and js together
So i'd go with:
<button class="action"></button>
with an event listener on JS... hey.. but that's just me :)
Hope this helps

Personally, I like to use <a href="javascript:void(null);"> for my JavaScript-powered links. I know it's overkill, I know that javascript:; would be just as sufficient, but it's a habit I picked up.
That said, if the JavaScript has a non-JavaScript alternative (such as a link that might take you to a form, that has JavaScript to pop up the form in a dialog), I would use that as the href and make sure to prevent the default action in the event handler.
<button> is not a good idea unless you specifically want it to look like a button - depending on your site, this may be a good or bad thing, but you get a lot more freedom by using <a> and CSS.

'a' tag with any href you want + event.preventDefault() on onclick function can help you, I think. Why 'a', becouse it good for styling you tabs headers, for example

Detect if the ctrl button was pressed

I want to prevent users from printing a page
I thought I would set the screen to not include the toolbars, and prevent right clicks, and prevent Ctrl+ P, and the Print Screen button.
Can this be done?
Is there any good code out there for this? I have searched quite a bit so far, but not much luck. I know this isn't foolproof, but it will prevent some users from copying or printing.

You can't do this...you can't disable the user's ability to print, nor should you try.
Ctrl+P is the way a programmer prints, File > Print (depending on browser) is the way the typical user does...so this wouldn't even disable the most common method. In addition, any decent programmer can get around this anyway, so it effectively doesn't stop anyone.
Any data you get to a user, displayed or not, they can see, copy, print, etc...there's nothing you can do to prevent this, definitely not 100%. If this is one of your requirements...you should be asking if a website is the best way to deliver this data.

By doing that, you will annoy legitimate users, and if you think a serious copyright violator uses a regular browser (whose printing function you can disable), then you're very mistaken.

On the one hand information wants to be expensive, because it's so valuable. The right information in the right place just changes your life. On the other hand, information wants to be free, because the cost of getting it out is getting lower and lower all the time. So you have these two fighting against each other. source
Also:
Information Wants To Be Free, and Code Wants To Be Wrong.

I agree with the answers above.
Users will always find a way around this,
- A computer is not secure for copyrighted material and will never be.
you need to take that into account.

If you'd want to make it so that regular computer users can't do it this would help:
Create an application that loads and displays the document after input of a keycode that you supply (check via webserver).
the application does not have printing functions since you did not put them in
register a global keyhook to blank the document if the user presses "printscreen" and show a copyright warning

A couple of years ago, I built an exam system where one of the requirements was to make it hard for people to print the exams. Removing the print functionality is as we know, impossible (unless you do some changes in the browser software). What you can do is to make it harder for non-technical people to print the page. E.g. Use CSS to blank the page when it goes to the printer:
<style type="text/css">
#media print {
body { display:none }
}
</style>
The following jQuery script will prevent copy&paste in some browsers:
$(document).ready(function () {
$(document).bind('copy paste', function (e) {
e.preventDefault();
});
});

the #Nick Craver answer is right, you can't prevent it but anyways if you want to detect the key combination using mootools you have the keyboard class that let you define key combinations and add events to it:
http://mootools.net/docs/more/Interface/Keyboard
that maybe will be useful to display a warning or something like that :)

You could so with jQuery for example. However think of this: a browser runs on a client pc which is owned by someone. That person should be in control of what happens on his/her device. It's not up to you to start putting scripts to get rid of standard functionality the enduser might want to use.
If you don't want something to be printed then don't show it on a public place. If it's confidential, treat it as such.
Grz, Kris.

Take this into account. I agree with the other answers and present another way around this. All the user must do is take a screenshot, which involves the application layer of the operating system, and one of which you cannot even hope to change. On Ubuntu, it's even in the user's main menu to do this.

<script type="text/javascript">
function detectspecialkeys(e){
var evtobj=window.event? event : e
if (evtobj.altKey)
alert("you pressed 'Ctrl'");
evtobj.preventDefault();
}
document.onkeypress=detectspecialkeys
</script>