multple if statements to display data according to the action it is in slim rails

Question

I'm having a bit of a problem converting my html to slim.

I'm trying to have different backgrounds section-bg-# on different pages, so I'm using a partial with a bunch of if.

I'm sure there is a better way to do this but I haven't figure that out yet.

So I have a temporary solution on my html.erb file which is

<% if params[:action] == "about" && params[:controller] == "main" %>
<section class="page-title section light section complex pad50 section-bg-4">
<% end %>
<% if params[:action] == "services" && params[:controller] == "main" %>
<section class="page-title section light section complex pad50 section-bg-2">
<% end %>
<% if params[:action] == "contact" && params[:controller] == "main" %>
<section class="page-title section light section complex pad50 section-bg-1">
<% end %>
<% if params[:action] == "register" && params[:controller] == "main" %>
<section class="page-title section light section complex pad50 section-bg-3">
<% end %>
<% if params[:action] == "faqs" && params[:controller] == "main" %>
<section class="page-title section light section complex pad50 section-bg-5">
<% end %>
    <div class="section-pattern dot" style="opacity: 0.9;"></div>
    <div class="section-overlay" style="background-color: rgb(32, 32, 32); opacity: 0.7;"></div>
    <div class="container">
        <div class="row">
        <div class="col-9">
          <!-- start page title -->
          <header class="section-header content-header">
            <h1 class="title">
              <!-- to be changed -->
              <% if params[:action] == "about" && params[:controller] == "main" %>
              ¡Todo lo que necesitas saber!
              <% end %>
              <% if params[:action] == "contact" && params[:controller] == "main" %>
              Contáctenos
              <% end %>
              <% if params[:action] == "services" && params[:controller] == "main" %>
              Disfruta de nuestos servicios en 
              <% end %>
              <% if params[:action] == "register" && params[:controller] == "main" %>
              ¡Crea tu Cuenta de Ahora!
              <% end %>
              <% if params[:action] == "faqs" && params[:controller] == "main" %>
              Preguntas frecuentes
              <% end %>
            </h1>

            <!-- to be changed -->
            <p class="subtitle lead">
              <% if params[:action] == "about" && params[:controller] == "main" %>
              Preguntas frecuentes e información.
              <% end %>
              <% if params[:action] == "contact" && params[:controller] == "main" %>
              Tienes alguna pregunta en algunos de nuestros servicios? Comunícate con nosotros y te ayudaremos a contestar tus dudas.
              <% end %>
              <% if params[:action] == "services" && params[:controller] == "main" %>
              te provee servicios incomparables que no encontrarás en ningun otro lugar
              <% end %>
              <% if params[:action] == "register" && params[:controller] == "main" %>
              asegura la identidad y la seguridad de los conductores y pasajeros al solicitar y confirmar la información proporcionada.
              <% end %>
              <% if params[:action] == "faqs" && params[:controller] == "main" %>
              Aqui encontrarás muchas de las dudas mas preguntadas.
              <% end %>
            </p>
          </header>
    </div>
</section>

Notice that the <section> tag doesn't close in any of the if, that's just to render the content inside that section.

In every background there's a specific text that I want to show, and I did this with another bunch of ifs. inside the <header> tag

Now, this is working perfectly in html.erb but when I converted it to slim

- if params[:action] == "about" && params[:controller] == "main"
  section.page-title.section.light.section.complex.pad50.section-bg-4

- if params[:action] == "services" && params[:controller] == "main"
  section.page-title.section.light.section.complex.pad50.section-bg-2

- if params[:action] == "contact" && params[:controller] == "main"
  section.page-title.section.light.section.complex.pad50.section-bg-3

- if params[:action] == "register" && params[:controller] == "main"
  section.page-title.section.light.section.complex.pad50.section-bg-3

- if params[:action] == "faqs" && params[:controller] == "main"
  section.page-title.section.light.section.complex.pad50.section-bg-3
    .section-pattern.dot style="opacity: 0.9;"

    .section-overlay style="background-color: rgb(32, 32, 32); opacity: 0.7;"

    .container
      .row
        .col-9
          /<!-- start page title -->
          header.section-header.content-header
            h1.title
              /<!-- to be changed -->
              - if params[:action] == "about" && params[:controller] == "main"
                | ¡Todo lo que necesitas saber!

              - if params[:action] == "contact" && params[:controller] == "main"
                | Contáctenos

              - if params[:action] == "services" && params[:controller] == "main"
                | Disfruta de nuestos servicios en

              - if params[:action] == "register" && params[:controller] == "main"
                | ¡Crea tu Cuenta de Ahora!

              - if params[:action] == "faqs" && params[:controller] == "main"
                | Preguntas frecuentes

            /<!-- to be changed -->
            p.subtitle.lead
              - if params[:action] == "about" && params[:controller] == "main"
                | Preguntas frecuentes e información.

              - if params[:action] == "contact" && params[:controller] == "main"
                | Tienes alguna pregunta en algunos de nuestros servicios? Comunícate con nosotros y te ayudaremos a contestar tus dudas.

              - if params[:action] == "services" && params[:controller] == "main"
                | te provee servicios incomparables que no encontrarás en ningun otro lugar

              - if params[:action] == "register" && params[:controller] == "main"
                | asegura la identidad y la seguridad de los conductores y pasajeros al solicitar y confirmar la información proporcionada.

              - if params[:action] == "faqs" && params[:controller] == "main"
                | Aqui encontrarás muchas de las dudas mas preguntadas.

It's not working since the last if will be the one having all the content, so if I go to "about" page, it will not render anything or bad rendering. It will only render correctly the "faqs" page since it's the last one.

Is there a way I could put an <% end %> tag at the end of every if in slim? or another solution for this?

Thank you

Answer 1

ok, so I did a lot of changes to make everything work cleaner.

first of all, I added the data I want to show in the controller

class MainController < ApplicationController
  respond_to :html
  before_filter :set_all_the_data

  def index
    # respond_with User.all
  end

  def create
    respond_with User.all
  end

  def new

  end

  def about
  end

  def services
  end

  def contact
  end

  def register
  end

  def faqs
  end

  private

  def set_all_the_data
    @all_the_data = {
      about: {
        page_title_class: 'section-bg-4',
        header_title: '¡Todo lo que necesitas saber!',
        header_body: 'Preguntas frecuentes e información.',
        breadcrumb_link: 'Sobre'
      },
      services: {
        page_title_class: 'section-bg-2',
        header_title: 'Disfruta de nuestos servicios en',
        header_body: 'te provee servicios incomparables que no encontrarás en ningun otro lugar',
        breadcrumb_link: 'Servicios'
      },
      contact: {
        page_title_class: 'section-bg-1',
        header_title: 'Contáctenos',
        header_body: 'Tienes alguna pregunta en algunos de nuestros servicios? Comunícate con nosotros y te ayudaremos a contestar tus dudas.',
        breadcrumb_link: 'Contáctenos'
      },
      register: {
        page_title_class: 'section-bg-4',
        header_title: '¡Crea tu Cuenta de Ahora!',
        header_body: 'asegura la identidad y la seguridad de los conductores y pasajeros al solicitar y confirmar la información proporcionada.',
        breadcrumb_link: 'Registro'
      },
      faqs: {
        page_title_class: 'section-bg-5',
        header_title: 'Preguntas frecuentes',
        header_body: 'Aqui encontrarás muchas de las dudas mas preguntadas.',
        breadcrumb_link: 'Preguntas Frecuentes'
      }
    }
  end

end

then in the helper:

def internal_header(data, location)
    data[params[:action].to_sym][location]
end

and practically removed a dozen of useless lines in my slim file

section class="page-title section light section complex pad50 #{internal_header(@all_the_data, :page_title_class) }"

  .section-pattern.dot style="opacity: 0.9;"

  .section-overlay style="background-color: rgb(32, 32, 32); opacity: 0.7;"

  .container
    .row
      .col-9
        /<!-- start page title -->
        header.section-header.content-header
          h1.title
            /<!-- to be changed -->
            = internal_header(@all_the_data, :header_title)

          /<!-- to be changed -->
          p.subtitle.lead
            = internal_header(@all_the_data, :header_body)

Now it will display the data according to the action it is in.

Answer 2

You should better to move you logic to helpers you section difference only in one html class so you can make helper

def section_class
 return unless params[:controller] == "main"
 case  params[:action]
 when "about"
   "section-bg-4"
 ...
end

then in view

section.page-title.section.light.section.complex.pad50 class=section_class
  .section-pattern.dot style="opacity: 0.9;"

  .section-overlay style="background-color: rgb(32, 32, 32); opacity: 0.7;"

  .container
    .row
      .col-9

P.S. and your sentences part it better move to I18n