is it possible to confirm order on Google Trusted Stores without page refresh?
Conversion code looks like this:
<!-- START Google Trusted Stores Order -->
<div id="gts-order" style="display:none;" translate="no">
<!-- start order and merchant information -->
<span id="gts-o-id">MERCHANT_ORDER_ID</span>
<span id="gts-o-domain">MERCHANT_ORDER_DOMAIN</span>
<span id="gts-o-email">CUSTOMER_EMAIL</span>
<span id="gts-o-country">CUSTOMER_COUNTRY</span>
<span id="gts-o-currency">CURRENCY</span>
<span id="gts-o-total">ORDER_TOTAL</span>
<span id="gts-o-discounts">ORDER_DISCOUNTS</span>
<span id="gts-o-shipping-total">ORDER_SHIPPING</span>
<span id="gts-o-tax-total">ORDER_TAX</span>
<span id="gts-o-est-ship-date">ORDER_EST_SHIP_DATE</span>
<span id="gts-o-est-delivery-date">ORDER_EST_DELIVERY_DATE</span>
<span id="gts-o-has-preorder">HAS_BACKORDER_PREORDER</span>
<span id="gts-o-has-digital">HAS_DIGITAL_GOODS</span>
<!-- end order and merchant information -->
<!-- start repeated item specific information -->
<!-- item example: this area repeated for each item in the order -->
<span class="gts-item">
<span class="gts-i-name">ITEM_NAME</span>
<span class="gts-i-price">ITEM_PRICE</span>
<span class="gts-i-quantity">ITEM_QUANTITY</span>
<span class="gts-i-prodsearch-id">ITEM_GOOGLE_SHOPPING_ID</span>
<span class="gts-i-prodsearch-store-id">ITEM_GOOGLE_SHOPPING_ACCOUNT_ID</span>
<span class="gts-i-prodsearch-country">ITEM_GOOGLE_SHOPPING_COUNTRY</span>
<span class="gts-i-prodsearch-language">ITEM_GOOGLE_SHOPPING_LANGUAGE</span>
</span>
<!-- end item 1 example -->
<!-- end repeated item specific information -->
</div>
<!-- END Google Trusted Stores Order -->
I have reactjs application. So if i put this code to DOM I need invoke api call to google. But I can't find any API for this.
Maybe triggering of window.onload but it could make very unexpected behaviour :(
Any ideas?
Thanks!
How about you create a popup instead, with iframe inside the popup? That iframe will contain the contents of Google Trusted Store codes.
A non iframe solution: If you dynamically reinject the google trusted stores html script tag, the script will search for the gts ids and invoke the pop up. For cleanliness, it is probably best to remove the current script tag before doing this. The script was not designed for SPAs.
Related
This is part of the code from a website that lets me download thousands of documents. Unfortunately each document is named document.tif on downloading, and the website doesn't give an ability to change this. Is it in principle possible to write a javascript script to download the file on click and to rename it meaningfully. The body of the website looks like this. A meaningful name would be
"07 23 2012 Affidavit Declaration Certificate Confirmation of Service.tif" for example in this case.
<li class="list-group-item">
<div class="portal-case-event" data-event-description="Affidavit Declaration Certificate Confirmation of Service">
<div class="tyler-toggle-controller open">
<p class="text-primary">
07/23/2012 Affidavit Declaration Certificate Confirmation of Service
<span class="caret"> </span>
</p>
</div>
<div class="tyler-toggle-container row-buff" style="display:block;overflow:hidden">
<p>
<a data-dialog-width="819"
class="btn btn-default document-download"
data-dialog-title="Document Viewer"
data-doc-doctype="Public"
data-doc-docname="AFFIDAVIT_DCLR_CERT OF SERVICE "
data-doc-doctypeid="2"
id="docLink_kF95cQdRJeWK3WbATbVPWQ2"
href="/ODYPORTAL/DocumentViewer/Display?eid=kF95cQdRJeWK3WbATbVPWQ2&docTypeId=2&caseNum=12-3-02040-1&locationId=410&caseId=0zS1WUOxtmgteZLUMLjI5w2&docType=Public&docName=AFFIDAVIT_DCLR_CERT+OF+SERVICE+&eventName=Affidavit+Declaration+Certificate+Confirmation+of+Service"
style="margin-right: 10px;">
View Document
</a>
<span class="text-muted">
AFFIDAVIT_DCLR_CERT OF SERVICE
</span>
</p>
<p class="col-sm-12 col-md-12">
<span class="text-muted">Comment</span>
<br> 4: AFFIDAVIT/DCLR/CERT OF SERVICE;
</p>
</div>
</div>
You can try this following code
<a download="YourCustomFileName.tif" href="Link-to-download">Download</a>
This attribute download with a tag came with HTML5. This attribute lets you rename the file.
PS:
This attribute only works with same-origin URLs.
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
I want to use this Tab system:
https://material-components.github.io/material-components-web-catalog/#/component/tabs
I read the HTML source code of the above link and implemented a tab bar.
However, how do I switch displayed contents using this tab bar? Do I need to write JavaScript?
Yes, it is a JavaScript library.... so you will need to import the JavaScript.
Firstly you need to install the library, installation instructions can be found here.
Next you can proceed to using the tab bar, following these instructions.
Here's a quick working demo to show it's possible, (but I wouldn't recommend using this code)
<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<!-- Render tab barcomponent -->
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
I am trying to save a webpage for offline viewing but not exactly having luck.
The page is fairly intricate, as it involves javascript audio and video players, HTML embedded media.
On top of that, when I view the source I noticed ember-cli-fastboot comments and did some reading about it here: https://github.com/ember-fastboot/ember-cli-fastboot. So this ember-cli-fastboot seems to be all about server side rendering which for me I guess defeats the purpose of saving a website offline.
I have tried various Chrome extensions such as Save Page WE, WebScraper. They get me fairly close, with text, images, and the basic structure of the page looking fine, but the flash and JS-based players are not loading.
I also tried downloading the page in Chrome Developer Tools using Save All Resources extension, but that seems to produce similar result to what I get with Save Page WE, namely all text and images are loaded but audio and video players don't load.
Here is an example snippet of code for one of the players:
<div id="area49254180_6" class="component interaction_component float-none clear-none hideSlideshowControls interaction_booted"><div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div><div>
<div class="data-field interaction-type">Slideshow</div>
<div class="data-field interaction-init">
<span class="field">jplayer_swf_path</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/691v.swf?response-content-disposition=inline%3Bfilename%3D%22Jplayer.swf%22&Expires=2147483647&Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/691v.swf?response-content-disposition=inline%3Bfilename%3D%22Jplayer.swf%22&Expires=2147483647&Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-asset">
<span class="field">audio_track</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-asset">
<span class="field">images</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/5fkj.xxx?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkj.xxx?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-init">
<span class="field">initial_json</span><span class="value">[{"imageIndex":0,"time":0,"rect":null}]</span>
</div>
<div class="interaction_title"></div>
<div class="interaction_content Slideshow" style="min-height: 50px; width: 400px;"><div id="ember7214" class="ember-view"><div class="slideshow-jplayer" id="slideshow_player_49254180_6"></div>
<div class="slideshow-player">
<audio class="player" src="https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ"></audio>
<div class="audio-controls">
<i class="fa fa-play playpause"></i>
<i class="fa fa-pause playpause inactive"></i>
<input id="player-seek" type="range" min="0" max="100" value="0" onchange="">
<i class="fa fa-retweet loop"></i>
</div>
</div>
<div class="controls fr hidden">
<i class="fa fa-arrow-circle-left back"></i>
<span class="pages">1 of 1</span>
<i class="fa fa-arrow-circle-right forward"></i>
</div>
<div class="page_container">
<div class="highlight hidden"></div>
<div class="image-area"><immg src="https://dvgddacn5gars.cloudfront.net/5fkj.png?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ"></div>
</div>
</div></div>
<div class="interaction_data" style="display: none;"></div>
</div></div>
Notice in the first div element above, this text: "interaction_booted" in the class name.
This seems to be the key to what is happening. When I save the page and then load it, using one of the methods I mentioned above, I see this in that first div element (corresponding to what I pasted above):
<div id="area49254180_6" class="component interaction_component float-none clear-none hideSlideshowControls"><div role="status" class="int-prep"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
So we no longer see "interaction booted" in the class name. So anytime I open saved versions of this page, the javascript seems to be making some sort of check and is then not loading the content, and instead replaces the element along the lines of what you see in the above code snippet.
Now, I am not a developer. I have done some PHP coding and am fairly technical at this stuff for a non dev, but hey I am a guitarist first and foremost and I am definitely out of my technical league trying to figure this out...
Really curious how you experts would go about saving this sort of content for offline viewing, such that all resources are saved offline, with no need for server side rendering. If it requires some custom scripting, I could probably handle it, just need to understand the general idea.
Thanks!
Brian, what you're looking for is something called service workers. You have to setup service workers on your project to make the contents visible offline.
Service workers run on your browser and as soon as you make a Server call, your service worker will cache the response and serve it to you. Because of the server responses being cached by the browser, when there's no internet, the API calls are intercepted by the SW and the cached response is returned.
You can use this awesome plugin by Dockyard to setup service workers on your project to start with. 🙌
So I have about 20 projects to show on my website and since I don't want to create 20 HTML files for each of them, I use this script to link people to the specific projects they click on. And so the link is like: http://mywebsite.com/projects.html?option="project1"
The problem I notice is that it usually displays the first project for about 1 second or longer before it shows the project I click on, I don't know what's the cause, I don't know if it's a glitch. Is there a way to fix it?
The script and my html:
$(document).ready(function() {
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
<a href="projects.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item">
<h3>Sleep infographic</h3>
<span class="category">Motion graphics</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="images/thumb_item07.gif" />
</div>
<div id="view">view</div>
</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
</a>
HMTL of the project page:
<div class="container">
<div class="boxes" id="haivinh">
<div class="sidebar full-width">
<div class="desktop-6 tablet-12 columns">
<!--
.sidebar here is to used to apply the same CSS styles (padding, margin, font-size, and etc) applied to "left-sidebar" and "right-sidebar" templates
-->
<div class="box-info">
<h4 class="border-top">
Metro train ad</h3>
<p>The poster was made to promote the upcoming metro train system opening in Ho Chi Minh city in 2017. The idea is that our daily lives would be so much easier and more enjoyable going to work or school with Metro. </p>
</div>
<!-- // .box-info -->
</div>
<!-- // .desktop-6 -->
</div>
</div>
My guess would be that you default to showing project 1. You can tell this because your showDiv() function starts with a .hide(). As your function is not run until document.ready, you may see the initial setup for a short period before the function is run.
To fix this, make sure everything is hidden before running your js.