I have created a new product metafield: product.metafields.my_fields.discount_code
In my product-template.liquid, there is this section:
<button class="btn cv_addtocart{% if section.settings.enable_payment_button %} btn--secondary{% else %} btn--primary{% endif %}" type="button" name="add" data-add-to-cart {% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span data-add-to-cart-text>
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
I am trying to pass the value of a metafield for a product into the add to cart button. In this case, I want the discount code which is entered into the product metafield to be included.
So am hoping to do something like this:
{% if section.settings.enable_payment_button %}
{{ form | payment_button | discountCode = product.metafields.my_fields.discount_code }}
{% endif %}
Basically, I am trying to automatically apply a normal discount to a product at checkout. I have seen the various shareable links that append the discount code to the url, but this does not suit my needs. Instead, I would like to retrieve the discount code (DISCOUNT20) from a metafield for that product on the checkout page and apply the coupon code there.
Any thoughts? I have been stuck on this for a long time
So I have figured out a more reliable route:
I located my cart template liquid file and searched for a form
<form action="/cart" method="post" >
Directly below this line I inserted this
{%- for item in cart.items -%}
{%- if item.product.metafields.my_fields.discount_code.value != blank -%}
<input type="hidden" name="discount" value="{{item.product.metafields.my_fields.discount_code.value}}" >
{%- endif -%}
{%- endfor -%}
In my case, value = an interpolated value being retrieved from a product metafield for the product in the cart.
FYI - you need to create a metafield in settings, then create a discount code, copy the discount code, go to your product that you want the discount code to apply to, access the product and scroll down to metafields, paste the discount code in the product's discount(if you named your metafield "discount", you might have named it something else) metafield.
Hence, as the form will be submitted with a name="discount" and value="discount_code", the checkout page will evaluate to true for discount and use the appropriate values. However this is only possible with the for loop.
For such a simple fix, I am surprised it was so hard to figure out. Hope this helps you!
** Some extra reading if you want: https://wearetmbr.com/shopify-auto-fill-discount-code-on-checkout-page/ **
Related
I am trying to figure out How to add meta fields to product in liquid
I have a product that has a list of meta fields (scents) how do I add the selected meta field to the product. I don’t want the scents to be variants.
Example on a candle product page user selects strawberry scent how does this get added to cart as candle strawberry scent?
I added meta-field list in settings.
This I what I have so far it renders the meta-fields.
{% if product.metafields.custom.scents != blank %}
<div class="product_scents">
{% for p in product.metafields.custom.scents.value %}
<div class="">{{ p }}</div>
{% endfor %}
</div>
{% endif %}
Thanks for having a look!
After further research this is how I solved my problem I loop over the meta fields and the selected meta field gets added to the cart as a line item of the product.
{% if product.metafields.custom.scents != blank %}
<div class="tw-flex tw-flex-col tw-py-12 tw-space-y-4">
<p>Select Your scent</p>
{% for p in product.metafields.custom.scents.value %}
<p class="line-item-property__field">
<input type="radio" name="properties[Scent]" value="{{ p }}"> <span>{{ p }}</span><br>
</p>
{% endfor %}
</div>
{% endif %}
I'm currently working on the shopify site for the B2B company where i work.
(Yeah, we know that Shopify Plus is the best option for B2Bs, but we can't afford the price)
We work on two different customer lists and really need two different prices to show to customers on the main-product page.
I managed the lists with customer tags, and also the two different prices with Variants.
Now i was trying to figure out how to show the Price of the Variant 1 to customers with the "list1" tag and the Price of the Variant 2 to customers with the "list2" tag.
(Yeah, we know that there are Wholesale Pricing app to do this, but we can't afford the monthly cost either).
I tried something like this, but i'm stuck...
Could you please help me out?
This is my last try:
{% if customer.tags contains "list1" %}
{% assign current = product.selected_or_first_available_variant %}
{%- assign target_variant = product.variants[0] -%}
<div class="no-js-hidden" id="variantPrice-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%} </div>
{% else %}
{% assign current = product.selected_or_first_available_variant %}
{%- assign target_variant = product.variants[1] -%}
<div class="no-js-hidden" id="variantPrice-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%} </div>
{% endif %}
I somehow managed to solve this. After being stuck on it for two days :P
It works with something like this:
{%- when 'price' -%}
{% if customer %}//Hide the price if not registered - endif is at the end//
{% if customer.tags contains "list1" %}
{%- assign target_variant = product.variants[0] -%}
<div class="no-js-hidden" id="price-{{ section.id }}" role="status"
{{block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true,
price_class: 'price--large' -%} </div> //It shows the price of the First Variant//
{% else %}
{%- assign target_variant = product.variants[1] -%}//I can't figure out if this is relevant for the code, but it works like this, so...//
<div id="variantPrice" role="status" {{ block.shopify_attributes }}>{%- render 'price' -%} </div> //It shows the price of the Second Variant //
{% endif %}
I don't know if this is the correct way, but it works, so it's fine :P
Hope it will help someone with the same issue.
The interesting thing about your approach here is that a customer from List type 1 would be seeing the price for the variant as List type 1 price, but there is zero stopping them from simply placing the variant with the different price from List type 2 in the cart if they wanted.
In other words, you are decorating the price displayed, which is your goal I guess, but there is no actual logic in place to ensure customers pay the correct amount. For that, you would need a different logic, one that tries hard to ensure a customer from List type 1 only gets to checkout with product variants that are assigned to List type 1. Without that logic, you're wide open to a bit of price abuse.
The approach may be very straight to the point:
{% if customer %}
{% for variant in product.variants %}
{% assign current = forloop.index | plus: 1 | prepend:'list' %}
{% if customer.tags contains current %}
{{ variant.price}}
{% assign found = true %}
{% endif %}
{% endfor %}
{% unless found %}
Display what you want to if no price has been found for logged in user
{% endunless %}
{% else %}
What you want to display when customer is not connected to an account.
{% endif %}
You may use the same logic for your add to cart form.
I'm trying to iterate over items in the shopping cart and generate an upsell div with products NOT in the cart. Below is the code I have so far, but I run into issues when adding two items to cart running the loop twice generating the html twice. Any ideas on how to resolve it? I'm stumped.
{% for item in cart.items %} // iterates over items in cart
{% if item.product.id == 4456879040188 %} // checks if product id matches in item in cart
<div class="upsell-pop" style="text-align:center; width: 100%;">
<h4>Frequently bought together</h4>
{% for prod in collections.upsell.products %} // iterates products in collection upsell
{% unless prod.handle contains "product-name" %} // shows only prods that do not contain url handle
<div>
<span class="upsell-title">{{ prod.title }}</span>
<span class="upsell-price">{{ prod.metafields["meta"]["promo"] }} {{ prod.price | money }}</span>
<img src="{{ prod.featured_image | img_url: '200x' }}" />
<a class="btn-product" href="{{prod.url}}">View Product</a>
</div>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
Another thought is to somehow check to see if product is NOT in cart items inside to replace the existing "unless" statement, but not sure how to code it.
{% unless cart.items exist then %} // I know this is not correct syntax
<div>
<span class="upsell-title">{{ prod.title }}</span>
<span class="upsell-price">{{ prod.metafields["meta"]["promo"] }} {{ prod.price | money }}</span>
<img src="{{ prod.featured_image | img_url: '200x' }}" />
<a class="btn-product" href="{{prod.url}}">View Product</a>
</div>
{% endunless %}
On my mind, there are two steps here.
First, capture your cart content to get string to compare to when you loop through your upsell collection. This could be something like that:
{%- capture cart_items -%}
{% for item in cart.items %}
{{ item.product.handle }}{% unless forloop.last %} , {% endunless %}
{% endfor %}
{%- endcapture -%}
Then loop through your collection while checking your string does not contain the handle of the current product at each iteration:
{% for product in collections['upsell'].products %}
{% unless cart_items contains product.handle %}
{{ product.title }}
{% endunless %}
{% endfor %}
Remarks:
Snippet 1 => In line_item (here called item because it's shorter to write) object you may access product object attributes: item.product.product_attr_needed
Snippet 2 => To access directly a collection object using its handle you must use collections + square brackets containing collection handle + attribute. Here 'upsell' is the handle of your upsell collection.
Not tested but this should work.
HTH
A shopify liquid question:
If no vendor is available, then shopify adds the shop name as the default vendor. I'd like those instances to be blank.
I'm trying to create an if statement which hides the vendor if there is no vendor or if it equals the default vendor name.
Here's what I've come up with so far and I'm now stuck
<div class="prod-caption">{% if product.vendor == 'test' %} {% else %} {{ product.vendor }} {% endif %} {{ product.title }}</div>
I want to do this on the product page as well as in the product grid item snippet
Can anyone help?
What you've got looks like it should work (assuming you replace 'test' with your shop's name), but I'd probably write the if statement like this:
{% if product.vendor != shop.name %}{{ product.vendor }}{% endif %} {{ product.title }}
This will work in both product.liquid and product-grid-item.liquid. (Just search for {{ product.title }} and replace it with the code above.)
We have a group of products that we want to have FREE Shipping. In order to do so, I have made their weight =0 and created a weight based shipping for 0lbs.
That way the shipping passes through the cart. But...I would like to display the actual weight on the product page.
I have created a metafield for the shipping weight, and I am trying to call that value to the product page, but not having any luck......
Here is what I am trying for code....
//------SHIPPING WEIGHT-------------------------//
{% if product.vendor == 'American Chains' %}
$('.wt').text((variant.ShippingWeight)+'lb');
// {{ variant.metafields.ShippingWeight.shipping_weight }}
{% else %}
$('.wt').text(parseInt(variant.weight * 0.0022046, 10) + 'lb');
{% endif %}
//------SHIPPING WEIGHT-------------------------//
Thanks for any help or direction on this one.
In Product.liquid you only have access to the Product. If you want to access a specific Product Variant you have to loop through the Product Variants. Within the loop you have access to the metafields for a variant.
{% for variant in product.variants %}
// to display the variant metafields use {{resource.metafields.namespace.key}}
{{ variant.metafields.ShippingWeight.shipping_weight }}
{% endfor %}
http://docs.shopify.com/themes/liquid-documentation/objects/metafield
go threw with this link
simple...
{% for field in product.metafields.instructions %}
{{ field | first }}: {{ field | last }}
{% endfor %}
Meta fields are created by using ( metafields or shopify FD ) shopify app for products edit page
Then enter the following values in form fields (Namespace,Key,Value)
After entering values,you can retrive values like following code..,
Namespace = metafield_values,
Key= color,
Value= red,
{% assign value = product.metafields.metafield_values%}
<p>{{ value.color }}</p>
output: red
------------------------------
{{metafields.namespace.key}}
------------------------------
Namespace = prod_video,
{{ product.metafields.prod_video.prod_video }}
{{ collection.metafields.prod_video.prod_video }}
---------metafield loop with same namespace & different key------------
<div class="prod_add_img">
{% for collection in product.collections %}
{% for field in collection.metafields.additional_images %}
<img src="{{ field | last | asset_url }}">
{% endfor %}
{% endfor %}
</div>
In metafield section, shopify show's shortcode. For below screenshot the code is
{{product.metafields.custom.theme_color}}