im probably having this issue due to my lack of my experience with the liquid and the shopify platform in general.
Here's my issue:
In the current theme im working on, when a product is added to card it is always adding the smallest available size. Im not 100 % confident this is the code that is actually doing it but im fairly positive it is.
onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);
Currently when this code is fired the products smallest size (assuming its the first) is added to the cart.
I tried to take a look at the shopify API documentation for product.variants but it seems the theme or store is not using the latest version since I cant find any references to this first property.
What I would like if for there to be control in terms of product size when the add to cart action is triggered. Instead of adding the smallest size always it can persay add product.variants.{SIZE}.id instead (Not actual code just a guess)
If anyone could point me in the right direction of proper documentation for something like this or if you've had a similar question I would greatly appreciate it!
this is easy :)
yes this is the code sending the product to the cart and this theme don't support product variants. You should add the variants support.
some theory:
Variants is an array.
variants.first is a liquid function for easily take the first element of the array, check the liquid docs for more details.
The important part is, to add an item you need to send the variant id. always is the variant id.
now the magic:
you need to iterate on product.variants, keep on someplace the variant id and finally pass the value to the function.
onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);
by
onclick=" Shopify.addItem( {{ variant.id }}, 1);
you can use wherever you want, you can use select, or even got for a pure js / ajax solution using the cart API
extra detail the 1 is the qty, you can set it dinamic too.
I don't know your desing, so on psedo-code with multiple buttons you can do:
{% for variant in product.variants %}
<button onclick="Shopify.addItem('{{ variant.id }}', 1)">
{{ variant.title }}
</button>
{% endfor %}
Almost all themes, free or paid, have proper functioning code to handle changes in variations. When a customer selects a variant, via a change in a select element or perhaps the click of a radio button, the existing code should update the currently selected variant properly. Your example of an onclick set to the first variant is probably one the most primitive modes of operation, and as you see, less than satisfactory.
As a beginner, your best bet is to download the Debut theme from Shopify and study the basics of how variant selection work from the position of working code. Only then could you hope to be able to mod your own themes.
Related
I am using a plugin that filters products. This means that products are no longer shown in the traditional product loop. I think the plugin has switched to using javascript to show products on the collection page rather than liquid.
For every product on a collection page, I wish to show its colour. Each product has a colour associated with it using a custom field.
If I manually manually enter a product handle in the below code, the colour for the product handle that has been entered successfully displays for each product.
{{ all_products["MANUALLY ENTERED PRODUCT HANDLE"].metafields.custom_fields["colour"] }}
I am also able to dynamically able to get a products handle with {!productHandle!}
For some reason however when I put the two together like this:
{{ all_products["{!productHandle!}"].metafields.custom_fields["colour"] }}
The result is that nothing is shown.
My question is, how can I dynamically pull the product handle into the custom field? I have already tried
{{ all_products[product.handle].metafields.custom_fields["colour"] }}
and
{{ all_products[product-handle].metafields.custom_fields["colour"] }}
Try saving the handle as a string. Eg:
{% capture fizz %}{{product.handle}}{%endcapture%}
{{ all_products[fizz].metafields.custom_fields["colour"] }}
Note that all_products is also limited to just 20 products.
I'm working on a Shopify store that wants engraving added to their products for a $25 up-charge. I have set it up so that a checkbox on the product page triggers an engraving dropdown where the user can customize the engraving (type style, text, and symbols) and all of those values are passed as line item properties. The checkbox also adds an additional engraving product to the cart that costs $25 to account for the up-charge and has the same exact line item properties. I realize that both products having the same exact line item properties is a perfect way for them to be linked to ensure that if the original product is removed from the cart, the linked engraving product will be removed as well. But I can't for the life of me figure out the way to accomplish this.
I wrote this Liquid code which effectively removes the engraving product from the cart if it is the only item in the cart.
{% if cart.item_count == 1 %}
{% for item in cart.items %}
{% if item.title == 'Custom Engraving' %}
<script>
$.post('/cart/change.js', { quantity: 0, id: {{ item.id }} });
$("#cart_form").submit();
</script>
{% endif %}
{% endfor %}
{% elsif cart.item_count > 1 %}
Please help with the code that supposed to go in here
{% endif %}
But what if there are 2 engraved jewelry products in the cart? If a user removes one of them, they will be left with 2 $25 engraving products and only one jewlery product. I need to automatically remove the associated engraving product for any jewelry product that is removed from the cart. Please help!
Note: A user seems to have a way to do this based on a couple forum answers I found. This one (https://ecommerce.shopify.com/c/ecommerce-design/t/conditional-logic-for-variants-based-on-line-item-properties-264417) he says " In the cart itself, the only thing you need to do is ensure that if the product itself is removed, you also remove the customization product. No biggy. That is a simple pattern and you can jazz it up too. Group a product with a customization through the properties for example, ensuring the two are "glued" together." That's exactly what I need! But unfortunately he doesn't share the simple pattern he's speaking of. He seems to have answered it on stack overflow as well (Chang the product price when custom checkbox is selected in Shopify) and again doesn't reveal the simple pattern he refers to.
Thanks in advance!
Short Answer:
Make the customization products different by adding a hidden property to make them unique.
Longer Answer:
When adding the product to the cart, generate a unique value - using the current date/time (via Date.now()) is usually a good choice. When adding the product to the cart, make sure this property is added as well (probably via hidden input).
Make sure that the name of extra property is prepended with an underscore - so something like '_uniqueID' - Shopify's checkout page knows to hide any line-item properties that have an underscore as their first character
Finally, make sure your theme knows to not display underscored properties in the cart. My favourite way to do this is by adding the following line at the beginning of your properties-printing loop (usually written as 'for p in item.properties')
{% if p.first.first == '_' %}{% continue %}{% endif %}
Now you have a unique ID field as a line-item property that only you can see, and can use that field to synchronize quantities, etc. Huzzah!
I'm new to Shopify and liquid (I have programming background). What i'm currently trying to achieve is adding some unique custom information in a HTML div into the product layout.
My approach: Because I couldn't directly edit the product.liquid file (was generating the same information for all products), I decided to make a hack, so I created liquid files into the snippets by joining the product id + product. The filename would look like "11598995151product.liquid".
Into the product.liquid, I then added the following:
{% if product.description %}<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 visible-xl" style="display:block !important">
{% assign z = x | append: product.id | append: "product" %}
{% include z %}
</div>{% endif %}
Is this the best practice or can it be done easier ?
I slightly confused, you can't directly update the product.liquid but yet you are adding an include there. So can you or you can't?
Here a few approaches how can you add custom unique information to products.
1) Use an metafeild application such as https://apps.shopify.com/metafields-editor where you can set fields for each product
2) Use shortcodes for example with this snippet https://github.com/culturekings/shopify-shortcodes
3) Create prefixed pages, for example you have a product with a handle test-1, and you will have a page with a handle product-test-1. You perform a check for each product if there is such a page.
4) Similiar to 3 but use a global navigation that will point to page, so that you don't have to prefix each one.
5) Use sections. Create blocks with a product field and a richtext field (or the information you need) and set the product and information for each product as blocks. Then on the product page you check if this product handle is equal to any of the block product field.
All of the above examples require you to modify the product.liquid page if you like for it to be unique for each product.
'Currently I want to display View All "Collection Title". I do this successfully using the prepend. However, when creating a shopify theme one of the requirements is language support / translation.
<div class="collection-cta">{{ product_collection.title | prepend: 'View All ' | link_to: product_collection.url }}</div>
I am having trouble figuring how how to prepend the shopify translation markup.
{{ 'collections.general.view_all' | t }}
This outputs the View All text translation correctly, but getting to work inside of prepend:'' has proven to be problematic. I haven't been able to find strong documentation on this so any perspective would be great.
How about this?
{{product_collection.title}} {{ 'collections.general.view_all' | t }}
No need to use link_to... I'm not entirely clear on the inner workings of liquid, but it does expect a certain number of arguments... adding prepend and the translation tag may have thrown it.
So split it all out - and it should work.
Looking for some advice on an interesting situation using Shopify. I'm building a site for a client that has Products that have free replacement parts available. Each replacement part has variant color options.
So far I have had the users at the company add all the replacement parts as products in the store. I have filtered the search results and the catalog results so the replacment parts are not show.
The only place they want the replacement parts to show is when a user visits a PRODUCT, they can click a button that says order replacement parts. Then a screen will show with all the replacement parts for that product.
A single replacement part may belong to several products and may have different color variants.
So what I have done thus far was had the client tag all parts with at least two tags. A tag called "part" that identifies the product as a part. And one or more tags like "link:SKU123" that links the part to one or more products. Then on my Product page I was using liquid to loop all parts and display the ones that matched the products SKU. Then I found out that the for loop has a 50 item limit...
So I looked at the product API, which would be ok, except that it has no way to filter by tags. Tags seem so handy and yet I don't see many ways to use them... So ultimately I'm looking for a way to display all replacement parts for a particular product. It doesn't have to involve tags, although the client has already tagged all the parts and I would hate to tell them it was a waste of time. But really any thoughts on how to accomplish this would be greatly appreciated.
The only way I can think to do it, is to return all of the replacement parts and then filter through them on the page. I see the API is limited to 250 products, but I suppose I could make multiple calls until I get them all. I'm not sure how many replacment parts there are total, but I suspect there could be upwards of 1000. Seems like a waste of network resources to have to pull them all down and then filter through them...
P.S. - the replacement parts are free, can they be run through the checkout with a zero dollar amount?
Ok so I have a couple different answers to this question. Not sure which one I will use yet.
Method 1: Filter Collection by Tag using URL
The first one was provided by Shawn Rudolph on the Shopify forums. It involves filtering a collection by tag using the URL. Shawn's post here explains it well: https://ecommerce.shopify.com/c/shopify-discussion/t/product-replacement-parts-270174
Method 2: Use paginate to get all products from collection using the AJAX API
This method is pretty cool. Yes it is more work than method one, but this maybe useful in a lot of scenarios. Out of the box Shopify does not allow you to retrieve all products from a given collection using the AJAX API. It can be done with the admin API but not the AJAX one to my knowledge. However, you can access all products from a collection with a for loop, but the for loop only allows up to 50 items to be looped at a time. That's where the paginate trick comes in. Basically I adapted the technique outlined by davecap here: http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections
So first you need your HTML/Liquid layout:
{% paginate collections.mycollectionname.products by 50 %}
{% for product in collections.mycollectionname.products %}
<div class="clone-node" id="product-{{ forloop.index | plus:paginate.current_offset }}">
{{ product.title }}
</div>
{% endfor %}
{% if paginate.next %}
<div class="clone-node next" title="{{ paginate.next.url }}"></div>
{% endif %}
<div id="insertion-point"></div>
{% endpaginate %}
So let's break it down a bit. First we are paginating are products by 50. This is the max amount a for loop will allow, so that's what we are going to use:
{% paginate collections.mycollectionname.products by 50 %}
Next we begin to loop our products. Every product is given a wrapper div with a class of "clone-node" this is very important. I also assign the div a unique ID, which isn't necessary for this to work, but may come in handy when trying to identify the product for later operations.
{% for product in collections.mycollectionname.products %}
<div class="clone-node" id="product-{{ forloop.index | plus:paginate.current_offset }}">
{{ product.title }}
</div>
{% endfor %}
We have to make sure to include the paginate.next URL. We also give this a "clone-node" class and we add a "next" class. I assign the paginate.next.url to the title attribute, but you could assign it to any number of attributes. You just need to be able to fetch it with jQuery.
{% if paginate.next %}
<div class="clone-node next" title="{{ paginate.next.url }}"></div>
{% endif %}
Then lastly we assign an insertion point. This is where we want our next set of 50 products to be inserted once we fetch them:
<div id="insertion-point"></div>
OK so now let's look at the JS code:
<script>
var prevUrl = ""; //this helps us know when we are done receiving products
function getParts() {
//get the last instance of the .next node. This will give us the next URL to query
var nextNode= $(".next").last(),
url = nextNode.attr("title"); //nab the URL
//send a get request to our next URL
$.ajax({
type: 'GET',
url: url,
dataType:'text',
success: function (data) {
//use a dummy div to convert the text to HTML, then find all of our clone-nodes, including our new "next" div which contains our next URL
var cloneNodes = $("<div>").html(data).find(".clone-node");
//insert our new clone-nodes on the page
cloneNodes.insertBefore("#insertion-point");
//if the URL's don't match let's grab the next 50!
if (prevUrl != url) {
prevUrl = url;
getParts();
}
}
});
}
//Call getParts for the first time to get the party started.
getParts();
</script>
What this will basically do, is get the URL for the next page of products from the title attribute of the div that's holding the paginate.next.url. Then using the jQuery ajax function we call that URL and it returns a page of HTML to use formatted just like our existing page, with the same "clone-node" classes we assigned, only it has the next 50 products embedded in it.
In davecap's example he used a dataType of HTML on his Ajax call, but that gave me some troubles. So instead, I used dataType text and used a dummy div created by jQuery to convert the text into HTML. Then jQuery grabs all of the divs with the "clone-node" class on them and inserts them on the page before our insertion-point. Remember the clone-nodes now hold the next 50 products so we just added the next 50 products to our page.
Lastly, we check if the previous URL is not equal to the current one. If it's not equal, that means it's a new URL and thus there must be more products to fetch, so we recursively call our getParts() function, which starts the process over and grabs the next 50. This continues until finally the URLs match, which means no more products to fetch, and the process stops.
There you have it! Of course if you have to fetch thousands and thousands of products this may be less then ideal because you are calling them 50 at a time. But for smaller numbers (maybe hundreds and hundreds...) it should work just fine.
I would create the parts as standalone products. Then each part will have variants (colours). Then you create metafields for this parts (product) which have a field with a list of all product ids which are 'mother' for this parts. This way you don't need to have strange tags and you keep concepts more separated, & everything cleaner. As per the zero amount, yes, you can go to checkout with zero amount (if your shipping settings allow you to do so).