Shopify Cart Sayfasında Ürünlerin Varyasyon Seçimi - Web bulutu

Shopify Cart Sayfasında Ürünlerin Varyasyon Seçimi


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 }}&amp;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 }}&amp;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.


Bir cevap yazın

E-posta hesabınız yayımlanmayacak.