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>
Related
I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.
Lets say now there is this rendered in the DOM:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
<img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
</div>
</div>
</div>
Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"
When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"
After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"
Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?
I would greatly appreciate any help! Thank you!
I'm not sure that i understood your problem right :
You need to get a spinner when the image is loading ?
Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".
It should look like this :
<div class="swiper">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
I am quite new to Thymeleaf, I am trying to create a fragment and pass to it a variable in my Spring MVC application but I am stuck.
My code:
<div th:replace="fragments/utilities :: reviews(message=${reviews[0].review})"></div>
My fragments/utilities.html:
<div th:fragment="reviews(message)">
<div class="carousel-item">
<div class="border border-light rounded p-4 mb-3">
<div th:replace="utilities :: stars"></div>
<p th:text="message" class="mt-2"></p>
</div>
</div>
But it isn't working, I have also tried substituting th:replace with th:insert or th:include.
Note: I know for sure that reviews[0].review isn't empty
What am I missing?
The problem is with the way you want to display message
Instead of
<p th:text="message" class="mt-2"></p>
Try to use
<p th:text="${message}" class="mt-2"></p>
I have a problem with my website. I made it with Wordpress ,
everything was Ok but I think that someone tried to hack it today so all contents cannot be displayed .
To explain more when I write some text in text editor it's not showing on the front page of my website ! I don't understand what's the problem how can I solve it ?
http://www.ahlanfoundation.com/about-us/
<p><span class="hide" style="color: #05ac63;"></span></p><h3 class="title bottom-2">من نحن ؟<span class="hide" style="color: #05ac63;"></span></h3><p></p>
<div class="fl-col fl-node-5820d492ec14e fl-col-small" data-node="5820d492ec14e">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-rich-text fl-node-5820d49fbdfa0 fl-animation fl-slide-right fl-animated" data-node="5820d49fbdfa0" data-animation-delay="0.0">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<div id="panel-67-0-0-1" class="so-panel widget widget_sow-editor panel-last-child" data-index="1">
<div id="pg-67-1" class="panel-grid">مؤسسة أهلا للتسويق متخصصــة فــي التسويق الالكتروني نشــأت فكــرة تأسيســها لتكــون مؤسســة طموحــة تســعى لتقديــم حلــول مبتكــرة وابــداع لا محــدود فــي التسويق الالكتروني، وتفخــر المؤسسة بجذورهـا وهويتهـا و يدفعهـا الطمـوح لتوسـيع بـؤرة أعمالهــا . تأسســت أهلا للتسويق عــام 2016 لتصبــح إحــدى المؤسسات للتسويق الالكتروني الرائــدة فــي دول الخليج العربي وتضــع بمتنــاول جميــع العمــلاء خدمــات غيــر مســبوقة لكــي تصنــع الفــرق فــي حملاتهــم الترويجيــة والاعلانيــة لمختلــف أنشــطتهم وتوجهاتهــم . كمــا تضــم مؤسســتنا أفضــل العناصــر البشــرية مــن مختلــف الاختصاصــات لنقــدم خدمــات متميــزة تتماشــى مــع أدق متطلبــات عملائنــا المتغيــرة ســواء كانــت تصاميــم خاصــة أو الخطــط الإعلانيـة والاعلاميـة أو التسويق الالكتروني. نحـن نلتـزم بتقديـم أعلـى معاييـر الجـودة مـع إضافـة لمسـة مـن الابـداع الامحـدود.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5820d492ec19c fl-col-small" data-node="5820d492ec19c"></div>
<p><span class="hide" style="color: #05ac63;"></span></p>
when I try to inspect some elements on the browser I found it hidden.
Assuming you dont have a back up because you wouldent be posting this if you did!
Deactivate all your plugins - install wp theme 2017 - delete your theme - re install your theme (from scratch) and activate your plugins one by one whilst checking the functionality of your theme. Your plugins are prob not the issue.
You can also inspect it in the browser if you can see the first line - double click
<p><span class="hide"
and change it to
<p><span class="show"
Then tap enter!
I am looking for a hint on how to handle a strange effect on rerendering a datagrid. I have the following grid structure:
<rich:dataGrid id="allProductsGrid" value="#{allProducts}" var="_product">
<s:div styleClass="grid-element">
<s:link view="/product.xhtml">
<s:div styleClass="product-element">
<h:graphicImage value="/content/images?id=#{_product.image.id}&width=170"/>
</s:div>
<div id="title">
<h:outputText value="#{_product.name}" />
</div>
<f:param name="productId" value="#{_product.id}" />
</s:link>
</s:div>
</rich:dataGrid>
The grid gets reRendered on a onkeyup-event fired by an search input field. No magic so far. Now the problem is that the reRendering changes the structure of the html produced (DOM). As a result the links are not working anymore.
The firebug-html-inspect on the first rendering of the page is as follows:
<div id="j_id86:allProductsGrid:0:j_id124" class="grid-element">
<a id=".. " onclick=".." href="/portal/product.vc?productId=22&cid=69">
<div id="j_id86:allProductsGrid:0:j_id126" class="product-element">
<img src="/portal/content/images?id=&width=170">
</div>
<div id="title">Sample Product</div>
</a>
</div>
After reRendering the grid the html output is that:
<div id="j_id86:allProductsGrid:0:j_id124" class="grid-element">
<a id=".." onclick=".." href="/portal/product.vc?productId=22&cid=76"></a>
<div id="j_id86:allProductsGrid:0:j_id126" class="product-element">
<img src="/portal/content/images?id=&width=170">
</div>
<div id="title">Sample Product</div>
</div>
The result is that the a-tag is not wrapping the product-element anymore. Can anybody give me a hint on what might be wrong here??
Any help appreciated.
Thanks in advance.
josh
ps: using Seam 2.2.2 / JSF Mojarra 2.0.3 / RichFaces 3.3.3
Make sure your allProducts bean has ViewScope instead of RequestScope. So in rerender the data will persist in the call.
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.