Персонализиране или премахване на бутон „Купуване“, вградена колекция или вградена количка

Можете да промените облика или поведението на бутон „Купуване“, вградена колекция или вградена количка, като редактирате техния код за вграждане в изходния HTML код на Вашата уеб страница. Можете също да изтриете вграден елемент, като премахнете кода от уеб страницата си.

Бутонът „Купуване“ показва продукт с бутон за покупка. Вградената колекция показва множество продукти. Вградената количка показва самостоятелна количка, която клиентите могат да използват на различни страници.

Кодът за вграждане е фрагментът от код, който сте копирали от Вашия администраторски панел на Shopify и сте поставили в HTML кода на Вашата уеб страница, когато сте създали бутона „Купуване“ или количката. Кодът за вграждане е написан на JavaScript – език за програмиране, използван за добавяне на интерактивни функции към уеб страници.

На тази страница

Разбиране на кода за вграждане на бутона „Купуване“

Всеки бутон „Купуване“ е изграден от отделни части, наречени компоненти. Компонентът е именуван раздел от кода за вграждане, който контролира една част от работата с бутона „Купуване“. Например, когато добавите продукт с количка към Вашата уеб страница, кодът за вграждане генерира следните компоненти:

компонент product, който показва информацията за продукта и бутона за покупка
компонент cart, който показва съдържанието на количката
компонент toggle за количката, който показва иконата, която я отваря

Ако компонентът за продукта отваря изскачащ прозорец с подробности за продукта, кодът за вграждане генерира два допълнителни компонента: компонент modal за самия изскачащ прозорец и компонент modalProduct за информацията за продукта в него.

В следния фрагмент с код има отделни компоненти за product и cart:

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'
          }
        }
      }
    }
  });
});

Всеки компонент се конфигурира чрез конфигурационен обект в кода за вграждане. Обектът е структурирана група от настройки, форматирана като списък от двойки ключ-стойност:

Ключ е името на настройка, като например buttonDestination.
Стойност е това, на което е зададена настройката, като например 'cart'.

Обектът е подобен на електронна таблица: всеки ключ съответства на име на колона, а всяка стойност съответства на съдържанието на клетка. За да промените облика или поведението на Вашите бутони „Купуване“, редактирайте ключовете и стойностите в конфигурационните обекти.

Всеки компонент има много ключове, които могат да се редактират. За пълен списък на ключовете за редактиране вижте документацията за програмисти. За да конфигурирате ключ, който все още не присъства във Вашия код за вграждане, добавете ключа към съответния обект. За пример вижте Промяна на оформлението на вграден продукт.

Персонализиране на стиловете на компонент

Всеки компонент има вложен конфигурационен обект styles, който контролира облика на компонента. Вложен обект е обект, поставен вътре в друг обект.

Обектът styles използва CSS – езикът, използван за описване на визуалното стилизиране на елементите на уеб страницата. Всеки ключ от най-високо ниво в обекта styles представлява елемент в компонента, като например заглавието или бутона. В рамките на този ключ всеки вложен ключ е CSS свойство (например background-color или border), а стойността е CSS стойност.

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

Всяко валидно CSS свойство може да бъде добавено към styles. Уверете се, че имената на свойствата с тирета са поставени в кавички.

За повече информация относно персонализирането на CSS прегледайте документацията за разработчици.

Компоненти на вградена колекция

Вградените колекции използват същите конфигурационни обекти като бутоните „Купуване“. За да редактирате оформлението или други свойства на продуктите в колекцията, намерете конфигурационния обект product и го редактирайте по същия начин, по който бихте редактирали вграден продукт. За да редактирате свойства на самата колекция, като например текста на бутона Следваща страница, редактирайте конфигурационния обект productSet.

Някои ключове, като например текстът на компонент, се конфигурират чрез вложени обекти. Например текстът за бутона Следваща страница е вътре в обекта text на компонента productSet:

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

Модалният прозорец с подробности за продукта е изскачащ прозорец, който показва информация за продукта. За да насочите клиента си към модален прозорец с подробности за продукта вместо към количката, редактирайте кода за вграждане на бутона „Купуване“ в изходния HTML код на Вашата уеб страница.

Стъпки:

Отворете HTML кода на страницата, съдържаща вградения продукт, който искате да промените.
Намерете конфигурационния обект product.
Намерете ключа buttonDestination в обекта:

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

Променете стойността на този ключ на 'modal', като включите кавичките:

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

Запазете промените си.

Промяна на оформлението на вграден продукт

Хоризонталното оформление на вградения продукт поставя снимката до подробностите за продукта, вместо над тях. За да превключите към това оформление, редактирайте кода за вграждане на бутона „Купуване“ в изходния HTML код на Вашата уеб страница.

Стъпки:

Отворете HTML кода на страницата, съдържаща вградения продукт, който искате да промените.
Намерете конфигурационния обект product.
Добавете ключ layout, след което задайте стойността на 'horizontal'. Уверете се, че стойността включва кавичките и че предишният ред завършва със запетая:

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

Запазете промените си.

Промяна на облика и поведението на вградена количка

За да промените облика или поведението на количка, редактирайте конфигурационния обект cart във Вашия код за вграждане.

Стъпки:

Отворете HTML кода на страницата, съдържаща количката, която искате да редактирате.
Намерете конфигурационния обект cart във Вашия код за вграждане:

options: {
      cart: {
        startOpen: false
      }
}

Редактирайте съществуващ ключ или добавете нов, за да промените облика или поведението на количката. За пълен списък на ключовете за конфигуриране вижте документацията за програмисти.
Запазете промените си.

Изтриване на бутон „Купуване“, вградена колекция или вградена количка

За да премахнете бутон „Купуване“, вградена колекция или вградена количка от Вашата уеб страница, изтрийте техния код за вграждане от изходния HTML код.

Стъпки:

Отворете изходния HTML код на уеб страницата, която съдържа бутона „Купуване“, вградената колекция или вградената количка.
Изтрийте целия код за вграждане от изходния HTML код, като започнете от <script data-shopify-buy-ui> и завършите с </script>. По-долу е даден пример за код за вграждане на бутона „Купуване“:

<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>

Запазете промените си.

Персонализиране или премахване на бутон „Купуване“, вградена колекция или вградена количка

На тази страница

Разбиране на кода за вграждане на бутона „Купуване“

Персонализиране на стиловете на компонент

Компоненти на вградена колекция

Замяна на връзката към количката на вградения продукт с модален прозорец с подробности за продукта

Стъпки:

Промяна на оформлението на вграден продукт

Стъпки:

Промяна на облика и поведението на вградена количка

Стъпки:

Изтриване на бутон „Купуване“, вградена колекция или вградена количка

Стъпки: