how to add script in <head> section of prestashop - service-worker

how to add following code
<script src="https://clientcdn.pushchant.com/core/rp.js"></script> <script>
_pe.subscribe();
</script>
in head section of prestashop 1.7
And also tell me how to add service-worker.js in root directory of prestashop.
or
can be add service-worker.js other than root directory

use this for added css
$this->context->controller->registerStylesheet(css_key,css_file_src, ['media' => 'all', 'priority' => 150]);
use this for added js file
$this->context->controller->registerJavascript(js_key, js_file_src, ['position' => 'head', 'priority' => 150]);
set position head to load js in header tag
or
set position bottom to load js in footer.
here css_key,j_key is a identifier to these css,js files.

Related

Cannot get styles to load with Rails 5 & vue2-dropzone

I'm trying to get vue2-dropzone (version 3.0.3) to cooperate nicely with my Rails 5.1.4 app. I've added Dropzone to to my form and loaded the module but somehow I am not able to see the default styles. I don't think this is a problem with vue2-dropzone as much as with how webpacker loads the css.
My current setup:
application.js
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'
const myForm = new Vue({
el: '#multistep-form',
components: {
vueDropzone: vue2Dropzone
},
data: function () {
return {
dropzoneOptions: {
url: 'https://httpbin.org/post',
thumbnailWidth: 150,
maxFilesize: 5,
dictDefaultMessage: "<i class='fa fa-cloud-upload'></i> Drop files here to upload",
headers: { "My-Awesome-Header": "header value" }
}
}
}
and my _form.html.erb partial:
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions">
</vue-dropzone>
I see that the Dropzone form is loaded. However, I cannot see the default style. I see the following in the console when I run :
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue2-dropzone/dist/vue2Dropzone.css:
[0] ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/Users/myuser/Documents/apps/myapp/.postcssrc.yml"}}!./node_modules/vue2-dropzone/dist/vue2Dropzone.css 30.5 kB {0} [built]
I don't think it's an error since it says webpack: Compiled successfully. but I do think that webpack isn't loading vue2Dropzone.css for some reason. How should I configure webpacker to load that css file?
If I put the css file manually into my app/assets/stylesheets/ then it works without a problem.
Thanks in advance!
I think your CSS file should be loaded in CSS and not in js.
Here's how I'm doing it in my project.
Create application.css in packs folder and import into the Rails layout file, application.html.erb
<%= javascript_pack_tag 'application' %>
#import 'vue2-dropzone/dist/vue2Dropzone.css'
If you do this though, you will get an error because #import is a sass syntax. So you will need to do some extra webpack config.
You will find this post useful if you want to use css inside the application.js file.
https://medium.com/#mayorsan/rails-angular-webpacker-gem-like-a-pro-7cf40a588ab9

load json file from assets with javascript, Rails 5

I'm using a javascript cdn and part of the requirements to use this particle.js is to load a json file from the assets directory. This is what my home.html.erb looks like.
<div class="fluid-container" id="particles-js">
<h1>Hello This is a test for particles.js</h1>
<p>Well does it work?</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/particles.js#2.0.0/particles.min.js">
</script>
<script>
particlesJS.load('particles-js', 'assets/particles.json', function(){
console.log('particles.json loaded...');
});
</script>
I also created a particles.json at /app/assets/particles.json
The result in the console is:
particles.js:1539 GET http://localhost:3000/assets/particles.json 404 (Not Found)
Where should I actually put the particles.json file and how should I call it?
If you want to show the particles.js from Asset Pipeline, you should use <%= asset_path 'particles.json' %> and choose one directory:
app/assets
lib/assets
vendor/assets
Or just put files into a public directory (showing without assets precompile):
public/yourfolder/particles.json
http://localhost:3000/yourfolder/particles.json

How to write a url to another page in webpack2

I am using html-webpack-plugin to generate my html page for entry file. I don't want to care where my page output. It may be difference from source file oganization.
src
a
a.html
b
b.html
a.html
to b
I'm not sure I understand the question. In addition to adding a reference of your bundle to the generated a.html, do you also want generated a.html to refer to b.html.
I would use a top html template which will include a reference to your bundle like index.html.
Then you could use the raw-loader to just copy over a.html and b.html:
{
test: /\.html$/,
loaders: ['raw-loader'],
exclude: path.join(__dirname, './index.html')
}

ckeditor inline edit removes script tag

We are using ckeditor inline edit in our asp.net mvc application. It removes the script tag when rendering the content. Following is the script we are trying to add in the source mode and save it to the database:
<script type="text/javascript" language="javascript">
$(function() {
document.oncontextmenu = function() { alert('Right click disabled for security reasons!!') ;return false;}
});
</script>
It adds fine to the database and when rendering the content back to the webpage, it removes the script tag.
Below is the image where I was able to add the script and save:
Below is the image where it removed the script when rendering back the page after save:
Following is the code i am using in my page to render the saved content:
<div id="content_editable" contenteditable="true">#Html.Raw(Model.PageContent.ToString())</div>
When i remove Html.Raw, it displays the script as the text in the page, but I need to have the script only in the source mode. I also have allowedContent = true in my config.js of ckeditor.
Please suggest how to handle this?

jquery bubble popup Can not load jquerybubblepopup-themes

.I want to use jquery bubble popup to create a bubble.
I read that the folder “jquerybubblepopup-themes” should be copied in the root of my website.
Also, I have a jsp that isn't directly under the root of my website, but under "mywebsite/WEB-INF/jsp/admin/myfile.jsp". It contains this javascript code :
<script type="text/javascript">
$(document).ready(function(){
$('.infoTip').CreateBubblePopup({
themeName: 'black',
themePath: 'jquerybubblepopup-themes'
});
});
</script>
I read that in "themePath", the relative path of "jquerybubblepopup-themes" should be set.
In my case, "jquerybubblepopup-themes" can't be loaded, how could I modify themePath value so that the file "jquerybubblepopup-themes" will be loaded ?
Thanks in advance
You should see errors in the browser console, ther you can see where it is trying to search for the themes (path), and adjust the path accordingly

Resources