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.
Related
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
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?
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.
I am developing a site on Shopify and I need to know how to change color of selected menu items. When a user clicks on any menu items, the color will change and remove once another menu item is selected.
I have tried to solve this problem many times now by using CSS and JQuery, but nothing I do seems to work.
Here is the code for the megamenu liquid file in Shopify.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-
top="197">
<div class="container">
<div class="mega-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav" id="navbar">
{% assign meagemenu_lists = settings.Megamenu-list %}
{% for link in linklists[meagemenu_lists].links %}
{% assign item = link.title | downcase %}
<li class="level1 dropdown">
<a class="megamenu_icon{% increment count %} a1" href="{{ link.url }}"
title="{{link.title}}">{{ link.title }}</a>
{% for i in (2..5) %}
{%capture Megamenu%}megamenu_{{i}}_parent{%endcapture%}
{% if settings[Megamenu] == item %}
<div class="sub-menu dropdown-menu">
<div class="top-sub-menu">
<div class="item">
{% if settings.service-megamenu-icon1 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon1']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title1'] }}</h3>
<p>{{ settings['service-megamenu-subtitle1'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon2 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon2']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title2'] }}</h3>
<p>{{ settings['service-megamenu-subtitle2'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon3 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon3']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title3'] }}</h3>
<p>{{ settings['service-megamenu-subtitle3'] }}</p>
</div>
</div>
<!-- End item -->
</div>
<ul class="menu-level-1">
{% for j in (1..3) %}
{% capture mega_title %}megamenu_{{ i }}_column_{{ j }}_title{%
endcapture %}
{% capture mega_col %}megamenu_{{ i }}_column_{{ j }}_menu{%
endcapture %}
<li class="level2"><h4>{{ settings[mega_title] }}</h4>
<ul class="menu-level-2">
{% for link in linklists[settings[mega_col]].links %}
<li class="level3"><a href="{{ link.url }}" title="{{
link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% capture _image1 %}megamenu_{{ i }}_image1.jpg{% endcapture %}
{% capture _image2 %}megamenu_{{ i }}_image2.jpg{% endcapture %}
<li class="level2">
<img src="{{ _image1 | asset_url }}" alt="Sub-Menu" />
</li>
<li class="level2">
<img src="{{ _image2 | asset_url }}" alt="Sub-Menu" />
</li>
</ul>
<div class="bottom-sub-menu">
<p>{{ settings['Megamenu-description'] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
<!-- End Dropdow Menu -->
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
There will be a CSS class somewhere in the menu HTML which applies a CSS rule to color the active item. Across different e-commerce themes and platforms, this class is generally 'active', 'open', 'nav-open'. This class may be added via JavaScript after page load, so you may not see it in the HTML file.
I recommend using the inspect element tool to find the rule being applied to the item.
I'm using Twitter Bootstrap and Symfony 2 with Twig. I have this for all my pages:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
<li class="active">Expenses</li>
<li>Reports</li>
<li>Categories</li>
<li>Months</li>
<li>Bank Accounts</li>
</ul>
</div>
</div>
I don't want to copy it on each page... The problem is that the class active attribute should be put only for the cuurent page. Is there a way to succeed without using JavaScript, only with some king of macro or include? Thank you very much in advance!
UPDATE
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
{% if var == 'Expenses' %}
<li class="active">Expenses</li>
{% else %}
<li>Expenses</li>
{% endif %}
{% if var == 'Reports' %}
<li class="active">Reports</li>
{% else %}
<li>Reports</li>
{% endif %}
{% if var == 'Categories' %}
<li class="active">Categories</li>
{% else %}
<li>Categories</li>
{% endif %}
{% if var == 'Months' %}
<li class="active">Months</li>
{% else %}
<li>Months</li>
{% endif %}
{% if var == 'Bank Accounts' %}
<li class="active"><li>Bank Accounts</li>
{% else %}
<li><li>Bank Accounts</li>
{% endif %}
</ul>
</div>
</div>
My not very elegant try. And I call it with:
{% include 'EMBudgetTrackerBundle::navbar.html.twig' with {'var':'Categories'} %}
The easy way to do this is using the routes:
<ul class="nav nav-pills">
<li {% if app.request.attributes.get('_route') == 'your_route' %} class="active" {% endif %}>
MyTitle
</li>
...
</ul>
This is an adaptation of a solution provided by #Winzou.
It is quite simple:
Define this as a single twig with
{% block menu_block %} //your content here {% endblock %}
Use your block in every page
{% block menu_block %} {{ parent() }} {% endblock %}
Make conditional statements for give your class at the current menu element. Obviously you have to pass to your twig (or retrieve from request, i.e.) the name or id of your page, to make what you're trying to do
Here's an example.
{% if menu.url == current_url %} class="active"{% endif %}