So i trying to make div that should price and compare price of selected product variant .
{%- liquid
assign products_per_row = section.settings.products_per_row
assign products_per_page = section.settings.products_per_row | times: section.settings.rows_per_page
assign default_layout = 'grid-' | append: products_per_row
assign enable_sticky_facet = section.settings.enable_sticky_facet
assign enable_sorting = section.settings.enable_sorting
assign enable_viewing = section.settings.enable_viewing
assign enable_filtering = section.settings.enable_filtering
assign enable_filtering_color_swatches = section.settings.enable_filtering_color_swatches
assign filter_type = section.settings.filter_type
assign filter_max_items = section.settings.filtering_max_items
assign color_swatches_add_label = section.settings.filtering_color_swatches_add_label
if collection.all_products_count > 5000
assign enable_filtering = false
endif
assign blocks_count = section.blocks.size
-%}
{%- style -%}
#shopify-section-{{ section.id }} {
--section-padding-top: {{ section.settings.padding_top }}px;
--section-padding-bottom: {{ section.settings.padding_bottom }}px;
--image-position: {{ section.settings.image_position }};
}
{%- endstyle -%}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if settings.quick_view_enabled and section.settings.enable_quick_view -%}
<link rel="stylesheet" href="{{ 'section-main-product.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}
{%- if enable_sticky_facet -%}
<link rel="stylesheet" href="{{ 'component-facet-sticky.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}
{%- if section.settings.pagination == 'infinite' or section.settings.pagination == 'click' -%}
<link rel="stylesheet" href="{{ 'component-infinite-scroll.css' | asset_url }}" media="print" onload="this.media='all'">
<script src="{{ 'infinite-scroll.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<div class="section--padding{% if filter_type == 'vertical' or blocks_count > 0 %} page-width facets-vertical{% endif %}">
{%- if enable_filtering or enable_sorting or enable_viewing -%}
{%- if collection.all_products_count > 0 -%}
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{%- liquid
if blocks_count == 0
if filter_type != 'vertical'
render 'facets', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, default_layout: default_layout, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label
else
render 'facets-vertical', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label
endif
endif
-%}
{%- endif -%}
{%- endif -%}
{%- liquid
if collection.all_products_count > 0 and blocks_count > 0
if filter_type == 'vertical'
render 'facets-vertical', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, blocks: section.blocks, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label
else
render 'facets-vertical', results: collection, enable_filtering: false, enable_sorting: false, enable_viewing: false, enable_sticky_facet: enable_sticky_facet, blocks: section.blocks, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label
endif
endif
-%}
<div class="product-grid-container{% unless filter_type == 'vertical' or blocks_count > 0 %} page-width{% endunless %}">
{%- liquid
if enable_filtering or enable_sorting or enable_viewing
if collection.all_products_count > 0
if filter_type == 'vertical'
render 'facets-vertical-top', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, default_layout: default_layout, color_swatches_add_label: color_swatches_add_label
elsif blocks_count > 0
render 'facets', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, default_layout: default_layout, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label
endif
endif
endif
-%}
{%- paginate collection.products by products_per_page -%}
<div id="ProductGridContainer">
{%- if collection.products.size == 0 -%}
<div class="collection collection--empty" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay"></div>
<div class="title-wrapper center">
<p class="title title--primary h2">
{%- liquid
if collection.filters.size > 0
echo 'sections.collection_template.empty' | t
echo '<br/>'
echo 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "link link--underline"
else
echo 'sections.collection_template.no_products' | t
endif
-%}
</p>
</div>
</div>
{%- else -%}
<div class="collection">
<div class="loading-overlay"></div>
{%- liquid
assign grid_class = 'grid grid--2-col'
if section.settings.columns_mobile == '1'
assign grid_class = grid_class | append: ' grid--1-col-mobile'
endif
if products_per_row == 3
assign grid_class = grid_class | append: ' grid--3-col-tablet grid--3-col-desktop'
elsif products_per_row == 4
assign grid_class = grid_class | append: ' grid--3-col-tablet grid--4-col-desktop'
endif
-%}
<ul id="product-grid" data-id="{{ section.id }}" class="product-grid {{ grid_class }}" role="list">
{%- for product in collection.products -%}
{% if product.type != 'FREEGIFT_HIDDEN' %}
{%- liquid
assign lazy_load = true
if forloop.first
assign lazy_load = false
endif
-%}
<li class="grid__item">
{% render 'card-product',
card_product: product,
card_collection: collection,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_quick_buy: section.settings.show_quick_buy,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
enable_quick_view: section.settings.enable_quick_view,
enable_color_swatches: section.settings.enable_color_swatches,
enable_countdown: section.settings.enable_countdown,
enable_image_fill: section.settings.enable_image_fill,
lazy_load: lazy_load
%}
{% if request.page_type == 'collection' %}
{% if product.variants.size > 1 %}
<div class="product-variant-dropdown">
<form action="/cart/add" method="post">
<select name="id" class="product-variant-select">
{% for variant in product.variants %}
{% if variant.available == true and variant.compare_at_price > 0 %}
<option value="{{ variant.id }}">{{ variant.title }} - Rs. {{ variant.compare_at_price | divided_by: 100 | round: 2 }}</option>
{% elsif variant.available == false %}
<option value="{{ variant.id }}" disabled="disabled">{{ variant.title }} - Sold Out</option>
{% else %}
<!-- Handle other cases if needed -->
{% endif %}
{% endfor %}
</select>
{% unless product.available %}
<input type="submit" value="Sold Out" class="product-variant-submit-button" disabled="disabled" />
{% else %}
<input type="submit" value="Add to Cart" class="product-variant-submit-button" />
{% endunless %}
</form>
</div>
{% endif %}
{% endif %}
{% if product.has_only_default_variant %}
{% if product.available %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% unless product.available %}
<input type="submit" value="Sold Out" class="product-variant-submit-button" disabled="disabled" />
{% else %}
<input type="submit" value="Add to Cart" class="product-variant-submit-button" />
{% endunless %}
</form>
{% endif %}
{% endif %}
</li>
{% endif %}
{%- endfor -%}
</ul>
{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, pagination: section.settings.pagination %}
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endpaginate -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.main-collection-product-grid.name",
"tag": "section",
"class": "section collection-grid-section",
"settings": [
{
"type": "range",
"id": "products_per_row",
"min": 2,
"max": 4,
"step": 1,
"default": 4,
"label": "t:sections.main-collection-product-grid.settings.products_per_row.label"
},
{
"type": "range",
"id": "rows_per_page",
"min": 2,
"max": 20,
"step": 1,
"default": 2,
"label": "t:sections.main-collection-product-grid.settings.rows_per_page.label"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.all.mobile_layout.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.all.mobile_layout.columns_mobile.options__2.label"
}
],
"default": "2",
"label": "t:sections.all.mobile_layout.columns_mobile.label"
},
{
"type": "select",
"id": "pagination",
"options": [
{
"value": "infinite",
"label": "t:sections.main-collection-product-grid.settings.pagination.options__1.label"
},
{
"value": "click",
"label": "t:sections.main-collection-product-grid.settings.pagination.options__2.label"
},
{
"value": "paginated",
"label": "t:sections.main-collection-product-grid.settings.pagination.options__3.label"
}
],
"default": "paginated",
"label": "t:sections.main-collection-product-grid.settings.pagination.label"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__1.content"
},
{
"type": "checkbox",
"id": "enable_sticky_facet",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sticky_facet.label",
"info": "t:sections.main-collection-product-grid.settings.enable_sticky_facet.info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
},
{
"type": "checkbox",
"id": "enable_viewing",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_viewing.label"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__2.content"
},
{
"type": "select",
"id": "filter_type",
"options": [
{
"value": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
},
{
"value": "vertical",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
},
{
"value": "drawer",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
}
],
"default": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.label",
"info": "t:sections.main-collection-product-grid.settings.filter_type.info"
},
{
"type": "checkbox",
"id": "enable_filtering_color_swatches",
"label": "t:sections.main-collection-product-grid.settings.enable_filtering_color_swatches.label"
},
{
"type": "checkbox",
"id": "filtering_color_swatches_add_label",
"label": "t:sections.main-collection-product-grid.settings.filtering_color_swatches_add_label.label"
},
{
"type": "range",
"id": "filtering_max_items",
"min": 1,
"max": 20,
"label": "t:sections.main-collection-product-grid.settings.filtering_max_items.label",
"default": 6
},
{
"type": "header",
"content": "t:sections.all.product_card.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.all.card_image_ratio.options__1.label"
},
{
"value": "square",
"label": "t:sections.all.card_image_ratio.options__2.label"
},
{
"value": "portrait",
"label": "t:sections.all.card_image_ratio.options__3.label"
},
{
"value": "landscape",
"label": "t:sections.all.card_image_ratio.options__4.label"
},
{
"value": "wide",
"label": "t:sections.all.card_image_ratio.options__5.label"
}
],
"default": "adapt",
"label": "t:sections.all.card_image_ratio.label"
},
{
"type": "select",
"id": "image_position",
"options": [
{
"value": "20% 0",
"label": "t:sections.all.image_position.options__1.label"
},
{
"value": "top center",
"label": "t:sections.all.image_position.options__2.label"
},
{
"value": "80% 0",
"label": "t:sections.all.image_position.options__3.label"
},
{
"value": "20% 50%",
"label": "t:sections.all.image_position.options__4.label"
},
{
"value": "center center",
"label": "t:sections.all.image_position.options__5.label"
},
{
"value": "80% 50%",
"label": "t:sections.all.image_position.options__6.label"
},
{
"value": "20% 100%",
"label": "t:sections.all.image_position.options__7.label"
},
{
"value": "bottom center",
"label": "t:sections.all.image_position.options__8.label"
},
{
"value": "80% 100%",
"label": "t:sections.all.image_position.options__9.label"
}
],
"default": "center center",
"label": "t:sections.all.image_position.label",
"info": "t:sections.all.image_position.info"
},
{
"type": "checkbox",
"id": "enable_image_fill",
"default": true,
"label": "t:sections.all.product_card.enable_image_fill.label",
"info": "t:sections.all.product_card.enable_image_fill.info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.all.product_card.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.all.product_card.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.all.product_card.show_rating.label",
"info": "t:sections.all.product_card.show_rating.info"
},
{
"type": "checkbox",
"id": "show_quick_buy",
"default": true,
"label": "t:sections.all.product_card.show_quick_buy.label"
},
{
"type": "checkbox",
"id": "enable_quick_view",
"default": true,
"label": "t:sections.all.product_card.enable_quick_view.label"
},
{
"type": "checkbox",
"id": "enable_color_swatches",
"default": true,
"label": "t:sections.all.product_card.enable_color_swatches.label"
},
{
"type": "checkbox",
"id": "enable_countdown",
"default": true,
"label": "t:sections.all.product_card.enable_countdown.label"
},
{
"type": "header",
"content": "t:sections.all.padding.header.content"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "t:sections.all.padding.padding_top.unit",
"label": "t:sections.all.padding.padding_top.label",
"default": 0
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "t:sections.all.padding.padding_bottom.unit",
"label": "t:sections.all.padding.padding_bottom.label",
"default": 60
}
],
"blocks": [
{
"type": "link_list",
"name": "t:sections.main-collection-product-grid.blocks.link_list.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Quick links",
"label": "t:sections.main-collection-product-grid.blocks.link_list.settings.heading.label"
},
{
"type": "link_list",
"id": "menu",
"label": "t:sections.main-collection-product-grid.blocks.link_list.settings.menu.label"
}
]
},
{
"type": "text",
"name": "t:sections.main-collection-product-grid.blocks.text.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Heading",
"label": "t:sections.main-collection-product-grid.blocks.text.settings.heading.label"
},
{
"type": "richtext",
"id": "subtext",
"default": "<p>Share information about your brand with your customers.</p>",
"label": "t:sections.main-collection-product-grid.blocks.text.settings.subtext.label"
}
]
},
{
"type": "image",
"name": "t:sections.main-collection-product-grid.blocks.image.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.main-collection-product-grid.blocks.image.settings.image.label"
},
{
"type": "range",
"id": "image_width",
"min": 100,
"max": 500,
"step": 5,
"unit": "t:sections.main-collection-product-grid.blocks.image.settings.image_width.unit",
"label": "t:sections.main-collection-product-grid.blocks.image.settings.image_width.label",
"default": 300
},
{
"type": "url",
"id": "link",
"label": "t:sections.main-collection-product-grid.blocks.image.settings.link.label"
}
]
}
]
}
{% endschema %}
Help out all the dev to achieve me this .