I'm new to spree and stuck in layouts.
I created a new application and installed spree in it.
I wanted to create a totally static home page.
What I did is I copied following files to my application views directory and edited them:
spree\layouts\spree_application.html.erb
spree\shared\_head.html.erb
spree\shared\_head.htmler.erb
I was able to display the new page but the problem is that it affected admin page as well.
What I want to do is just select a particular layout file for my frontend pages so that admin remains as it is.
Update:
I did this for now:
Copied the _head.html.erb file and edited like this:
<meta charset="utf-8">
<title><%= title %></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<%== meta_data_tags %>
<%= canonical_tag(current_store.url) %>
<%= favicon_link_tag 'favicon.ico' %>
<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen' %>
<%= yield :header_css %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'spree/frontend/all' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<%= yield :head %>
<%= yield :header_js %>
This way, I'm able to include my custom css and js
Still my question remains the same.
Related
I am having difficulty on how to properly display this like the real ones. Right, so
here's my piece of code. You can try this on your respective IDE's to view the page
because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it.
I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Login</title>
<link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-
icon">
</head>
<body>
<div id="header">
Gmail
Images
<img src="pad.png">
<img src="cs-logo.png">
</header>
<main>
<input type="search">
<img src="google-voice-search-icon.png">
<img src="googlelogo_color_272x92dp.png">
<button>Google Search</button>
<button>I'm feeling lucky</button>
</main>
<p>Google offered in: Filipino <a href="#">Cebuano</p>
</div>
</body>
</html>
The property src="" in the img tag will take the image from the local path or an URL to an image.
If you want, for example, the doodle's image you have two options:
Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
I hope this could help.
I develop ASP.Net Core 2.1 RazorPages web application. I want parametrize the the value of asp-page tag helper.
So I use following code in cshtml file. There is a del_link local variable defined in begining of file. This variable is late used as parameter for second asp-page tag helper.
#page
#{
string del_link = "/UnloadDelete";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
<a asp-page="/UnloadEdit">Details</a>
<a asp-page=#del_link>Delete</a>
</div>
</body>
</html>
ASP.Net Razor generate following HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
Details
Delete
</div>
</body>
</html>
As you can see in HTML code, asp-page="/UnloadEdit" is properly rendered to HTML code, but asp-page=#del not, it is rendered to <a href="">. How I can use local variable for asp-page tag helper in Razor Pages?
Thanks in advance.
You must pass a page name to the asp-page attribute. So what you are trying to do is not supported. If #del_link renders a relative URL, you can pass that to the href attribute instead. There may be other suitable solutions, depending on why you feel the need to use #del_link at all.
I am trying to navigate to external sites in ejs templating engine. However it is taking link in the anchor tag as one of the routes of my application so it is opening link as follows: http://localhost:3000/www.youtube.com/watch?v=gtLJEhexrxY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Results</title>
</head>
<body>
<h1>Search results for <%=term %></h1>
<% videos.forEach((video)=>{ %>
Search
<a target=_blank href="www.youtube.com/watch?v=<%=video["id"]["videoId"]%>">
<img src="<%=video["snippet"]["thumbnails"]["medium"]["url"]%>" alt="">
</a>
<div>
<h3><%=video["snippet"]["title"]%></h3>
<h4><%=video["snippet"]["publishedAt"]%></h4>
<p><%=video["snippet"]["description"]%></p>
</div>
<br>
<% }) %>
</body>
</html>
I want to navigate to youtube.com but it is navigating to localhost:300/www.youtube.com
It is solved. I added http:// prefix at the beginning. Thanks to ngearing
I followed this tutorial on sctoch.io to use ejs files but I'm looking for a main index to include the current page.
In the tutorial we will add head, header and footer inside all news pages.
But I want to write this once. For example :
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<!-- Here is that I want -->
<% include ../partials/main %>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
How can I do load the good page inside the main file when I clic on different link of my navbar ?
First of all you will have to use Express and his template engine(views),so just add header and footer in every new file you make
<% include header %>
<!-- yout html code -->
<% include footer %>
And when you render it simply say
res.render('YourNewFile');
Your header should look something like this..
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title><%- title %></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
And footer ..just close all tags ..and load some scripts if u want in it
<script src="..."></script>
</body>
</html>
I do have a small issue i can't solved despite reading on internet.
I'm learning node.js, express.js, ejs.
I create a small app that tries to display a dynamic webpage on my local server.
The code is working but not the display of the pictures! (the stylesheet works fine)
here is my index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body class="container">
<header>
<% include partials/header %>
</header>
<main>
<h1><%= title %> </h1>
<img scr="/images/logo_small.jpg" alt="logo" />
<p> Welcome to <%= title %></p>
</main>
<footer>
<% include partials/footer %>
</footer>
</body>
</html>
In the main apps i wrote:
app.use(express.static(path.join(__dirname, 'public')));
And finally i put the images in ./public/images/logo_small.jpg.
The display shows "logo" instead of the pictures. When I go this URL
http://localhost:3000/images/logo_small.jpg
Firefox shows me the image. it is frustrating!
I miss something here, but i don't see what. Any idea ?