vue js button disable and enable - vue.js

when page is landing default next button is disabled, we will selected one radio button
next button is disabled.
condition based on work with disable and enable next button
{% if cust_package == '6 Free Trades' %}
Subscribe for more Trades options will be enabled once you consume all 6 free trades
{% comment %} {% elif cust_package == " " %}
{% endcomment %}
{% elif cust_package == "" %}
Subscribe for more Trades options will be enabled once you consume all 6 free trades
{% endif %}
<hr style="position: relative;top: -4px;border-color: lightgray;">
<p class="head-trades" style="top: -11px;"> Subscribe for more Trades:</p>
{% if cust_package and package_value != 0%}
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="15 Trades for $6.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
</p>
<div v-if="subscribe == '15 Trades for $6.99'">
{% if cust_package %}
{% if cust_package == '15 Trades for $6.99' %}
{% if package_value == 0 and cust_package == '15 Trades for $6.99' %}
<p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '15 Trades for $6.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 15 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="30 Trades for $12.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">30 Trades for $12.99 </span>
</p>
<div v-if="subscribe == '30 Trades for $12.99'">
{% if cust_package %}
{% if cust_package == '30 Trades for $12.99' %}
{% if package_value == 0 and cust_package == '30 Trades for $12.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '30 Trades for $12.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 30 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="120 Trades for $24.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">120 Trades for $24.99 </span>
</p>
<div v-if="subscribe == '120 Trades for $24.99'">
{% if cust_package %}
{% if cust_package == '120 Trades for $24.99' %}
{% if package_value == 0 and cust_package == '120 Trades for $24.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '120 Trades for $24.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 120 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
default next button is disable and click on radio button next button is enable

Related

How to enable and disable next button in vue-form-generator based on user selections in a multi step form

We are using vue-form-generator and implemented a multi steps screen to post an Ad/Trade for users to buy or sell items. Here is the code for the 2nd screen when users get to select different subscription packages(plans). That means users can use 6 Free Trades as a free plan and once they consume all the Free Trades plan, they will be able to buy a paid plan(package):
<!--This is a multi step(screens) form and first step is introduction screen and second step is where user enters
a category and based on that category we prompts Next screen-->
<tab-content v-if="step === 2">
<div style="height: auto;" class="price_package">
<p id="progres_radio" class="progress_bar1"></p>
<p id="consumerTwoRadio" class="progress_percent2"></p>
<h1 class="preview_adttl" style="margin-top: -24px;">Post Trade</h1>
{% comment %} {% if plan_expires == 'expired' %}
<p>Your current month plan is expired. please renew to new plan.</p>
{% endif %} {% endcomment %}
<div class="radio_select">
<p class="head-trades" >Free Trades: </p>
{% if planValue == "6" or freePackage == "True" %}
<p class="sixfreetrade">
<input type="radio" id="consumer" name="flag"
class="classnameee" value="6 Free Trades" disabled >
{% if freePackage == "True" and consumed_ads_free == 6 %}
<span style="position: relative;top: 22px;" > All 6 free trades are consumed.</span>
{% comment %} class="postad_p" Please select a paid subscription below if you want to post additional Trades {% endcomment %}
{% elif freePackage == "True" %}
<span style="position: relative;top: 22px;" >6 Free Trades </span>
{% endif %}
</p>
{% elif planValue != "6" %}
<p class="sixfreetrade">
<input type="radio" id="consumer" name="flag"
v-model="subscribe" value="6 Free Trades">
<span style="position: relative;top: 22px;" >6 Free Trades </span>
</p>
{% endif %}
<div style="position: relative;top: 15px;
left: 23px;">
</div>
<div v-if="subscribe == '6 Free Trades'" style="position: relative;top: 28px;">
{% if cust_package %}
{% comment %} {% if freePackage == '6 Free Trades' %} {% endcomment %}
<p>* You consumed {{consumed_ads_free}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% comment %} {% endif %} {% endcomment %}
{% endif %}
</div>
<!-- <p class="postad_p">Personal trades can be posted one ad per month, which will appear with "sale by-->
<!-- owner tag"</p><br>-->
<br>
{% if cust_package == '6 Free Trades' %}
<p style="font-size: small;color: #921dcf;" >Subscribe for more Trades options will be enabled once you consume all 6 free trades</p>
{% comment %} {% elif cust_package == " " %}
<p style="font-size: small;color: #921dcf;" ></p> {% endcomment %}
{% elif cust_package == "" %}
<p style="font-size: small;color: #921dcf;" >Subscribe for more Trades options will be enabled once you consume all 6 free trades</p>
{% endif %}
<hr style="position: relative;top: -4px;border-color: lightgray;">
<p class="head-trades" style="top: -11px;"> Subscribe for more Trades:</p>
{% if cust_package and package_value != 0%}
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="15 Trades for $6.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
</p>
<div v-if="subscribe == '15 Trades for $6.99'">
{% if cust_package %}
{% if cust_package == '15 Trades for $6.99' %}
{% if package_value == 0 and cust_package == '15 Trades for $6.99' %}
<p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '15 Trades for $6.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 15 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="30 Trades for $12.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">30 Trades for $12.99 </span>
</p>
<div v-if="subscribe == '30 Trades for $12.99'">
{% if cust_package %}
{% if cust_package == '30 Trades for $12.99' %}
{% if package_value == 0 and cust_package == '30 Trades for $12.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '30 Trades for $12.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 30 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="120 Trades for $24.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">120 Trades for $24.99 </span>
</p>
<div v-if="subscribe == '120 Trades for $24.99'">
{% if cust_package %}
{% if cust_package == '120 Trades for $24.99' %}
{% if package_value == 0 and cust_package == '120 Trades for $24.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '120 Trades for $24.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 120 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
{% elif cust_package and package_value == 0 %}
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="15 Trades for $6.99" v-model="subscribe">
<span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
</p>
<div v-if="subscribe == '15 Trades for $6.99'">
{% if cust_package %}
{% if cust_package == '15 Trades for $6.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '15 Trades for $6.99' %}
<p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '15 Trades for $6.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 15 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="30 Trades for $12.99" v-model="subscribe">
<span style="" class="Business_postadTrade">30 Trades for $12.99</span>
</p>
<div v-if="subscribe == '30 Trades for $12.99'">
{% if cust_package %}
{% if cust_package == '30 Trades for $12.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '30 Trades for $12.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 1 and cust_package == '30 Trades for $12.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 30 trades.</p>
<p>* Want more trades, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="120 Trades for $24.99" v-model="subscribe">
<span style="" class="Business_postadTrade">120 Trades for $12.99</span>
</p>
<div v-if="subscribe == '120 Trades for $24.99'">
{% if cust_package %}
{% if cust_package == '120 Trades for $24.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '120 Trades for $24.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '120 Trades for $24.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 120 trades.</p>
{% comment %} <p>* Want more trades, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
{% else %}
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="15 Trades for $6.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
</p>
<div v-if="subscribe == '15 Trades for $6.99'">
{% if cust_package %}
{% if cust_package == '15 Trades for $6.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '15 Trades for $6.99' %}
<p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '15 Trades for $6.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 15 trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="30 Trades for $12.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">30 Trades for $12.99 </span>
</p>
<div v-if="subscribe == '30 Trades for $12.99'">
{% if cust_package %}
{% if cust_package == '30 Trades for $12.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '30 Trades for $12.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 1 and cust_package == '30 Trades for $12.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 30 trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="120 Trades for $24.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">120 Trades for $12.99</span>
</p>
<div v-if="subscribe == '120 Trades for $24.99'">
{% if cust_package %}
{% if cust_package == '120 Trades for $24.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '120 Trades for $24.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '120 Trades for $24.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 120 trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
{% endif %}
{% comment %} <p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio"
id="business" name="flag"
value="Unlimited for $99.00" v-model="subscribe">
<span style="" class="Business_postadTrade">Unlimited for $99.00</span>
</p> {% endcomment %}
{% comment %} <div v-if="subscribe == 'Unlimited for $99.00'">
{% if cust_package %}
{% if cust_package == 'Unlimited for $99.00' %}
<p>* You consumed {{consumed_ads}} ads and left with {{package_value}} ads.</p>
<p>* Want more ads in this month, please upgrade higher package</p>
{% else %}
<p>* You consumed 0 ads and left with Unlimited ads.</p>
<p>* Want more ads in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div> {% endcomment %}
<!---When 6 Free trades option is selected, Ńext' button is enabled -->
<span class="prev_next" style="top: 11px;left: 51%;">
<button class="prev_next_btn" #click.prevent="prev_first()">Previous</button>
<button class="step1_next" style="position: relative; left: 0px;
top: 0px;"
#click.prevent="next_first()"
:disabled="isdisabled" id="buttonDisabled">
Next
</button>
</span>
</div>
</div>
</tab-content>
As a next step, we need to add new logic or condition here:
When the User consumed all 6 Free Trades, package_value becomes 0 (zero) and
then the Next button is disabled. So the User is supposed to select paid plan(package) then ´Next´ button should be enabled, but we are stuck
in this screen to enable and disable ´Next´ button for selecting a paid plan(package).
I´m new to vue-form-generator because the source code is inherited from the previous developer. I appreciate it if someone can review the above code and help us?
Thanks in advance

multi tag filter not getting product info in shopify using custom code withou app

i have created custom code sidebar filter. if filter by one tag its working fine, suppose if we click another tag no product details are showing.
Snippet/sidebar-filter.liquid
{% for block in section.blocks %}
{% assign heading = block.settings.filter_heading %}
{% assign tags = block.settings.filter_tags | split: ',' %}
<div class="collection-filter-tag-category">
<h4> {{ heading }} </h4>
<div class="filter-li-scroll">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li class="active">
{{ tag | link_to_remove_tag : tag }}
</li>
{% else %}
<li class="">
{{ tag | link_to_add_tag : tag }}
</li>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
Templates/collection.liquid:
{% section 'collection-template' %}
Templates/collection-template.liquid:
<div id="collection-product-filter-pane">
<div class="sidebar_filter">
{% include 'sidebar-filter' %}
</div>
<div class="page-width" id="Collection">
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when '2' %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when '3' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when '4' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when '5' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% for product in collection.products %}
<div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height %}
</div>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
<div class="grid__item">
<div class="grid grid--uniform">
{% for i in (1..limit) %}
<div class="grid__item {{ grid_item_width }}">
<div class="grid-view-item">
<a href="#" class="grid-view-item__link">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
<span class="product-price__price">$19.99</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="list-view-items">
{% for product in collection.products %}
<a href="{{ product.url | within: collection }}" class="list-view-item">
{% include 'product-card-list', product: product %}
</a>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
{% for i in (1..4) %}
<a href="#" class="list-view-item">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper">
<div class="list-view-item__image">
{%- assign placeholder = 'placeholder-product-' | append: i -%}
{% include placeholder %}
</div>
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
</div>
<div class="list-view-item__price-column">
<span class="product-price__price">$19.99</span>
</div>
</a>
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
</div>
</div>
if filter by another tag no product list coming
please help me to get result, I'm stucking two days pls someone help me

Shopify - Change size variant from select dropdown to buttons

I would like to change my variant display from dropdown (select) to using buttons instead. I cannot find any up to date guides elsewhere online. I am using the Debut shopify theme.
it currently looks like this dropdown but I want to change this to buttons with the sizes. i.e. so you click your desired size button and then click the standard 'add to cart' button (which is already in place, but currently for the dropdown) below it.
Here is the code:
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}
{%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels {% endunless %}
{%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
{%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-index="option{{ forloop.index }}"
>
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
</div>
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{%- if variant == current_variant %} selected="selected" {%- endif -%}
>
{{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>
{% endfor %}
</select>
{% if section.settings.show_quantity_selector %}
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input>
</div>
</div>
{% endif %}
<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
data-error-message-wrapper
role="alert"
>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>
<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
{%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
{%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn btn--rounded product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>
Thanks a lot!
Replace your select boxes with input radio buttons:
{%- for variant in product.variants -%}
<input
type="radio"
name="id"
class="variant-option"
value="{{ variant.id }}"
id="variant-option-{{ variant.id }}"
{% unless variant.available %} disabled{% endunless %}
{% if product.selected_variant.id == variant.id %} checked{% endif %}
>
<label for="variant-option-{{ variant.id }}">{{ variant.title }}</label>
{%- endfor -%}
And then just add some styles to display these inputs as buttons e.g:
.variant-option + label {
background-color: #f2f2f2;
padding: 10px 15px;
margin: 0 5px;
}
.variant-option:checked + label {
background-color: #000;
color: #fff;
}
.variant-option[disabled] + label {
opacity: 0.5;
}
.variant-option {
display: none;
}

In Shopify how do I set the sort order of comments by most recent first?

How can I make it so that the most recent comment display first? I haven't been able to find this in the documentation and currently my comments are out of order.
This is in my article template:
{% for comment in article.comments %}
<li id="{{ comment.id }}" class="comment{% unless number_of_comments > article.comments_count %}{% if forloop.first %} first{% endif %}{% endunless %}{% if forloop.last %} last {% endif %}">
{% include 'comment' %}
</li>
{% unless forloop.last %}
and in my comments include:
<div class="grid">
<div class="grid__item medium-up--one-quarter">
<span class="comment-author">{{ comment.author }}</span>
<span class="comment-date">
{{ comment.created_at | time_tag: format: 'month_day_year' }}
</span>
</div>
<div class="grid__item medium-up--three-quarters">
<div class="rte">
{% comment %}ly_code_replace_for_[ comment.content ]_begin{% endcomment %}{% include 'ly-content' with comment %}{{ ly_translation }}{% comment %}ly_code_replace_end{% endcomment %}
</div>
</div>
</div>
UPDATE: In order to resolve this I had to add:
{% assign artComments = article.comments | sort: "created_at" | reverse %}
You can use the reversed parameter in your for loop tag:
{% for comment in article.comments reversed %}
... do your thing
{% endfor %}

Shopify Wishlist memory issue

We have below code in our shopify app, however it is not working and we are getting error as :
Liquid error: Memory limits exceeded
The code loops through the customer tags and checks for product id in collections and displays the products.
Can anyone please help with identifying the issue?
{% include 'breadcrumb' %}
<div class="container">
<div class="page">
<div class="title">
<h2>{{ page.title }}</h2>
</div>
<div class="page_content">
{{ page.content }}
</div>
{% if customer %}
<ul class="wishlist-items">
<li class="head">
<ul>
<li class="col-1 hidden-xs">{{'wish_list.general.image' | t}}</li>
<li class="col-2">{{'wish_list.general.item' | t}}</li>
<li class="col-3">{{'wish_list.general.price' | t}}</li>
<li class="col-4"></li>
</ul>
</li>
<li class="tbody">
<ul>
{% for tag in customer.tags %}
{% assign the_test = '' %}
{% capture tagID %}{{ tag }}{% endcapture %}
{% for tag in customer.tags %}
{% capture curTag %}{{ tag }}{% endcapture %}
{% if curTag contains tagID %}
{% assign tagID_tmp = tagID.size | minus:curTag.size %}
{% if tagID_tmp == 0 %}
{% assign the_test = tagID %}
{% else %}
{% assign the_test = '' %}
{% endif %}
{% endif %}
{% endfor %}
{% for collection in collections %}
{% paginate collection.products by collection.all_products_count %}
{% for product in collection.products %}
{% capture productID %}{{ product.id }}{% endcapture %}
{% capture used %}{{ productID }} {{ used }}{% endcapture %}
{% unless used contains productID %}
{% assign check = tag.size | minus:productID.size | modulo:2 %}
{% if check == 0 %}{% assign display_product = true %}{% else %}{% assign display_product = false %}{% endif %}
{% if display_product and the_test contains productID %}
{% assign variant_tmp = product.selected_or_first_available_variant %}
{% for variant in product.variants %}
{% if variant.available == true and variant.price < variant_tmp.price %}
{% assign variant_tmp = variant %}
{% endif %}
{% endfor %}
<li class="item">
<ul>
<li class="col-1 hidden-xs">
<a href="{{product.url | within: collection}}" class="product-image">
<img src="{{product.featured_image | product_img_url:'medium'}}" alt="{{product.title}}" />
</a>
</li>
<li class="col-2">
<a href="{{product.url | within: collection}}" class="product-image visible-xs">
<img src="{{product.featured_image | product_img_url:'medium'}}" alt="{{product.title}}" />
</a>
{{product.title}}{% if product.variants.size > 1 %} - {{variant_tmp.title}}{% endif %}
</li>
<li class="col-3"><div class="product-price"><span class="money">{{product.price | money}}</span></div></li>
<li class="col-4">
<div class="action">
<div class="wishlist">
{% form 'customer' %}
<input type='hidden' name='contact[email]' value='{{ customer.email }}'/>
<input type='hidden' name='contact[tags]' id='remove-value' value='x{{ tagID }}' />
<button type="submit" class="remove-wishlist"><i class="fa fa-close"></i></button>
{% endform %}
</div> |
<div class="addtocart">
{% if product.available %}
<form action="/cart/add" method="post" enctype="multipart/form-data">
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="id" value="{{variant_tmp.id}}" />
<button type="submit" class="add-to-cart"><i class="fa fa-shopping-cart"></i></button>
</form>
{% else %}
<i class="fa fa-shopping-cart"></i>
{% endif %}
</div>
</div>
</li>
</ul>
</li>
{% endif %}
{% endunless %}
{% endfor %}
{% endpaginate %}
{% endfor %}
{% endfor %}
</ul>
</li>
</ul>
{% else %}
<p>{{'wish_list.general.to_create_a_wishlist_please' | t}} <a href='/account/login'>{{'wish_list.general.login' | t}}</a> {{'wish_list.general.or' | t}} <a href='/account/register'>{{'wish_list.general.register' | t}}</a>.</p>
{% endif %}
</div>
</div>
This is because of many nested loops. All the products must be sorted out, so developers used this huge construction:
{% for collection in collections %}
{% paginate collection.products by collection.all_products_count %}
{% for product in collection.products %}
...
{% endpaginate %}
{% endfor %}
{% endfor %}
I got this error on one of our clients shop.
But we can use Shopify liquid all_products['the-handle'].variable!
Original customer tags wishlist uses products ID and x. I used product handle instead of product ID and +0 instead of x.
Customer tags with Product ID:
12345678
x12345678
xx12345678
Customer tags with handles:
some-product-handle
+0some-product-handle
+0+0some-product-handle
I had to change the code, spent a lot of time, but now it works fine, without any errors.