Я работаю в сфере электронной коммерции разработчиком с 6 лет. Я работал с сотнями магазинов и заметил одну вещь: перепродажи и перекрестные продажи играют важную роль в повышении конверсии. Будь то Magento, Shopify или любая другая CMS, они очень важны для каждого магазина.

Итак, в этой статье я объясню вам, как показать UpSell или Cross-sell в корзине для магазина Shopify без какого-либо приложения с помощью всего лишь одного файла с жидкостью и кода JavaScript. Теперь вам не нужно платить ни за какие приложения. Это очень просто, и вы можете создать это самостоятельно. Это также будет работать с любой темой Shopify.

Приступим 🎉

Внимание ⚠️

Я использую библиотеку JavaScript Cartjs.org для добавления товаров в корзину, она очень мощная и быстрая, что упрощает работу с событиями корзины.
Но вы можете использовать любую Для этого нам просто нужно получить идентификатор продукта и вызвать функцию Добавить в корзину.

Давайте создадим один сниппет, который мы сможем использовать где угодно, чтобы показывать перекрестные продажи или дополнительные продажи. Назовем его 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="#" 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 для добавления в корзину. Мы будем использовать 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