We have a content type called product which has a custom "input" button that allows you to "add to cart". So I have this:
<input type="submit" value="Buy Now $'.$content['field_price'][0]['#markup'].'" alt="Buy Now $'.$content['field_price'][0]['#markup'].'" />
The problem is that the price field is inside an input field, and therefore not displayed, so I would have to show the price some other way to include it within the product page.
The sample that I have shows the price on the page, but I don't want to show the price, because it's already shown in my input field. So this won't work:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Kenmore White 17" Microwave</span>
<img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$55.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />In stock
</div>
</div>
The only way I see this working is I do something sneaky like this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" style="displaY: none;">$55.00</span>
</div>
Would that be allowed or is that not going to solve my problem?
UPDATE
This works:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" style="displaY: none;">$55.00</span>
</div>
</div>
This doesn't:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" itemprop="55.00" />
<meta itemprop="priceCurrency" itemprop="USD" />
</div>
</div>
You should use the meta element.
In HTML5+Microdata (as well as in HTML+RDFa) the meta element may be used in the body element, exactly for this purpose. It’s the same idea as using the link element for the availability property (like in your example).
In Microdata, it could look like this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="55.00" />
<meta itemprop="priceCurrency" content="USD" />
</div>
Related
Im trying to load common names using Ui-Bootstrap Autocomplete.
When I type, I can see the List is being loaded EXACTLY the number of times that letter repeats! But its not showing the names. I can see the href tags has no value!
Im definitely missing something here. Thoughts?
Pen : https://codepen.io/vbbalaji/pen/qBRjRGm
<span class='py-2 mb-2'>Please enter your name</span>
<div class='container mb-2'>
<div class='row'>
<div class='col-3 text-right py-2 my-1'>Name</div>
<div class='col-9 vlight-blue py-2 my-1 rounded-lg text-left px-1'>
<div class='d-inline-block'>
<input type='text' style="text-transform:capitalize;"
id='custName' placeholder='Type your Name' ng-model="CustomerName" value=''
typeahead='name for name in commonNames | filter:$viewValue | limitTo:8' typeahead-show-hint="true"
class="ttInput rounded-lg">
</div>
<button class='btn btn-xxs btn-danger alignright' ng-click='ClearCustName()'>CLEAR</button>
</div>
<button class='btn btn-primary btn-xxs mt-2' id='btnUpd' ng-click="UpdateCurOrder(1)"><i class="fas fa-save px-1"></i>Save</button>
</div>
</div>
</div>
I think you have missed to include required external javascript files reference in the application or html page and same I can see in the provided codepen link.
Include the required external javascript/css reference in head tag of your main page.
For your reference replace your head tag code with below head tag (which has external references) in the codepen and it should work
<head>
<style>
.bgVideo { height: 100vh;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-route.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
I am creating an xpath but I am having whitespaces in the xpath output. I tried using normalize-space but it didn't work.
((//a[contains(#class,'product-name')])[3])[normalize-space()='Printed Dress']
<div class="product-container" itemscope itemtype="http://schema.org/Product">
<div class="left-block">
<div class="product-image-container">
<a class="product_img_link" href="http://automationpractice.com/index.php?id_product=3&controller=product" title="Printed Dress" itemprop="url">
<img class="replace-2x img-responsive" src="http://automationpractice.com/img/p/8/8-home_default.jpg" alt="Printed Dress" title="Printed Dress" width="250" height="250" itemprop="image" />
</a>
<div class="quick-view-wrapper-mobile">
<a class="quick-view-mobile" href="http://automationpractice.com/index.php?id_product=3&controller=product" rel="http://automationpractice.com/index.php?id_product=3&controller=product">
<i class="icon-eye-open"></i>
</a>
</div>
<a class="quick-view" href="http://automationpractice.com/index.php?id_product=3&controller=product" rel="http://automationpractice.com/index.php?id_product=3&controller=product">
<span>Quick view</span>
</a>
<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" class="price product-price">
$26.00 </span>
<meta itemprop="priceCurrency" content="USD" />
</div>
</div>
</div>
I wanted the output to be as only "Printed Dress" but i get the output as
Printed Dress
normalize-space is a xpath function all it will do is trim the white spaces while evaluating the xpath but not the output.
You have to trim the output using the language specific method. Eg: if you are using python you can use outPut.strip().
I try to upload a small angularjs app to my code pen. My question is: how to put the views?
I have two views. So they're in two separate .html files. But on code pen you have only one .html placeholder.
What I tried to do, is to put them in a tag with id, but it's doesn't work.
Here's the code:
<!-- html templates used by angular, usually in separate files -->
<script type="text/ng-template" id="albumDetails.html">
<div>
<ul>
<li ng-repeat="albumDetails in albumDetails | searchFor:searchString">
<div class="d-flex flex-row">
<div class="p-2"><img src="img/photo_album.png" class="albumIcon img-fluid" /></div>
<div class="p-2">
<p><strong>Album title:</strong> {{albumDetails.title}}</p>
<p><strong>Owner’s name:</strong> {{albumUsers[albumDetails.id].name}}</p>
<p>Number of Photos: {{ 'PhotoDetails[$index]' | lengthOfObject }} </p>
</div>
</div>
<hr />
</li>
</ul>
<!-- template for displaying a contacts info -->
<script type="text/ng-template" id="calbumList.html">
<div>
<p>Go back to home page</p>
<ul>
<li ng-repeat="PhotoDetails in PhotoDetails">
<img src="{{PhotoDetails.thumbnailUrl}}" />
<div class="modal fade photoBig{{PhotoDetails.id}}" id="modalContainer" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel{{PhotoDetails.id}}" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="{{PhotoDetails.url}}" />
</div>
</div>
</div>
</li>
</ul>
And here's the pen:
https://codepen.io/Menachem36/pen/eedbgb
Any idea?
Thanks
I am trying to use a uib-popover-template. It worked before, but now empty popup without data(can't attach img). How can i fix this issue? Code below
<div class="subject"
uib-popover-template="'popover.html'"
popover-placement="bottom-left"
popover-trigger="'outsideClick'">
<a>{{user.first_name}} {{user.last_name}}</a>
</div>
<script type="text/ng-template" id="popover.html">
<div class="media">
<div class="media-left">
<img class="user-icon" ng-src="{{user.actions.server}}storage/user/mini/{{user.user.avatar}}" />
</div>
<div class="media-body">
{{user.first_name}} {{user.last_name}}
</div>
</div>
</script>
The ng-src directive works better with just one interpolation binding:
<!-- REPLACE
<img ng-src="{{user.actions.server}}storage/user/mini/{{user.user.avatar}}" />
-->
<!-- INSTEAD -->
<img ng-src="{{user.actions.server +'storage/user/mini/'+ user.user.avatar}}" />
I am experiencing a weird problem. I have created a "Mobile Call Report" Form in Salesforce. This form can be accessed via the browser as well as the Salesforce1 App via your mobile device. Recently I added two picklist dropdown menues to this form. When I view this form(and the picklist menu) in my browser, everything looks and works great. But the weird thing is, when I view it in my mobile app, I select a value from the picklist, it selects the value one below what I selected. Then I will go ahead tap anywhere on the form and then it ends up selecting what I actually chose. Has anyone experienced anything like this before. I have added some snippets of my Angular code below. If anyone needs to see any backend APEX classes, I can add some of that as well. Thank you
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0"
applyHtmlTag="false"
applyBodyTag="false">
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<apex:stylesheet value="{!URLFOR($Resource.sf1MobilePackDist,'sf1MobilePackDist/css/bootstrap-namespaced.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.sf1MobilePackDist,'sf1MobilePackDist/css/docs.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.s1styles_css)}"/>
<script type="text/ng-template" id="internalAttendeeTypeAheadSearch.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span><br/>
<span bind-html-unsafe="match.model.User__r.Department"></span>
</a>
</script>
<script type="text/ng-template" id="distTypeAheadSearch.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span><br/>
</a>
</script>
<script type="text/ng-template" id="errorTemplate">
</script>
</head>
<body>
<div class="bootstrap-sf1" ng-class="overflow">
<!-- 2. actual template place holder -->
<div id="header" class="page-header page-header-anchor">
<table style="width: 100%;" >
<thead>
<col style="width:20%" />
<col style="width:80%" />
</thead>
<tr>
<td>
<span ng-show="screen=='CALLREPORT' || screen=='PAV'" class="s1icon s1icon-m s1icon-s-case-log-a-call"></span>
</td>
<td style="text-align:left; padding-left:10px;">
<h3 ng-show="screen=='CALLREPORT'" >New Call Report</h3>
<h3 ng-show="screen=='PAV'" >Planned Agency Visits</h3>
<h3 ng-show="screen=='NEWCONTACT'" >Create New Contact</h3>
</td>
</tr>
<tr>
<td colspan="2">
<h4>{{callReport.Agency__r.Name}}</h4>
<p style="font-size:8pt;">{{callReport.Agency__r.Owner_Master__c}} <span ng-bind-html="bullet"></span> {{callReport.Agency__r.Sub_Stat__c}} (sub) <span ng-bind-html="bullet"></span> {{callReport.Agency__r.BillingCity}}</p>
</td>
</tr>
</table>
</div> <!-- end of page header -->
<div ng-show="CallReportDetailTabActive" ng-click="handleCallReportDetailTabClick($event)" >
<form name="callreportForm" id="callreportFormId" class="form-horizontal" novalidate="true" role="form" >
<div class="card-list">
<div class="card"> <!-- new card -->
<div class="card-heading">Date of Call<sup>*</sup></div>
<ul class="card-detail ">
<li>
<input type="text" class="sf1inputdate" datepicker-popup="MM/dd/yyyy" readonly="readonly"
ng-model="callReport.Date_of_Call__c" is-open="calendaropened"
datepicker-options="calendarOptions" ng-required="true" />
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Agency Interaction Type<sup>*</sup></div>
<ul class="card-detail ">
<li>
<select class="sf1select"
ng-model="callReport.Agency_Touch_Point__c"
ng-options="t.value as t.name for t in agencytouchpoints" ng-required="true"/>
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Discussion Points</div>
<ul class="card-detail ">
<li>
<select id="discussionPointsSelect"
class="sf1selectmultiple" multiple="multiple"
ng-model="callReport.Discussion_Points__c"
ng-options="d.value as d.name for d in discussPointLst" />
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Report Focus</div>
<ul class="card-detail ">
<li>
<select class="sf1select"
id="reportFocusSelect"
ng-model="callReport.Report_Focus__c"
ng-change="changeDiscussionPointPicklist()"
ng-options="f.value as f.name for f in focusoptions" />
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Related Notifications</div>
<ul class="card-detail ">
<li>
<select id="relatedAlertsSelect"
class="sf1selectmultiple" multiple="multiple"
ng-model="callReport.Related_Notifications__c"
ng-options="d.value as d.name for d in myNotificationForAgencyPickList" />
</li>
</ul>
</div> <!-- end card -->
<!--New picklist fields that I added is below-->
<div class="card"> <!-- new card -->
<div class="row">
<div class="col-xs-6">
<div class="card-heading">Time Spent at Agency Visit/Call<sup>*</sup></div>
<ul class="card-detail ">
<li>
<select class="sf1select"
id="reportFocusSelect"
ng-model="callReport.Duration_of_Visit_Call_mins__c"
ng-change="changeDiscussionPointPicklist()"
ng-options="t.value as t.name for t in timeoptions" ng-required="true"/>
</li>
</ul>
</div>
<div class="col-xs-6">
<div class="card-heading">Time Spent in Transit to Agency</div>
<ul class="card-detail ">
<li>
<select class="sf1select"
id="reportFocusSelect"
ng-model="callReport.Transit_to_Agency__c"
ng-change="changeDiscussionPointPicklist()"
ng-options="t.value as t.name for t in transitoptions"/>
</li>
</ul>
</div>
</div>
</div> <!-- end card -->