Использование Shopify API с WordPress

Установка переменных данных продукта

Первые несколько данных, которые мы отобразим для каждого продукта, достаточно просто получить из массива:

 // Set some variables for product data $current_product = $product_json['product']; $product_handle = $current_product['handle']; $product_title = $current_product['title']; 

Этот фрагмент устанавливает переменную для текущего продукта, а затем назначает дескриптор продукта и заголовок для набора переменных.

Далее мы получим источник изображения продукта. Это немного сложнее, потому что Shopify отправляет URL для исходного (полноразмерного) изображения, которое обычно намного больше того, что вы хотите отобразить. Мы можем избежать ненужной подачи гигантского изображения, изменив этот источник изображения в соответствии с соглашением об именах файлов Shopify, чтобы получить меньший размер изображения:

 // Get the product image and modify the file name to get the large size thumbnail $image_src_parts = pathinfo( $current_product['images'][0]['src'] ); $product_image_src = $image_src_parts['dirname'] . '/' . $image_src_parts['filename'] . '_large.' . $image_src_parts['extension']; 

В этом фрагменте мы использовали PHP pathinfo для разбивки источника изображения, а затем мы перестраиваем его и добавляем строку _large чтобы указать, какой размер миниатюры нужно вернуть. Это зависит от соглашений об именах файлов Shopify для размеров изображений , но они остаются неизменными с течением времени, поэтому я считаю, что это безопасный шаг.

Последний набор информации о каждом продукте, который мы будем отображать, — это его доступность и цена. Мы будем использовать инвентарь, чтобы определить, должен ли товар отображаться как распроданный, и мы получим информацию о вариантах и ​​ценах, чтобы определить, следует ли указывать одну цену или диапазон.

 // Get product variant information, including inventory and pricing $variants = $current_product['variants']; $variant_count = count( $variants ); $variant_price = 0; $variant_prices = array(); if ( $variant_count > 1 ) : for ( $v = 0; $v < $variant_count; $v++ ) { $variant_inventory += $variants[$v]['inventory_quantity']; $variant_prices[] = $variants[$v]['price']; } $price_min = min( $variant_prices ); $price_max = max( $variant_prices ); else : $variant_price = $variants[0]['price']; $variant_inventory = $variants[0]['inventory_quantity']; endif; ?> 

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

Если существует более одного варианта, мы перебираем варианты и суммируем общее количество запасов, а также создаем массив цен для всех вариантов. Из этого массива мы рассчитываем минимальную цену и максимальную цену, которую мы затем отобразим в виде диапазона под названием продукта.

Если есть только один вариант, мы получаем цену и запас для этого варианта.

Показать каждый продукт

Теперь, когда у нас есть все данные, мы будем отображать переменные, мы можем настроить отображение.

Полная разметка

 <div class="product-feed-item"> <a href="<?php echo $shop_url; ?>/products/<?php echo $product_handle; ?>"> <img src="<?php echo $product_image_src; ?>" alt="<?php echo $product_title; ?>"/> <h3><?php echo $product_title; ?></h3> <?php if ( $variant_inventory > 0 ) : ?> <?php if ( $variant_price > 0 ) : ?> <span class="price small"><?php if ( $variant_price > 0 ) : ?>$<?php echo $variant_price; ?><?php else : ?>FREE<?php endif; ?></span> <?php elseif ( ( $price_min > 0 ) && ( $price_max > 0 ) ) : ?> <span class="price small">$<?php echo $price_min; ?> - $<?php echo $price_max; ?></span> <?php endif; ?> <?php else : ?> <span class="sold-out">OUT OF STOCK</span> <?php endif; ?> </a> </div> 

Каждый продукт обернут в div с классом «product-feed-item» для стилизации, а затем имеет изображение с названием продукта в качестве тега ALT. URL-адрес продукта создается путем объединения URL-адреса магазина с дескриптором продукта.

Под изображением название продукта отображается в виде

элемент.

Инвентаризация и цена товара

Наконец, существуют некоторые условия, чтобы проверить, есть ли товар в наличии и имеет ли он диапазон цен:

 <?php if ( $variant_inventory > 0 ) : ?> <?php if ( $variant_price > 0 ) : ?> <span class="price small"><?php if ( $variant_price > 0 ) : ?>$<?php echo $variant_price; ?><?php else : ?>FREE<?php endif; ?></span> <?php elseif ( ( $price_min > 0 ) && ( $price_max > 0 ) ) : ?> <span class="price small">$<?php echo $price_min; ?> - $<?php echo $price_max; ?></span> <?php endif; ?> <?php else : ?> <span class="sold-out">OUT OF STOCK</span> <?php endif; ?> 

Если товарный запас больше нуля, отображается цена (с соответствующим диапазоном), но если он меньше нуля, вместо цены отображается слово «OUT OF STOCK».

Последние несколько строк в файле примера закрывают разметку продукта и цикл продукта.

Стилизация вывода

С подачей продукта на место остается только стилизация. Я включил несколько основных стилей в свою демонстрацию, чтобы придать сетке некоторую форму:

 .product-feed-item { display: inline-block; vertical-align: top; width: 31%; margin-right: 2%; text-align: center; } .product-feed-item img { max-width: 100%; height: auto; } 

Заворачивать

Существует множество потенциальных приложений для интеграции Shopify API с WordPress, помимо одной коллекции на странице. Созданные мной сайты включили в каждый пост блога рекомендуемые продукты и позволили вам добавить продукт в корзину Shopify из WordPress. Интеграция отдельной коллекции — это отличный первый шаг к ознакомлению с API и его работой в контексте WordPress, но небо — это предел!