`
useHead({
titleTemplate: (titleChunk) => {
if(titleChunk) return ${titleChunk} - Movie Site;
else {
return "Movie Site";
}
}
}
);
"Movie Site" is not being made the title of the homepage even though the above code has been written in App.vue.
I was trying to set the title of a page via useHead() in App.vue
Related
I am working on a Shopware 6 Administrative plugin but displaying product images has been a big headache. I went through shopware repositories of 'product_media', 'media', and generally all folder repositories related to media.
I have not been able to decipher how image linking works since I can not get hold of the exact folder names.
How then do I go about this. Note: I have been able to get correct image names and relevant image data like id, folder id etc.
Below is my module/component idex.js file codes
import template from './images-page.html.twig';
const { Component, Context } = Shopware;
const { Criteria } = Shopware.Data;
Component.register('images', {
template,
inject: ['repositoryFactory', 'mediaService', 'acl'],
metaInfo() {
return {
title: 'images'
};
},
computed: {
/**productMediaRepository() {
return this.repositoryFactory.create(this.product.media.entity);
},*/
productRepository() {
return this.repositoryFactory.create('product');
},
mediaFolderRepository() {
return this.repositoryFactory.create('media_folder');
},
mediaRepository() {
return this.repositoryFactory.create('media');
},
rootFolder() {
const root = this.mediaFolderRepository.create(Context.api);
root.name = this.$tc('sw-media.index.rootFolderName');
root.id = null;
return root;
},
logRep(){
console.log(this.productRepository);
// console.log(this.mediaFolderRepository);
// console.log(this.mediaRepository);
// console.log(this.rootFolder);
}
},
methods: {
logProducts(){
const criteria = new Criteria();
this.productRepository
.search(criteria, Shopware.Context.api)
.then(result => {
console.log(result[0]);
});
},
logMediaFolders(){
const criteria = new Criteria();
this.mediaFolderRepository
.search(criteria, Shopware.Context.api)
.then(result => {
console.log(result);
});
}
},
created(){
this.logMediaFolders();
}
});
here's the twig template (nothing really here)
<sw-card title="Watermark">
<img src="" alt="Product Image" />
</sw-card>
The media elements of the products are associations that are not loaded automatically, but you can configure the criteria, so that those associations will be loaded directly when you fetch the products. Refer to the official docs for detailed infos.
In you case that means to load the cover image / or all product images, you would have to adjust the criteria you use for fetching the products the following way
logProducts(){
const criteria = new Criteria();
criteria.addAssociation('cover.media');
criteria.addAssociation('media.media');
this.productRepository
.search(criteria, Shopware.Context.api)
.then(result => {
console.log(result[0]);
});
},
Then to link to the cover image you can use:
<sw-card title="Watermark">
<img src="product.cover.media.url" alt="Product Image" />
</sw-card>
You find all the media elements of the product as an array under product.media and can also use product.media[0].media.url to link to those images.
I'm pretty new to Vue and Snotify, so please forgive the newb question. I've scanned the docs, and nothing jumps out at me.
Here's the deal: I have a Vue component that deletes files, using a Snotify confirm box. Like this:
destroy() {
this.$snotify.confirm('', 'Delete File?', {
buttons: [
{
text: 'Yes',
action: (toast) => {
axios.delete([API endpoint])
.then(response => {
// destroy the vue listeners, etc
this.$destroy();
// remove the element from the DOM
this.$el.parentNode.removeChild(this.$el);
});
this.$snotify.remove(toast.id);
}
},
{
text: 'No',
action: (toast) => {
this.$snotify.remove(toast.id)
}
}
]
})
}
The problem is that if you click the "Delete" button a second time, another "Delete File?" confirmation appears above the first. Expected behavior is that the second click make the confirmation go away.
Any help you can offer would be greatly appreciated.
this.$snotify.confirm() returns the toast info, which includes an ID that could be passed to this.$snotify.remove() for removal:
export default {
methods: {
destroy() {
if (this._toast) {
this.$snotify.remove(this._toast.id, true /* immediate */)
}
this._toast = this.$snotify.confirm('', 'Delete File?', {/*...*/})
}
}
}
demo
I have a Nuxt website/blog where I'd like to render some job ads on one particular page so not changing the route structure and creating children pages for each job posted.
This pen gives an idea of what I'm trying to do:
<div id="ja-jobs-widget"></div>
<script>
var _jaJobsSettings = {
key: "bbhc36kiqfoudkoc4yd7qaihf4",
jobListSettings: {
titleIsLink: false
},
jobDetailsSettings: {
showBulletPoints: false
},
applicationFormSettings: {
useExternalApplicationForm: true
}
};
</script>
<script src="//jobadder.com/widgets/v1/jobs.min.js"></script>
I am working on creating a Polymer app for a pet project, using the Polymer Starter Kit, and modifying it to add horizontal toolbar, background images, etc. So far, everything has worked fine except the links in the app-toolbar do not update the "view" when I click on them.
All my debugging so far points me in the direction of the "page" property. I believe this is not getting updated or is null, causing the view to default to "about" (which is View-2 as per the starter kit) as specified in the _routePageChanged observer method.
I tried using the debugger on DevTools on Chrome, but being new to this, I'm not very clear if I did it correctly. I just kept going in and out of hundred of function calls.
I am copying relevant parts of the app-shell.
Please help or at least point me in the right direction; I've been trying to fix this since 2 days. Thank you!
<app-location
route="{{route}}">
</app-location>
<app-route
route="{{route}}"
pattern=":view"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" class="main-header" condenses effects="waterfall">
<app-toolbar class="logo"></app-toolbar>
<app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}">
<paper-tabs selected="[[selected]]" attr-for-selected="name">
<paper-tab>Home</paper-tab>
<paper-tab>About Us</paper-tab>
<paper-tab>Pricing</paper-tab>
</paper-tabs>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="home"></my-view1>
<my-view2 name="about"></my-view2>
<my-view3 name="pricing"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
<script>
class MyApp extends Polymer.Element {
static get is() { return 'my-app'; }
static get properties() {
return {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
wideLayout: {
type: Boolean,
value: false,
observer: 'onLayoutChange'
},
items: {
type: Array,
value: function() {
return ['Home', 'About', 'Pricing', 'Adults', 'Contact'];
}
},
routeData: Object,
subroute: String,
// This shouldn't be neccessary, but the Analyzer isn't picking up
// Polymer.Element#rootPath
// rootPath: String,
};
}
static get observers() {
return [
'_routePageChanged(routeData.page)',
];
}
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'about';
console.log('_routePageChange');
// Close a non-persistent drawer when the page & route are changed.
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
}
_pageChanged(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl(page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
_showPage404() {
this.page = 'view404';
}
_onLayoutChange(wide) {
var drawer = this.$.drawer;
if (wide && drawer.opened){
drawer.opened = false;
}
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
Here's a snapshot of the page when I click on the "Home" link.
Snapshot of the page
I have fixed the same issue on my app, page observed functions like:
static get properties() { return {
page:{
type:String,
reflectToAttribute:true,
observer: '_pageChanged'},
...
_pageChanged(page, oldPage) {
if (page != null) {
if (page === "home" ) {
this.set('routeData.page', "");
} else {
this.set('routeData.page', page);
}
.......
}
}
Honestly, I am still trying to find the better solution. Because I have users page and I could not manage to able to indexed at google search results. This only keeps synchronized the iron-pages and address link.
Here is a snippet of view code. Why won't it work without the m.redraw()? If I don't call that, the route changes and the login controller loads, but nothing is rendered into the DOM.
home.view = function(ctrl) {
console.log('in home view');
if (!mo_portal.logged_in) {
console.log('redirecting to login');
m.route("/login");
m.redraw();
return;
}
return m("div","HOME");
}
Changing route will always trigger a redraw. If you're not seeing the login page view without manually calling m.redraw it's probably down to bugs in the login controller or view that happen during the route change redraw - bugs whose failure conditions are reset when you call m.redraw again.
Here's an extension of your code with a login view and controller. mo_portal.logged_in is set to true or false depending on whether the user is one in the usersList or not, so we can test success and failure.
I took out the m.redraw (I also put the redirect logic in the home controller) and everything works fine.
var usersList = [
'john',
'alexia'
];
var mo_portal = {
username : '',
logged_in: false
};
var login = {};
login.controller = function(){
this.username = function( input ){
if( arguments.length ){
mo_portal.username = input;
mo_portal.logged_in = !!~usersList.indexOf( input );
}
return mo_portal.username;
};
};
login.view = function(ctrl){
console.log('in login view');
return [
m( 'input', { oninput : m.withAttr( 'value', ctrl.username ), value : ctrl.username() } ),
m( 'a[href=/home]', { config : m.route }, 'Login' )
];
};
var home = {};
home.controller = function(){
if (!mo_portal.logged_in) {
console.log('redirecting to login');
m.route("/login");
}
};
home.view = function(ctrl) {
console.log('in home view');
return m("div","HOME");
};
m.route( document.body, '/login', {
'/login' : login,
'/home' : home
} );
<script src="https://rawgit.com/lhorie/mithril.js/next/mithril.js"></script>
I think that's not how mithril is going to be used. Mithril does not expect a view update (aka redraw) during ongoing view construction.
I suppose you should do the route-change in the related controller.
Keep in mind, that a view is rendered evertime the page changes somehow. You probably don't want to check the login state evert time.