I purchased a theme for my prestashop site. It has an imageslider on the homepage, but it doesn't show on mobile. Here is the code for the hook:
/mysite/themes/mytheme/templates/index.tpl
{if $page.page_name == 'index'}
{block name='top_column'}
<div id="top_column" class="">
{hook h='displayTopColumn'}
</div>
{/block}
{/if}
even though this is editing the module directly which probably shouldn't be done, I thought I could comment out this line so that the image slider would show on mobile, but no luck..
/mysite/modules/ps_imageslider/ps_imageslider.php
// Disable on mobiles and tablets
//$this->disableDevice(Context::DEVICE_MOBILE);
Any suggestions?
Check the Module (listings) page...
Click the down arrow to show module options..
& check if the module is disabled by default on mobile!?
Related
I'm using Vue and Cypress. I have a page with logo that redirects to the home page.
Code:
<template>
<div>
<div class="text-center" id="app-header">
<a href=".">
<img src="../assets/logo.png" style="width: 128px; height: 128px;"/>
</a>
<h1 class="mb-3" style="font-weight: bold;">TITLE</h1>
</div>
<view id="app-body"/>
</div>
</template>
Now I want to check if clicking the image, actually redirects to the home page (my app consists of only one main page). I could check if the url is the url of the home page but since you are already inside the home page, I don't feel like it's a good test. How can I test that the url has been redirected to the home page, instead of just check if I'm currently looking at the home page?
It sounds like you want to spy on the request made to the homepage URL and make sure it was successful. I just checked this and it works for me. You may need slight modifications like changing the logo's id and the path of the cy.intercept to match your app. Here are the steps:
cy.intercept requests going to the homepage URL and give them an alias.
Click the logo.
Use the alias to check that the request to the homepage URL was successful.
Any other checks you might want to do, like cy.location or checking for various homepage elements to make sure that the redirect really loaded your homepage successfully.
it("clicking logo reloads/redirects to homepage", () => {
cy.intercept("/app/home").as("homepage");
cy.get("#logoThatRedirectsToHomepage").click();
cy.wait("#homepage").its("response.statusCode").should("eq", 200);
});
After a successful login, it is navigated to the dashboard URL. From that menu, links aren't working even though URL is changing in the address bar. router link in the menu is working when we forcefully do a page reload in the browser. otherwise, nothing is happening. There is no error in the console as well. The code is given below.
login navigation which works currently
this.usermanagementService.login('login', {username: userName, password})
.subscribe(message => {
this.jwt.saveToken(message.data.token);
if (window.localStorage.getItem('locale') === null) {
window.localStorage.setItem('locale', 'en');
}
this.router.navigate(['/dashboard']);
// More lines which handles the error section
The app menu html
<div *ngIf="m.submenus?.length > 0" class="collapse" id="{{ m.name }}" aria-expanded="false">
<ul class="flex-column pl-2 nav submenu-dark">
<li *ngFor="let secondlevel of m.submenus" class="nav-item">
<a class="nav-link collapsed text-truncate" routerLink="{{ secondlevel.slug }}"><span>{{ secondlevel.name }}</span></a>
</li>
</ul>
</div>
Currently routerlink works after we do a forceful redirect instead of angular router navigation. how to fix it?
Put the navigation URL in if a condition or in else condition.
Or another problem is your menu component did not get which user is login, so you should try event emit when user login and subscribe into menu component and set condition related to login user.
Fixed the issue with the following changes in app.component
<app-header></app-header>
<div *ngIf="router.url !== '/login'; else loginTemplateName" id="wrapper" class="toggled container-margin-fix">
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
<ng-template #loginTemplateName>
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</ng-template>
Inside the app-menu and app-footer there is an *ngIf checking whether it is not the login url. We need to add app-menu container in both cases in the app.component.html then only it will work eventhough it is hidden inside app-menu. Earlier it was just <router-outlet> only for the login route in the aapp.component.html
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}
I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.
So I've seen the question asked a couple of times and eric martin answers with this:
I did the same thing on a site I'm building. I just created different content for each modal and gave each one a unique ID. So my content looked something like:
<a id='help'>HELP CONTENT</a>
<a id='about'>ABOUT CONTENT</a>
<a id='options'>OPTIONS CONTENT</a>
<div id='modal_help'>HELP CONTENT</div>
<div id='modal_about'>ABOUT CONTENT</div>
<div id='modal_options'>OPTIONS CONTENT</div>
Then in my JS, I have:
$('a').click(function (e) {
e.preventDefault();
$('#modal_' + this.id).modal({OPTIONS});
});
Hope that helps.
So, looking at the modal example demo:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
</div>
I don't understand how to call a 2nd modal box on the same page. I know this is a newbie question, but it's confusing the heck out of me.
Thanks!
It would be more helpful to have a real example (simplified) of what you are trying to do. But, going with the demo code you provided, you could do the following:
HTML:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<!-- added id -->
<a href='#' id='osx-modal' class='osx'>OSX Modal</a>
<!-- new link for second modal -->
<a href='#' id='second-modal' class='osx'>Second Modal</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
<!-- content for second modal -->
<div id="second-modal-content">
contents of second modal
</div>
</div>
JavaScript:
$('a.osx').click(function (e) {
e.preventDefault();
$('#' + this.id + '-content').modal({OPTIONS});
});