Merhabalar, shopify temalarının çoğunda cart sayfasında ürünlerin beden/renk/varyasyon seçimleri bulunmuyor. Bu özellik olmayan temalar için bu yazımızda manuel olarak shopify’da nasıl yapacağımızı anlatacağım. Bu özellik sayesinde kullanıcılar cart sayfasında ürün seçeneklerini değiştirip kolayca sepetlerini güncelleyebilecekler.
Aşağıdaki örnekte, seçenekleri olan ve olmayan ürünlerin cart sayfasında nasıl görüntülendiğini görebilirsiniz.
Biz seçenekleri select olarak kullanıcılara seçtireceğiz ve seçim yapıldığı andan itibaren otomatik olarak sepet kendisini güncelleyecektir.
Theme->section->cart-template.liquid dosyamızı açalım (cart-template olarak hızlıca aratabilirsiniz). Cartta bulunan ürünleri listeyen döngüye ulaşmamız gerek, genelde şu şekilde bir kod göreceksiniz {% for item in cart.items %} Bu for döngüsünün içerisine aşağıdaki kodu nerede görünmesini istiyorsanız oraya ekleyin. Ben ürün isimlerinin altında görümesini istediğim için {{ item.product.title }} kodunun altında cart__meta-text divinin içerisine koydum.
<select class="product-single__variants" onchange="selectChanged(this.value)">
{% for variant in item.product.variants %}
<option value="{{ variant.id }}" {% if item.variant.id == variant.id %} selected {% endif %} >{{ variant.title }}</option>
{% endfor %}
</select>
<script>
function selectChanged(newvalue) {jQuery.post('/cart/add.js', {
quantity: {{ item.quantity }},
id: newvalue,
});
setTimeout(function(){
jQuery.post('/cart/change.js', {
quantity: 0,
id: {{ item.variant.id }},
});
}, 500);
setTimeout(function(){
window.location.reload(1);}, 1000);
}
</script>
Bu kod sayesinde seçeneği olan ürünlerde bir select olacak ve kullanıcılar beden/renk/boyut seçeneklerini cart sayfasında değiştirebilecekler.
Benim kullandığım for döngüsünün tamamı aşağıdaki şekildedir. AŞAĞIDAKİ KOD BENİM TEMAMA GÖRE YAZILMIŞTIR, OLDUĞU GİBİ ALIP KULLANMANIZ TEMANIZA UYMAYACAKTIR.
{% for item in cart.items %}
<tr class="cart__row border-bottom line{{ forloop.index }} cart-flex{% if forloop.first %} border-top{% endif %}">
<td class="cart__image-wrapper cart-flex-item"><a href="{{ item.url | within: collections.all }}"><img class="cart__image" src="{{ item | img_url: '100x' }}" alt="{{ item.title | escape }}"></a></td>
<td class="cart__meta small--text-left cart-flex-item">
<div class="list-view-item__title">
<a href="{{ item.url }}">{{ item.product.title }} <span class=tdf-cart-item-t></span> {% if item.quantity > 1 %}<span class="medium-up--hide"><span class="visually-hidden">{{ 'cart.label.quantity' | t }}</span>(x{{ item.quantity }})</span>{% endif %}</a>
</div>
{% unless item.variant.title contains 'Default' %}
<div class="cart__meta-text">
<!-- {% for option in item.product.options %}{{ option }}: {{ item.variant.options[forloop.index0] }}<br />{% endfor %} -->
<select class="product-single__variants" onchange="selectChanged(this.value)">
{% for variant in item.product.variants %}
<option value="{{ variant.id }}" {% if item.variant.id == variant.id %} selected {% endif %} >{{ variant.title }}</option>
{% endfor %}
</select>
<script>
function selectChanged(newvalue) {jQuery.post('/cart/add.js', {
quantity: {{ item.quantity }},
id: newvalue,
});
setTimeout(function(){
jQuery.post('/cart/change.js', {
quantity: 0,
id: {{ item.variant.id }},
});
}, 500);
setTimeout(function(){
window.location.reload(1);}, 1000);
}
</script>
</div>
{% endunless %}
{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
<div class="cart__meta-text">
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% comment %}Check if there was an uploaded file associated{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}
</td>
<td class="cart__price-wrapper cart-flex-item">
<span class=tdf-cart-item-p-p>{{ item.price | money }}</span>
{% for discount in item.discounts %}<div class="cart-item__discount medium-up--hide">{{ discount.title }}</div>{% endfor %}
<div class="cart__edit medium-up--hide">
<button type="button" class="btn btn--secondary btn--small js-edit-toggle cart__edit--active" data-target="line{{ forloop.index }}"><span class="cart__edit-text--edit">{{ 'cart.general.edit' | t }}</span> <span class="cart__edit-text--cancel">{{ 'cart.general.cancel' | t }}</span></button>
</div>
</td>
<td class="cart__update-wrapper cart-flex-item text-right">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" class="btn btn--secondary cart__remove medium-up--hide"><i class="ad ad-times-r" aria-hidden="true"></i></a>
<div class="cart__qty">
<label for="updates_{{ item.key }}" class="cart__qty-label">{{ 'cart.label.quantity' | t }}</label>
<div class="qtyField">
<a class="qtyBtn minus" href="javascript:void(0);"><i class="ad ad-minus-r"></i></a>
<input class="cart__qty-input qty" type="text" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*">
<a class="qtyBtn plus" href="javascript:void(0);"><i class="ad ad-plus-r"></i></a>
</div>
</div>
<input type="submit" name="update" class="btn btn--small cart__update medium-up--hide" value="Update" />
</td>
<td class="text-right small--hide">
{% if item.original_line_price != item.line_price %}
<div class="cart-item__original-price"><s>{{ item.original_line_price | money }}</s></div>
{% endif %}
<div><span class=tdf-cart-item-lp-p>{{ item.line_price | money }}</span></div>
{% for discount in item.discounts %}<div class="cart-item__discount">{{ discount.title }}</div>{% endfor %}
</td>
<td class="small--hide"><a href="/cart/change?line={{ forloop.index }}&quantity=0" class="btn btn--secondary cart__remove" title="Remove tem"><i class="ad ad-times-r" aria-hidden="true"></i></a></td>
</tr>
{% endfor %}
Başka bir faydalı içeriğimde görüşmek üzere! 🙂
Bir önceki yazımız olan Shopify Arama Sonuçlarında Haberleri Gizleme başlıklı makalemizi de okumanızı öneririz.