Multiple Load More OOB Button Sprig - twig

I am trying to create multiple dynamic load more oob buttons using Sprig plugin in Craft CMS and they are appearing properly. But the issue comes up when one button is due to be swapped with the hidden one, it results to all the load more buttons disappearing.
Here is the for loop code that I have tested:
{% for city in cities %}
{% set articleOffset = articleOffset ?? 0 %}
{% set articlesQuery = cityArticles[loop.index0].offset(articleOffset).limit(articleLimit) %}
{% set articles = articlesQuery.all() %}
<div class="filtered-bookmark mb-5">
<span> {{ city.title }}</span>
<div class="row" id="container-{{ city.slug }}">
{% for article in articles %}
{% set featureImage = article.articleFeaturedImage.one().url ?? "" %}
{% set categorySlug = article.channelsCategory.one().channel.one().slug %}
<section class="col-12 col-sm-6 col-xl-4 mb-4">
{#article card template here#}
</section>
{% endfor %}
</div>
{% if articlesQuery.count() > articles|length + articleOffset %}
<button id="{{city.slug}}-oob" sprig
s-val:articleOffset="{{ articleOffset + articleLimit }}"
s-target="#container-{{ city.slug }}"
s-select="#container-{{ city.slug }} section"
s-swap="beforeend"
{{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }}> View More </button>
{% else %}
<button id="{{ city.slug }}-oob" s-swap-oob="true" style="display: none"></button>
{% endif %}
</div>
{% endfor %}

Asked the question on PutYourLightsOn's Sprig GitHub and got a response. This did the trick:
<button id="{{ city.slug }}-oob" {{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }} style="display: none"></button>
GitHub link for reference:
https://github.com/putyourlightson/craft-sprig/issues/247

Related

Uneven gallery with a repeated loop

I need to make an uneven gallery, where the user can upload an infinite number of images. The gallery is composed of a pattern of 7 images that is repeated indefinitely.
The website mainly uses Paragraphs, so I created a Paragraph Gallery, where the user can directly upload the media. I set up three image styles: small, tall, and big.
I also prepared a simple CodePen with the style solution. But now I’m struggling with the Twig template. I tried some solutions from previous discussions, but they either failed or didn’t generate the images.
{% block content %}
{% for image in content.field_images['#items'] %}
{% if image %}
<div class="gallery">
<div class="gallery-left">
<div class="inner-wrapper">
<div class="inner-left">
{% if loop.first %}
<div class="field__item">
<img src="{{ image|file_uri|image_style('tall') }}" alt="{{ image.alt }}">
</div>
{% endif %}
{% if loop.index == 2 %}
<div class="field__item">
<img src="{{ image|file_uri|image_style('small') }}" alt="{{ image.alt }}">
</div>
{% endif %}
</div>
<div class="inner-right">
{% if loop.index == 3 %}
<div class="field__item">
<img src="{{ image|file_uri|image_style('tall') }}" alt="{{ image.alt }}">
</div>
{% endif %}
{% if loop.index == 4 %}
<div class="field__item">
<img src="{{ image|file_uri|image_style('small') }}" alt="{{ image.alt }}">
</div>
{% endif %}
</div>
</div>
</div>
<div class="gallery-right">
{% if loop.index == 5 %}
<div class="field__item">
<img src="{{ image|file_uri|image_style('small') }}" alt="{{ image.alt }}">
</div>
{% endif %}
{% if loop.index == 6 %}
<div class="field__item">
<img src="{{ image|file_uri|image_style('tall') }}" alt="{{ image.alt }}">
</div>
{% endif %}
</div>
<div class="bottom">
{% if loop.index % 7 == 0 or loop.last %}
<div class="field__item">
<img src="{{ image|file_uri|image_style('big') }}" alt="{{ image.alt }}">
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
{% endblock %}
Based on #WPhil's idea with batch I would do it like it is proposed below.
Things to note:
Image uri can be retrieved from file entity and not from media nor field reference list item this is why content.field_images['#items'].0 is not enaugh and it should be something like content.field_images['#items'].0.entity.field_media_image.entity
batch filter has three arguments and within loops like this is important to reset the index so this is why the third arggument is FALSE
Gallery paragraph file
{% import "_impression_image.html.twig" as impression %}
{% block content %}
{% for impressions_gallery_batch in content.field_images['#items']|batch(7, NULL, FALSE) %}
{# Define all image file entities for given batch of image items #}
{% set image_entities = {} %}
{% for impressions_gallery_batch_item in impressions_gallery_batch %}
{% set image_entities = image_entities|merge([
impressions_gallery_batch["#{loop.index0}"].entity.field_media_image.entity,
]) %}
{% endfor %}
<div class="impressions-gallery">
<div class="impressions-left">
<div class="inner-wrapper">
{% if image_entities.0 %}
<div class="inner-left">
{{ impression.image(image_entities.0, 'impressions_small') }}
{{ impression.image(image_entities.1, 'impressions_tall') }}
</div>
{% endif %}
{% if image_entities.2 %}
<div class="inner-right">
{{ impression.image(image_entities.2, 'impressions_small') }}
{{ impression.image(image_entities.3, 'impressions_tall') }}
</div>
{% endif %}
</div>
</div>
{% if image_entities.4 %}
<div class="impressions-right">
{{ impression.image(image_entities.4, 'impressions_tall') }}
{{ impression.image(image_entities.5, 'impressions_small') }}
</div>
{% endif %}
{% if image_entities.6 %}
<div class="impressions-bottom">
{{ impression.image(image_entities.6, 'impressions_big') }}
</div>
{% endif %}
</div>
{% endfor %}
{% endblock %}
Image item macro function (_impression_image.html.twig)
{% macro image(image_entity_item, image_style) %}
{% if image_entity_item %}
<div class="field__item">
<img src="{{ image_entity_item.uri.value|image_style(image_style) }}" alt="{{ image_entity_item.alt }}">
</div>
{% endif %}
{% endmacro %}
Try something along the lines of the below, I have used the batch and splice filters to break up the image array into blocks and then conditional checks to determine the appropriate image size.
{% block content %}
{% for gallery_block in content.field_images['#items']|batch(7) %}
<div class="gallery">
<div class="gallery-left">
<div class="inner-wrapper">
<div class="inner-left">
{% for image in gallery_block|slice(0,3) %}
{% if image %}
<div class="field__item">
{% set size = ( loop.index is even ) ? 'small' : 'tall' %}
<img src="{{ image|file_uri|image_style(size) }}" alt="{{ image.alt }}">
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="gallery-right">
{% for image in gallery_block|slice(4,5) %}
{% if image %}
<div class="field__item">
{% set size = image.first ? 'small' : 'tall' %}
<img src="{{ image|file_uri|image_style(size) }}" alt="{{ image.alt }}">
</div>
{% endif %}
{% endfor %}
<div>
{% set bottom_image = gallery_block|last %}
{% if bottom_image %}
<div class="bottom">
<div class="field__item">
<img src="{{ bottom_image|file_uri|image_style('big') }}" alt="{{ bottom_image.alt }}">
</div>
</div>
{% endif %}
</div>
{% endfor %}
{% endblock %}

Jekyll pagination with data files

I was looking to try to do pagination with the _data files. Here is the code that I was coming up with but it doesn't work. Trying to make it work for a project I am working on right now for a nonprofit client I have.
{% if page.layout == "events" %}
{% for events in paginator.events %}
<div class="card card-posts">
<img src="{{ events.image }}" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title my-3">{{ events.title }}</h1>
<div class="meta-info">
<ul class="list-inline">
{% if events.start %}
<li class="list-inline-item">
<i class="fas fa-calendar-alt"></i> {{ events.start | date_to_long_string }}
</li>
{% endif %}
</ul>
</div>
<p class="card-text">{{ events.summary }}</p>
</div>
</div>
{% endfor %}
{% if paginator.total_pages > 1 %}
<!--pagination-->
<div class="pagination bot-element">
<div class="pr-bg pr-bg-white"></div>
<div class="container">
{% if paginator.previous_page %}
<i class="fal fa-long-arrow-left"></i>
{% endif %}
{% if paginator.page_trail %}
{% for trail in paginator.page_trail %}
{{ trail.num }}
{% endfor %}
{% endif %}
{% if paginator.next_page %}
<i class="fal fa-long-arrow-right"></i>
{% endif %}
</div>
</div>
<!--pagination end-->
{% endif %}
{% endif %}
Can someone see if this is a way possible that might have done this? If it is would it be ideal to do it for an events page to show an archive of events or no?

Jinja2 list index variable - list_name[variable]

I'm trying to pass on the variable, prod_number, to the index of a list, products.
<div class="container">
{% for i in range(lenProducts) %}
<ul class="row product-grid">
{% for j in range(0, 3) %}
<br>
<p class="text-primary"> {% set prod_number = i*3+j %} </p>
<li class="col-md-4 product-wrapper card">
{{ products[prod_number].id }}
</li>
{% endfor %}
</ul>
{% endfor %}
{{ products[prod_number].id }} This line makes the page load forever
How can I fix this? I've isolated the problem and I'm 100% sure it's from that line.
I think this would work :
<div class="container">
{% for i in range(lenProducts) %}
<ul class="row product-grid">
{% for j in range(0, 3) %}
<br>
<p class="text-primary"> {% set prod_number = (i*3)+j %} </p>
<li class="col-md-4 product-wrapper card">
{{ products[prod_number]['id'] }}
</li>
{% endfor %}
</ul>
{% endfor %}
The problem was that the prod_number exceeded the products length and it caused my page to load forever.
prod_number went from 0 to 17 and products had only 6 elements in it.

Silex - Symfony Froms - How to wrap each radio button and its label in to separate div for each radio in choice list?

I am using Silex micro faramework with Symfony forms. In twig templet I generate this field using :
...
{{ form_widget(form.transport_selection) }}
...
How can I overwrite this symfony twig form templet to generate wrap for each set (input field and label) in Silex.
This is my twig registration:
use Silex\Provider\FormServiceProvider;
use Symfony\Component\Translation\Loader\YamlFileLoader;
use Symfony\Component\Validator\Constraints as Assert;
$app->register(new Silex\Provider\TwigServiceProvider(), array(
'twig.path' => [
__DIR__.'/App/View',
]
));
How to wrap radio button and label with div for each radio choice ?
output:
<div id="form_transport_selection">
<input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
<label for="form_transport_selection_0" class="required">country</label>
<input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
<label for="form_transport_selection_1" class="required">abroad</label>
</div>
Expected output:
<div id="form_transport_selection">
<div class="radio1">
<input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
<label for="form_transport_selection_0" class="required">country</label>
</div>
<div class="radio2">
<input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
<label for="form_transport_selection_1" class="required">abroad</label>
</div>
</div>
Thanks
You can make new template for this form and redefine radio buttons view
my.form.twig
{% extends "form_div_layout.html.twig" %}
{%- block choice_widget_expanded -%}
<div {{ block('widget_container_attributes') }}>
{% set i=1 %}
{%- for child in form %}
<div class="radio-{{i}}">
{{- form_widget(child) -}}
{{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
</div>
{% set i=i+1 %}
{% endfor -%}
</div>
{%- endblock choice_widget_expanded -%}
and use it in controller template, where form is shown
{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}
Expanding on MaxP's answer. Make sure to only modify this for radio buttons, you don't want this used in checkboxes! I've added a different class for checkboxes. Note the if/else to do this.
{% extends "form_div_layout.html.twig" %}
{% block choice_widget_expanded %}
<div {{ block('widget_container_attributes') }}>
{% set i=1 %}
{% for child in form %}
{% if form.vars.multiple == false %}
<div class="radio-{{i}}">
{% elseif form.vars.multiple == true %}
<div class="checkbox-{{i}}">
{% endif %}
{{ form_widget(child) }}
{{ form_label(child, null, {translation_domain: choice_translation_domain}) }}
</div>
{% set i=i+1 %}
{% endfor %}
</div>
{% endblock choice_widget_expanded %}
And use it in controller template, where form is shown
{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}
When using Symfony, I recommend overriding all Twig fields in app/Resources/views/Form/fields.html.twig
And then on config.yml you just need to make this available by adding it to twig's config
twig:
form_themes:
- 'Form/fields.html.twig'

Big Cartel Luna Theme. Cart will not proceed to checkout

I'd love some help with this.
On the Cart page, when the "use my stores Layout" is selected, when customers click "Check Out", it just keeps cycling on the page and won't proceed to checkout. This is a known issue with the Luna theme for Bigcartel.
The solution I found says you need to uncheck it, but when you do, you get the error message:
"You must include {{ head_content }} inside the <head> tag of your content"
This means there's no page formatting in the code. I'm not big on the code, though I've tried for a bit to get this to work, stealing code for other pages in the theme, and failed. (it's been years since I've messed with code, so any help would be a big one).
Thank you
Here's the code for the page:
<header class="product_header page_header">
<h1>Cart</h1>
<span class="dash"></span>
</header>
{% if cart.items != blank %}
<form id="cart-form" {% unless cart.shipping.enabled or cart.discount.enabled %}class="no_options"{% endunless %} method="post" action="/cart" accept-charset="utf8">
<input type="hidden" name="utf8" value='✓'>
<div id="cart_description">
<section id="cart_items">
<ul>
{% for item in cart.items %}
<li class="cart_item {% unless item.product.has_default_option %}with_option{% endunless %}" id="item-{{ item.id }}">
<div class="item_image"><img src="{{ item.product.image | product_image_url: "thumb" }}" alt="Photo of {{ item.name }}"></div>
<dl>
<dt>{{ item.product.name }}</dt>
<dd class="item_price">{{ item.unit_price | money_with_sign }}{% if item.quantity > 1 %}<span class="item_quantity">(x{{ item.quantity }})</span>{% endif %}</dd>
<dd class="quantity_input">{{ item | item_quantity_input }}</dd>
{% unless item.product.has_default_option %}<dd class="item_option">{{ item.option.name }}</dd>{% endunless %}
</dl>
Remove item
</li>
{% endfor %}
</ul>
</section>
{% if cart.shipping.enabled or cart.discount.enabled %}
<section id="cart_options">
<ul>
{% if cart.shipping.enabled %}
{% if cart.shipping.strict %}
<li id="shipping_option">
<label for="country">Shipping</label>
{{ store.country | country_select }}
{% if cart.shipping.pending %}
{% if cart.country %}
<span class="no_shipping">We don't ship to {{ cart.country.name }}</span>
{% endif %}
{% endif %}
</li>
{% endif %}
{% endif %}
{% if cart.discount.enabled %}
<li id="cart_discount" class="cart_item">
{% if cart.discount.pending %}
<label id="cart_discount_label" for="cart_discount_code">Discount</label>
{{ cart.discount | discount_code_input }}
{% elsif cart.discount.free_shipping %}
<label for="cart_discount_code">Discount</label>
<p>{{ cart.discount.name }}</p>
{% else %}
<label for="cart_discount_code">Discount</label>
<p>{{ cart.discount.name }}</p>
{% endif %}
</li>
{% endif %}
</ul>
<div class="cart-update">
<button id="update-btn-footer" class="update-btn button disabled" name="update" type="submit" title="Update your cart total"><span>Update total</span></button>
</div>
</section>
{% else %}
<section id="cart_options" class="solo_update">
<div class="cart-update">
<button id="update-btn-footer" class="update-btn button disabled" name="update" type="submit" title="Update your cart total"><span>Update total</span></button>
</div>
</section>
{% endif %}
</div>
<section id="cart_summary">
<ul>
<li>
<h3>Items</h3>
<span>{{ cart.subtotal | money_with_sign }}</span>
</li>
{% if cart.shipping.enabled %}
<li id="cart-shipping-tax">
<h3>Shipping</h3>
{% if cart.shipping.pending %}
{% if cart.country %}
<span class="shipping-amount">Select another country</span>
{% else %}
<span class="shipping-amount">Select country</span>
{% endif %}
{% else %}
<span class="shipping-amount">{{ cart.shipping.amount | money_with_sign }}</span>
{% endif %}
</li>
{% else %}
<li id="cart-shipping-tax" class="not_set">
<h3>Shipping</h3>
<span>Applicable fees apply</span>
</li>
{% endif %}
{% if cart.discount.enabled %}
{% if cart.discount.pending %}
{% elsif cart.discount.free_shipping %}
<li>
<h3>Discount</h3>
<span>Free shipping!</span>
</li>
{% else %}
<li>
<h3>Discount</h3>
<span>-{{ cart.discount.amount | money_with_sign }}</span>
</li>
{% endif %}
{% endif %}
<li id="cart_total">
<h3>Total</h3>
<h2>{{ cart.total | money_with_sign }}</h2>
</li>
</ul>
<button id="checkout-btn" class="button" type="submit" title="Checkout">Checkout</button>
</section>
</form>
{% else %}
<div id="cart_empty">
<p>Your cart is empty! Sounds like a good time to start shopping.</p>
</div>
{% endif %}
Thanks!
There's not any known issues with the Luna theme code that prevents customers from being able to check out - you shouldn't need to edit any settings or change any code.
It sounds like your custom domain might be setup incorrectly with an IFRAME though, as this is known to cause problems with the cart page redirecting to the checkout. You can test this by using your storename.bigcartel.com URL vs. the custom domain to see if this is the case.
Since this isn't related specifically to your theme, you'll want to get in touch with Big Cartel support directly and they should be able to help troubleshoot further.

Resources