Copy link to clipboard
Copied
This is another conflict caused by the usual terribly coded "prototype-core.ashx" used on the shopping cart functionality through BC , however the implementation of Google's LD+JSON seems quite impossible with the problems coming all the time regards BC scripting.
I am using the following piece of code in the "products_large" template:
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "{{name}}",
"image": "http://http://www.bestkilts.com{{largeImageUrl}}",
"description": "{{description | strip_html | truncatewords: 40, "..." }}",
"mpn": "{{id}}",
"brand": {
"@type": "Thing",
"name": "Best Kilts"
},
"offers": {
"@type": "Offer",
"url": "{{urlWithHost}}",
"priceCurrency": "{{countryCurrencyFormat}}",
"price": "{{salePrice}}",
"availability": "http://schema.org/InStock",
"priceValidUntil": "{{expiryDate}}",
"itemCondition": "New",
"seller": {
"@type": "LocalBusiness",
"name": "Best Kilts"
}
}
}
}
</script>
Everything works just fine without the above but once its added to the head or body of the template I just get errors once clicked on "addToCart" custom scripts wont run.
Everything is clear of conflicts but regards this specific JSON from Google things don't go well, even worse you cannot add javascript to the ld+json script it becomes unrecognised and wont render by Google.
Please check the demo: Dropbox - BC and Google LD+JSON Conflict.mp4
In response to OP, in case anyone else comes searching for the same error:
BC will attempt to 'eval' inline scripts when redrawing the product after adding to cart, which will break on "application/ld+json" types. To resolve this I include an override of the BC function the excludes that type:
ProcessJS = function (ele) { for (var t = "", x = ele.getElementsByTagName("script"), i = 0; i < x.length; i++) { if (x.getAttribute("type") !== "application/ld+json") t = t + "\n" + x.text; }...
Copy link to clipboard
Copied
Hi Ricardo,
What exactly are you trying to do? Are you able to use a different method, mainly not LD+JSON ?
I'm sure Google normally provides several protocols for their services?
I did some further analysis on schema.org and found there are 3 methods for setting schema data.
Product - schema.org
Could you attempt another method? We use the microdata method.
Copy link to clipboard
Copied
I want to use LD+JSON coz its 3x faster than inline microdata + Using with liquid never made easier to use in products layout adding and updating products info.
Also Google is moving on with LD+JSON as a way to display more rich content via Rich Cards, check this article.
The result is the same at the end but you get more pages indexed without slowing the server request also with a better page visual result on Google.
I could implement this method to a live feed to google Merchant to tell about online and in shop real time product availability.
Currently all reads well but when the addToCart(); is triggered it conflicts with the current Ajax request in prototype-core.ashx
I thought of maybe getting some callback when the addToCart() is successful to maybe reload the page or recall the scripts of the page again not sure.....some ideas?
Copy link to clipboard
Copied
Thanks Ricardo,
This makes much more clear sense, I love what you're doing.
Watching your video further, is the issue you referring to regarding whenever you choose your kilt size, the add to cart button stops working?
From what I gather, the LD+JSON seems to be working fine, there is no negative impact on this when adding an item to cart and/or when updating the kilt size. Is this a correct statement?
Because my hunch is that you're getting the age old issue of whenever BC's script interact back with the DOM, it replaced elements that may have had JS events attached to them etc.
Copy link to clipboard
Copied
BC uses AJAX back dated to 2006! what can we possibly expect, but I guess the old car needs to be improvised rather than upgraded...
I have no other issues with my code or other Ajax happening in the background but for some reason BCs Ajax does not like the LD+JSON when triggering the addToCart(); function only.
Like you said it could possibly be conflicting with the LD+JSON and DOM element but since I cant code compatible js to the JSON it leaves us to hack the prototype request on that click event.
I am not an expert on JS but is it possible to pass an argument to the addToCart(); so it passes a value to a function we can use to avoid the Ajax error? ...
This is my ADD TO CART BTN in the template.
<input class="productSubmitInput" name="AddToCart_Submit" type="submit" value="ADD TO CART" onClick="AddToCart({{catalogId}},{{id}},'',4,'','',false);return false;">
Copy link to clipboard
Copied
Actually Ricardo,
Google started the hear with that, but already refined that and moving away from that specifically. I am still suprised not more partners are looking at google tag manager because that is where it is heading.
Google had the inline Data tags for Google analytics, they had the micro data and then the LD+JSON but its now refined into the "datalayer" with tag manager.
Through that and tag manager you manage everthing, including 3rd party and you feed the data through that as well as all the events and that can go into google analytics and others.
With this but even using the above before that we have NO problems as you mentioned.
Copy link to clipboard
Copied
I did the same few months ago and I remember I got these error messages too
<script type="application/ld+json">{"@context": "http://schema.org/","@type": .....</script>
<script type="text/javascript" src="/CatalystScripts/Java_OnlineShopping.js" defer></script>
<script type="text/javascript" src="/js/Java_Cookies.js" defer></script>
<script type="text/javascript" src="/js/prototype-core.js" defer></script>
<script type="text/javascript" src="/js/CMS.CatalogueRetrieve_Catalyst.Web.CMS.js" defer></script>
My ld+json also have a {% if instock > 0 %}.... {% endif%}
<script type="application/ld+json">
{"@context": "http://schema.org/",
"@type": "Product","name": "{{name}} by {{custom1}}",
"image": "http://gallerigeo.no{{largeImageUrl}}",
"description":"{tag_productmetadescription}",
"brand":{"@type": "Person","name": "{{custom1}}"},
"offers":{"@type": "Offer",
"priceCurrency": "{{countryCurrencyFormat}}",
"price":"{{salePrice|round}}",
"availability": "{% if instock > 0 %}http://schema.org/InStock{% else %}http://schema.org/OutOfStock{%endif%}",
"seller":{"@type":
"ArtGallery","name": "Galleri GEO"}}}
</script>
Copy link to clipboard
Copied
The reason for why I wanted to no HEAD elements on page template for my Shop is mainly because i also want a good score on Google pagespeed... I just tested Janne & Julia on category for 97 of 100
I also feel products have a better focus when you don´t see that buy button on category level.
Copy link to clipboard
Copied
Hi Alex, thanks for taking the time on your answer, unfortunately the problem is with the addToCart() function conflicting with LD+JSON on your sites you use BuyNow so it jumps straight to cart rather than adding them to cart and keep in the same page.
Although I tried your process just in case it could work but nothing changed once addToCart() is clicked the world ends!
Copy link to clipboard
Copied
Alex, this is absolutely amazing, thanks for sharing!
I love seeing innovative ideas such as these posted on the forums.
Just a quick following up question; do you use 1 default template for all your pages, or just for the catalogues, and do you apply no HEAD elements to all other pages as well?
I love the concept of copying over all BC resources locally, minifying and deferring. I just would like to know if you follow this concept through for the entirety of the site - in one default template or a specific "catalogues" type template?
Thanks Alex.
Copy link to clipboard
Copied
I´m only using one template.
I always try putting custom code+CSS only where it´s needed (ex. put the form CSS on the contact page only) keep the core CSS and master template to a minimum. My default pre-production CSS is around 200 lines atm. I´m always working on how to minify and build a better HTML+CSS platform for production. Tip! You can event use liquid markup inside the catalogue description field in admin
AMP HTML and Adobe BC are even better companions on this issue.
We almost only code HTML AMP these days
Copy link to clipboard
Copied
Very surprised you are not doing any of this yet. No one above here is doing any render blocking improvements as well which you should all look at, defer on the scripts themselves is still in process to be finalised and not going to be 100% till next year, its all browser determination and there are errors with that in chrome for example. Alex - you actually have those.
You also have the issue Ricardo is reporting, you just do not notice it as you have the buy now purchase method rather then add to cart so with what you said does not fix the problem.
Everyone is ignoring me here, thats fine, take or leave advice, but like I said - Tag Manager is actually where things are at for more reasons then this but through that:
Only passing some information in here at the moment for reasons I will not go into but you can see that structured data very much there with google tag manager datalayer.
Things move faster and faster and it is crazy to keep up but I love always doing new things.
The ultimate thing is rewriting the BC scripts entirely and using your own like I do , but I am nuts and that took time to all do, lol.
Copy link to clipboard
Copied
Yeah.. you are right... I see it
This is a great tip! I must check it out. I´m planning to build my AMP HTML shop in the near future, but I´m not sure if I will do this on BC. We try avoid most shop customers and leave those for bigger companies. Only four of us at FUNBIT. We feel it´s better to sell two easy peasy sites than one shop, these days. $$$
If the time comes and BC wont work in a pure logic way.. (like Ricardo´s code above) and we are forced to write our own scripts or use 3rd party fixes, like Google Tag Manager (a great tip btw), we will probably look around for other plattforms. I hope this will not happen, because I love the Adobe "name" ❤️
I think it´s great opportunity for small companies to offer an Adobe solution when they compete against other bigger one´s offering a Word Press solution. It easy to sell and that is the most important factor.
The brutal fact is that it is more than two years since you suggested some improvements to the module_data and nothing have happened? (It´s the most wanted new idea.. been for super long time). There are tons of reported bugs and progress is very slow. And if BC dont have real https in aprox 2 years (I´m waiting... hehe), nothing else matters.... for me.
Copy link to clipboard
Copied
So this is what you have done Liam?
MOZ article:
Using Google Tag Manager to Dynamically Generate Schema/JSON-LD Tags
Copy link to clipboard
Copied
None of that, although you could defiantly do that as well.
Just feeding the datalayer with the information because it is a JSON structure that actually feeds google the structured data.
Although yes you can do the LD if you want.
Using Google Tag Manager to Add Schema (Structured Data) | Engage
But like I said and you all know how google is. JSON-LD I can bet you anything wont be around this time next year, and probably killed off early next year. It will be all through the Datalayer or similar.
Google never allow similar concepts running in tandem for too long, schema will probably go as well
Copy link to clipboard
Copied
Yeah! New stuff.. every day! I´ve setup my GTM already
Copy link to clipboard
Copied
You can scrap a lot of your inline 3rd party stuff as well, once you only have the tag manager code, all other services like online chat, facebook tracking and so on can be all fed through that instead.
Copy link to clipboard
Copied
In response to OP, in case anyone else comes searching for the same error:
BC will attempt to 'eval' inline scripts when redrawing the product after adding to cart, which will break on "application/ld+json" types. To resolve this I include an override of the BC function the excludes that type:
ProcessJS = function (ele) { for (var t = "", x = ele.getElementsByTagName("script"), i = 0; i < x.length; i++) { if (x.getAttribute("type") !== "application/ld+json") t = t + "\n" + x.text; } try { "" != t && eval(t) } catch(e) {console.error(e.message);} }
Find more inspiration, events, and resources on the new Adobe Community
Explore Now