How can I show the error messages as a modal / popup?
/magento/module-ui/view/frontend/web/template/messages.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div data-role="checkout-messages" class="messages" data-bind="visible: isVisible(), click: removeAll">
<!-- ko foreach: messageContainer.getErrorMessages() -->
<div role="alert" class="message message-error error">
<div data-ui-id="checkout-cart-validationmessages-message-error" data-bind="text: $data"></div>
</div>
<!--/ko-->
<!-- ko foreach: messageContainer.getSuccessMessages() -->
<div role="alert" class="message message-success success">
<div data-ui-id="checkout-cart-validationmessages-message-success" data-bind="text: $data"></div>
</div>
<!--/ko-->
</div>
They are set after submitting the checkout, if e.g. the shipping address isn't valid (via ajax).
Related
I am creating a News Blog Website. I have multiple cards in my home page showing news blog.
The structure of card are as follows:-
<div class="container">
<div class="row">
<!-- Blog entries-->
<div class="col-lg-8">
<!-- Featured blog post-->
<div class="card mb-4">
<!-- This is the latest trending news so I created this card to be big -->
</div>
</div>
<div class="row">
<!-- Now here I want 2 blog news in 1 row -->
<div class="col-lg-6">
<!--- Blog post-->
<div class="card mb-4">
<!-- 1st news -->
</div>
<div class="card mb-4">
<!-- 2nd News -->
</div>
</div>
<div class="col-lg-6">
<!--- Blog post-->
<div class="card mb-4">
<!-- 1st news -->
</div>
<div class="card mb-4">
<!-- 2nd News -->
</div>
</div>
</div>
Pictorial structure of my website is as shown here
Pictorial representation of my website
I want to add the latest last data entered in my mongoDB to go inside the big card (featured post) and rest all to go in the smaller cards in reverse order(the last data entered in database to be showed first).
My blog data in DB is as shown below
const post = new Post({
date: req.body.postDate,
title: req.body.postTitle,
content: req.body.postBody,
videoLink: req.body.postLink,
imgLink: req.body.postImgLink
});
post.save(function(err) {
if (!err) {
res.redirect("/");
}
});
and the data is loaded in home page as shown below
<% posts.forEach(function(post) { %>
<div class="/card mb-4">
<img class="card-img-top" src="<%= post.imgLink %>" alt="..." />
<div class="card-body">
<div class="small text-muted">
<%= post.date %>
</div>
<h2 class="card-title h4">
<%= post.title %>
</h2>
<p class="card-text">
<%- (post.content.substring(0, 250) + "..."); %>
</p>
<a class="btn btn-primary" href="/posts/<%= post._id %>">Read more →</a>
</div>
</div>
<% }); %>
Please help me, as I am new and trying to learn Full Stack Development. Sorry for my English and if my question sounds silly to you.
I've got 2 panels (right and left).
Panel-right has 2 tabs, and one of it, is for displaying notifications.
How can I attach infinite scroll to this? because is not working as it does in any other page. The event handler for "infinite"
$$('.infinite-scroll').on('infinite', function () {
never gets fire as it does in the index page (which is behind the panel)
This is the html
<!-- Views -->
<div class="views">
<div class="panel-overlay"></div>
<!-- =========== PANEL IZQUIERDO ============ !-->
<div class="panel panel-left panel-cover">
</div>
<div class="panel panel-right panel-cover">
<div class="toolbar tabbar">
<div class="toolbar-inner">
Perfil
Notificaciones
</div>
</div>
<div class="tabs">
<div id="tab-perfil" class="tab active">
<div class="content-block">
</div>
</div>
<div id="tab-notificaciones" class="tab page-content infinite-scroll ">
<div class="list-block">
<ul></ul>
</div>
</div>
</div>
</div><!-- panel panel-right panel-cover !-->
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<div class="pages navbar-fixed toolbar-fixed">
<!-- =========== page-index ============ !-->
<div class="page page-index" data-page="index">
I have a form that is validated using Bootstrap Validator http://1000hz.github.io/bootstrap-validator/.
You don't see the form at first (display: none). When you get to the step where you fill out the form, the Submit button is enabled, although the form is not valid.
However, if I display the form right away, the Submit button is disabled until the form is valid, as I want it to be. Does anyone have idea why is this happening and how to get it to work?
<div id="step0">
Some code here that is visible in the first step
<div class="row">
<button type="button" class="btn btn-primary" onclick="step1();">Go to step 1</button>
</div>
</div>
<div id="step1" style="display: none;">
<form id="forma-klijenta" data-toggle="validator" method="post" action="test.php">
<div class="row">
<div class="col-md-8 col-sm-12 form-right">
<h3> Lični podaci </h3>
<div class="row">
<div class="col-xs-12 form-group col-sm-6">
<input autocomplete="off" class="form-control" id="ime" data-minlength="2" name="ime" placeholder="Ime" required type="text" value=""
pattern="^[A-ZŠĐČĆŽa-zšđčćž]([-' ]?[A-ZŠĐČĆŽa-zšđčćž])+$"data-error="Ime je obavezno. Dozvoljeni specijalni karakteri su - i '." />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="row form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- Kraj forme za unos podataka -->
</div>
This is how I worked around this:
Removed style="display: none;"
Added jQuery
$(document).ready(function(){
$("#step1").hide();
});
I have a website built in php codeigntier framework.
I have index page that's dynamically loading "li" elements and each "li" element has "a" tag which should display some item information via fancybox. Sometimes it is working, but sometimes it opens fancybox window, but instead of content it shows : "The requested content cannot be loaded message on some items".
Here is the code and after it i will explain what i did here:
index.php view (display page)
<li class="col-1-3">
<h3>
<?=$itm['name'];?>
</h3>
<figure class="full-width">
<a id="inline" href="#data-<?=$itm['code']?>" class="inset-border zoom-hover" data-zoom-hover-title="Detalji">
<img src="/slike/<?php echo $itm['img_name']?>" data-2x="/slike/<?php echo $itm['img_name']?>" width="124" height="150" alt="" />
</a>
</figure>
<p>
<b>Cena</b>: <?=$itm['price'];?> <br/>
<b>Sifra</b>: <?=$itm['code'];?><br/>
<b>PDV</b>: 19%
</p>
<b>Kolicina</b>: <input type="qty" class="qty-<?php echo $itm['id'];?>" name="qty" onkeypress="return isNumberKey(event)" size="3" maxlength="3"/>
<?php if($is_logged){?>
<p>
<a href="#_" class="buyButton big" name="<?php echo $itm['name'] ?>" id="<?php echo $itm['id'];?>" >
<span>Dodaj</span>
<i class="icon-plus color-blue"></i>
</a>
</p>
<?php }else{ ?>
<p>
<a id="loged" href="$_" class="infoButton big">
<span>Info</span>
<i class="icon-info"></i>
</a>
</p>
<?php } ?>
<div style="display:none">
<div id="data-<?=$itm['code']?>">
<figure id="images" class="alignleft">
<img src="/slike/<?php echo $itm['img_name']?>" data-2x="/slike/<?php echo $itm['img_name']?>" width="250" height="350" alt="" />
</figure>
<h3><?=$itm['name']?></h3>
<p><b>Cena Artikla: </b> <?=$itm['price']?> RSD<br/>
<b>Opis artikla: </b><?=$itm['descr'];?></p>
</div>
</div>
<!--<div style="display:none">
<div id="log">
<p>Morate biti ulogovani da bi ste kupili artikal</p>
</div>
</div>-->
</li>
So, dynamically adss data- ITEMID to every li item, and below
<div style="display:none">
<div id="data-<?=$itm['code']?>">
<figure id="images" class="alignleft">
<img src="/slike/<?php echo $itm['img_name']?>" data-2x="/slike/<?php echo $itm['img_name']?>" width="250" height="350" alt="" />
</figure>
<h3><?=$itm['name']?></h3>
<p><b>Cena Artikla: </b> <?=$itm['price']?> RSD<br/>
<b>Opis artikla: </b><?=$itm['descr'];?></p>
</div>
</div>
has same ITEMID dynamically added.
So, by clicking on that , hidden info should display in fancybox... and it is working, sometimes.. sometimes not...
Here is my js file:
$("a#inline").fancybox({
'hideOnContentClick': true
});
which is, of course, included in header of page, as fancybox.js file...
Any one has solution or suggestion ?
Thanks in advance.
p.s. you can visit poljoprivrednaapoteka.com and see the problem, just try clicking on few items, and the problem will pop..
My data is spread all over so I can't keep this format :
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">
<p itemprop="description">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">
</div>
</div>
Like you see in the code below the first thing on the page is the category path which has to be inside Offer schema than I have the image and the title which belong to Product than I have eligibleQuantity that again belongs to the Offer and so on....
So I added the :
<div itemscope itemtype="http://schema.org/Product">
In the beginning of the page and closed it at the end and than whenever I had an element that does not belong to the product schema like "eligibleQuantity" for example I would do this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{L_901}: <span itemprop="eligibleQuantity">{QTY}</span><br />
</div>
The problem is I don't know if this is the correct way to do it and can't figure another way. I also get the "Warning: Incomplete microdata with schema.org."
Here is a link to the page :
https://www.pchounds.com/item.php?id=82627#.UTi7kRz_mSp
and below is some code from the page so you can have an idea what I did. Thank you.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="breadcrumb"> {L_041}:<span itemprop="category"> {TOPCATSPATH}</span> </div>
...........................................................................................
!-- IF B_HASIMAGE -->
<div class="span3" style="text-align:center"> <img class="img-polaroid" itemprop="image"
src="{SITEURL}getthumb.php?w={THUMBWIDTH}&fromfile={PIC_URL}" border="0" alt="title" align="center"><br>
<h1 itemprop="name" style="line-height:24px;">{TITLE}</h1>...........................................................................................
<!-- IF QTY gt 1 -->
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{L_901}: <span itemprop="eligibleQuantity">{QTY}</span><br />
</div>
<!-- ENDIF -->
<!-- IF B_HASENDED -->
{L_904}<br />
<!-- ENDIF -->
<!-- IF ITEM_CONDITION -->
<b> {L_1036}:</b> <span itemprop="itemCondition">{ITEM_CONDITION}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_MANUFACTURER -->
<b> {L_1037}:</b> <span itemprop="manufacturer">{ITEM_MANUFACTURER}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_MODEL -->
<b> {L_1038}:</b> <span itemprop="mpn">{ITEM_MODEL}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_COLOUR -->
<b> {L_1039}:</b> <span itemprop="color">{ITEM_COLOUR}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_YEAR -->
<b> {L_1040}:</b> {ITEM_YEAR}<br />
<!-- ENDIF -->
</small>
offer must have a price, <span itemprop="price"> must be followed by the value of the price but is not and there are multiple Offers when there should just be one. Looking at the current test results from Google's structured data testing tool there are 5 errors, each states the price is missing.
The problem seems to be that each part of the offer has a separate `http://schema.org/Offer' at the start - so it is expecting 5 prices, one for each of the 5 offers.
What you need to do is declare http://schema.org/Offer' **once**, for example an extra` which remains open until all offer values are added.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="breadcrumb"> Item category:<span itemprop="category"> All > Electronics > Audio > Audio Components > Speakers</span>
</div>
<div class="row">
<div class="span3" style="text-align:center"> <img class="img-polaroid" itemprop="image" src="https://www.pchounds.com/getthumb.php?w=120&fromfile=uploaded/82627/82627.jpg" border="0" alt="title" align="center"><br>
</div>
</div>
</div>
<div class="span5">
<h1 itemprop="name" style="line-height:24px;">Creative Labs Speaker GigaWorks T20 Series II Systems 2.0 EPS complian</h1>
<div><!-- schema.org/Offer removed -->
<em>
<p><small>Buy Now:
<span itemprop="price"><b>108.91</b> USD</span></small></p>
</em>
</div>
<div class="span5">
<h1 itemprop="name" style="line-height:24px;">Creative Labs Speaker GigaWorks T20 Series II Systems 2.0 EPS complian</h1>
<div> <!-- removed http://schema.org/Offer -->
<em>
<p><small>Buy Now:
<span itemprop="price"><b>108.91</b> USD</span></small></p>
</em>
</div>
Shipping fee: <b>8.00</b> USD<br />
<small>Ends within:
<span id="ending_counter"><span class="errfont">closed</span></span><br />
<p> Seller location: United States<br />
<div> <!-- removed http://schema.org/Offer -->
<b>Payment methods:</b><span itemprop="acceptedPaymentMethod"> PayPal</span> </p>
</div>
</small>
...
</div>