I hope you can help me out. (I'm a bit of a newbie.)
I have used functions.php to create two extra product fields and then show the input from these fields as well as a contact link/button below the short description on the product page.
Lets call this added content "mycontent" just to make it easier to explain the problem.
The weird thing is that now, if I go to a category page in admin and add anything in the "Description" field - then "mycontent" shows up above the products on the category page...?!
I have no idea how this is even possible?
But I would very much like it to stop...! ;o)
I have tried adding "mycontent" to my product page via other hooks from this page: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/, but it doesn't show up. The only way it shows up is if I use woocommerce_short_description. But when I do that, it also shows up on category pages (only if there is a description on the category page).
I am confused on a higher level than normal... What am I doing wrong?
This is the code I use in functions.php to display "mycontent":
/* Show PDF link, PDF name and Contact Us on product pages */
add_filter( 'woocommerce_short_description', 'showpdflink', 3 );
function showpdflink($description){
global $product;
$link1='';
// Get the custom field value
$mypdfcol = get_post_meta( $product->get_id(), 'cop_pdflink', true );
$mypdfnam = get_post_meta( $product->get_id(), 'cop_pdfname', true );
// Display
//Build the links for the pdeffers
if( ! empty($mypdfcol) ){
$link1='<hr />
<div class="pdflink">
<div class="et_pb_row et_pb_row_13 et_pb_equal_columns">
<div class="et_pb_column et_pb_column_1_4"><img src="/wp-content/uploads/2022/12/pdf-icon.png" /></div>
<div class="et_pb_column et_pb_column_3_4">
<a href="'.$mypdfcol.'" title="Download pdf';
if( ! empty($mypdfnam) ){
$link1=$link1.' for '.$mypdfnam.'';
}
$link1=$link1.'" target="_blank" rel="noopener">Download pdf';
if( ! empty($mypdfnam) ){
$link1=$link1.' for '.$mypdfnam.'';
}
if( ! empty($mypdfcol) ){
$link1=$link1.'</a></div>
</div>
</div>';
}
}
/* Show CONTACT US button */
$link1=$link1.' <div class="contactbutton">
<a href="/kontakt-os" title="Kontakt CopyColor">
<span class="large">Ring for pris</span><br />
<span class="small">Klik her for kontakt</span>
</a>
</div>';
/* Show everything on the product page */
return $description.$link1;
}
/* End of Show PDF link */
I found the solution if anyone else can use it:
It turns out that woocommerce_short_description is used in several different places and then outputted in different hooks - so it showed up in both the product and the category description.
The correct place for me was woocommerce_single_product_summary.
My problem was that it wouldn't output the code. But by changing
return $description.$link1;
to
echo $description.$link1;
I got it to work.
Related
This is so simple I don't get how it could possibly go wrong. I'm trying to get a simple intra-page link to behave.
(If it's relevant, this is an angular 2 app, using routing.)
Here is a typical page:
Skip to main content
<div class="page-body">
<main>
<div class="content-body" id="content-start">
<h1>Employee Search</h1>
</div>
<main>
</div>
The URL of this page (in my dev env) is
http://localhost:49974/app/employee/search
When I click (or focus then press enter) on Skip to main content it should go to
http://localhost:49974/app/employee/search#content-start
but instead goes to
http://localhost:49974/app#content-start
(and then immediately switches to
http://localhost:49974/app/#content-start
)
I can't have messed up the linking itself; this must have something to do with how the routing is working.
It looks like I have to do it this way:
<a href="app/request/timeoff#content-start">
But that doesn't seem correct.
I don't know if this is a the correct way, or the angular way, but it works:
app.component.html:
Skip to main content
app.component.ts
export class AppComponent {
pageURL: string;
ngDoCheck() {
this.pageURL = window.location.href;
var link = this.pageURL.indexOf('#content-start');
if (link > -1) {
console.log(this.pageURL.substring(0, link));
this.pageURL = this.pageURL.substring(0, link);
}
}
}
every-page.html:
<h1 class="content-body" id="content-start">Page</h1>
Not sure if ngDoCheck is the appropriate event use.
Full disclosure: app.component is a wrapper - with header and the 'skip to content' link that contains all the pages and their content.
So, the logic for the 'skip to content' link exists once, while the actual content target #content-start lives in the top of each content page.
Below is my html, from where I am trying to get the text of header. I tried multiple ways to select it but not succeeded in it. Could you please help me to get the element so that I can get the text.
<div class="esuite-right">
<div class="angular-css ng-panel ng-panel-boxed">
<div class="ng-panel-hdr">
<h2 class="ng-binding">
Case-10006336-2015
<span class="sch-tek "> | </span>
Case details
</h2>
</div>
<!-- ngIf: zaak.vertrouwelijk -->
<div>
</div>
Title of the frame is "Case-10006336-2015" and tried to locate the element by using below various ways however not able to succeed in it.
labelSelectedCase { $("div", class: contains("angular-css ng-panel ng-panel-boxed")).$("div", class: contains("ng-panel-hdr")).$("h2",class: contains("ng-binding") ) }
labelSelectedCase { $("div.angular-css ng-panel ng-panel-boxed div.ng-panel-hdr").find("h2", class: contains("ng-binding")) }
and several others but not able to locate this element.
Could you please help me to get this element so that I can get the text and assert it.
Thanks in advance.
Either of these should work -
labelSelectedCase { $("h2.ng-binding")}
labelSelectedCase { $("span.sch-tek").parent()}
I'm not sure Content defined like you have in 1) is even valid so that could explain why $(x).$(y).$(z) doesn't work, and I'm pretty sure 2) goes astray at the second and third classes of the first div, maybe you have to chain the classes if you want to select on multiple classes like this -
labelSelectedCase { $("div.angular-css.ng-panel.ng-panel-boxed div.ng-panel-hdr").find("h2", class: contains("ng-binding")) }
Good luck,
Deon.
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
So the title pretty much says it all.
I am using Orchard CMS v1.7. I have created my own content type (Product Categories) - this is essentially the same as a page though also has an extra field (Media Library Picker Field) to allow me to select and display a single image - this will be displayed on both the list item view and also the main page content.
I use a projection page to display all content types "ProductCategories". This works well and as expected.
I now want to display this additional image within each of the items in the list of ProductCategories when viewing the projection page.
Using Shape Tracing I created an alternate for my list items.
By default, this looks like this:
#using Orchard.Utility.Extensions;
#{
if (Model.Title != null) {
Layout.Title = Model.Title;
}
Model.Classes.Add("content-item");
var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
Model.Classes.Add(contentTypeClassName);
var tag = Tag(Model, "article");
}
#tag.StartElement
<header>
#Display(Model.Header)
#if (Model.Meta != null) {
<div class="metadata">
#Display(Model.Meta)
</div>
}
</header>
#Display(Model.Content)
#if(Model.Footer != null) {
<footer>
#Display(Model.Footer)
</footer>
}
#tag.EndElement
I am now stuck - I have no idea how I display the image that is associated to this item.
I step through my code to inspect the content of the Model passed into my custom list item view and something strange happens...
when the model is loaded in there is no ListLogo inside. - see first snapshot..
However, the moment i step through #if (Model.Meta != null) my ListLogo can now be found on the object, however it's still empty - as in this snapshot.
How do I display the image associated to this content item - there is only 1 too.
Do I need to override creation of the actual list itself? If so, can you give me pointers?
Thanks in advance.
bah - so once again this all comes down to the Placement.info file in my theme.
I added a reference to the Fields_MediaLibraryPicker inside my DisplayType="Summary" and it worked like a charm.
E.G My placement.info in my theme has this for an item in my list
<Match DisplayType="Summary">
<Place Parts_Common_Metadata_Summary="-"/>
<Place Parts_Title="-"/>
<Place Fields_MediaLibraryPicker="Content:1" /> <!-- this adds the field.. -->
</Match>
I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:
In my menu: <li><a href="about#scroll-to" ....
And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>
Any suggestions would be great. Thanks!
Using jquery, you can make a POST call to the target page when menu is clicked.
The POST data will contain the id of the div where you want to slide to.
On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.
Then you will have a clean url, and the page scrolling to your div.
---- edit: here comes the code!
Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have
<li>Information about us</li>
(the onClick stops link from redirecting manually)
and an empty form (put it after the < body >)
<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>
then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.
<script type="text/javascript">
jQuery(document).ready(function(){
$(".mymenuitem").click(function() {
// we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1];
// lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)
$("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
$("#slidinganchorform").submit();
});
});
</script>
then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use php)
<head>
<!-- make sure your jquery is loaded ;) -->
<?php
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
// lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
// Lets scroll
jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>
be sure the correct id must exist ;)
<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>
(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )
You can do this when the new page loads
history.pushState("", document.title, window.location.pathname);
However it will also remove the query string. Although, you could play with it a little bit to keep it