Adding metafields above Add to cart button in product-form snippet

Pimamour
New Member
1 0 0

Hi,

I'm not a developper, I play around the code since I sometimes understand the general logic and can identify some elements but I'm coding-illiterate for sure.

And I have a question regarding the code below.

My theme (Retina from Out of the Sandbox) is a little intricated. I have a product page template, "inside" this template a product section and "inside" the product section, a product snippet = the product form.

The product form contains the basic information for my products : display of all 3 options (in my case such as "style","color" and "size") and price.

I created an alternate template (product page) and an alternate section (product section) for some of my products and since I wanted to add a specific metafield above the Add to Cart Button, I also created an alternate product form.

Its working well but I still have a question.

There are 5 instances of product-form in this snippet (in red below). Since I called this alternate snippet product-form2, should i rename those instances to product-form2 (especially the "id" ones)?

There are also 4 instances of product_form (in blue below) but its my guess, i don't have to rename those.

Thanks in davance for any inputs.

Chris

 

Code can be viewed here: https://pastebin.pl/view/ddb0941f

product-form2.liquid

<style>
del {background-color: DarkSalmon;}
ins {background-color: beige;}
</style>

{% if product.available %}

{% if section.settings.show_payment_button %}
{% assign show_payment_button = true %}
{% elsif show_payment_button_quickshop %}
{% assign show_payment_button = true %}
{% else %}
{% assign show_payment_button = false %}
{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

<div class="clearfix product_form init
{% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %}"
id="product-form-{{ product.id }}{{ section.id }}{{ block.id }}"
data-money-format="{{ shop.money_format }}"
data-shop-currency="{{ shop.currency }}"
data-select-id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}"
data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
data-product="{{ product | json | escape }}"
{% if settings.limit_quantity or settings.display_inventory_left %}
data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
{% endif %}
data-product-id="{{ product.id }}">
{% form 'product', product, id: "product-form" %}

{% if product.available %}
{% if settings.display_inventory_left %}
<div class="items_left">
{% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
{% capture items_left_text %}
{% if variant.inventory_quantity == 1 %}
{{ 'products.product.items_left_count.one' | t }}
{% else %}
{{ 'products.product.items_left_count.other' | t }}
{% endif %}
{% endcapture %}
{% if variant.inventory_quantity <= settings.inventory_threshold %}
{{ variant.inventory_quantity }} {{ items_left_text }}
{% endif %}
{% endif %}
</div>
{% endif %}
{% endif %}

{% if product.options.size > 1 %}
<div class="select">
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
<div class="select">
<label>{{ product.options[0] }}</label>
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% else %}
<input type="hidden" name="id" value="{{ variant.id }}" />
{% endif %}

{% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
<div class="swatch_options">
{% for option in product.options %}
{% include 'product-swatch' with option %}
{% endfor %}
</div>
{% endif %}

{% comment %} METAFIELD HERE {% endcomment %}
{{ product.metafields["general"]["shipping1"] }}
<span style="color:DarkOliveGreen;"><label>MAKE SURE THAT WHAT YOU <span style="color:red"><ins>ADD TO THE CART/BUY NOW</ins></span> IS WHAT YOU CHOOSE FROM THE <span style="color:red"><ins>MENU</ins></span>, NOT FROM <del>THE PICTURE</del>. Yes, that's a little tricky.</label></span>

<div class="purchase-details smart-payment-button--{{ show_payment_button }}">
{% if settings.display_product_quantity %}
<div class="purchase-details__quantity">
<label for="quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
</div>
{% endif %}
<div class="purchase-details__buttons">
{% if settings.cart_action == 'reload_page' %}
<input type="hidden" name="return_to" value="back" />
{% elsif settings.cart_action == 'redirect_checkout' %}
<input type="hidden" name="return_to" value="/checkout" />
{% endif %}

{% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
<button type="{% if settings.cart_action == 'ajax' %} button {% else %} submit {% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %} action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
<span class="text">{{ add_to_cart_label }}</span>
</button>
{% if show_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>

{% endif %}

Reply 1 (1)
Tmac
Shopify Partner
14 0 4

Here's your code in a code block, much clearer. 

<style>
del {background-color: DarkSalmon;}
ins {background-color: beige;}
</style>

{% if product.available %}

{% if section.settings.show_payment_button %}
{% assign show_payment_button = true %}
{% elsif show_payment_button_quickshop %}
{% assign show_payment_button = true %}
{% else %}
{% assign show_payment_button = false %}
{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

<div class="clearfix product_form init
{% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %}"
id="product-form-{{ product.id }}{{ section.id }}{{ block.id }}"
data-money-format="{{ shop.money_format }}"
data-shop-currency="{{ shop.currency }}"
data-select-id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}"
data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
data-product="{{ product | json | escape }}"
{% if settings.limit_quantity or settings.display_inventory_left %}
data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
{% endif %}
data-product-id="{{ product.id }}">
{% form 'product', product, id: "product-form" %}

{% if product.available %}
{% if settings.display_inventory_left %}
<div class="items_left">
{% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
{% capture items_left_text %}
{% if variant.inventory_quantity == 1 %}
{{ 'products.product.items_left_count.one' | t }}
{% else %}
{{ 'products.product.items_left_count.other' | t }}
{% endif %}
{% endcapture %}
{% if variant.inventory_quantity <= settings.inventory_threshold %}
{{ variant.inventory_quantity }} {{ items_left_text }}
{% endif %}
{% endif %}
</div>
{% endif %}
{% endif %}

{% if product.options.size > 1 %}
<div class="select">
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
<div class="select">
<label>{{ product.options[0] }}</label>
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% else %}
<input type="hidden" name="id" value="{{ variant.id }}" />
{% endif %}

{% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
<div class="swatch_options">
{% for option in product.options %}
{% include 'product-swatch' with option %}
{% endfor %}
</div>
{% endif %}

{% comment %} METAFIELD HERE {% endcomment %}
{{ product.metafields["general"]["shipping1"] }}
<span style="color:DarkOliveGreen;"><label>MAKE SURE THAT WHAT YOU <span style="color:red"><ins>ADD TO THE CART/BUY NOW</ins></span> IS WHAT YOU CHOOSE FROM THE <span style="color:red"><ins>MENU</ins></span>, NOT FROM <del>THE PICTURE</del>. Yes, that's a little tricky.</label></span>

<div class="purchase-details smart-payment-button--{{ show_payment_button }}">
{% if settings.display_product_quantity %}
<div class="purchase-details__quantity">
<label for="quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
</div>
{% endif %}
<div class="purchase-details__buttons">
{% if settings.cart_action == 'reload_page' %}
<input type="hidden" name="return_to" value="back" />
{% elsif settings.cart_action == 'redirect_checkout' %}
<input type="hidden" name="return_to" value="/checkout" />
{% endif %}

{% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
<button type="{% if settings.cart_action == 'ajax' %} button {% else %} submit {% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %} action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
<span class="text">{{ add_to_cart_label }}</span>
</button>
{% if show_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>

{% endif %}