Работя в сектора на електронната търговия като разработчик от 6 години. Работих в стотици магазини и забелязах едно нещо, че продажбите на допълнителни и кръстосани продажби играят важна роля за повишаване на вашата реализация. Независимо дали става въпрос за Magento, Shopify или друга CMS, те са много важни за всеки магазин.

Така че в тази статия ще ви обясня как да показвате UpSell или Cross-sell в количката за магазин Shopify без никакво приложение само с един файл с течност и JavaScript код. Сега не е необходимо да плащате за нито едно приложение. Много е просто и можете да го създадете сами. Това също ще работи с всяка тема на Shopify.

Да започваме 🎉

Внимание ⚠️

Използвам JavaScript библиотеката Cartjs.org за добавяне на продукти в количката, тя е много мощна и бърза, което улеснява живота ни при работа със събития в количката.
Но можете да използвате всяка библиотека за това просто трябва да получим идентификатор на продукта и да извикаме Добавяне в количката.

Нека създадем един фрагмент, който можем да използваме навсякъде, за да покажем Cross-sell или Upsell. Нека го наречем upsell.liquid .

  1. Създаваме една колекция в администратора на shopify за продукти с допълнителни/кръстосани продажби. (продавани продукти).
  2. След това ще извлечем тази конкретна колекция по име с течен кодов фрагмент, както е обяснено по-долу.
  3. трябва да включим този фрагмент в количката.
{% comment %} Create liquid variable for collection {% endcomment %}
{% assign upsellCollection = 'upsell-products' %}
<div class="c-upsell js-upsell">
{% comment %} Use Product ID as Data Attribute which we will use for Add to Cart Event {% endcomment %}
{% for product in collections[upsellCollection].products %}
 <div class="c-upsell__product js-product" data-product-id="{{ product.id}}">
  <div class="c-upsell__productImage">
   {% comment %} Fetch Product Images{% endcomment %}   
   {% for image in product.images %}
     <img class="c-upsell__innerImage" 
          src="{{ image | img_url: '586x' }}"
          alt="Product Img" />
   {% endfor %}
  </div>
  {% comment %} Fetch Product title & Price {% endcomment %}
  <h2 class="c-upsell__productTitle">{{ product.title }} </h2>
  <p class="c-upsell__productPrice"> {{ product.price }}</p>
  {% comment %} Add to Cart Button {% endcomment %}
  <a href="/bg#" class="c-upsell__atc js-atc">Add to Cart</a>
</div>
{% endfor %}
</div>
{% comment %} Now we're done with Liquid code and collection will be appeared on where we add it {% endcomment %}

Сега трябва да напишем малко JavaScript за Add to Cart. Ние ще използваме cartjs.org (както е споменато по-горе), за да се случи това.

В JavaScript правим следните събития

  1. Извличане на идентификатора на продукта от атрибута [data-product-id].
  2. Преместване на това в масив [upsellProductArr].
  3. Използване на API на Cartjs.org за добавяне на продукт в количката. Можете да прочетете повече за API тук https://cartjs.org/pages/reference
function upsellProduct () {
  // Create an empty Array in which we'll be pushing our product ID 
  const upsellProductArr = [];
  //get the Product ID from Attribute
  const productID = document.querySelector('.js-product').getAttribute('data-product-id');
  // Now push this product ID to Array
  upsellProductArr.push(productID);
   // Console.log to check you're pushing correct ID into array
      console.log(upsellProductArr);
}
// Let's Find our ATC button
const button = document.querySelector('.js-atc');
// Now Add click event use our Array to add to cart the Product button.addEventListener('click', event => {
  upsellProduct ();
  // This is CartJS API - Attaching link for reference 
  CartJS.addItem(upsellProductArr[0], quantity = 1 );
});
// Done

Тази функция е много полезна за подобряване на преобразуването, а самият метод е много лесен. Можете да персонализирате това според вашите изисквания като добавяне на плъзгач към продукти.

Ако това ви харесва, аплодирайте ме и го споделете с колегите си.

Последвайте ме в
Instagram: https://www.instagram.com/miniscript/
Github: https://github.com/iminiscript
Twitter: https:/ /twitter.com/iminiscript

Направено с любов ❤️
@miniScript
Технически ръководител в Anatta