Is there a possibility to use Javascript in deepviews that will work on Safari? Initial testing did not run the script both inline and with src.
Jackie from Branch here.
Unfortunately, Javascript is not allowed in Deepviews. Before rendering the template, we sanitize the markup of Javascript for security reasons. This includes script tags and event attributes on tags. To learn more about customizing your Deepview template, please see our documentation here.
Cheers,
Jackie
Related
I'm using quasar and vue3 to build an SSR app
In chrome developer mode when I visualize the generated HTML, I have some Vue components not compiled to raw HTML like:
<body class="desktop body--light" data-server-rendered>
<div v-for="deal in clientssList" :key="client.Id">
<CLientItemSmDown :ClientModel="deal"></CLientItemSmDown>
</div>
is this normal, isn't SSR supposed to return raw HTML so bots can read it?
Saw this question last time already (can't find it back).
But no, CLientItemSmDown is a valid web-component and don't need to be transformed into a built-in HTML tag like input, div etc...
There is maybe an option to convert it down the road to some HTML, but I don't think that it's necessary and it may not be easily done if it's not supported by default.
That page may be quite interesting regarding Vue + Web-components.
You may raise a Github issue or join their Discord.
The TLDR being that it's fine to let it as is IMO.
I want to use Polaris css components for my shopify app. I have go through their document https://polaris.shopify.com/components/get-started#navigation. As mentioned there I have include their css and html code for a component but some components are not working functionally like Date picker I have put html code on my page but I am not able to change month, select date etc.
I think I have to load js for get that working but I didn't found any js link in their document.
Can you please help me out?
If you are using the CSS-only version, we do not provide any JS. The CSS version is meant for someone who does not want to use React and is willing to write the scripts required for any interactive components. If you are using the React components, you will not find everything; as you've identified, this is not exactly like Bootstrap or similar frameworks. This is a more selective set of components that encompass patterns that have been established for Shopify's own applications. We will probably add more components in the future, though; if there's something you feel is obviously missing, please feel free to leave an issue.
As the title implies, I need solid SEO and thus I need to have all the HTML loaded on my site on initial load. However, because the backend is written in PHP, and because it would be more work to write my Vue components with the server in mind, I don't want to use server-side rendering (SSR).
That leaves me with the option to send HTML over the wire, the "old school" way. What I am thinking of doing is writing each page's HTML like normal, but make one of the root html elements a Vue element in order to "upgrade" it. So the initial load downloads the finalized HTML, with all the data (tables, lists, etc already populated), but then after all the scripts are loaded, javascript can take over to make things easier and give a better UI experience. This poses a few questions, however:
Am I limited to a single component, the root? It'd be nice to still have many sub-components that would each have their own state. Perhaps inline templates can be used somehow?
Vue templates have their own templating system, like the mustache braces for displaying variables {{ myVar }}. Will I not be able to use them? The one way I can think of is to create a Vue template (that can be loaded from an external script) that is identical to the part of the HTML that it "takes over". The downside is that I'd have to maintain that component both in the original HTML and in the vue template.
Are there any good examples of what I'm trying to accomplish here?
Edit: I want to clarify that I'm aware I can put in various components here and there throughout the page. This still poses the question of how to make those components already start out rendered. Better yet would be to turn the whole page into Vue, much like an SPA.
I need solid SEO and thus I need to have all the HTML loaded on my site on initial load.
This is not entirely true. Google (80% of search traffic) easily parses SPAs now, so SSR purely for SEO isn't required anymore.
But to answer your question in general, you should check out Laracast's Vue.js series. They go in-depth on how to use PHP with Vue.js (including templating and variables).
I'd ask what it is you want to achieve with Javascript/Vue.js in your page. If everything is already rendered in PHP, does Vue provide a simple UX enhancement or takes over most of the page's heavy lifting (navigation, etc.)? If you have no reactive data and want Vue to simply be a controller for rendered components, then knock yourself out, although it might be approaching an 'overkill' scenario.
Have you looked into Prerender SPA Plugin ( https://github.com/chrisvfritz/prerender-spa-plugin )?
It is offered in the Vue documentation as a viable alternative to server side rendering ( https://v2.vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering )
Recently I've developed a multi-page application using Vue, here is how i tried to solve the SEO (Maybe this can help you ):
Htmls of header and footer (and other main common components) are packed to the page.html(eg: home.html, search.html).
Script and style are of header and footer imported in page.js(eg: home.js, search.js).
Add div.seo-zone to page.html's div#app, which includes the main SEO data(using some h1,h2,p,div and so on), and add
.seo-zone {
display: none;
}
in your css.
4. Make sure your app's root component's el is '#app'(each page's main content can be a Vue app).
Develop your app as usual.
After Vue rendered, the div.seo-zone will be replaced with your Vue components (although it can not be seen)
I am currently building a WP site with the Optimizer theme. It's an academy website, using the Sensei plugin. I am having an issue with the wrappers, and although they wrote this article on how to fix it, I can't figure it out.
Hopefully I'm saying this right.
Wordpress hooks are triggers that allows you to manipulate a theme or plugin. You can remove, add or replace code on certain Worpress events/calls, without changing the original code.
There are two kind of hooks. Action hooks to manipulate the Worpdress code. Filter hooks to manipulate the output of Wordpress (text, data, links etc.)
You can use hooks by creating Your own functions in the functions.php file of your theme.
The Sensei article:
Your theme creates a wrapper with html divs around the content. The opening divs are after "getheader();" The closing divs are before "getsidebar();", if there is no sidebar then before "getfooter();"
Sensei puts a wrapper around his content as well. This can mess up your theme wrapper.
To fix this: Sensei has actions hooks to replace the wrapper of Sensei by your own theme wrapper.
I'm newbie to Bootstrap 3, but I noticed that Bootstrap require Javascript even if it's not necessary, e.g. dropbown menu doesn't work if js is disabled. Is there any good reason to prefer js over CSS?
I think cause Javascript and CSS are different and can't replace each other.
In CSS you can't do for example calculations, DOM manipulation, react on click and other live events. Javascript can't style your HTML, have media queries etc. see also: Performance: Pure CSS vs jQuery
Yes, i know there are alternative for everything, see:
Can I do this in pure CSS instead of using jQuery?, Can I have an onclick effect in CSS?, etc .... but it is not the same.
What's your problem with javascript? in the first place? Do you have some requirements like: "should work with javascript disabled". Should your site work with this requirement or should it be exactly the same. What are you alternatives for javascript disabled? basic CSS? full css3? For me it seems realistic to prevent errors with javascript disabled but not expect all work the same. In the case of a dropdown you could consider a alternative navigation structure.