I was asked to move the add to cart & buy it now button above the social icons but they have the buttons split off into a snippet and when I pull the code for the add to cart button out of the snippet and put it into the product section it stops functioning. I'm newish to the shopify platform so not understanding what I need to do to get these buttons to work properly outside of the snippet. I tried just dropping the code directly into the product section but got no functionality. I tried putting it into it's own snippet inside of a form and rendering it but the button would still not add the item to the cart.
Here is the code in the product section:
{% capture product_form_config %}
{ "money_format": {{ shop.money_format | json }},
"enable_history": true,
"sold_out": {{ "products.product.sold_out" | t | json }},
"button": {{ 'products.product.add_to_cart' | t | json }},
"unavailable": {{ 'products.product.unavailable' | t | json }},
"quickview": {% if template == 'product.quick' %}true{% else %}false{% endif %},
"featured_product": false
}
{% endcapture %}
{% render 'product-form',
product: product,
product_type: 'product',
product_form_config: product_form_config,
current_variant: current_variant %}
and here is the code in the product-form snippet. Any advice you can give me about getting the last few lines of code out of the snippet and into the product section with the add to cart buttons working would be much appreciated!
{%- liquid
if product_type == 'featured_product'
assign selector_id = section.id | prepend: 'fp-product-select-'
elsif product_type == 'quickview'
assign selector_id = product.id | prepend: 'qv-product-select-'
elsif product_type == 'product'
assign selector_id = product.id | prepend: 'product-select-'
endif
assign call_to_action = 'products.product.add_to_cart' | t
unless current_variant.available
assign call_to_action = 'products.product.sold_out' | t
endunless
-%}
{% form 'product', product, id: "AddToCartForm", class: "product__form-container product_form", data-product-form: product_form_config, data-product-id: product.id %}
{% render 'product-price', variant: current_variant, product: product %}
<div class="spi-banner">
{{ form | payment_terms }}
</div><!-- /#spi-banner -->
{% if product.options.size > 1 %}
<div class="product__variants-select select" {% if product.variants.size == 1 or settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
<select id="{{ selector_id }}" name='id'>
{% for variant in product.variants %}
<option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
</div>
{% if settings.product_variants == 'swatches' %}
{% for option in product.options_with_values %}
{% render "swatch",
option: option,
current_variant: current_variant,
product: product,
show_color_swatches: settings.show_color_swatches,
color_swatch_shape: settings.color_swatch_shape,
color_swatch_style: settings.color_swatch_style %}
{% endfor %}
{% endif %}
{% elsif product.options.size == 1 and product.variants.size > 1 %}
<div class="product__variants-select product__variants-single-option select" {% if settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
<label for="{{ selector_id }}" class="product__variants-single-option-label">{{ product.options[0] }}</label>
<select id="{{ selector_id }}" name='id'>
{% for variant in product.variants %}
<option data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
</div>
{% if settings.product_variants == 'swatches' %}
{% for option in product.options_with_values %}
{% render "swatch",
option: option,
current_variant: current_variant,
product: product,
show_color_swatches: settings.show_color_swatches,
color_swatch_shape: settings.color_swatch_shape,
color_swatch_style: settings.color_swatch_style %}
{% endfor %}
{% endif %}
{% elsif product.variants.size == 1 %}
<select id="{{ selector_id }}" name="id" {% if product.variants.size == 1 or settings.product_variants == 'swatches' %}style="display: none;"{% endif %}>
{% for variant in product.variants %}
<option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
{% else %}
<div class="what-is-it">
{% if product.options.first != 'Title' %}
<label>{{ product.options.first }}:</label>
{% for variant in product.variants %}
<span class="it-is">{{ variant.option1 | escape }}</span>
{% endfor %}
{% endif %}
</div>
<div class="product-variants"></div><!-- product variants -->
<input type="hidden" id="{{ variant.id }}" name="id" data-sku="{{ variant.sku }}" value="{{ product.variants[0].id }}" />
{% endif %}
<div class="clear"></div>
{% if settings.product_show_sku %}
<div class="product__sku-container sku js-product-sku-container{% if current_variant.sku == blank %} hide{% endif %}">
<span class="product__sku-label">{{ 'customer.order.details.sku' | t }}</span>
<span class="product__sku-value js-product-sku">{{ current_variant.sku }}</h5>
</div><div class="clear"></div>
{% endif %}
{% if settings.product_show_quantity %}
<div class="product__quantity-wrapper">
<label class="product__quantity-label" for="quantity">{{ 'products.product.quantity' | t }}</label>
<input class="product__quantity-input" min="1" type="number" id="quantity" name="quantity" value="1" />
</div>
{% endif %}
<div id="product-add" class="product__add-container">
{% if settings.product_show_payment_button %}<div class="clear"></div>{% endif %}
<div class="note note-success mt3 js-added-msg" style="display: none">
<b>{{ 'products.product.added' | t }}</b> <a class="underline" href="{{ routes.cart_url }}">{{ 'products.product.view_cart' | t }}</a> {{ 'products.product.or' | t }} <a class="underline" href="{{ routes.all_products_collection_url }}">{{ 'products.product.continue' | t }}</a>.
</div>
<div class="note note-error js-error-msg" style="display: none">
<b>{{ 'cart.general.cart_error' | t }}</b> {{ 'cart.general.update_qty_error' | t }}
</div>
<input id="addToCart" type="submit" name="button" class="product__add-button add clearfix AddtoCart js-ajax-submit {% if section.settings.show_payment_button or product.selling_plan_groups.size == 0 %} secondary-button{% endif %}" value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />
{% if settings.product_show_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
<p class="product__add-msg add-to-cart-msg"></p>
<div class="clear"></div>
{% endform %}
a little of this and a little of that
