I am new to programming, just completed RailsTutorial and now am trying to build a Pinterest-type site using Rails.
I'd like for the main site to display items through multiple columns and in an infinite loop like:
1 2 3 4 5
6 7 8 9 10
. . . . .
I've got the layout that I'd like, but don't know how to break the content feed into the multiple divs.
home.html.erb (I know this is wrong)
<% if signed_in? %>
<div id="container" summary="For signed-in users">
<div class="news-column1"><%= render 'shared/feed' %></div>
<div class="news-column2"><%= render 'shared/feed' %></div>
<div class="news-column3"><%= render 'shared/feed' %></div>
<div class="news-column4"><%= render 'shared/feed' %></div>
<div class="news-column5"><%= render 'shared/feed' %></div>
<% else %>
...
<% end %>
_feed.html.erb
<% if #feed_items.any? %>
<%= render :partial => 'shared/feed_item', :collection => #feed_items %>
<% end %>
_feed_item.html.erb
<div class="news">
<div class="comments">
<%= wrap(feed_item.content) %>
</div>
<div class="stats">
#Likes, #Comments, #Repins
</div>
<div class="points">
<%= link_to feed_item.user.name, feed_item.user %>
</div>
<div class="author">
Posted <%= time_ago_in_words(feed_item.created_at) %> ago.
</div>
</div>
<% if current_user?(feed_item.user) %>
<div>
<%= link_to "delete", feed_item, :method => :delete,
:confirm => "You sure?",
:title => feed_item.content %>
</div>
<% end %>
Ryan Bates has shown you how to do this here:
as a summary here is the code:
<table>
<% #tasks.in_groups_of(5, false) do |row_tasks| %>
<tr>
<% for task in row_tasks %>
<td><%= task.name %></td>
<% end %>
</tr>
<% end %>
</table>
This seems to work for me nicely:
<div class="container-fluid">
<% #buildings.each do |building| %>
<div class="col-md-3">
<%= building.name %>
</div>
<% end %>
</div>
Related
so my question is how can i enable this piece of code only when i want? I have multiple pages and some pages i need to remove that piece of code.
This is my current partial _navbar.html.erb and div.spotlight is the piece of code i need to disable in some pages
<div class="container">
<nav class="logonav">
<div class="row">
<div class="col50"><span class="logo"></span>
<h2>Musicus</h2>
<p>De ti para o mundo</p>
</div>
<% if user_signed_in? %>
<div class="col50">
<%= link_to 'Logout', destroy_user_session_path, class: 'ui-btn btn-normal', method: :delete %>
</div>
<% else %>
<div class="col50">
<%= link_to new_user_registration_path, class: 'ui-btn btn-accent' do %>
<span class="icon-add-user"></span> Criar Conta
<% end %>
<%= link_to new_user_session_path, class: 'ui-btn btn-normal' do %>
<span class="icon-login"></span> Login
<% end %>
</div>
<% end %>
</div>
</nav>
<div class="spotlight">
<%= yield :other_message %>
<%= render 'search' %>
<%= yield :primary_message %>
</div>
<%= yield :other_nav %>
</div>
You can use a simple if statement:
<% if show_spotlight %>
<div class="spotlight">
<%= yield :other_message %>
<%= render 'search' %>
<%= yield :primary_message %>
</div>
<% end %>
I have a loop that iterates through a list of stories but it's generating one row per story and not 3 columns. What am I missing?
<div class="row">
<div class="col-md-4">
<% #stories.each do |story| %>
<h2><%= story.name.titleize %></h2>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
<% end %>
</div>
</div>
Thanks.
I think you're placing the each loop in the wrong place. Try something like:
<div class="row">
<% #stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
Take a look to each_slice
#stories = [story1, story2, story3, story4, story5, story6, story7, story8]
#stories.each_slice(3).to_a
#=> [[story1, story2, story3], [story4, story5, story6], [story7, story8]]
I think you can try this:
<% #stories.each_slice(3).to_a.each do |row_stories| %>
<div class="row">
<% row_stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
<% end %>
I want to generate all my products and their information on a page using bootstrap's grid system. I tried to generate three products in a row at first and it worked using the following code:
<div class="container">
<h1 align="center">Listing products</h1>
<% #products.each do |product| %>
<% if #a%3 == 0 %>
<div class="row">
<% end %>
<div class="col-lg-4">
<%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
<%= product.title %> <br/>
<%= product.price %> <br/>
<%= link_to 'Show', product %><br/>
</div>
<% #a = #a+1 %>
<% if #a%3 == 0 %>
</div><hr/>
<% end %>
<% end %>
</div>
(#a is what I declared in the controller which is initially set to 0)
The code will not work anymore if I want to only display two or less products in a row using the grid system when the screen gets smaller.
Are there any better ideas to achieve this?
Seems like you are generating incorrect HTML markup. Try to use each_slice:
<div class="container">
<h1 align="center">Listing products</h1>
<% #products.each_slice(3) do |products| %>
<div class="row">
<% products.each do |product| %>
<div class="col-lg-4">
<%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
<%= product.title %> <br/>
<%= product.price %> <br/>
<%= link_to 'Show', product %><br/>
</div>
<% end %>
</div>
<hr/>
<% end %>
</div>
I've been able to jump most hurtles as I move through the Hartl Rails tutorial, but I can't figure out what I'm doing wrong around 10.4. I can get everything to render correctly using this /static_pages/home.html.erb
<% if signed_in? %>
<div class="row">
<aside class="span4">
<section>
<%= render 'shared/user_info' %>
</section>
<section>
<%= render 'shared/micropost_form' %>
</section>
</aside>
</div>
<% else %>
<div class="center hero-unit">
<h1>Welcome to The Gentle Introduction Resource</h1>
<p>
This is the home page for the
The Gentle Introduction Resource
web app.
</p>
<%= link_to "Sign up now!", signup_path, class: "btn btn-large btn-primary" %>
</div>
<br/>
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
But then when I include this code:
<div class="span8">
<h3>Micropost Feed</h3>
<%= render 'shared/feed' %>
</div>
it breaks.
Full home.html.erb:
<% if signed_in? %>
<div class="row">
<aside class="span4">
<section>
<%= render 'shared/user_info' %>
</section>
<section>
<%= render 'shared/micropost_form' %>
</section>
</aside>
<div class="span8">
<h3>Micropost Feed</h3>
<%= render 'shared/feed' %>
</div>
</div>
<% else %>
<div class="center hero-unit">
<h1>Welcome to The Gentle Introduction Resource</h1>
<p>
This is the home page for the
The Gentle Introduction Resource
web app.
</p>
<%= link_to "Sign up now!", signup_path, class: "btn btn-large btn-primary" %>
</div>
<br/>
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
<% end %>
Here is my _feed.html.erb:
<% If #feed_items.any? %>
<ol class="microposts">
<%= render partial: 'shared/feed_item', collection: #feed_items %>
</ol>
<%= will_paginate #feed_items %>
<% end %>
And here is my _feed_item.html.erb
<li id="<%= feed_item.id %>">
<%= link_to gravatar_for(feed_item.user), feed_item.user %>
<span class="user">
<%= link_to feed_item.user.name, feed_item.user %>
</span>
<span class="content"><%= feed_item.content %></span>
<span class="timestamp">
Posted <%= time_ago_in_words(feed_item.created_at) %> ago.
</span>
<% if current_user?(feed_item.user) %>
<%= link_to "delete", feed_item, method: delete,
data: { confirm: "You sure?" },
title: feed_item.content %>
<% end %>
</li>
Sorry in advance for my markup, this is my first stack overflow question.
Oh and here is the error I'm getting when I attempt to load my local site:
SyntaxError in Static_pages#home
Showing /rails_projects/sample_appOct20_2013/app/views/shared/_feed.html.erb where line #7 raised:
/rails_projects/sample_appOct20_2013/app/views/shared/_feed.html.erb:7: syntax error, unexpected keyword_ensure, expecting $end
Extracted source (around line #7):
4: </ol>
5: <%= will_paginate #feed_items %>
6: <% end %>
Trace of template inclusion: app/views/shared/_feed.html.erb, app/views/static_pages/home.html.erb
I think its the capital If
should be:
<% if #feed_items.any? %>
<ol class="microposts">
<%= render partial: 'shared/feed_item', collection: #feed_items %>
</ol>
<%= will_paginate #feed_items %>
<% end %>
Since this is the case, it thinks that the <% end %> tag is not needed. It really is needed but 'If' (capitalized) is not the same as 'if'(lowercase).
I've been stuck on this problem for a week. I will mail you a bottle of scotch if you can figure it out. Seriously, its come to bribery.
On taxons#show I'm rendering a products partial, _products.html.erb, which lists out all the products on a table to the show view of the taxons controller. When you click a product, by default the app will redirect the user to products#show, where the _cart_local.html.erb partial is rendered to display 'add to cart' options.
But on taxons#show, when a product is clicked I bring up a lightbox instead so the user doesn't have to leave the page. The lightbox code is inside _products.html.erb, and I'm trying to render _cart_form.html.erb inside of the lightbox. When I do, I get the 'stack level too deep' error and taxons#show won't render.
But the cart renders fine in products#how. I changed #product in the partial to just product. That didn't help. I rendered an empty partial and the page loads, which makes me think the problem is with _cart_local (but why would it render on products#show?).
Then I took out all of the code in between the opening form tag and the ending div/end tags and the page also rendered, which makes me think its in that block, but I can't wittle it down any further. I'm stuck
Here's the code for _cart_local, and if I take out the code between the <!-- Here --> and <!-- AND HERE --> comments, the page renders:
<%= form_for :order, :url => populate_orders_path do |f| %>
<div id="inside-product-cart-form" data-hook="inside_product_cart_form" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<% if product.has_variants? %> <!-- HERE -->
<div id="product-variants" class="columns five alpha">
<h6 class="product-section-title"><%= t(:variants) %></h6>
<ul>
<% has_checked = false
product.variants.active(current_currency).each_with_index do |v,index|
next if v.option_values.empty? || (!v.in_stock && !Spree::Config[:show_zero_stock_products])
checked = !has_checked && (v.in_stock || Spree::Config[:allow_backorders])
has_checked = true if checked %>
<li>
<%= radio_button_tag "products[#{product.id}]", v.id, checked, :disabled => !v.in_stock && !Spree::Config[:allow_backorders], 'data-price' => v.price_in(current_currency).display_price %>
<label for="<%= ['products', product.id, v.id].join('_') %>">
<span class="variant-description">
<%= variant_options v %>
</span>
<% if variant_price v %>
<span class="price diff"><%= variant_price v %></span>
<% end %>
</label>
</li>
<% end%>
</ul>
</div>
<% end%>
<% if product.price_in(current_currency) and !product.price.nil? %>
<div data-hook="product_price" class="columns five <% if !product.has_variants? %> alpha <% else %> omega <% end %>">
<div id="product-price">
<h6 class="product-section-title"><%= t(:price) %></h6>
<div><span class="price selling" itemprop="price"><%= product.price_in(current_currency).display_price %></span></div>
</div>
<div class="add-to-cart">
<% if product.on_sale? %>
<%= number_field_tag (product.has_variants? ? :quantity : "variants[#{product.master.id}]"),
1, :class => 'title', :in => 1..product.on_hand, :min => 1 %>
<%= button_tag :class => 'large primary', :id => 'add-to-cart-button', :type => :submit do %>
<%= t(:add_to_cart) %>
<% end %>
<% else %>
<%= content_tag('strong', t(:out_of_stock)) %>
<% end %>
</div>
</div>
<% else %>
<div id="product-price">
<br>
<div><span class="price selling" itemprop="price"><%= t('product_not_available_in_this_currency') %></span></div>
</div>
<% end %> <!-- AND HERE -->
</div>
<% end %>
And here is _products.html.erb, the file that is loading all the products, contains the lightbox, and has the render cart partial code:
<div class="overlay-container">
</div>
<%
paginated_products = #searcher.retrieve_products if params.key?(:keywords)
paginated_products ||= products
%>
<% if products.empty? %>
<%= t(:no_products_found) %>
<% elsif params.key?(:keywords) %>
<h6 class="search-results-title"><%= t(:search_results, :keywords => h(params[:keywords])) %></h6>
<% end %>
<div class="product_grid_container">
<div class="grid_2"><%= image_tag("store/featured/#{#featured}.jpg") %></div>
<% if products.any? %>
<ul id="products" class="inline product-listing" data-hook>
<% products.each do |product| %>
<% if product.on_display? %>
<%# ******LIGHTBOX******* %>
<div id="product_popup_<%= product.id %>" class="product_popup" data-popid="<%= product.id %>">
<div class="related-products">
<ul class="related_products_list" id="related_products_list_<%= product.id %>" data-listid="<%= product.id %>">
<% #related_products.each do |related_product| %>
<li class="related_products_item"><%= link_to large_image(related_product, :itemprop => "image", :data => {:imageid => related_product.id}, :id => "related_" + related_product.id.to_s, :class => "related_products_image dimmed"), url_for(related_product) %></li>
<% end %>
</ul>
</div>
<div class="popup-image">
<%= large_image(product, :itemprop => "image", :class => "product-image-popup") %>
</div><!-- popup-image -->
<div class="popup_right_content">
<h2 class="popup-title"><%= product.name %></h2>
<p class="popup-price">$<%= product.price %></p>
<p><%= product.description %></p>
<p class="popup-color">color:</p>
<div class="popup-images" data-productid="<%= product.id %>">
<% if (product.images + product.variant_images).uniq.size > 1 %>
<ul id="popup-thumbnails-taxon" class="thumbnails inline" data-hook>
<% product.images.each do |i| %>
<li class='tmb-all' id='tmb-<%= i.id %>'>
<%= link_to(image_tag(i.attachment.url(:small)), i.attachment.url(:popup), :class => 'tmb-all', :id => "tmb-#{i.id}") %>
</li>
<% end %>
</ul>
<% end %>
</div><!-- popup-images -->
</div><!-- popup_right_content -->
<%= render 'spree/shared/cart_local', :locals => {:product => product} %>
</div><!-- product_popup -->
<%# ******END LIGHTBOX******* %>
<div class="grid_1">
<li id="product_<%= product.id %>" class="columns product three <%= cycle("alpha", "secondary", "", "omega secondary", :name => "classes") %>" data-hook="products_list_item" itemscope itemtype="http://schema.org/Product">
<div class="main-image" id="single_<%= product.id %>" data-productid="<%= product.id %>">
<%= link_to large_image(product, :itemprop => "image", :class => "product-image", :id => product.id), product_path(product), :remote => true, :html => {:class => "product_popup"} %>
</div><!-- main-image-->
<div class="prod_info_box">
<%= link_to truncate(product.name, :length => 50), product, :class => 'info', :itemprop => "name", :title => product.name %>
<span class="price selling" itemprop="price"><%= product.price_in(current_currency).display_price %></span>
<!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM _THUMBNAILS.HTML.ERB -->
<div class="product-images" data-productid="<%= product.id %>">
<% if (product.images + product.variant_images).uniq.size > 1 %>
<ul id="product-thumbnails-taxon" class="thumbnails inline" data-hook>
<% product.images.each do |i| %>
<li class='tmb-all' id='tmb-<%= i.id %>'>
<%= link_to(image_tag(i.attachment.url(:mini)), i.attachment.url(:normal), :class => 'tmb-all', :id => "tmb-#{i.id}") %>
</li>
<% end %>
</ul>
<% end %>
</div><!-- product-images -->
<!-- END THUMBNAILS INTO TAXONS PAGE -->
<div id="product-description-taxon">
<p><%= product.description %></p>
</div><!-- product-description-taxon -->
</div><!-- prod_info_box -->
</li>
</div>
<% end %>
<% end %>
<% reset_cycle("classes") %>
</ul>
<% end %>
</div><!-- product_grid_container -->
<% if paginated_products.respond_to?(:num_pages) %>
<%= paginate paginated_products %>
<% end %>
Let me know if you need anything else. i appreciate it.
Here's a link to the helpers, maybe the problem is there?
https://github.com/spree/spree/tree/v1.3.2/core/app/helpers/spree
In your _products.html.erb partial change that:
<%= render 'spree/shared/cart_local', :locals => {:product => product} %>
to that:
<%= render partial: 'spree/shared/cart_local', :locals => {:product => product} %>
and problem should be resolved.
Why? Because doing it as you have done it won't pass locals into partial and that's why you've received error, check it by yourself by removing locals. Of course the most interesting part is why you get stack level too deep error here, but I am unable to find answer for that now.
Oh, and debugger is your friend ;)