I am working on a Shopify website, what I have done is, show all the variants of a product as the individual product on the collection page, but what I want help with is, when someone click on the variant image on the collection page, it should open the same variant in the product page
{%- if card_product.featured_media -%}
{{ card_product.title | escape }}
{%- endif -%}
Related
I would like to know how I can achieve to update the tax price given in the following image.
I inserted the following code into my price:
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__tax caption rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
<span id="taxPrice" class="product__tax caption rte" itemprop="price">
{{ product.price | times:0.19 | money }}
<br>zzgl. Versand
</span>
{%- endif -%}
Now I want to achieve that the price for the taxes update as I change the variant.
I'm pretty sure it's possible with some JS, but unfortunately I have no experience in JS.
I'll appreciate every possible answer.
I tried to insert a JS code snippet (into the global.js file) from an older shopify support ticket regarding the same thing.
$('#taxPrice').html( Shopify.formatMoney(variant.price * 0.19, moneyFormat) );
But didn't work out as expected, although it worked on the Minimal theme just fine.
I am using bundle builder app that lets users create their own bundles and purchase them. With each purchase it creates a product variation. When there are over 99 variations the app duplicates the bundle product and repeats itself till infinity. The problem here is that the old product bundles are no longer valid but still show in the front end causing confusion. I was able to bug bundle builder app support enough to provide me with info on how to detect these legacy products so we can hide these products from the collections page like so:
{%- for product in collection.products -%}
{%- if product.tags contains 'bundle-builder-dummy-legacy' -%}
** do nothing **
{%- else -%}
** print out product **
{%- endif -%}
{%- endfor -%}
Now this hides the legacy products but it still messes up the pagination and the page layout, for example our page limit is set to 8 products, we are on page 2 of 5. Using the above code snippet prints out only the products that do not contain the tag 'bundle-builder-dummy-legacy' (this could be improved with unless statement, but that is not the point), but it leaves empty space - only 6 grid items are filled instead of 8. So I guess the for loop is not working correctly. How can I get the products inside the for loop that do not contain the tag. Meaning an if/unless statement need to happen before the loop or during loop init. Hope I've made clear of the situation I have.
Thanks
What you might do is asking app to identify those products using a directly accessible attribute of the product, like type.
Then you would be able to do this:
{% assign collection_products = collection.products | where:'type','legacy' %}
{% for product in collection_products %}
Do something
{% endfor %}
I'm trying to find a way for the following:
I'm modifying a liquid template to also include found product variants on a search result page. But when I do the amount of visible products/product variants on a search results varies greatly and leads to bad UX.
We have a pagination break at 28 items. But this only factors in the amount of products it has already displayed. As I now show variants of the products as well, the pages have a very large amount of items on them. If I decrease the pagination limit to - let's say 4 - I end up with pages that have exactly 4 entries and pages that have let's say 500 entries depending on the matching variations for a given search term.
This is the overall goal:
Display product variants in the search result page as well as the default products and still have a correct pagination that display a fixed amount of products/variants/search result items per page.
My approach was this:
{% capture total_results %}
{%- for result in search.results -%}
{%- case result.object_type -%}
{%- when 'product' -%}
// Go over all the variants and match to the search terms
// Include product-grid-item template in case it matches
{%- when 'article' -%}
{%- when 'page' -%}
{%- endcase -%}
<!-- Divider: #### -->
{%- endfor -%}
{% endcapture %}
{% comment %}Break the captured string at the divider string into an array{% endcomment %}
{%- assign total_results = total_resuls | split: "<!-- Divider: #### -->" -%}
<div class="page__description page__description--centered">
<span>{{ 'search.general.results_count' | t: count: total_results.size, terms: search_terms }}</span>
</div>
{% paginate total_result by 28 %}
{% for result in total_resuls %}
{{ result }}
{% endfor %}
{% endpaginate %}
I get the following liquid error in the frontend: Array 'total_results' is not paginateable.
Is there a way to make it paginateble?
Or is there a way to modify the search.results collection directly so that the pagination doesn't only consider the amount of results from the shopify search but also the variations?
The reason we do this btw is that shopify does seem to find the products based on an information where only the variation matches. But in this case it only links to the product and the user whould need to go to the correct variation manually again which is very bad UX.
Even if the user searches by ID directly they get linked to the normal product page. And we want them to be linked directly to the correct variant that was the reason the product was included in the search results in the first place.
Any help would be appreciated. Or pointers on how else I could achieve this.
Unfortunately, there's no way to paginate through your array. paginate tag can only be used with search.results, collection.products on some other predefined objects.
The way you're trying to implement it doesn't seem possible to me. But here are a couple of ideas came to my mind that might help you:
Option 1. Use search.terms object to build a link to the correct variant. As the main issue is that Shopify search result
links to the product and the user would need to go to the correct variation manually
I would just suggest displaying search results as is but apply your logic from
// Go over all the variants and match to the search terms
to add a ?variant_id=xxx attribute to the search result URL. Then once customers get to the product page, the variant will be selected based on this query parameter. This logic would also perfectly suit the case when customers search by variant ID.
Option 2. Build custom search. It would require more efforts and implies not using the Shopify search at all. You would need to sync store products and return the paginated results from your database based on a query from the search form. This option would give you flexibility in displaying your product results.
I would go with option 1 if the only you want to do is select the correct variant based on the user's search query. But it may not work if you have multiple matching variants and you either want to display all of them separately or be able to redirect the customer to every matching variant from the results page.
P.S. Just a hint: you're using {%- when 'product' -%} block to filter product results only, but you can use ?type=product in your query to search only through products entities, ignoring articles and pages.
Maybe you can try this app https://apps.shopify.com/ultimate-search-and-filter-1 to show variants as separate products on Collection and Search result page without affecting the paginiation in Shopify.
I've tried searching but couldn't figure this out.
I'm wondering if it's possible to list all products that use the same tag as the current product.
For instance, if I'm on a product page that uses the tag "red", I'd like to list all of the other products that also use that tag.
Is this possible and if so how would I accomplish this?
There are some ways but I'm not sure if these will do you any good.
1) AJAX
The easiest ways is to make an AJAX request to the /collections/all/TAG and get the required products and append them.
2) Paginate hack
{% paginate collection.all.products by 1000 %}
{%- for _product in collection.all.products -%}
{%- if _product.tags contains 'red' -%}
list the product
{%- endif -%}
{%- endfor -%}
{% endpaginate %}
Please note that this may increase the load time drastically depending how many products you have.
How do I get product meta fields in Shopify store cart.js response?
Currently, In cart.js not providing any details of product metafields.
You have many possible hack.
The one I would recommend if you are using CartJS is
In your product page, print the product metafield in the HTML
<div class="product-page" data-metafield="{{product.metafield.namespace.value}}">
</div>
When product is added, simply add the metafield as a line item property
var properties = {metafield : $('.product-page').data('metafield')};
CartJS.addItem(variantId, 1 ,properties);
The metafield is now accessible at CartJS.cart.items[i].properties[metafield] !
** You can do this by adding the following step**
Add the below code in product form
{% for field in product.metafields.namespace%}
<input required class="required hidden" id="customID" type="hidden" value='{{ field | last }}' name="properties[metafields[{{ field | first }}]]">
{% endfor %}
it will add in your cart object you can access it by
{% for field in item.properties.metafields %}
{{ field | first }}: {{ field | last }}
{% endfor %}
Metafields are available client-side via Liquid. You do not need cartJS to fetch them. You can render the product metafields of interest into your own data structure of choice, and use the as you wish anyway you want.
You could also build out a StorefrontAPI based system and try GraphQL if you're really keen.
You can access the metafield using item.product.metafields.your-namespace.your-key.
You can get the metafields content of the appropriate products, collections, orders by assigning it to a variable in the liquid file.
In the product-template.liquid, you can use
{% assign var_meta = page.metafields.meta_namespace %}
// You can use the Shopify docs to understand how you create Metafields
{% assign key = 'meta_key' %}
{% assign key_val_meta = meta_namespace.meta_key %}
Access the variable
{{key_val_meta}}
If you assign unique values to the metafield, you could use it to get the exact information you can input that information in your cart.js function.
{%- if item.product.metafields.my_fields.minimum_order_quantity != blank -%}
{{ item.product.metafields.my_fields.minimum_order_quantity }}
{%- endif -%}
Use this code and show data on cart page