Stock Availability toggle liquid - filter

I have a store with an availability show hide toggle set to hide by default but i'd like to change the default to show. I have tried editing the below code but can seem to get it right. Any help would be greatly appreciated.
<div class="filter-group filter-group--availability">
<div class="filter-toggle filter-toggle--inline">
<span class="filter-toggle__group-label">{{ 'collections.filtering.out_of_stock_label' | t }}</span>
<div class="filter-toggle__options">
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-1"
type="radio"
name="{{ filter.param_name }}"
value="2"
{% if filter.active_values != empty and filter.active_values.first.value == '2' %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.show_label' | t }}</span>
</label>
<label class="filter-toggle__input-label" id="second-filter-btn">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-2"
type="radio"
name="{{ filter.param_name }}"
value="1"
{% if filter.active_values == empty %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.hide_label' | t }}</span>
</label>
</div>
</div>
</div>

Related

How to create a yes no filter option on custom product option shopify liquid

I have products with an option set of initials, so a-z on the frontend category filter. This is obviously very long when expanded and was wondering if it could be set to a yes/no boolean instead?
Edit. The below image is what i'm looking to duplicate and have attached the code for that. I'm guessing I could copy but change the param name? but not sure what the param name would be.
{%- if filter.param_name == 'filter.v.availability' -%}
<div class="filter-group filter-group--availability">
<div class="filter-toggle filter-toggle--inline">
<span class="filter-toggle__group-label">{{ 'collections.filtering.out_of_stock_label' | t }}</span>
<div class="filter-toggle__options">
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-1"
type="radio"
name="{{ filter.param_name }}"
value=""
{% if filter.active_values == empty %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.show_label' | t }}</span>
</label>
<label class="filter-toggle__input-label" id="second-filter-btn">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-2"
type="radio"
name="{{ filter.param_name }}"
value="1"
{% if filter.active_values != empty and filter.active_values.first.value == '1' %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.hide_label' | t }}</span>
</label>
</div>
</div>
</div>
{%- else -%}

Form checkbox input array gets flooded with textarea input

)
I have been struggling with a form for my Laravel App....
I have 3 fields which are checkboxes and therefore is getting POSTed as arrays and then I have a textarea field and somehow SOMETIMES one of the 3 checkbox inputs get flooded with data from the textarea input field... It is very weird and only happens sometime and therefore I get a data to long truncated error in the database...
But I DD the input at the $request level and can see already there the array from the checkbox is flooded with the data from the textarea field... I can not wrap my head around why this is, as it's only sometimes...
And I can even get the error and go back a page in the browser and submit again with all the same data and then it can be working.. WHAT can cause this weird behavioer
This is my Laravel blade where the form is
#extends('layouts.app')
#section('head')
#endsection
#section('content')
#php
// dd($errors);
#endphp
<h2 class="page-title">Opret Artist Side</h2>
<div class="artist-box">
<form class="formgrid" method="POST" action="{{ route('artist.store') }}">
#csrf
<div class="formleft">
<label for="artist_name" class="label">Artist navn</label>
<input type="text" id="artist_name" name="artist_name" class="formitem #error('artist_name') is-invalid #enderror" value="{{ old('artist_name', $post->artist_name ?? null) }}" />
#error('artist_name')
<div class="invalid-feedback">
#foreach($errors->get('artist_name') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="artist_name_help">Jeres band/artist navn. <span class="text-danger">OBS! Kan IKKE ændres</span></small>
#enderror
</div>
<div class="formright">
<label for="contact_person" class="label">Kontakt person</label>
<input type="text" name="contact_person" id="contact_person" class="formitem #error('contact_person') is-invalid #enderror" value="{{ old('contact_person', $post->content ?? null) }}" />
#error('contact_person')
<div class="invalid-feedback">
#foreach($errors->get('contact_person') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="contact_person_help">Kontakt persons navn</small>
#enderror
</div>
<div class="formleft">
<label for="email" class="label">Email</label>
<input type="text" name="email" id="email" class="formitem #error('email') is-invalid #enderror" value="{{ old('email', $post->email ?? null) }}" />
#error('email')
<div class="invalid-feedback">
#foreach($errors->get('email') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="email_help">Kontakt email</small>
#enderror
</div>
<div class="formright">
<label for="phone" class="label">Tlf nummer</label>
<input type="text" name="phone" id="phone" class="formitem #error('phone') is-invalid #enderror" value="{{ old('phone', $post->phone ?? null) }}" />
#error('phone')
<div class="invalid-feedback">
#foreach($errors->get('phone') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="phone_help">Kontakt tlf nummer</small>
#enderror
</div>
<div class="formleft">
<label for="hometown" class="label">Hjemby</label>
<input type="text" name="hometown" id="hometown" class="formitem #error('hometown') is-invalid #enderror" value="{{ old('hometown', $post->hometown ?? null) }}" />
#error('hometown')
<div class="invalid-feedback">
#foreach($errors->get('hometown') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="hometown_help">Jeres Hjemby</small>
#enderror
</div>
<div class="formright">
<label for="category" class="label">Kategori</label>
<select name="category" id="category" class="formitem #error('category') is-invalid #enderror">
{{-- Show a non selectable if with info of none selected --}}
#if(old('category') === null)
<option disabled="disabled" selected value="null">Vælg en kategori</option>
#endif
#foreach($categories as $category)
<option #if(old('category') !== null && old('category') == $category->id) selected #endif value="{{ $category->id }}"
>{{ $category->artist_category }}</option>
#endforeach
</select>
#error('category')
<div class="invalid-feedback">
#foreach($errors->get('category') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="">Hvilken kategori hører i under</small>
#enderror
</div>
<div class="formfull">
<label for="budget" class="label">Budget i spiller for</label>
<ul class="ks-cboxtags">
#foreach($budgets as $budget)
{{-- <div class="form-check form-check-inline"> --}}
<li><input #if(old('budget') !== null && in_array($budget->id,old('budget'))) checked #endif
type="checkbox" name="budget[]" id="budget{{ $budget->id }}" class="form-check-input #error('budget') is-invalid #enderror" value="{{ $budget->id }}" />
<label class="form-check-label" for="budget{{ $budget->id }}">{{ $budget->artist_budget }}</label></li>
{{-- </div> --}}
#endforeach
</ul>
#error('budget')
<div class="invalid-feedback d-block">
#foreach($errors->get('budget') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="budget_help">Vælg hvilket budget i optræder for, gerne flere</small>
#enderror
</div>
{{-- --}}
<div class="formfull">
<label for="genres" class="label">Genre</label>
<ul class="ks-cboxtags">
#foreach($genres as $genre)
{{-- <div class="form-check form-check-inline"> --}}
<li><input #if(old('genres') !== null && in_array($genre->id,old('genres'))) checked #endif
type="checkbox" name="genres[]" id="genres{{ $genre->id }}" value="{{ $genre->id }}" class="form-check-input #error('genres') is-invalid #enderror" />
<label class="form-check-label" for="genres{{ $genre->id }}">{{ $genre->genre }}</label></li>
{{-- </div> --}}
#endforeach
</ul>
#error('genres')
<div class="invalid-feedback d-block">
#foreach($errors->get('genres') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="">Hvike genrer hører i under</small>
#enderror
</div>
{{-- --}}
<div class="formfull">
<label for="area" class="label">Områder hvor i optræder</label>
<ul class="ks-cboxtags">
#foreach($areas as $area)
{{-- <div class="form-check form-check-inline"> --}}
<li><input #if(old('area') !== null && in_array($area->id,old('area'))) checked #endif
type="checkbox" name="area[]" id="area{{ $area->id }}" value="{{ $area->id }}" class="form-check-input #error('area') is-invalid #enderror" />
<label class="form-check-label" for="area{{ $area->id }}">{{ $area->artist_area }}</label></li>
{{-- </div> --}}
#endforeach
</ul>
#error('area')
<div class="invalid-feedback d-block">
#foreach($errors->get('area') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="">Vælg hvilke områder i optræder i</small>
#enderror
</div>
<div class="formleft">
<label for="desc" class="label">Beskriv jer selv</label>
<textarea name="description" id="description" class="formitem #error('description') is-invalid #enderror">{{ old('description', $post->description ?? null) }}</textarea>
{{-- <input id="description" value="{{ old('description', $post->description ?? null) }}" class="form-control #error('description') is-invalid #enderror" name="description" type="hidden">
#trix(\App\ArtistPage::class, 'trixinput',
[
'id' => 'description',
// 'class' => 'form-control',
'hideTools' => ['file-tools'],
'hideButtonIcons' => ['attach', 'link', 'code', 'strike', 'heading-1']
]) --}}
{{-- <input id="desc" value="{{ old('description', $post->description ?? null) }}" type="hidden" name="description">
<trix-editor input="desc" class="#error('description') is-invalid #enderror"></trix-editor> --}}
#error('description')
<div class="invalid-feedback">
#foreach($errors->get('description') as $error)
{{ $error }}
#endforeach
</div>
#else
<small class="text-muted form-text" id="description_help">Giv en god beskrivelse af jer selv og hvad i tilbyder<br>
Tilladte tags er <strong>{{ '<br><b><i><li><ul><ol><hr><strong><p>' }}</strong>
</small>
#enderror
</div>
<button type="submit" class="btn btn-primary">Opret</button>
</form>
</div>
#endsection
See also this image of the DD dump on the $request
Hmmmm Think I figured it out :-)
But it has been such a sporadic bug so I'm not sure yet... But seems like it has gone away :-)
Seems like it was this value line on each field I have gotten messed up
The value line structure on the input fields I had was
value="{{ old('artist_name', $post->artist_name ?? null) }}"
And it should be
value="{{ old('artist_name') ?? $post->artist_name ?? null }}"
Dont know why I ended up with such an obscure Value part on every input field :-)
But sometimes the eyes just gets blind on code :-)

How to adjust card height with Bootstrap in Laravel 5

I am trying to follow this template design:Template and I seem to be having some issue regarding the card height and padding with my current login page. Here is the code:
#section('content')
<div class="container">
<div class="card row h-100">
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
#csrf
<div class="row">
<div class="col">
<img class="img-fluid rounded mx-auto d-block" src="{{asset('svg/MegaDeskLogo.svg')}}" alt="logo" />
</div>
<div class="col">
<h1>{{ __('Login') }}</h1>
<input id="email" type="email" placeholder="{{ __('E-Mail Address') }}" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong>
{{ $errors->first('email') }}
</strong>
</span>
#endif
<input id="password" placeholder="{{ __('Password') }}" type="password" class="form-control {{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
#if ($errors->has('password'))
<span class="invalid-feedback" role="alert">
<strong>
{{ $errors->first('password') }}
</strong>
</span>
#endif
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old( 'remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Route::has('password.request'))
<a class="btn btn-link" href="{{route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
</div>
</div>
</div>
#endsection
Currently it's looking like: . I've tried reading several articles and reading the bootstrap documentation and still not able to find the answer. If anyone can offer any suggestions I would really appreciate it.
Make sure you're adding all the CSS and Javascript libraries and code you need for your card to look like the example, they are using more than just bootstrap.
Their CSS block:
Their Script block looks like:

How to validate without empty other filled fields Laravel

Hi there I have this fields:
<form role="form" class="form margin-bottom-0" action="{{ url('/test') }}" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="box box-widget widget-use padding-40 padding-top-0 box-shadow-none">
<div class="row">
<div class="col-md-6">
<div class="form-group floating-label {{ $errors->has('name') ? ' has-error' : '' }}">
<input class="form-control" name="name" id="regular2" type="text" value="#if($account){{$account['name']}} #endif" >
<label for="regular2" >#lang('payment.full_name')</label>
#if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
</div>
<div class="col-md-6">
<div class="form-group floating-label {{ $errors->has('address') ? ' has-error' : '' }}">
<input class="form-control" name="address" id="regular2" type="text" value="#if($account){{$account['address']}}#endif" >
<label for="regular2">#lang('payment.address')</label>
#if ($errors->has('address'))
<span class="help-block">
<strong>{{ $errors->first('address') }}</strong>
</span>
#endif
</div>
</div>
</div>
</div>
<button type="submit" class="btn save-lang savecard">#lang('buttons.save_changes')</button>
</form>
and when I submit it shows me the validation just fine
but when I fill one field and I submit the field that I put text on it empties, how can I make the text to stay..?
Try this on every inputs you have:
<input class="form-control" name="name" id="regular2" type="text" value="{{ old('name') }}" >
Just use old().
You can use the old method in your template referring the documentation
If you use $this->validate(/*your rules*/) in your controller, it will send the errors and the old input.
Then your can use for exemple :
<input class="form-control" name="name" id="regular2" type="text" value="{{ old('name') }}" > To make the text stay.
Hopes it helps you.

Metatemplating in Nunjucks

I'm working on a Marionette app that has certain repeating UI patterns in Nunjucks, for example:
<div class="custom-input-group">
<input name="username" type="text" id="username" required value="{{ username }}">
<span class="highlight"></span>
<span class="bar"></span>
<label>Username</label>
</div>
<div class="custom-input-group">
<input name="first_name" type="text" id="first_name" required value="{{ first_name }}">
<span class="highlight"></span>
<span class="bar"></span>
<label>First Name</label>
</div>
<div class="custom-input-group">
<input name="last_name" type="text" id="last_name" required value="{{ last_name }}">
<span class="highlight"></span>
<span class="bar"></span>
<label>Last Name</label>
</div>
I'd like to abstract that into either a macro or a partial template, like so:
{% macro field(name, label='', type='text') %}
<div class="custom-input-group">
<input name="{{ name }}" type="{{ type }}" id="{{ name }}" required value={{ name }}>
<span class="highlight"></span>
<span class="bar"></span>
<label>{{ label }}</label>
</div>
{% endmacro %}
So that I can use it like so:
{{ field('username', 'Username') }}
{{ field('first_name', 'First Name') }}
{{ field('last_name', 'Last Name') }}
However, this generates value="username" instead of value="{{ username }}". How can I produce the latter?
Ah I got it. Instead of trying to output another template, I have to pass in the final value to the macro itself, like this:
{% macro field(value, name, label='', type='text') %}
<div class="custom-input-group">
<input name="{{ name }}" type="{{ type }}" id="{{ name }}" required value={{ value }}>
<span class="highlight"></span>
<span class="bar"></span>
<label>{{ label }}</label>
</div>
{% endmacro %}
And then use the macro like this:
{{ field(username, 'username, 'Username') }}
{{ field(first_name, 'first_name', 'First Name') }}
{{ field(last_name, 'last_name', 'Last Name') }}
This is still a little less DRY than I'd like, but heaps better than before.

Resources