product-card-grid Debut Theme

Highlighted
New Member
4 0 0

Hi Everyone!

 

I am selling fruits and veggis on my shopify page. I have variables such as: piece, kilogram, bundle (as in some herbs). 

In product-card-grid, I want to give the option (as given in the product-template) of selecting a variable and the price adjusts automatically to the chosen variable, so that when costumers adds it to the cart, the correct product variable and price is being added. 

 

I´m a beginner at programming, but a quick learner. This is what I have, but can´t seem to link all of the above. What I did, I took the part with the variants from product-template and added it to my product-card-grid. I know its not that simple, but as I said... im a beginner. 

 

{% comment %}
Renders a product card using "Grid" style
Accepts:
- max_height: {Number} Maximum height of the product's image (required)
- product: {Object} Product Liquid object (required)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

Usage:
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
{% capture the_snippet_fave_icon %}{% include 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% endunless %}

<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
<span class="visually-hidden">{{ product.title }}</span>
</a>

{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign preview_image = product.featured_media.preview_image -%}
{%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}{% unless the_snippet_fave_icon contains 'Liquid error' %}{{ the_snippet_fave_icon }}{% endunless %}
{% unless preview_image == blank %}
{% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}

<div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
alt="{{ preview_image.alt }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
<div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
</div>

<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
</noscript>

<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
<div class="product__price">
{% include 'product-price', variant: product.selected_or_first_available_variant %}
</div>
Precio por pieza<sup></sup>
</div>


<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>

<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 %}

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<center><input min="1" type="number" id="quantity" name="quantity" value="1" size="4" style="width:70px;" />
<input type="submit" value="Agregar" class="btn" />
</form>

0 Likes