how to use Naira Currency symbol for money format html - css

I am trying to get the value of Total redemption to be on the same line with the word "Total Redemption" like the way Total Accrued Points looks, I am using an image for my currency symbol and the code for this display is
<div class="item item-body " >
<div class="container">
<div class="right">
Total Accrued Points : {{reportData.accruedpoints}}<br/>
<p>Total Redemption:<img src='img/naira.gif' alt="Naira" height='20' width='20' align='bottom'> {{reportData.redeemableamt | currency : ""}}
</p>
</div>
<a <a href="#/app/transactionsBreakDown/{{reportData.submerchantId}}" class="button button-full button-assertive ink" >View {{reportData.submerchantId}} Details</a>

Always use Unicode for text and currency
₦ 12,000
http://www.fileformat.info/info/unicode/char/20a6/index.htm

add display: inline to the CSS of your your image tag to display it inline within the paragraph:
<img src='img/naira.gif' alt="Naira" height='20'
width='20' align='bottom' style="display:inline;">

Use span element
<span><span>₦</span> 15,000</span>

just do this and you are good to go
{{basketTotal | currency: '₦ '}}

Related

Track image clicks with links on Google Tag Manager

I'm trying to get a thing work for a week and no success. Really need some tips.
I have an Wordpress website built with Elementor.
This site has 10 different images with different links (they are links to stores that sell my product).
I'm trying to do something automatic in GTM that when I click on one of the stores (image with link), it shows me the variable - that is, the name of the store - that I added as an attribute in Elementor.
My question is whether it's possible to make this variable value show automatically so I don't have to create 10 different tags. I say this because I have 5 more sites in the same type of construction that I imagine I will have to do manually.
I followed this example and it almost worked - : https://www.youtube.com/watch?v=MUyJeRDKt0kThe problem is that he has a class naming, but I don't. I have only link attribute.
Something like this:
Product > Sells in Walgreens, Walmart, Costco, etc .
Attribute name and value:clickstore - wallgreensclickstore - Walmartetc.
Why I'm trying to do that? To mark as a conversion in GA4.
Any tips?Thanks a lot!
#BNazaruk
please se the image of the html
The tag fired, but doesn't populate the values automaticcaly!
#BNazaruk, sorry about the delay.
Please see below :)
That's an example with 2 stores.
Thanks a lot for the support!
<div class="elementor-element elementor-element-6511396 e-container--column e-container" data-id="6511396" data-element_type="container"> <div class="elementor-element elementor-element-4ea1df3 elementor-widget elementor-widget-image" data-id="4ea1df3" data-element_type="widget" cliquefarma="Store1" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="link for store 1" target="_blank" rel="nofollow noopener" cliquefarma1="Store1">
<img decoding="async" width="220" height="157" src="storeimage1.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div><div class="elementor-element elementor-element-715f6ca e-container--column e-container" data-id="715f6ca" data-element_type="container"> <div class="elementor-element elementor-element-92cd80b elementor-widget elementor-widget-image" data-id="92cd80b" data-element_type="widget" id="cfarmacia1" cliquefarma="Store 2" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="store 2 link" target="_blank" rel="nofollow noopener" cliquefarma1="Store 2">
<img decoding="async" width="220" height="157" src="storeimage2.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div>

Python-BS4 text inside <span> that has no class

I have those 2 span with text inside them.They have no class or id and i want to scrape that text with bs4 but i don't know how.Using the small tag don't help me becouse the html is full of those.
Can someone help me with an exemple?
enter image description here
<td valign="bottom" class="bottom-cell">
<div class="space rel">
<p class="lheight16">
<small class="breadcrumb x-normal">
<span><i data-icon="location-filled"></i>Iasi</span>
</small>
<small class="breadcrumb x-normal">
<span><i data-icon="clock"></i>Ieri 16:13</span>
</small>
</p>
try this, The :nth-of-type(1) selector matches every span element that is the 1th child, of a particular type, of its parent.
for i in data.select('.lheight16 small span:nth-of-type(1)'):
print(i.text)
There are multiple options to do this, but most will orientate on the parents of the spans - Cause there is no expected output (recommend you should improve that) in your question, check these two.
Option a:
for span in soup.select('td.bottom-cell span'):
print(span.get_text())
Option:b
print(soup.select_one('td.bottom-cell').get_text(' - ',strip=True))
Example
from bs4 import BeautifulSoup
html='''
<td valign="bottom" class="bottom-cell">
<div class="space rel">
<p class="lheight16">
<small class="breadcrumb x-normal">
<span><i data-icon="location-filled"></i>Iasi</span>
</small>
<small class="breadcrumb x-normal">
<span><i data-icon="clock"></i>Ieri 16:13</span>
</small>
</p>
</div>
</td>
'''
soup = BeautifulSoup(html, 'lxml')
#option a:
for span in soup.select('td.bottom-cell span'):
print(span.get_text())
#option:b
print(soup.select_one('td.bottom-cell').get_text(' - ',strip=True))
Output
a:
Iasi
Ieri 16:13
b:
Iasi - Ieri 16:13

How to fade text in asp.NET/css

I'm working on a discount item, and I'm trying to show both the original price and the new price. I want the original price to be crossed-out and faded. I already have the line-through, but I can't figure out a text fading style. Does CSS have anything like that?
Thanks!
Here's my asp code:
<div ID="OriginalPrice" class="pricing-price">
<span class="price-unit">$</span><asp:Label style="text-decoration: line-through" ID="lblOrigPrice" runat="server">This is a test</asp:Label><span class="price-tenure">/mo</span>
</div>
You can use opacity for that. Its value could be between 0 and 1, like opacity: 0.5.
<div ID="OriginalPrice" class="pricing-price">
<span class="price-unit">$</span><asp:Label style="text-decoration: line-through;opacity: 0.5;" ID="lblOrigPrice" runat="server">This is a test</asp:Label><span class="price-tenure">/mo</span>
</div>
You may want to very the value slightly in order to get what you want.

Using regular expressions in a css selector

Im scraping a page using Kimono and Ive come across some data that is structured as below.
The issue is that all of the data is stored in an element called <div class="agents-stats-seperator"> some entries only have one of these elements, some have up to 4.
There is different data in each of them that im trying to scrape and the only structured differential between them is the Text, either :
Residential for sale:
Residential for rent:
Commercial for sale:
Commercial for rent:
Im Kimono you have the option to define what you want to select either by css path or regex.
At the moment im defining with the below :
div > div > div > div.agents-stats-seperator > div
/^()(.*?)()$/
Which is causing an issue as it picking up all the <div class="agents-stats-seperator"> elements, what ive been stuck on is how to set the regular expression to target jsut the elements that contain the text Residential for sale:
Ive tried using :
div > div > div > div.agents-stats-seperator > div [str="Residential to rent:"]
/^()(.*?)()$/
But to no avail, any ideas ?
For reference here is a snippet of the html
<div class="clearfix top agents-stats bg-muted">
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential for sale:
<strong>14</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£447,143</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>18 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential to rent:
<strong>9</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£1,660 pcm</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>3 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial for sale
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£700,000</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>11 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial to let
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£22,516 pa</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>56 weeks</span>
</div>
</div>
</div>
Try something like :
div:nth-child(1).agents-stats-seperator > div:nth-child(1).agents-stats-l > strong > a

Stars and aggregated rating are not shown when using schema.org markup and and Review in xhtml page

I'm trying to implement schema.org's microData format in my xhtml template.
Since I'm using xhtml templates, I needed to add
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
instead of:
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
otherwise my template wouldn't be parsed. I found the solution here
My markup looks like this:
<div itemscope="itemscope" itemtype="http://schema.org/Place">
<div itemprop="aggregateRating" itemscope="itemscope"
itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">#{company.meanRating}</span> stars -
based on <span itemprop="reviewCount">#{company.confirmedReviewCount}</span> reviews
</div>
<ui:repeat var="review" value="#{company.reverseConfirmedReviews}">
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">#{review.reviewer.firstName}</span>,
<div itemprop="reviewRating" itemscope="itemscope" itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">#{review.text} </span>
</div>
</ui:repeat>
</div>
When testing this in http://www.google.com/webmasters/tools/richsnippets I'm not getting any stars back or aggregated review count
What am I doing wrong here?
Yes!!
The problem actually consisted of two errors, first somebody had named the div class to
"hReview-aggregate" which is appropriate when you implement Microformats not
Microdata
The second error was that I misunderstood the specification of schema.org.
This is how I end up doing:
<div class="box bigBox" itemscope="itemscope" itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">#{viewCompany.name}</span>
<div class="subLeftColumn" style="margin-top:10px;" itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
<div class="num">
<span class="rating" id="companyRating" itemprop="ratingValue">#{rating}</span>
</div>
<div>Grade</div>
<div class="num">
<span class="count" id="companyCount" itemprop="reviewCount">
#{confirmedReviewCount}
</span>
</div>
</div>
</div>
Hope this helps!!!!!
hey checkout how holidayhq guys have done it for this url : www.holidayiq.com/destinations/Lonavala-Overview.html
you can check there snippet on this tool : http://www.google.com/webmasters/tools/richsnippets
and google out this keyword "lonavala attractions" and you will see the same snippet, they have used microdata to generate this reviews in snippet, they have used typeof="v:Review-aggregate" and much more tags, have a look at it, its nice implementation of the reviews in snippet kind of work.

Resources