розробка

Ihor Mandziuk - 2 min read

Як відобразити пов'язані продукти в Magento у темі Venia/ScandiPWA?

У цій статті ми описуємо GraphQl запити для отримання необхідних даних правил автоматично пов’язаних продуктів для прогресивної веб-програми (PWA). Щоб реалізувати резолвер GraphQL, вам потрібно встановити Magento 2 Automatic Related Products Extra.

Крім того, ви можете легко перевірити ці запити за допомогою розширення ChromeiQL для браузера Chrome.

Запит GraphQL для правила пов’язаних продуктів

За допомогою цього запиту ви отримаєте всі пов’язані продукти через ідентифікатор правила (продукти, які підпадають під умови правила).

Запит:

query mfAutoRelatedProducts ($ruleId: Int $productId: Int $categoryId: Int $pageSize: Int $currentPage: Int) {
    mfAutoRelatedProducts(
      ruleId: $ruleId
      productId: $productId
      categoryId: $categoryId
      pageSize: $pageSize
      currentPage: $currentPage
 ){
     total_count
   items{
      products{
        id
        name
        sku
      }
     category_ids{
       category_id
     }
          customer_group_ids{
       group_id
     }
          store_ids{
       store_id
     }
     id
    name
    description
    status
    priority
    block_position
    merge_type
    from_one_category_only
    only_with_higher_price

Mari Skula - 1 min read

Як отримати public та secret ключі для Shopify Login as Customer API?

Підтримка клієнтів надзвичайно важлива, якщо ви хочете підтримувати високий рівень обслуговування клієнтів. Отже, якщо ви хочете мати можливість логінитись в акаунти користувачів поза адмін панеллю магазину Shopify (напр. ваша CRM, хелпдеск тощо), ви можете зробити це за допомогою Shopify Login as Customer API ключів.

Щоб отримати public та secret ключі, необхідні для цього, вам потрібно:

1. Знайти додаток Login as Customer у адмін панелі вашого магазину Shopify і перейти до API Keys у верхньому правому куті списку користувачів.

2. Скопіювати Public Key.

3. Згенерувати новий Secret Key, якщо потрібно.

Тепер, коли у вас є ключі Shopify Login as Customer API, ви можете використовувати їх, щоб розширити CRM або хелпдеск, з якої ви хочете мати можливість входити в облікові записи користувачів.

Допоможіть користувачам залогінившись у їхні облікові записи без пароля за допомогою зручного додатку Login as Customer App.

Mari Skula - 2 min read

Login as Customer API у Shopify

Підтримка клієнтів значно покращується завдяки додатку Shopify Login as Customer App, оскільки ви можете допомагати клієнтам укладати замовлення та своєчасно вирішувати проблеми, пов’язані з їхніми обліковими записами. Але це ще не все.

Адмін панель магазину Shopify — це не єдине місце, звідки ви можете ввійти в акаунти користувачів. Ви також можете ввійти в облікові записи клієнтів зі своєї CRM або хелпдеску тощо, якщо вони дозволяють вам розширити їх і виконувати запити до кастомного API, який йде з нашим додатком.

Ви можете увійти в облікові записи користувачів за допомогою API двома різними способами.

Примітка: наступний код написаний на PHP, але ви можете використовувати будь-яку іншу мову програмування.

Log in as a customer використовуючи ID користувача

<?php
    $publicKey = '****************';
    $secretKey = '***********************************';

    $shop = '**********'; // for example 'myshop.myshopify.com';
    $customer = '**********'; //for example 123456789;
?>
<?php
    $currentDate = date('Y-m-d');

Mari Skula - 2 min read

Preferences у Magento 2

Налаштування Magento 2 використовуються менеджером об'єктів для розширення стандартної логіки. Ви можете використовувати preference в Magento 2 для реалізації певних інтерфейсів або для переписування існуючих PHP класів та їхніх методів.

У цій статті ви дізнаєтеся, як це зробити, і знайдете корисні приклади, які стануть у нагоді.

Mari Skula - 1 min read

Як не переносити деякий JS код вниз сторінки в Magento 2?

Розширення Magento 2 Rocket JavaScript дозволяє увімкнути завантаження deferred JavaScript і автоматично перемістити JS код в нижню частину сторінки. Таким чином ви збільшуєте швидкість завантаження веб-сайту та усуваєте блокування візуалізації.

Однак іноді вам не потрібно переміщувати всі JavaScripts вниз, оскільки є деякі, які не рекомендується туди переносити.

У цій статті ви дізнаєтесь, як це зробити.

Як автоматично відкласти завантаження деяких JS?

Підіть у Stores > Configuration > Magefan Extensions > Rocket Javascript і знайдіть розділ Ignore Deferred JavaScript With. Потім вкажіть рядки (strings), які не потрібно переміщувати вниз, кожен у новому рядку.

Розширення автоматично додасть до них атрибут data-rocketjavascript="false", тому вони ігноруватимуться.

Як вручну відкласти завантаження деяких JS?

Якщо ви не хочете переміщувати частину JavaScript униз, вам просто потрібно додати атрибут data-rocketjavascript="false" до тегу <script> безпосередньо у вашому коді:

Приклад:

Ihor Vansach - 1 min read

Magento 2 Image Lazy Load в Knockout шаблоні

Щоб застосувати lazy load для зображень у вашому шаблоні Knockout, спочатку переконайтеся, що встановлено розширення Magento 2 Image Lazy Load.

Потім вставте зображення в HTML шаблон (my-template.html) таким чином:

<img data-bind="attr: {src: $parent.getPixelUrl(), 'data-original': thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/>

Приклад:

<div class="options-block" data-bind="foreach: getOptionBlocks(), afterRender: initLazyLoad()">
           <div class="option-item" data-bind="attr: {'data-sku': sku}">
                  <div class="image-block">
                          <img data-bind="attr: {src: $parent.getPixelUrl(), 'data-original': thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/>
                  </div>
           </div>
    </div>

Ваш файл перегляду JS повинен виглядати так:

define([
 'jquery',
 'uiComponent',
 'ko',
], function ($, Component, ko) {

 'use strict';
 return Component.extend({
   defaults: {
       template:

Mari Skula - 1 min read

Як видалити Currency Switcher в Magento 2?

Існують різні причини, через які ви хотіли б видалити спадаюче меню валют з вітрини магазину Magento 2.

Наприклад, ви можете видалити його, оскільки ви використовуєте Magento 2 Currency Switcher і не хочете дозволяти користувачам змінювати валюту вручну.

Щоб видалити перемикач валют, виконайте наступні дії:

1. Створіть новий файл у папці теми вашого магазину:

app/design/frontend/ThemeVendor/ThemeName/Magento_Theme/layout/default.xml

2. Додайте до неї цей код:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="currency" remove="true" />
        <referenceBlock name="store.settings.currency" remove="true" />
    </body>
</page>

Якщо у вас вже є файл Magento_Theme/layout/default.xml, відредагуйте його та додайте цей код перед закриваючим тегом </body>:

<referenceBlock name="currency" remove="true" />
<referenceBlock name="store.settings.currency"

Mari Skula - 1 min read

Як видалити Language Switcher в Magento 2?

Існують різні причини, через які ви хотіли б видалити спадаюче меню мов з вітрини магазину Magento 2.

Наприклад, ви можете видалити його, оскільки ви використовуєте Magento 2 Language Switcher і не хочете дозволяти користувачам змінювати мову вручну.

Це легко зробити. Будь ласка, виконайте ці прості кроки:

1. Створіть новий файл у папці теми вашого магазину:

app/design/frontend/ThemeVendor/ThemeName/Magento_Theme/layout/default.xml

2. Додайте до неї цей код:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="store_language" remove="true" />
    </body>
</page>

Якщо у вас вже є файл Magento_Theme/layout/default.xml, відредагуйте його та додайте наступний код перед закриваючим тегом </body>:

<referenceBlock name="store_language" remove="true" />

3. Очистіть кеш та виконайте CLI команду:

bin/magento c:f

Це все :-)

Mari Skula - 3 min read

Приклади запитів GraphQL в блозі Magento 2

Приклади деяких запитів GraphQL для блогу Magento 2 представлені в цій статті. За допомогою цих запитів ви зможете витягнути необхідні дані блогу для прогресивної веб-програми (PWA). Запити легко тестуються в ChromeiQL - розширенні браузера Chrome.

Зауважте, що додаток Magento 2 Блог GraphQL слід спочатку встановити.

Щоб перевірити повну схему Blog GraphQL, перегляньте файл schema.graphqls.

GraphQL запит публікації головної сторінки блогу

Запит:

query GetPosts ($currentPage: Int $pageSize: Int) {
    blogPosts (currentPage: $currentPage pageSize: $pageSize sort: ["DESC"]) {
        total_count
        items {
            post_id
            title
            short_filtered_content
            author {
                author_id
                name
                author_url
            }
            post_url
            creation_time
            tags {
                tag_id
                title
                tag_url
            }
            categories {
                category_id
                title
                category_url
            }
        }
        total_pages
    }
}

Змінні:

{
"currentPage": 1,
"pageSize": 5
}

Результат:

Як результат, ви отримаєте дані для перших 5 публікацій блогу, які мають відображатися на першій сторінці.

GraphQL запит публікацій категорії блогу

Mari Skula - 1 min read

Тестування GraphQL запитів

Щоб легко перевірити запити GraphQL, все, що вам потрібно зробити, це встановити розширення ChromeiQL для браузера Chrome, натиснувши кнопку Add to Chrome.

Додавши його, ви побачите значок розширення у правому верхньому куті вікна браузера. Натиснувши на нього, ви перейдете до нового вікна, де проводиться тестування.

Це приклад того, як ми перевіряємо GraphQL запит для модуля блогу Magento 2:

Set the Endpoint URL-адресу у відповідному полі.
У лівому полі задайте запит. Дозволяється також вказати параметри запиту, якщо потрібно, нижче розділу запитів.
Натисніть кнопку Run (>) і подивіться результат праворуч.

Ihor Vansach - 1 min read

Як програмно змінити розмір зображень блогу в Magento 2?

Щоб змінити розмір зображень в Magento 2 Блог ви можете використати наступний код у файлах шаблону:

 <?php
   $width = 100;
   $height = 150;
   $imageHelper = $this->helper(\Magefan\Blog\Helper\Image::class);
 ?>
<img
   src="<?php echo $imageHelper->init($_post->getFeaturedImg())->resize($width, $height); ?>"
   alt="<?php echo $block->escapeHtml($_post->getTitle(), null, true) ?>" />

Ihor Vansach - 2 min read

Додавання кастомного поля до публікації блогу Magento 2

Якщо вам потрібно розширити Magento 2 Блог від Magefan і додати нове кастомне текстове поле на сторінку редагування публікації блогу в адмін панелі Magento 2 (Content > Blog > Posts), ви повинні створити просте кастомне розширення Magento 2.

Ви можете завантажити зразок розширення з нашої сторінки GitHub або створити його вручну, виконавши наведені нижче дії.

1. Створіть файл composer.json

app/code/Magefan/BlogCustomField/composer.json

{
    "name": "magefan/module-blog-custom-field",
    "description": "Implements Blog functionality on Magento 2 store",
    "require": {
        "magefan/module-blog" : ">=2.8.0"
    },
    "type": "magento2-module",
    "version": "2.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [ "registration.php" ],
        "psr-4": {
            "Magefan\\BlogCustomField\\": ""
        }
    }
}