Satın Al Düğmesini ya da ekli sepeti düzenleme veya silme

Satın Al Düğmeleri ve sepetler, Shopify yöneticinizden kopyaladığınız ve web sayfanızın kaynak HTML'sine yapıştırdığınız kod parçacıklarından oluşturulur. Bu kod parçacıkları yerleştirme kodu olarak adlandırılır. Bir düğmenin veya sepetin görünümünü veya davranışını değiştirmek istiyorsanız ilişkili yerleştirme kodunu düzenlemeniz gerekir.

Bu sayfada

Satın Al Düğmesi, ekli koleksiyon veya ekli sepet silme

Adımlar:

Satın Al Düğmesini, ekli koleksiyonu veya ekli sepeti içeren web sayfasının kaynak HTML'sini açın.
<script data-shopify-buy-ui> ile başlayan ve </script> ile biten kaynak HTML'den tüm yerleştirme kodunu silin. Satın Al Düğmesi için yerleştirme kodu aşağıdaki gibi görünür:

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

Değişikliklerinizi kaydedin.

Satın Al Düğmesi, ekli koleksiyon veya ekli sepet artık web sayfanızda görüntülenmez.

Satın Al Düğmesini düzenleme

Mevcut bir Satın Al Düğmesinin görünümünü veya ayarlarını değiştirmek için kaynak HTML'nize eklediğiniz yerleştirme kodunu düzenlemeniz gerekir.

Her Satın Al Düğmesi, yerleştirme kodundaki ayrı bileşenlerden oluşturulur. Örneğin, web sayfanıza sepetle birlikte bir ürün eklerseniz yerleştirme kodu bir product bileşeni, bir cart bileşeni ve bir sepet toggle bileşeni oluşturur:

Ürün bileşeninizin, ürün ayrıntılarını içeren bir mod penceresi açmasını istiyorsanız yerleştirme kodu bir modal bileşeni ve bir modalProduct bileşeni oluşturur:

Aşağıdaki kod parçacığında, product ve cart için ayrı bileşenler vardır:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Bu bileşenler, yerleştirme kodunda yapılandırma nesneleri yoluyla ayrı olarak yapılandırılır. Yerleştirme kodundaki yapılandırma nesnelerini düzenleyerek Satın Al Düğmelerinizin görünümünü veya davranışını değiştirebilirsiniz.

Her bileşenin, düzenleyebileceğiniz birçok özelliği vardır. Düzenlenebilir seçeneklerin tam listesi için geliştirici belgelerimizi görüntüleyin. Yerleştirme kodunuzda görünmeyen bir seçeneği yapılandırmak istiyorsanız ilgili anahtarı ilgili nesneye eklemeniz gerekir (örneğe bakın).

Bileşenin stilini düzenleme

Her bileşenin, bileşen görünümünü değiştirmek için düzenleyebileceğiniz veya ekleyebileceğiniz iç içe geçmiş bir styles yapılandırma nesnesi vardır. Bu stiller CSS'ye benzer şekilde biçimlendirilir. Bileşendeki başlık veya düğme gibi bir öğeyi styles nesnesindeki her bir üst düzey anahtar temsil eder. Bu nesnede, her anahtar bir CSS özelliğidir (örneğin, "background-color" veya "border") ve değer, bir CSS değeridir.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Geçerli CSS özellikleri, styles nesnesine eklenebilir. `Kısa çizgi içeren özellik adlarının, tırnak işaretleri içinde olması gerektiğini unutmayın.

CSS özelleştirmesi hakkında daha fazla bilgi için geliştirici belgelerini görüntüleyin.

Örnek: Sepet bağlantısını ürün ayrıntıları modu ile değiştirme

Bu örnekte, geçerli yerleştirme kodunuzu değiştirerek müşterinizi sepet yerine ürün ayrıntıları moduna yönlendirebilirsiniz:

Değiştirmek istediğiniz ürün eklemesini içeren sayfanın HTML'sini açın.
product yapılandırma nesnesini bulun.
Nesnedeki buttonDestination anahtarını bulun:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

Bu anahtarın değerini 'modal' olarak değiştirin (tırnak işaretlerini eklediğinizden emin olun):

options: {
      product: {
        buttonDestination: 'modal'
      }
}

Değişikliklerinizi kaydedin.

Örnek: Ürün eklemenizin düzenini değiştirme

Bu örnekte, ürün eklemenizin düzenini değiştirebilir ve böylece resmin üst taraf yerine yan tarafta görünmesini sağlayabilirsiniz:

Değiştirmek istediğiniz ürün eklemesini içeren sayfanın HTML'sini açın.
product yapılandırma nesnesini bulun.
Bir layout anahtarı ekleyin ve ardından değeri 'horizontal' olarak ayarlayın:

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

<aside class="note">
<h4>Not</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

Değişikliklerinizi kaydedin.

Web sitenizin sepetini düzenleme

Web sitenizin sepetinin görünümünü veya davranışını değiştirmek istiyorsanız yerleştirme kodunuzdaki cart yapılandırma nesnesini düzenlemeniz gerekir.

Adımlar:

Düzenlemek istediğiniz sepeti içeren sayfanın HTML'sini açın.
Yerleştirme kodunuzdaki cart yapılandırma nesnesini bulun:

options: {
      cart: {
        startOpen: false
      }
}

Değiştirmek istediğiniz özelliği düzenleyin veya ekleyin. Yapılandırılabilir özelliklerin tam listesi için geliştirici belgelerini görüntüleyin.
Değişikliklerinizi kaydedin.

Ekli koleksiyonu düzenleme

Ekli bir koleksiyonu düzenlemek, bir ürünün veya sepetin düzenlenmesine benzer. Koleksiyondaki ürünlerin özelliklerini (örneğin, her bir ürünün düzenini) düzenlemek için product yapılandırma nesnesini bulmanız ve bir ürün eklemesini düzenlediğiniz şekilde bunu düzenlemeniz gerekir. Koleksiyonun özelliklerini (örneğin, Sonraki sayfa düğmesinin metni) düzenlemek için bunun yerine productSet anahtarını düzenleyin.

Bir bileşenin metni gibi bazı özellikler, diğer nesnelerin içinde görünen nesneler olan iç içe geçmiş nesneler üzerinden yapılandırılır. Örneğin, bir Sonraki sayfa düğmesinin metni productSet bileşeninin text nesnesinin içinde görünür:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}